# Methods

### Introduction

These functions provide convenient techniques such as UI display, moving or kicking users, and playing sound.

Methods can be divided into [<mark style="color:purple;">**UI**</mark>](#ui)<mark style="color:purple;">**,**</mark> [<mark style="color:purple;">**User Control**</mark>](#user-control)<mark style="color:purple;">**,**</mark> [<mark style="color:purple;">**Sound**</mark>](#sound)<mark style="color:purple;">**,**</mark> [<mark style="color:purple;">**Communication**</mark>](#communication)<mark style="color:purple;">**,**</mark> and [<mark style="color:purple;">**Common**</mark>](#common) depending on their purpose.

### UI

<table><thead><tr><th width="209">Name</th><th>Description</th></tr></thead><tbody><tr><td>loadSpritesheet</td><td>Function to read a sprite sheet picture file and make it an object</td></tr><tr><td>showCenterLabel</td><td>Function to display text for 3 seconds at the designated location for all players</td></tr><tr><td>showCustomLabel</td><td>Function to display text for 3 seconds at the designated location for all players<br>You can decorate text by inserting <code>span</code> tags in the text part.</td></tr><tr><td>showWidget</td><td>Function to load the HTML file as a widget at the align position specified for all players</td></tr><tr><td>showYoutubeWidget</td><td>Function to call the YouTube video corresponding to the link to the widget</td></tr></tbody></table>

### **User Control**

<table><thead><tr><th width="214">Name</th><th>Description</th></tr></thead><tbody><tr><td>spawnPlayer</td><td>Function to move players to the designated X and Y coordinates</td></tr><tr><td>kickPlayer</td><td>Function to kick players</td></tr><tr><td>forceDestroy</td><td>Function to shut down the mini-game app</td></tr><tr><td>clearChat</td><td>Function to delete all chat history</td></tr><tr><td>getPlayerByID</td><td>Function to return a player corresponding to an id</td></tr></tbody></table>

### Sound

<table><thead><tr><th width="216">Name</th><th>Description</th></tr></thead><tbody><tr><td>playSound</td><td>Function to play the sound file</td></tr><tr><td>playSoundLink</td><td>Function to play the sound URL</td></tr><tr><td>stopSound</td><td>Function to stop all the playing sound</td></tr><tr><td>changeAttackSound</td><td>Function to change the poke (Z key) sound effects</td></tr></tbody></table>

### Communication

<table><thead><tr><th width="225">Name</th><th>Description</th></tr></thead><tbody><tr><td>httpGet</td><td>Function to request for HTTP Get</td></tr><tr><td>httpPost</td><td>Function to request for HTTP Post</td></tr><tr><td>httpPostJson</td><td>Function to request for HTTP Post in JSON</td></tr></tbody></table>

### Common

<table><thead><tr><th width="158">Name</th><th>Description</th></tr></thead><tbody><tr><td>sendUpdated</td><td>Function to apply the updated app/player-related field values when changes are made</td></tr><tr><td>save</td><td>Function to apply the updated app/player storage values</td></tr></tbody></table>



## 📚 API Explanation and Example

### 🎨 **UI Methods**

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

```jsx
// Reads a sprite sheet picture file, making it an object
App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource

// Displays text for 1 second at the designated location for all players
App.showCenterLabel(text: string, color: uint = 0xFFFFFF, bgColor: uint = 0x000000, offset: int = 0)

// Displays text for 1 second at the designated location for all players, customizable
App.showCustomLabel(text: string, color: number = 0xFFFFFF, bgColor: number = 0x000000, offset: number = 0, width = 100, opacity = 0.6);

// Displays text in the chat window
App.sayToAll(text: string, color: uint = 0xFFFFFF)

// Loads the corresponding HTML file as a widget at the align position specified for all players
App.showWidget(fileName: string, align: string, width: integer, height: integer): ScriptWidget

// Plays the video from the YouTube link at the specified align position for all players
App.showYoutubeWidget(link: string, align: string, width: integer, height: integer): ScriptWidget
```



### loadSpritesheet

{% hint style="info" %}
App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource
{% endhint %}

This function reads a sprite sheet picture file and makes it an object.

To better understand ScriptDynamicResource, please refer to the [<mark style="color:purple;">Understanding Sprite Sheets</mark>](../../zep-script-guide/appendix/understanding-sprite-sheets) page.

**Parameters**

<table><thead><tr><th width="158.33333333333331">Name</th><th width="135">Type</th><th>Description</th></tr></thead><tbody><tr><td>fileName</td><td>String</td><td>Name of the file to be loaded</td></tr><tr><td>frameWidth <br>frameHeight</td><td>Integer</td><td>The frame’s width and height pixel size</td></tr><tr><td>anims</td><td>Array</td><td>Array of frame image numbers to be set as animation</td></tr><tr><td>frameRate</td><td>Integer</td><td>Rate of data displayed per frame<br>frameRate: 8 → displays 8 images per second</td></tr></tbody></table>

**Example**

Paintman - Apply a Blueman sprite image

{% file src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FzWAQxIoydEwiiLS9BIt8%2F%EC%98%88%EC%A0%9C_loadSpritesheet.zip?alt=media&token=4321bb7e-03bc-4e0b-b236-a6aa54fefefb" %}

```jsx
// One frame's size 48x64
let blueman = App.loadSpritesheet('blueman.png', 48, 64, {
    left: [5, 6, 7, 8, 9], // image moving left
    up: [15, 16, 17, 18, 19],
    down: [0, 1, 2, 3, 4],
    right: [10, 11, 12, 13, 14],
		dance: [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],
		down_jump: [38],
		left_jump: [39],
		right_jump: [40],
		up_jump: [41],
}, 8);
// Avatar image changes when the player enters
App.onJoinPlayer.Add(function(player){
	player.sprite = blueman;
	player.sendUpdated();
});
```



### showCenterLabel

{% hint style="info" %}
App.showCenterLabel(text: string, color: uint = 0xFFFFFF, bgColor: uint = 0x000000, offset: int = 0, time: number = 3000)
{% endhint %}

This function displays text for 3 seconds at the designated location for all players.

**Parameters**

<table><thead><tr><th width="126.33333333333331">Name</th><th width="111">Type</th><th>Description</th></tr></thead><tbody><tr><td>text</td><td>String</td><td>Text to display on the label</td></tr><tr><td>color</td><td>Unit</td><td>Color of text to be displayed (HexCode)<br>If left blank, it is set to white (0xFFFFFF).<br>➡️<a href="https://www.google.com/search?q=COLOR+PICKER&#x26;sxsrf=ALiCzsbc_6XvOn9SiJdEBkLmfLurJ4tvOA%3A1658153265956&#x26;ei=MWnVYrX3Ocv4wAOXk6-wBg&#x26;ved=0ahUKEwj105mjzoL5AhVLPHAKHZfJC2YQ4dUDCA4&#x26;uact=5&#x26;oq=COLOR+PICKER&#x26;gs_lcp=Cgdnd3Mtd2l6EAMyBAgjECcyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6CwgAEIAEELEDEIMBOhEILhCABBCxAxCDARDHARDRAzoRCC4QgAQQsQMQgwEQxwEQrwE6CAgAEIAEELEDOhAIABCABBCHAhCxAxCDARAUOgoIABCABBCHAhAUSgQIQRgASgQIRhgAUABYhRVgvxZoAHABeACAAYwBiAHmC5IBBDAuMTKYAQCgAQHAAQE&#x26;sclient=gws-wiz">Color Picker</a></td></tr><tr><td>bgColor</td><td>Unit</td><td>Background color of the label where a message is displayed<br>If left blank, it is set to black (0x000000).</td></tr><tr><td>offset</td><td>Integer</td><td>The larger the offset value, the closer the displayed position is toward the bottom of the screen.<br>If left blank, it is set to 0.</td></tr><tr><td>time</td><td>number</td><td>Label display time (ms), default 3000 ms (3 seconds)</td></tr></tbody></table>

**Example**

ssDisplay a message label with the yellow background.

<figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2F2fyXCufgiCrxk6b5LXML%2FUntitled.png?alt=media&#x26;token=6d4ef26d-793b-44a7-9293-6c82cd0e4434" alt=""><figcaption></figcaption></figure>

```jsx
App.onJoinPlayer.Add(function(player){
	App.showCenterLabel(`${player.name} has entered.`, 0x000000, 0xFFFF00, 200, 2000); // Display with the yellow background and black text
});
```



### showCustomLabel

{% hint style="info" %}
App.showCustomLabel(text: string, color: number = 0xFFFFFF, bgColor: number = 0x000000, offset: number = 0, width = 100, opacity = 0.6, time: number = 3000);
{% endhint %}

This function displays text for 1 second at the designated location for all players. You can decorate text by inserting <mark style="color:red;">`span`</mark> tags in the text part.

**Parameters**

<table><thead><tr><th width="150.33333333333331">Name</th><th width="118">Type</th><th>Description</th></tr></thead><tbody><tr><td>text</td><td>String</td><td>Text to display on the label (span tags allowed)</td></tr><tr><td>color</td><td>Unit</td><td>Color of text to be displayed (HexCode)<br>If left blank, it is set to white (0xFFFFFF).<br>➡️<a href="https://www.google.com/search?q=COLOR+PICKER&#x26;sxsrf=ALiCzsbc_6XvOn9SiJdEBkLmfLurJ4tvOA%3A1658153265956&#x26;ei=MWnVYrX3Ocv4wAOXk6-wBg&#x26;ved=0ahUKEwj105mjzoL5AhVLPHAKHZfJC2YQ4dUDCA4&#x26;uact=5&#x26;oq=COLOR+PICKER&#x26;gs_lcp=Cgdnd3Mtd2l6EAMyBAgjECcyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6CwgAEIAEELEDEIMBOhEILhCABBCxAxCDARDHARDRAzoRCC4QgAQQsQMQgwEQxwEQrwE6CAgAEIAEELEDOhAIABCABBCHAhCxAxCDARAUOgoIABCABBCHAhAUSgQIQRgASgQIRhgAUABYhRVgvxZoAHABeACAAYwBiAHmC5IBBDAuMTKYAQCgAQHAAQE&#x26;sclient=gws-wiz">Color Picker</a></td></tr><tr><td>bgColor</td><td>Unit</td><td>Background color of the label where a message is displayed<br>If left blank, it is set to black (0x000000).</td></tr><tr><td>offset</td><td>number</td><td>The larger the offset value, the closer the displayed position is toward the bottom of the screen.<br>If left blank, it is set to 0.</td></tr><tr><td>width</td><td>number</td><td>Value to set the label‘s width to n%. (default value: 100)</td></tr><tr><td>opacity</td><td>number</td><td>Value to set the transparency of the label’s background (default value: 0.6, range: 0-1)</td></tr><tr><td>time</td><td>number</td><td>Label display time (ms), default 3000 ms (3 seconds)</td></tr></tbody></table>

**Example**

Format the label based on the HTML tags.

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2Fn9rtEHYMGIjb9LmFgIYL%2FUntitled_(3).png?alt=media&#x26;token=5f7cd3b7-f190-4a9c-93ba-eb37f03dcdca" alt=""><figcaption></figcaption></figure></div>

```jsx
// Activates function when q is pressed
App.addOnKeyDown(88, function (player) {
  // Style of the box to put x in
	let style =
		"display: inline-block; text-align: center; width:1.2em; height:1.2em; line-height: 1.2em; color: black; background-color: white; font-size: 1.2em; border-radius:3px";
	App.showCustomLabel(
		`You can run the example by pressing the <span style="${style}">X</span> button.`,
		0xffffff, // white text
		0, // black background
		300, // offset 300
		20, // width 20%
		1 // transparency 1 -> opacity
	);
});
```



### sayToAll

{% hint style="info" %}
App.sayToAll(text: string, color: uint = 0xFFFFFF)
{% endhint %}

This function displays text in the chat window.

**Parameters**

<table><thead><tr><th width="132.33333333333331">Name</th><th width="103">Type</th><th>Description</th></tr></thead><tbody><tr><td>text</td><td>String</td><td>Text to display in the chat window</td></tr><tr><td>color</td><td>Unit</td><td>Color of text to be displayed (HexCode)<br>If left blank, it is set to white (0xFFFFFF).<br>➡️<a href="https://www.google.com/search?q=COLOR+PICKER&#x26;sxsrf=ALiCzsbc_6XvOn9SiJdEBkLmfLurJ4tvOA%3A1658153265956&#x26;ei=MWnVYrX3Ocv4wAOXk6-wBg&#x26;ved=0ahUKEwj105mjzoL5AhVLPHAKHZfJC2YQ4dUDCA4&#x26;uact=5&#x26;oq=COLOR+PICKER&#x26;gs_lcp=Cgdnd3Mtd2l6EAMyBAgjECcyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6CwgAEIAEELEDEIMBOhEILhCABBCxAxCDARDHARDRAzoRCC4QgAQQsQMQgwEQxwEQrwE6CAgAEIAEELEDOhAIABCABBCHAhCxAxCDARAUOgoIABCABBCHAhAUSgQIQRgASgQIRhgAUABYhRVgvxZoAHABeACAAYwBiAHmC5IBBDAuMTKYAQCgAQHAAQE&#x26;sclient=gws-wiz">Color Picker</a></td></tr></tbody></table>

**Example**

Display an entrance message in light blue.

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FyFrqfAbw8plDTObCn79Q%2FUntitled%201.png?alt=media&#x26;token=26fdc351-6d11-4362-adc4-1933c5905b87" alt=""><figcaption></figcaption></figure></div>

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.sayToAll(`${player.name} has entered.`, 0x00ffff); // Displays in light blue
});
```



### showWidget

{% hint style="info" %}
App.showWidget(fileName: string, align: string, width: integer, height: integer): ScriptWidget
{% endhint %}

This function loads the HTML file as a widget at the align position specified for all players.

**Parameters**

<table><thead><tr><th width="151.33333333333331">Name</th><th width="117">Type</th><th>Description</th></tr></thead><tbody><tr><td>fileName</td><td>String</td><td>Name of the file to be loaded</td></tr><tr><td>align</td><td>String</td><td>Where to display the widget<br>’popup’, ‘sidebar’, ‘top’, ‘topleft’, ‘topright’, ‘middle’, ‘middleleft’, ‘middleright’, ‘bottom’, ‘bottomleft’, ‘bottomright’</td></tr><tr><td>width<br>height</td><td>Integer</td><td>Width and height of the area to display the widget (px)</td></tr></tbody></table>

**Example**

Create a Hangul game widget.

{% file src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2F7w8k6T47cvo49e8NTUGK%2F%EC%98%88%EC%A0%9C_showWidget.zip?alt=media&token=3f55ca15-659c-44fc-8be7-462a69a369fe" %}

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FvVb4S8C2v0MyhFHiCYn4%2FUntitled%202.png?alt=media&#x26;token=43d33b90-fc48-4298-9d54-83202d82eb46" alt=""><figcaption></figcaption></figure></div>

```jsx
let _widget = null;
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	_widget = App.showWidget("widget.html", "top", 200, 300); // Displays the widget at the top of the screen in the 200x300 area
	_widget.sendMessage({
		timer: 15,
		answer: "ㅅㅍㅋ",
	});
});
```



### showYoutubeWidget

{% hint style="info" %}
App.showYoutubeWidget(link: string, align: string, width: integer, height: integer): ScriptWidget
{% endhint %}

This function calls the YouTube video corresponding to the link to the widget.

**Parameters**

<table><thead><tr><th width="114.33333333333331">Name</th><th width="105">Type</th><th>Description</th></tr></thead><tbody><tr><td>link</td><td>String</td><td>YouTube video’s url</td></tr><tr><td>align</td><td>String</td><td>Where to display the widget<br>’popup’, ‘sidebar’, ‘top’, ‘topleft’, ‘topright’, ‘middle’, ‘middleleft’, ‘middleright’, ‘bottom’, ‘bottomleft’, ‘bottomright’</td></tr><tr><td>width<br>height</td><td>Integer</td><td>Width and height of the area to display the widget (px)</td></tr></tbody></table>

**Example**

Display a YouTube widget.

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FEZ1Jqpc8QUdo1N6LUcXV%2FUntitled%203.png?alt=media&#x26;token=ce1d0455-fada-4625-ab47-c69251ac37ea" alt=""><figcaption></figcaption></figure></div>

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.showYoutubeWidget("https://www.youtube.com/watch?v=SXnMGIR8cjY","top",600,500);
});
```



