ZEP Guidebook (EN)
Search
⌃K

Changing Avatar Image

  1. 1.
    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.
​