Understanding Sprite Sheets
App.loadSpritesheet
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.
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.
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.
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.
Last updated