## 🙍‍♂️**User Control Methods**

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

```jsx
// Moves the player corresponding to playerID to tileX, tileY coordinates
App.spawnPlayer(playerID: string, tileX: integer, tileY: integer)

// Kicks the player corresponding to playerID
// The kicked user will not be able to access the space for 24 hours.
App.kickPlayer(playerID: string)

// Shuts down the mini-game app
App.forceDestroy();

// Deletes all chat history.
App.clearChat();

//Retuns a player corresponding to the id
App.getPlayerID(playerID:string);
```



### spawnPlayer

{% hint style="info" %}
App.spawnPlayer(playerID: string, tileX: integer, tileY: integer)
{% endhint %}

This function moves the player corresponding to playerID to tileX and tileY coordinates.

**Parameters**

<table><thead><tr><th width="149.33333333333331">Name</th><th width="117">Type</th><th>Description</th></tr></thead><tbody><tr><td>playerID</td><td>String</td><td>The player’s ID value</td></tr><tr><td>tileX<br>tileY</td><td>Integer</td><td>The X and Y coordinates to move the player</td></tr></tbody></table>

**Example**

Move an entering player to the designated coordinates.

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.spawnPlayer(player.id, 5, 5); // Moves the player to 5, 5
});
```



### kickPlayer

{% hint style="info" %}
&#x20;App.kickPlayer(playerID: string)
{% endhint %}

This function kicks the player corresponding to playerID.

**Parameter**

<table><thead><tr><th width="141.33333333333331">Name</th><th width="132">Type</th><th>Description</th></tr></thead><tbody><tr><td>playerID</td><td>String</td><td>The player’s ID value</td></tr></tbody></table>

**Example**

Create a command for kicking.

⛔ The kicked user will not be able to access the Space for 24 hours. Please use this command carefully.

```jsx
// Executes when a player enters chat
// Command format '!nickname to kick'
App.onSay.Add(function (player, text) {
	let players = App.players;
	if (text.indexOf("!Kick") == 0) {
		let nickname = text.slice(4);
		for (let i in players) {
			let p = players[i];
			if (p.name == nickname) {
				App.kickPlayer(p.id);
				break;
			}
		}
	}
});
```

###

### forceDestroy

{% hint style="info" %}
App.forceDestroy();
{% endhint %}

This function shuts down the mini-game app.

**Example**

End the mini-game app by force.

```
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	App.forceDestroy();
});
```

###

### clearChat

{% hint style="info" %}
App.clearChat();
{% endhint %}

This function deletes all chat history.

**Example**

Press Q to delete the chat history.

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	App.clearChat();
});
```

