9 - Hierarchy

  • You can create more complex entities by using hierarchy by composing entities from differents parts.
  • As an example, this tutorial show how to attach two wheels to a car.

    # 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
    /*
     * Import TIGL manager
     */
    const TIGLManager = require("tiglmanager");
    
    /*
     * Some globals vars
     */
    var tm;
    var car;
    var wheel1;
    var wheel2;
    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);
        car = tm.addSprite({url: "Resources/car.png", px: 256, py: 100});
        wheel1 = tm.addSprite({url: "Resources/wheel.png", px: 40, py: 40, x: 123, y:153});
        wheel2 = tm.addSprite({url: "Resources/wheel.png", px: 40, py: 40, x: 430, y:153});
    
        /*
         * Set wheels as childs of car
         */
        wheel1.parent = car;
        wheel2.parent = car;
    }
    
    
    /*
     * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
     */ 
    function resize(e)
    {
        width = e.width;
        height = e.height;
        car.x = width /2;
        car.y = height /2;
    }
    
    /*
     * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
     */ 
    function loop()
    {
        /*
         * Rotate wheels
         */
        wheel1.r = wheel2.r = Date.now() * 0.5;
    
        
        /*
         * Rotate car
         */
        car.r = 10*Math.sin(Date.now() * 0.001);
    }