Understanding Sprite Sheets

App.loadSpritesheet

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

frameWidth & frameHeight

Each Blueman sprite has an image size of 48 px*64 px.

If 48 and 64 are specified for frameWidth and frameHeight respectively, each image will be numbered from 0 to 41.

anims

anims refers to an array to assign animations to.

The form is different if the sprite is being used for an avatar compared to when the sprite is being used for an object.

Example 1) Dancing Blueman Object

The dancing Blueman object animation corresponds to images 21 to 38 as shown in the code below.

You can use image numbers by specifying them as an array.

let blueman_dance = App.loadSpritesheet(
	"blueman.png",
	48,
	64,
	[20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37], // Images from 21 to 38 form animation
	8
);

Example 2) Using Blueman as an Avatar Image

Unlike objects, avatars can trigger various animations based on which keys the player presses. In this case, you can input { } brackets in the anims parameter and specify an image array for the animation name as follows. There are a total of 9 types of animations that can be assigned to a character as seen below, and they can be omitted if the sprite sheet doesn’t contain frames for a specific animation.

let blueman = App.loadSpritesheet('blueman.png', 48, 64, {
    left: [5, 6, 7, 8, 9], // images that moves left
    up: [15, 16, 17, 18, 19],
    down: [0, 1, 2, 3, 4],
    right: [10, 11, 12, 13, 14],
		dance: [20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37],
		down_jump: [38],
		left_jump: [39],
		right_jump: [40],
		up_jump: [41],
}, 8);
// Player avatar changes when the player enters
App.onJoinPlayer.Add(function(player){
	player.sprite = blueman;
	player.sendUpdated();
});

Example 3) As a Single Image

If the sprite is a single image, you do not need to enter any parameters except for the file name.

let blueman = App.loadSpritesheet('blueman.png')

A single image can also be applied as a character image. However, since no animation is specified, the image will be the same no matter which direction it moves.

---