###

### getPlayerByID

{% hint style="info" %}
App.getPlayerByID(playerID: string);
{% endhint %}

This function returns a player corresponding to the id.

**Example**

How to use App.getPlayerByID

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	const myPlayer = App.getPlayerByID(player.id);
});
```

## 🔉 **Sound Methods**

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

```jsx
// Plays the sound file to all players
App.playSound(fileName: string, loop: boolean = false)

// Plays the sound corresponding to the link to all players
App.playSoundLink(link: string, loop: boolean = false)

// Stops all playing sounds
App.stopSound()

// Changes the poke (Z key) sound effects
App.changeAttackSound(fileName:string)
```



### playSound

{% hint style="info" %}
App.playSound(fileName: string, loop: boolean = false)
{% endhint %}

This function plays the sound file to all players.

**Parameters**

<table><thead><tr><th width="139.33333333333331">Name</th><th width="139">Type</th><th>Description</th></tr></thead><tbody><tr><td>fileName</td><td>String</td><td>Name of the file to be loaded</td></tr><tr><td>loop</td><td>boolean</td><td>true: play on repeat<br>false: play once</td></tr></tbody></table>

**Example**

Apply entrance music when a player enters (file).

{% file src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2FCo0SQGvTywpzI2yNn5w4%2Fjoin.mp3?alt=media&token=05bdfbc0-29b6-4c6d-a75a-c34eef73ab02" %}

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.playSound("join.mp3",false);
});
```



