Changing Avatar Image

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

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.

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

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

Last updated

Was this helpful?