3 - Animating a sprite

  • You can do more than just moving a sprite, you can also animate it ! using sprite sheet.
  • Sprite sheet is a process that consist of having multiple appearances of a sprite in a single image, those can be changed programatical to animate the sprite.
  • Look at below image and source code to see how you can create and animate a sprite using a sprite sheet.

    spritesheet.png (source: https://www.codeandweb.com/)

    # myView.xml
    <
    1
2
3
4
5
    <Alloy>
  <Window>
    <TIGLView module="fr.dzzd.tigl" onInit="init" onResize="resize"/>
  </Window>
</Alloy>


    # myView.js
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    var sprite1Uid;
var sprite2Uid;
var sprite3Uid;
var sprite4Uid;
var width;
var height;

/*
 * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
 */
function init()
{
    /*
    * For Alloy project, at runtime "assets" folder become "Resources" folder
    */
    sprite1Uid = this.addSprite({url: "Resources/numbersBlue.png", x: 0, y: 0, width: 46, height: 46});
    sprite2Uid = this.addSprite({url: "Resources/numbersBlue.png", x: 46, y: 0, width: 46, height: 46});
    sprite3Uid = this.addSprite({url: "Resources/numbersBlue.png", x: 46*2, y: 0, width: 46, height: 46});
    sprite4Uid = this.addSprite({url: "Resources/spritesheet.png", x: 100, y: 50, width: 256, height: 256});

    /*
     * Play some animations with different parameters
     */
    this.playEntityAnimationById(sprite1Uid, {duration: 5000});
    this.playEntityAnimationById(sprite2Uid, {duration: 5000, start: 9, end: 0});
    this.playEntityAnimationById(sprite3Uid, {duration: 4000, pingpong: true, loop: 50});
    this.playEntityAnimationById(sprite4Uid, {duration: 500, loop: 0});
}


/*
 * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
 */ 
function resize(e)
{
    width = e.width;
    height = e.height;
    /*
     * Center sprite 4
     */
    this.setEntityPositionById(sprite4Uid, width * 0.5 - 128, height * 0.5 - 160);
}