### playSoundLink

{% hint style="info" %}
App.playSoundLink(link: string, loop: boolean = false)
{% endhint %}

This function plays the sound corresponding to the link to all players.

{% hint style="success" %}
When the link does not play even though it is correct:

You have probably violated the CORS policy. If you cannot follow the CORS policy, it is recommended to use playSound by uploading the music file instead of playSoundLink.
{% endhint %}

**Parameters**

<table><thead><tr><th width="157.33333333333331">Name</th><th width="147">Type</th><th>Description</th></tr></thead><tbody><tr><td>link</td><td>String</td><td>Sound url</td></tr><tr><td>loop</td><td>boolean</td><td>true: play on repeat<br>false: play once</td></tr></tbody></table>

**Example**

Apply the entrance music when a player enters (sound url).

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.playSoundLink("https://zep.us/assets/sounds/ring.mp3",false);
});
```



### stopSound

{% hint style="info" %}
App.stopSound();
{% endhint %}

This function stops all playing sounds.

**Parameter**

* None

**Example**

Create a function that stops sound upon pressing q.

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81,function(p){
	App.stopSound();
})
```



### changeAttackSound

{% hint style="info" %}
App.changeAttackSound(fileName:string)
{% endhint %}

This function changes the poke (Z key) sound effects.

