ZEP Guidebook (KR)
  • 👋Hello ZEP Script
  • ZEP Script 가이드
    • ZEP Script 개발 가이드
      • 쉬운 개발 가이드
      • Javascript 개발 가이드
      • Typescript 개발 가이드
      • ZEP Script 배포 가이드
    • ZEP Script 따라하기
      • 기초 예제 코드
        • ✉️메시지 출력해보기
        • ♻️ZEP APP lifecycle 이해하기
        • 👤캐릭터 이미지 바꾸기
        • 🖼️나만의 UI 만들기
        • 💢2초 스턴 효과 만들어보기
      • ZEP Script 예제 코드
        • ⏰타이머
        • ⏱️방탈출 타이머
        • 🤛사이드바 앱
        • 🧟‍♂️좀비 게임
        • 🎨페인트맨 게임
        • 🙆‍♀️초성 퀴즈
        • 💩똥피하기 게임
        • 🥊결투 게임
        • 🏃‍♂️달리기
      • Custom Label 예제 코드
        • Type-A
        • Type-B
        • Type-C
        • Type-D
        • Type-E
        • Type-F
        • Type-G
        • Type-H
        • Type-I
        • Type-J
      • 사이드 바 앱 예제 코드
        • 🔹Image List
        • 🔹Text List
        • 🔹Text Button List
        • 🔹Ranking List
        • 🔹Select List
    • ZEP Script FAQ
    • 부록
      • 🎡ZEP 스크립트 활용 사례
      • 🗺️스페이스와 맵 이해하기
      • ⌨️자바스크립트 키코드 표
      • 🎨스프라이트시트 이해하기
      • 🌀TileEffectType 상세 설명
      • 📌기준 좌표
      • 🛰️외부 API 통신하기
      • 🔰URL 쿼리스트링 활용하기
      • 🪧위젯에서 사용가능한 문법
      • 🔘모바일버튼 이미지 변경하기
      • ✳️ZEP 스크립트 상호작용 오브젝트 가이드
      • 📇오브젝트 npcProperty
  • ZEP SCRIPT API
    • 📘ZEP Script API
      • API Summary
      • ScriptApp
        • Lifecycle
        • Field
        • Storage
        • Event Listeners
        • Callbacks
        • Methods
      • ScriptMap
        • Field
        • Methods
      • ScriptPlayer
        • Field
        • Methods
      • ScriptWidget
        • Field
        • Event Listeners
        • Methods
      • UtilityClass
        • Time
Powered by GitBook
On this page

Was this helpful?

  1. ZEP Script 가이드
  2. ZEP Script 따라하기
  3. 기초 예제 코드

나만의 UI 만들기

Previous캐릭터 이미지 바꾸기Next2초 스턴 효과 만들어보기

Last updated 1 year ago

Was this helpful?

  1. ZEP 캔버스 위에 내가 원하는 형태의 UI를 그릴 수 있습니다. ZEP에서는 HTML 을 통해 UI를 표현할 수 있습니다.

  2. App.showWidget() 함수를 통해, HTML 파일을 특정 위치에 불러올 수 있습니다. 이 때 인자로 파일명, 정렬, 위젯의 가로와 세로 크기를 정해줍니다. 정렬에 들어가는 값은 에서 Methods를 참고해주세요.

  3. 생성한 변수에 sendMessage() 메소드를 통해, 원하는 값을 HTML 파일에 전달할 수 있습니다.

  4. main.js에서 전달 받은 값을 사용하려면, HTML 문법에 맞게 작성한 다음 addEventListener를 통해 message 타입을 아래 예시와 같이 값을 받아올 수 있습니다.

  • main.js

//UI가 노출될 위치(정렬, 가로, 세로) 값을 변수로 사전에 제작
let postion = 'middle';
let width = 400;
let height = 400;

// my.html로 state라는 태그를 만들어 hello라는 값을 전달
let _widget = App.showWidget('my.html', position, width, height);
_widget.sendMessage({
	state: "hello",
}); 
  • my.html

<html>
<div id="test">-</div>
<script type="text/javascript">
		**window**.**addEventListener**('message', function(e) {
			// state라는 태그 밸류를 보냈으니 아래 형태로 받는다
			var state = e.data.state; 
			// 위의 id test 라는 곳의 텍스트로 적용한다
			document.getElementById("test").innerText = state;
		})
</script>
</html>

참고

- 튜토리얼의 App type은 installable App을 권장합니다.

- .js파일의 파일이름은 반드시 main 이어야 합니다. main.js 파일을 준비합니다.


- 배포 방법을 아직 모르신다면,를 참고해주세요.

🖼️
ScriptApp
ZEP Script 배포 가이드
외부 API 통신하기