# Callbacks

### Introduction

These functions set conditions, such as when players press a key designated by the script developer or arrive at a specific point, and operate when the condition is satisfied.

<table><thead><tr><th width="232">Name</th><th>Description</th></tr></thead><tbody><tr><td>runLater</td><td>Function operates after specified time (in seconds)</td></tr><tr><td>addOnTileTouched</td><td>Function operates when a player gets to the specified X and Y coordinates</td></tr><tr><td>addOnLocationTouched</td><td>Function operates when a player gets to the specified ‘designated area’</td></tr><tr><td>addOnKeyDown</td><td>Function operates when a player presses the specified key</td></tr><tr><td>setTimeout</td><td>Function operates at a specified time interval (ms)</td></tr><tr><td>setInterval</td><td>Function operates after the specified amount of time (ms)</td></tr><tr><td>addMobileButton</td><td>Function operates after pressing a custom button in the mobile environment</td></tr><tr><td>putMobilePunch</td><td>Function to add a punch button in the mobile environment</td></tr><tr><td>putMobilePunchWithIcon</td><td>Function to add a punch button using a loaded image</td></tr></tbody></table>

## 📚 Description and Example

<mark style="background-color:yellow;">**Callbacks at a Glance**</mark>

```jsx
// Executes a callback function after time (in seconds)
App.runLater(callback, time: number)

// Executes a callback function when a player touches a tile at that location
App.addOnTileTouched(x: integer, y: integer, callback)

// Executes when a player comes in contact with a specific area
App.addOnLocationTouched(name: string, callback)

// Executes when a player presses a certain key
App.addOnKeyDown(keycode : number, callback);

// Executes a callback at a specified time interval (ms)
setTimeout(callback, time: number)

// Executes a callback after time (ms)
setInterval(callback, time: number)

// Executes a function after pressing a custom button in the mobile environment
App.addMobileButton(anchor: number, posX: number, posY: number, function(player){} )

// Adds or deletes a punch button in the mobile environment
App.putMobilePunch(enable: boolean = true)

// Adds a punch button using a image loaded
App.putMobilePunchWithIcon(icon: ScriptDynamicResource)
```

### runLater

{% hint style="info" %}
App.runLater(function(){}, time: number);
{% endhint %}

This executes a callback function after a period of time (in seconds).

**Parameter**

<table><thead><tr><th width="130.33333333333331">Name</th><th width="125">Type</th><th>Description</th></tr></thead><tbody><tr><td>time</td><td>Number</td><td>Calls the function after a set amount of time (in seconds).</td></tr></tbody></table>

**Example**

Display a message five seconds after an app starts.

```jsx
App.onStart.Add(function () {
	App.runLater(function() {
		App.showCenterLabel("message");
	}, 5);
});
```

### addOnTileTouched

{% hint style="info" %}
App.addOnTileTouched(x: integer, y: integer, function(player){})
{% endhint %}

This executes a callback function when a player gets to the designated X and Y coordinates.

**Parameter**

<table><thead><tr><th width="137.33333333333331">Name</th><th width="117">Type</th><th>Description</th></tr></thead><tbody><tr><td>x, y</td><td>Integer</td><td>The designated X and Y coordinates</td></tr></tbody></table>

**Example**

Display a message when a player gets to the designated coordinates.

```jsx
// Calls the function when the player arrives at coordinates 5, 5
App.addOnTileTouched(5, 5, function (player) {
	App.showCenterLabel(`${player.name} arrived at (5, 5)!`);
});
```

### addOnLocationTouched

{% hint style="info" %}
addOnLocationTouched(name: string, function(player){})
{% endhint %}

This executes a callback function when a player gets to the designated area specified by the Map Editor.

**Parameters**

<table><thead><tr><th width="148.33333333333331">Name</th><th width="114">Type</th><th>Description</th></tr></thead><tbody><tr><td>name</td><td>String</td><td>The name of the designated area specified by the Map Editor</td></tr><tr><td>player</td><td>Player</td><td>The player who gets to the designated area<br>The parameter name can be changed arbitrarily</td></tr></tbody></table>

**Example**

Display a message when a player gets to the designated area.

```jsx
// Executes when a player gets to the area named "myLocation"
App.addOnLocationTouched("myLocation", function(player){
	App.showCenterLabel(`${player.name} has arrived at myLocation.`)
});
```

### addOnKeyDown

{% hint style="info" %}
App.addOnKeyDown(keycode : number, function(player){});
{% endhint %}

This executes a callback when a player presses the specified key.

**Parameters**

<table><thead><tr><th width="144.33333333333331">Name</th><th width="129">Type</th><th>Description</th></tr></thead><tbody><tr><td>keycode</td><td>Number</td><td>The number for a key<br><a href="../../zep-script-guide/appendix/javascript-keycode-list"><mark style="color:purple;">JavaScript Keycode List</mark></a></td></tr><tr><td>player</td><td>Player</td><td>The player who presses the specific key<br>The player’s parameter names can be changed arbitrarily</td></tr></tbody></table>

**Example**

Display a message when a player presses “a” (a’s keycode: 65).

```jsx
// Executes when a player presses "a"
App.addOnKeyDown(65, function(player){
	App.sayToAll(`${player.name} has pressed "a".`)
});
```

***