**Parameter**

<table><thead><tr><th width="152.33333333333331">Name</th><th width="160">Type</th><th>Description</th></tr></thead><tbody><tr><td>fileName</td><td>String</td><td>Name of the sound file to use</td></tr></tbody></table>

**Example**

How to use changeAttackSound

```javascript
App.onStart.Add(function(){
	App.changeAttackSound("attack.mp3");
})j
```

## 📡 Communication **Methods**

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

```jsx
// Executes HTTP Get request to the URL
App.httpGet(url: string, headers: object, callback: ((string) => void))

// Executes HTTP Get posting to the URL
App.httpPost(url: string, headers: object, body: object, callback: ((string) => void))

// Executes HTTP Post to the URL
App.httpPostJson(url: string, headers: object, body: object, callback: ((string) => void))
```



### httpGet

{% hint style="info" %}
App.httpGet(url: string, headers: object, function(res: string){})
{% endhint %}

This function calls for HTTP Get request.

**Parameters**

<table><thead><tr><th width="144.33333333333331">Name</th><th width="128">Type</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>String</td><td>Address to send the request to</td></tr><tr><td>headers</td><td>Object</td><td>Request header</td></tr><tr><td>res</td><td>String</td><td>Response to the request</td></tr></tbody></table>

**Example**

