Tutorial: How create animations

How to do animations with sprite indexes:

1. Take an image with animations, for example:

2. Add and load it to the project:

this.iLoader.addImage("image_key", "./fireball32x16.png");

3. Then create an 16x16 DrawImageObject with the same key:

const posX = 100;
const posY = 200;
const imageW = 16;
const imageH = 16;

this.fireball = this.draw.image(posX, posY, imageW, imageH, "image_key");

4. Then add an animation event:

this.fireball.addAnimation("startAnimation", [0,1,2,3], isLoop = false);

5. And start it, emitting the event:

this.fireball.emit("startAnimation");

This will run through the image indexes 0,1,2,3 on next render cycles.

6. Adding 3d parameter as true will loop animation indexes:

this.fireball.addAnimation("startAnimation", [0,1,2,3], true);

until stopRepeatedAnimation() will be called, or object will be destroyed.

this.fireball.stopRepeatedAnimation("startAnimation");

7. 4th parameter determines how many cycles will each frame shown
   The default value is 1, if you want to make animation slower increase the value:

this.fireball.addAnimation("startAnimation", [0,1,2,3], true, 5);

8. In jsge@1.4.0 added:

• frame time. Instead of array of ids, add Array of objects:

this.fireball.addAnimation("startAnimation", [{duration: 150, id:0},{duration:100, id:1},{ duration:100, id:2},{duration:100, id:3}], true);

duration - is frame time in ms.

• Tiled animations support.

Live example

See the Pen Untitled by Arturas-Alfredas Lapinskas (@yaalfred) on CodePen.