# 7 - Touch events with TIGL Manager

- Once again, by using TIGL Manager you will get better control over your scene and will be able to declare touch event per sprite.
- The code below show how to handle mutli-touch on sprite, you can move up to 5 pieces of the puzzle at the same time !
  # myView.xml

      1
      2
      3
      4
      5
      6
      7
      8
      <Alloy>
        <Window>
          <ActionBar/>
          <TIGLView module="fr.dzzd.tigl" onInit="init" onResize="resize" onLoop="loop" onTouch="touch"/>
          <WebView/>
          <Button title="Scramble!" left="10dp" top="10dp" height="75dp" width="200dp" onClick="scramble"/>
        </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
       65
       66
       67
       68
       69
       70
       71
       72
       73
       74
       75
       76
       77
       78
       79
       80
       81
       82
       83
       84
       85
       86
       87
       88
       89
       90
       91
       92
       93
       94
       95
       96
       97
       98
       99
      100
      101
      102
      103
      104
      105
      106
      107
      108
      109
      110
      111
      112
      113
      114
      115
      116
      117
      118
      119
      120
      121
      122
      123
      124
      125
      126
      127
      128
      129
      130
      131
      132
      133
      134
      135
      136
      137
      138
      139
      140
      141
      142
      143
      144
      /*
       * Import TIGL manager
       */
      const TIGLManager = require("tiglmanager");

      /*
       * Import Tween module (https://github.com/tweenjs/tween.js/)
       */
      const Tween = require("tween.cjs");

      /*
       * Some globals vars
       */
      var tm;
      var width;
      var height;

      var entitiesDragged = new Array();
      var entities = new Array();

      /*
       * 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);

          /*
           * Load puzzle sprites
           */
          for(var n = 0; n < 16; n++)
          {
              var entity = tm.addSprite({url: "Resources/puzzle/jigsaw" + n + ".png", px: 60, py: 60});
              entity.addEventListener('touch', onTouchEntity);
              entities.push(entity);
          }

      }

      /*
       * Called when an entity is touched
       *  => "this" represent the touched entity
       */
      function onTouchEntity(e)
      {
          switch(e.action)
          {
              case "down" :
                  /*
                   * When touching down on a sprite set some properties for dragging it
                   */
                  if(entitiesDragged[e.pointer] == null)
                  {
                      entitiesDragged[e.pointer] = this;
                      this.startX = this.x;
                      this.startY = this.y;
                      this.sceneX = e.sceneX;
                      this.sceneY = e.sceneY;
                  }
              break;
          }
      }

      /*
       * Resize must be declared as an attribute of the Alloy tag TIGLView (eg: onResize="resize")
       */
      function resize(e)
      {
          width = e.width;
          height = e.height;

          /*
           * Dispose puzzle pieces all over the screen
           */
          for(var n = 0; n < entities.length; n++)
          {
              var entity = entities[n];
              entity.x = width * 0.5 - 180 + Math.floor(n%4) * 120;
              entity.y = height * 0.5 - 180 + Math.floor(n/4) * 120;
          }
      }

      /*
       * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
       */
      function loop()
      {
          Tween.update(); //Requiered for tween to be updated
      }

      /*
       * Touch must be declared as an attribute of the Alloy tag TIGLView (eg: onTouch="touch")
       */
      function touch(e)
      {
          /*
           * Discard all events wich not come from the scene
           */
         if(e.entityId != 0)
         {
             return;
         }

         let entityDragged = entitiesDragged[e.pointer];
         if(!entityDragged)
         {
             return;
         }
         switch(e.action)
         {

              case "move" :
                  entityDragged.x = entityDragged.startX + e.sceneX - entityDragged.sceneX;
                  entityDragged.y = entityDragged.startY + e.sceneY - entityDragged.sceneY;
              break;

             case "up" :
              entitiesDragged[e.pointer] = null;
             break;
         }

      }

      /*
       * Scramble all puzzle pieces
       */
      function scramble()
      {
          for(var n = 0; n < entities.length; n++)
          {
              var entity = entities[n];
              var x = 100 + Math.random() * (width - 200);
              var y = 100 + Math.random() * (height - 200);
              var tween = new Tween.Tween(entity)
                                   .to({x: x, y: y}, 2000)
                                   .easing(Tween.Easing.Quadratic.Out).start();
          }
      }