# 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;

      }