# 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="/pages/ZETIYCv77TyJudwuLwZ1"><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.

![](/files/Ji5OPgzNU7tr2UX1CUzK)

```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.

![](/files/ujxQ8LebbrvAXsGIiv0l)

```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.

![](/files/1T9uYm0nBNEzyFwZCKWT)![](/files/eVikmpyojWQAhZkQEf9O)

```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>](/zep-script/zep-script-guide/appendix/javascript-keycode-list.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.zep.us/zep-script/zep-script-api/scriptapp/callbacks.md?ask=<question>
```

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.