Change the nickname of an entering player using [<mark style="color:purple;">Korean Nickname Generator</mark>](https://nickname.hwanmoo.kr/) API.

<div align="left"><figure><img src="https://3059601135-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkvEvcz_LX5eDyvl13E%2Fuploads%2Frxv5AHAK6ndvYja5zbbS%2FUntitled%204.png?alt=media&#x26;token=daa85a3c-6762-42a1-b272-cdf5fdb8cb86" alt=""><figcaption></figcaption></figure></div>

```jsx
// Executes when a player enters
App.onJoinPlayer.Add(function (player) {
	App.httpGet(
		"https://nickname.hwanmoo.kr/?format=json&count=1&max_length=6&whitespace=_",
		null,
		function (res) {
			// Change the response to a json object
			let response = JSON.parse(res);
			player.name = response.words[0];
			player.sendUpdated();
		}
	);
});
```



### httpPost

{% hint style="info" %}
App.httpPost(url: string, headers: object, body: object, function(res: string))
{% endhint %}

This function calls for HTTP Post request.

**Parameters**

<table><thead><tr><th width="122">Name</th><th width="130">Type</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>String</td><td>Address to send the request to</td></tr><tr><td>headers</td><td>Object</td><td>Request header</td></tr><tr><td>body</td><td>Object</td><td>Request body (form data)</td></tr><tr><td>res</td><td>String</td><td>Response to the request</td></tr></tbody></table>

**Example**

Receive the header and data sent by the app as a response and display in the chat window.

As shown in the example, key and value should be written in the form of a string, and the requesting server should receive form data and be able to process it.

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	App.httpPost(
		"https://postman-echo.com/post",
		{
			"test-header": "zep",
		},
		{
			"id": "ox2wd",
			"name": "zepscript",
			"number" : "5"
		},
		(res) => {
			// Changes the response to a json object
			let response = JSON.parse(res);
			App.sayToAll(`header sent: ${response.headers["test-header"]}`, 0xffffff);
			App.sayToAll(`data sent: ${response.form.id}`, 0xffffff);
			App.sayToAll(`data sent: ${response.form.name}`, 0xffffff);
			App.sayToAll(`data sent: ${response.form.number}`, 0xffffff);
		}
	);
});
```



### httpPostJson

{% hint style="info" %}
App.httpPostJson(url: string, headers: object, body: object, function(res: string))
{% endhint %}

This function calls for HTTP Post request in JSON.

**Parameters**

<table><thead><tr><th width="142.33333333333331">Name</th><th width="142">Type</th><th>Description</th></tr></thead><tbody><tr><td>url</td><td>String</td><td>Address to send the request to</td></tr><tr><td>headers</td><td>Object</td><td>Request header. If blank, enter <mark style="color:purple;background-color:yellow;"><strong>{ }</strong></mark>.</td></tr><tr><td>body</td><td>Object</td><td>Request body (JSON data)</td></tr><tr><td>res</td><td>String</td><td>Response to the request</td></tr></tbody></table>

**Example**

Receive the data sent by the app as a response and display in the chat window.

```jsx
// Activates function when q is pressed
App.addOnKeyDown(81, function (player) {
	App.httpPostJson(
		"https://postman-echo.com/post",
		{},
		{
			name: "zepscript",
		},
		(res) => {
			App.sayToAll(`${res}`, 0xffffff);
			// Changes the response to a json object
			let response = JSON.parse(res);
			App.sayToAll(`data sent: ${response.data.name}`, 0xffffff);
		}
	);
});
```



## 💠 **Common Methods**

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

```jsx
// Applies the changed values whenever App related field values are changed 
App.sendUpdated()

// Saves App storage value
App.save()
```

***

### sendUpdated

{% hint style="info" %}
App.sendUpdated()
{% endhint %}

This function applies the updated app-related field values when changes are made.

**Parameter**

* None



### save

{% hint style="info" %}
App.save()
{% endhint %}

This function applies the updated app storage values when changes are made.

**Parameter**

* None
