4 - Using TIGL Manager

  • Now that we have loaded, moved and animated a sprite, we will see how to do the same using TIGL Manager.
  • TIGL Manager give you better and easier controle over your scene and even if it is not required it is strongly advised to use it in all yours projects.

    # myView.xml
    1
    2
    3
    4
    5
    <Alloy>
      <Window>
        <TIGLView module="fr.dzzd.tigl" onInit="init" onResize="resize" onLoop="loop"/>
      </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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    /*
     * Import TIGL manager
     */
    const TIGLManager = require("tiglmanager");
    
    /*
     * Some globals vars
     */
    var tm;
    var myEntity1;
    var myEntity2;
    var width;
    var height;
    
    /*
     * Init must be declared as an attribute of the Alloy tag TIGLView (eg: onInit="init")
     */
    function init()
    {
        /*
         * Create and initialise TIGL manager
         */
        tm = new TIGLManager(this);
        myEntity1 = tm.addSprite({url: "Resources/sprite.png"});
        myEntity2 = tm.addSprite({url: "Resources/spritesheet.png", width: 256, height: 256});
        myEntity2.playAnimation({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;
    }
    
    /*
     * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
     */ 
    function loop()
    {
        /*
         * Modify an entity properties
         */
        myEntity1.px = 100;
        myEntity1.py = 125;
        myEntity1.x = Math.cos(Date.now() * 0.001) * width * 0.4 + width * 0.5;
        myEntity1.y = height * 0.5;
        myEntity1.sy = 1 + 0.25 * Math.cos(Date.now() * 0.003);
        myEntity1.sx = 1 + 0.25 * Math.sin(Date.now() * 0.003);
        myEntity1.r = 45 * Math.cos(Date.now() * 0.0025);
        
        myEntity2.x = Math.sin(Date.now() * 0.001) * width * 0.4 + width * 0.5;
        myEntity2.y = Math.cos(Date.now() * 0.001) * height * 0.2 + height * 0.5;
        myEntity2.px = 128;
        myEntity2.py = 128;
        
    }