# Changing Avatar Image
1. Prepare a sample sprite sheet with the animation. If you do not have one, please download the image below.
{% hint style="danger" %}
If you are using a sprite sheet you did not create, please be cautious of copyright law.
{% endhint %}
2\. As seen in the image above, single frames of the same size are aligned in each frame into a sprite sheet image. The file extension must be a PNG file.
* TIP : For avatars, we recommend the following frame size of 48(px) x 64(px) for each action frame.
{% hint style="success" %}
A **sprite sheet** is a bitmap image file that has several small graphic frames aligned. It is used when developing a game to create a 2D animation by compiling frames of a continuous pose of a character or avatar into one image file.
{% endhint %}
3\. Load a sprite sheet by using the following `App.loadSpritesheet` API.
{% code overflow="wrap" %}
```jsx
App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource
```
{% endcode %}
* First Argument(fileName): Adds the file extension in the name of the sprite sheet
* Second Argument(frameWidth): Width of one action frame size (px)
* Third Argument(frameHeight): Height of one action frame size (px)
* Fourth Argument(anims): Animation name determined in ZEP (left, right, up, down) and numbers of each image index
{% hint style="success" %}
Image index number order starts from 0 with the top-left image.
{% endhint %}
* Fifth Argument(frameRate): Determine how many frames will repeat within 1 second.
4\. `player.sendUpdated()` needs to be written to apply the player’s attribute change
5\. Example Code
{% code overflow="wrap" %}
```jsx
// Creates a variable named blueman in JavaScript grammar
let blueman = null;
// Reads and saves the variable's sprite sheet
blueman = App.loadSpritesheet('blueman.png', 48, 64, {
left: [5, 6, 7, 8, 9], // left is an animation name that is already walking in the predetermined left direction
up: [15, 16, 17, 18, 19], // Index numbers in the file to be used for each name
down: [0, 1, 2, 3, 4],
right: [10, 11, 12, 13, 14],
}, 8); // 8 frames per second.
// Switches the player's avatar to the blueman image when player enters
App.onJoinPlayer.Add(function(player){
player.sprite = blueman;
// Applies the player attribute changes when executed
player.sendUpdated();
})
```
{% endcode %}
6\. Usage
```jsx
// Saves at the same time the variable is called
let blueman = App.loadSpritesheet('blueman.png', 48, 64, {
left: [5, 6, 7, 8, 9],
up: [15, 16, 17, 18, 19],
down: [0, 1, 2, 3, 4],
right: [10, 11, 12, 13, 14],
}, 8);
```
{% hint style="success" %}
Imagine avatar changes not only applied upon entry but under other special conditions too. Think about them and then try creating them!
{% endhint %}
{% hint style="warning" %}
Please Note
* For the tutorial, we recommend setting the app type to Mini-Game.
* The JSON file name must be “main”. Please create a new text file and name it main.js.
* If you do not know how to deploy an app, please refer to the [**ZEP Script Deployment Guide**](https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/zep-script-deployment-guide).
{% endhint %}
