# 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**](/zep-script/zep-script-guide/zep-script-development-guide/zep-script-deployment-guide.md).
{% endhint %}
---
# 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-guide/explore-zep-script/tutorials/changing-avatar-image.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.