# 11 - Physics

- Adding physics to your game can makes all the difference, so it is nice because that's the purpose of this tutorial.
- To enable physics Tigl rely on a simple but very poweful external library "matter.js" but don't worry you will be able to start using physics imediatly as Tigl provide a fast and easy glue to use "matter-js" and easily add physics to your game.
  # 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/>
        </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
      145
      146
      147
      148
      149
      150
      151
      152
      153
      154
      155
      156
      157
      158
      159
      160
      161
      162
      163
      164
      165
      166
      167
      168
      169
      170
      171
      172
      173
      174
      175
      176
      177
      178
      179
      180
      181
      182
      183
      184
      185
      186
      187
      188
      189
      190
      191
      192
      193
      194
      195
      196
      197
      198
      199
      200
      201
      202
      203
      204
      205
      206
      207
      208
      /*
       * Import TIGL manager
       */
      const TIGLManager /*
       * Import TIGL manager & tweenjs(https://github.com/tweenjs/tween.js/)
       */
      const TIGLManager = require("tiglmanager");
      const Tween = require("tween.cjs");

      /*
       * Some globals vars
       */
      var tm;
      var textA;
      var sprite;
      var textB;
      var width;
      var height;
      var counter = 0;
      var tween = null;

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

          /*
           * If font is not specified, Arial font embeded in module will be used
           * Also if not specified color default to grey, outline to transparent and fontSize to bitmapfont size
           */
          textA = tm.addText({text: ""});

          /*
           * Ofcourse hierarchy work also on texts
           */
          sprite = tm.addSprite({url: "Resources/textBackground.png"});
          sprite.px = sprite.width/2;
          sprite.py = sprite.height/2;
          sprite.parent = textA;

          /*
           * In addition to commons properties there are some specifics properties for Text :
           * - font
           * - fontSize
           * - color
           * - outlineColor
           */
          textB = tm.addText({font : "Resources/bitmapfont/KidGame.fnt", text: "KIDGAME FONT!", color: "green", outlineColor: "white", r: 90, fontSize: 64, sx: 0.8, sy: 0.8});

      }

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

          textB.px = textB.width/2;
          textB.py = textB.height/2;
          textB.x = width - 50;
          textB.y = height/2;

          textA.x = width/2;
          textA.y = height/2;

          /*
           * As other entities, tweening can be used to animate Text
           */
          if(tween)
          {
              tween.stop();
          }
          tween = new Tween.Tween(textB)
                      .to({x: width/2 , y: 50, r: 0, sx: 1.2, sy: 1.5}, 2000)
                      .easing(Tween.Easing.Elastic.InOut).yoyo(true)
                      .repeat(Infinity).start();
      }

      /*
       * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
       */
      function loop()
      {
          /*
           * Update text entities
           */
          textA.text = "C-" + counter++;
          textA.px = textA.width/2;
          textA.py = 32;
          sprite.x = textA.width/2;
          sprite.y = textA.height/2 + 8;
          textA.r++;

          Tween.update(); //Requiere to update tweens
      }
      = require("tiglmanager");
      const Tween = require("tween.cjs");

      /*
       * Some globals vars
       */
      var tm;
      var textA;
      var sprite;
      var textB;
      var width;
      var height;
      var counter = 0;
      var tween = null;

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

          /*
           * If font is not specified, Arial font embeded in module will be used
           * Also if not specified color default to grey, outline to transparent and fontSize to bitmapfont size
           */
          textA = tm.addText({text: ""});

          /*
           * Ofcourse hierarchy work also on texts
           */
          sprite = tm.addSprite({url: "Resources/textBackground.png"});
          sprite.px = sprite.width/2;
          sprite.py = sprite.height/2;
          sprite.parent = textA;

          /*
           * In addition to commons properties there are some specifics properties for Text :
           * - font
           * - fontSize
           * - color
           * - outlineColor
           */
          textB = tm.addText({font : "Resources/bitmapfont/KidGame.fnt", text: "KIDGAME FONT!", color: "green", outlineColor: "white", r: 90, fontSize: 64, sx: 0.8, sy: 0.8});

      }

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

          textB.px = textB.width/2;
          textB.py = textB.height/2;
          textB.x = width - 50;
          textB.y = height/2;

          textA.x = width/2;
          textA.y = height/2;

          /*
           * As other entities, tweening can be used to animate Text
           */
          if(tween)
          {
              tween.stop();
          }
          tween = new Tween.Tween(textB)
                      .to({x: width/2 , y: 50, r: 0, sx: 1.2, sy: 1.5}, 2000)
                      .easing(Tween.Easing.Elastic.InOut).yoyo(true)
                      .repeat(Infinity).start();
      }

      /*
       * Loop must be declared as an attribute of the Alloy tag TIGLView (eg: onLoop="loop")
       */
      function loop()
      {
          /*
           * Update text entities
           */
          textA.text = "C-" + counter++;
          textA.px = textA.width/2;
          textA.py = 32;
          sprite.x = textA.width/2;
          sprite.y = textA.height/2 + 8;
          textA.r++;

          Tween.update(); //Requiere to update tweens
      }