# Callbacks ### 소개 스크립트 개발자가 지정한 키를 플레이어가 눌렀을 때 또는 스크립트 개발자가 지정한 지점에 도착했을 때 등, 조건을 설정하여 플레이어가 조건을 달성했을 경우 동작하는 함수들 입니다.

이름	설명
runLater	지정한 시간(초) 후 동작하는 함수 입니다.
addOnTileTouched	지정한 x, y 좌표에 플레이어가 도착했을 때 실행되는 함수입니다.
addOnLocationTouched	지정한 ‘지정영역’에 플레이어가 도착했을 때 실행되는 함수입니다.
addOnKeyDown	플레이어가 지정된 키를 눌렀을 때 실행되는 함수 입니다.
setTimeout	지정한 시간(ms) 후 함수를 실행합니다.
setInterval	지정한 시간(ms) 간격으로 함수를 실행합니다.
addMobileButton	모바일 환경에서 커스텀 모바일 버튼을 추가하고, 버튼을 눌렀을 때 동작하는 함수를 지정합니다.
putMobilePunch	모바일 환경에서 펀치 버튼을 추가합니다.
putMobilePunchWithIcon	로드한 이미지로 펀치 버튼을 만들어 추가합니다.

## 📚 API 설명 및 예제 **Callbacks 함수 한 눈에 보기** ```javascript // time(초) 후에 callback 함수를 실행 App.runLater(callback, time: number) // 플레이어가 해당 위치의 타일과 부딪혔을 때 실행 App.addOnTileTouched(x: number, y: number, callback) // 플레이어가 지정한 위치와 부딪혔을 때 실행 App.addOnLocationTouched(name: string, callback) // 플레이어가 지정된 키를 눌렀을 때 실행 App.addOnKeyDown(keycode : number, callback); // time(ms) 후에 callback 함수를 실행 setTimeout(callback, time: number) // time(ms) 후 함수를 실행 setInterval(callback, time: number) // 모바일 환경에서 커스텀 모바일 버튼을 추가하고, 버튼을 눌렀을 때 동작하는 함수를 지정 App.addMobileButton(anchor: number, posX: number, posY: number, function(player){} ) // 모바일 환경에서 펀치 버튼 추가/제거합니다. App.putMobilePunch(enable: boolean = true) // 로드한 이미지로 펀치 버튼을 만들어 추가합니다. App.putMobilePunchWithIcon(icon: ScriptDynamicResource) ``` #### ### runLater {% hint style="info" %} App.runLater(function(){}, time: number); {% endhint %} time(초) 후에 callback 함수를 실행합니다. **파라미터**

이름	타입	설명
time	Number	몇 초 후에 실행 될 지를 정하는 시간 (초)

**예제** 앱이 시작되고 5초 후 메시지 출력해보기 ```jsx App.onStart.Add(function () { App.runLater(function() { App.showCenterLabel("메시지"); }, 5); }); ``` #### ### addOnTileTouched {% hint style="info" %} App.addOnTileTouched(x: number, y: number, function(player){}) {% endhint %} 지정한 x, y좌표에 플레이어가 도착할 경우 callback 함수를 실행합니다. **파라미터**

이름	타입	설명
x, y	number	지정 할 x, y 좌표

**예제** 플레이어가 지정 좌표에 도착 했을 때 메시지 출력해보기 ```jsx // 플레이어가 5, 5 좌표에 도착한 경우 App.addOnTileTouched(5, 5, function (player) { App.showCenterLabel(`${player.name}님이 (5, 5) 좌표에 도착!`); }); ``` #### ### addOnLocationTouched {% hint style="info" %} addOnLocationTouched(name: string, function(player){}) {% endhint %} 플레이어가 맵에디터에서 지정한 ‘지정영역’에 도착했을 때 callback 함수를 실행합니다. **파라미터**

이름	타입	설명
name	String	맵 에디터에서 지정한 ‘지정 영역’의 이름
player	Player	지정 영역에 도착한 플레이어를 가르킴 파라미터의 이름은 임의로 지정 가능

**예제** 플레이어가 지정 영역에 도착했을 때 메시지 출력해보기 ```jsx // 플레이어가 이름이 "myLocation"인 영역에 도착했을 때 실행 App.addOnLocationTouched("myLocation", function(player){ App.showCenterLabel(`${player.name}님이 myLocation에 도착했습니다.`) }); ``` #### ### addOnKeyDown {% hint style="info" %} App.addOnKeyDown(keycode : number, function(player){}); {% endhint %} 플레이어가 지정된 키를 눌렀을 때 callback 함수를 실행합니다. **파라미터**

이름	타입	설명
keycode	Number	키에 해당하는 숫자 자바스크립트 키코드 표
player	Player	해당 키를 누른 플레이어를 가르킴 player 파라미터 이름은 임의로 변경 가능

**예제** a를 눌렀을 때 메시지 출력해보기 ( a의 키코드: 65 ) ```jsx // 플레이어가 a를 눌렀을 때 실행 App.addOnKeyDown(65, function(player){ App.sayToAll(`${player.name}님이 a키를 눌렀습니다.`) }); ``` #### ### setTimeout {% hint style="info" %} setTimeout(function(){}, time: number); {% endhint %} time(ms) 후에 callback 함수를 실행합니다. **파라미터**

