Changing Avatar Image

Prepare a sample sprite sheet with the animation. If you do not have one, please download the image below.

If you are using a sprite sheet you did not create, please be cautious of copyright law.

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.

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.

3. Load a sprite sheet by using the following App.loadSpritesheet API.

App.loadSpritesheet(fileName: string, frameWidth: integer, frameHeight: integer, anims: array, frameRate: integer): ScriptDynamicResource

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

Image index number order starts from 0 with the top-left image.

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

// 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();
})

6. Usage

// 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);

Imagine avatar changes not only applied upon entry but under other special conditions too. Think about them and then try creating them!

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.

PreviousDisplaying a Message NextUsing HTML

Last updated 2 years ago

// 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(); })

// 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);