### setTimeout

{% hint style="info" %}
setTimeout(function(){}, time: number);
{% endhint %}

This executes a callback after time (ms).

**Parameter**

<table><thead><tr><th width="123.33333333333331">Name</th><th width="140">Type</th><th>Description</th></tr></thead><tbody><tr><td>time</td><td>Number</td><td>Waiting time (ms) before executing a  callback function </td></tr></tbody></table>

**Example**

Display a message 5 seconds after an app is executed.

```jsx
App.onStart.Add(function () {
	setTimeout(function () {
		App.sayToAll("Display message after 5 seconds");
	}, 5000);
});
```

####

### setInterval

{% hint style="info" %}
setInterval(function(){}, time: number);
{% endhint %}

This executes a callback at a specified time interval (ms).

**Parameter**

<table><thead><tr><th width="133.33333333333331">Name</th><th width="141">Type</th><th>Description</th></tr></thead><tbody><tr><td>time</td><td>Number</td><td>Callback execution cycle (ms)</td></tr></tbody></table>

**Example**

Display a message every one second after an app is executed.

```jsx
let time = 0;
App.onStart.Add(function () {
	setInterval(function () {
		App.sayToAll(`${++time} passed after app execution`);
	}, 1000);
});
```

####

### addMobileButton

{% hint style="info" %}
App.addMobileButton( anchor: number, posX: number, posY: number, function(player){} )
{% endhint %}

This executes by pressing a custom button added in the mobile environment.

**Parameters**

<table><thead><tr><th width="125.33333333333331">Name</th><th width="132">Type</th><th>Description</th></tr></thead><tbody><tr><td>anchor</td><td>Number</td><td>Use numbers for the locations of each mobile button<br>TOP = 0,<br>TOP_LEFT = 1,<br>TOP_RIGHT = 2,<br>MIDDLE = 3,<br>MIDDLE_LEFT = 4,<br>MIDDLE_RIGHT = 5,<br>BOTTOM = 6,<br>BOTTOM_LEFT = 7,<br>BOTTOM_RIGHT = 8</td></tr><tr><td>posX</td><td>Number</td><td>X direction offset</td></tr><tr><td>posY</td><td>Number</td><td>Y direction offset</td></tr><tr><td>player</td><td>Player</td><td>The player who presses the mobile button</td></tr></tbody></table>

**Example**

Add a mobile button.

![](https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2F9Ie2JFWWDek45lXN0HSc%2Fimage.png?alt=media\&token=86e33319-8698-4822-a90b-08fefb67856b)

```jsx
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 Bottom`);
	});
	// Top_Left
	App.addMobileButton(1, 50, 400, function (player) {
		App.sayToAll(`${player.name}, TOP_LEFT Bottom`);
	});
	// Top_right
	App.addMobileButton(2, 50, 400, function (player) {
		App.sayToAll(`${player.name}, TOP_RIGHT Bottom`);
	});
	// Middle
	App.addMobileButton(3, 0, 100, function (player) {
		App.sayToAll(`${player.name}, MIDDLE Bottom`);
	});
	// Middle_left
	App.addMobileButton(4, 50, 100, function (player) {
		App.sayToAll(`${player.name}, MIDDLE LEFT Bottom`);
	});
	// Middle_right
	App.addMobileButton(5, 50, 100, function (player) {
		App.sayToAll(`${player.name}, MIDDLE RIGHT Bottom`);
	});
});
```

###

### putMobilePunch

{% hint style="info" %}
App.putMobilePunch(enable: boolean = true)
{% endhint %}

This adds a punch button in the mobile environment when "enable" is "true."

**Parameter**

<table><thead><tr><th width="144.33333333333331">Name</th><th width="129">Type</th><th>Description</th></tr></thead><tbody><tr><td>enable</td><td>Boolean</td><td>Whether the mobile punch button is enabled ("true" is default)</td></tr></tbody></table>

**Example**

Add or delete the mobile punch button by pressing q.

![](https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FkpkVHHw3WFshHPVo0pwg%2Fimage.png?alt=media\&token=7d10248f-a501-467f-99c7-65432b7545bb)

```jsx
let punchButton = false;
// Activates function when q is pressed
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 %}

This function adds a punch button using a image loaded.

**Parameter**

<table><thead><tr><th width="94.33333333333331">Name</th><th width="216">Type</th><th>Description</th></tr></thead><tbody><tr><td>icon</td><td>ScriptDynamicResource</td><td>Image resources loaded using App.loadSpriteSheet</td></tr></tbody></table>

**Example**

Add a punch button using a loaded image in the mobile environment by pressing q.

![](https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FoYsfEeqUF7ja6Jld3q6X%2Fimage.png?alt=media\&token=7c0c579a-7aaf-4e36-9899-c8b8a704192c)![](https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FKSc2AMToPlUHPcwtHA5f%2Fimage.png?alt=media\&token=793baec4-382e-4d44-8e52-96b396d6d8ce)

```javascript
const punchIcon = App.loadSpritesheet("punchIcon.png")
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	App.putMobilePunchWithIcon(punchIcon);
});
```

### Appendix

[<mark style="color:purple;">JavaScript Keycode List</mark>](https://docs.zep.us/zep-script/zep-script-guide/appendix/javascript-keycode-list)