이름	타입	설명
time	Number	callback 함수 실행 전 대기 시간 (ms)

**예제** 앱이 시작되고 5초 후 메시지 출력해보기 ```jsx App.onStart.Add(function () { setTimeout(function () { App.sayToAll("5초후 메시지 출력"); }, 5000); }); ``` #### ### setInterval {% hint style="info" %} setInterval(function(){}, time: number); {% endhint %} time(ms) 간격으로 callback 함수를 실행합니다. **파라미터**

이름	타입	설명
time	Number	callback 함수 실행 주기 (ms)

**예제** 앱이 시작되고 1초 간격으로 메시지 출력해보기 ```jsx let time = 0; App.onStart.Add(function () { setInterval(function () { App.sayToAll(`앱 실행 ${++time}초 경과`); }, 1000); }); ``` #### ### addMobileButton {% hint style="info" %} App.addMobileButton( anchor: number, posX: number, posY: number, function(player){} ) {% endhint %} 모바일 환경에서 커스텀 모바일 버튼을 추가하고, 버튼을 눌렀을 때 동작하는 함수를 지정합니다. > 모바일버튼의을이미지를 원하는 이미지로 변경 할 수 있습니다. > > [모바일버튼 이미지 변경하기](/creator/reference/mobilebutton-image.md) **파라미터**

이름	타입	설명
anchor	Number	모바일 버튼의 위치를 숫자로 입력합니다. TOP = 0, TOP_LEFT = 1, TOP_RIGHT = 2, MIDDLE = 3, MIDDLE_LEFT = 4, MIDDLE_RIGHT = 5, BOTTOM = 6, BOTTOM_LEFT = 7, BOTTOM_RIGHT = 8
posX	Number	모바일 버튼 x 방향 오프셋 수치
posY	Number	모바일 버튼 y 방향 오프셋 수치
player	Player	모바일 버튼을 누른 플레이어를 가르킴

**예제** 모바일 버튼 추가해보기

App.onStart.Add(function () {
	// Bottom_Right
	App.addMobileButton(8, 145, 75, function (player) {
		App.sayToAll(`${player.name}, Bottom 버튼A`);
	});
	// Bottom_Right
	App.addMobileButton(8, 145, -20, function (player) {
		App.sayToAll(`${player.name}, Bottom 버튼B`);
	});
	// Top
	App.addMobileButton(0, 0, 400, function (player) {
		App.sayToAll(`${player.name}, TOP 버튼`);
	});
	// Top_Left
	App.addMobileButton(1, 50, 400, function (player) {
		App.sayToAll(`${player.name}, TOP_LEFT 버튼`);
	});
	// Top_right
	App.addMobileButton(2, 50, 400, function (player) {
		App.sayToAll(`${player.name}, TOP_RIGHT 버튼`);
	});
	// Middle
	App.addMobileButton(3, 0, 100, function (player) {
		App.sayToAll(`${player.name}, MIDDLE 버튼`);
	});
	// Middle_left
	App.addMobileButton(4, 50, 100, function (player) {
		App.sayToAll(`${player.name}, MIDDLE LEFT 버튼`);
	});
	// Middle_right
	App.addMobileButton(5, 50, 100, function (player) {
		App.sayToAll(`${player.name}, MIDDLE RIGHT 버튼`);
	});
});

### ### putMobilePunch {% hint style="info" %} App.putMobilePunch(enable: boolean = true) {% endhint %} enable이 true이면 모바일 환경에서 펀치 버튼이 추가됩니다. **파라미터**

이름	타입	설명
enable	Boolean	모바일 펀치 버튼 활성화 여부 ( 기본 값 true )

**예제** Q 버튼을 눌러 모바일 환경에 펀치 버튼을 추가/제거 해보기

```jsx let punchButton = false; // Q 버튼을 누르면 동작하는 함수 App.addOnKeyDown(81, function (player) { if (!punchButton) { punchButton = true; App.putMobilePunch(); } else { punchButton = false; App.putMobilePunch(false); } }); ``` *** ### putMobilePunchWithIcon {% hint style="info" %} App.putMobilePunchWithIcon(icon: ScriptDynamicResource) {% endhint %} 로드한 이미지로 펀치 버튼을 만들어 추가합니다. **파라미터**

이름	타입	설명
icon	ScriptDynamicResource	App.loadSpriteSheet 함수로 로드한 이미지 리소스

**예제** Q 버튼을 눌러 모바일 환경에 로드한 이미지로 펀치 버튼 추가하기

```jsx const punchIcon = App.loadSpritesheet("punchIcon.png") // Q 버튼을 누르면 동작하는 함수 App.addOnKeyDown(81, function (player) { App.putMobilePunchWithIcon(punchIcon); }); ``` *** ### 부록 [자바스크립트 키코드 표](/creator/reference/keycode.md) --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs-kr.zep.us/zep-script-api/zepscriptapi/scriptapp/callbacks.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.