search

🖼️나만의 UI 만들기

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

  2. App.showWidget() 함수를 통해, HTML 파일을 특정 위치에 불러올 수 있습니다. 이 때 인자로 파일명, 정렬, 위젯의 가로와 세로 크기를 정해줍니다. 정렬에 들어가는 값은 ScriptApparrow-up-right에서 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>
circle-exclamation

참고

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

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

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

외부 API 통신하기

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

Last updated

Was this helpful?