topical media & game development

talk show tell print

mobile-graphic-easel-tutorials-Animation-and-Ticker-timeBased.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS demo: Time based animation</title>
          <link href="../shared/demo.css" rel="stylesheet" type="text/css">
          <script src="../../lib/easeljs-0.6.0.min.js"></script>
          <script>
                  
                  var stage, timeCircle, tickCircle;
                  function init() {
                          stage = new createjs.Stage("demoCanvas");
                          
                          timeCircle = new createjs.Shape();
                          timeCircle.graphics.beginFill("red").drawCircle(0, 0, 40);
                          timeCircle.y = 50;
                          stage.addChild(timeCircle);
                          
                          tickCircle = new createjs.Shape();
                          tickCircle.graphics.beginFill("blue").drawCircle(0, 0, 40);
                          tickCircle.y = 150;
                          stage.addChild(tickCircle);
                          
                          createjs.Ticker.addEventListener("tick", tick);
                          createjs.Ticker.setFPS(20);
                  }
                  
                  function tick(event) {
                          // time based
                          timeCircle.x = timeCircle.x + (event.delta)/1000*100;
                          if (timeCircle.x > stage.canvas.width) { timeCircle.x = 0; }
                          
                          // not time based:
                          tickCircle.x = tickCircle.x + 5; // 100 / 20 = 5
                          if (tickCircle.x > stage.canvas.width) { tickCircle.x = 0; }
                          
                          stage.update(event);
                  }
          </script>
  </head>
  <body onLoad="init();">
          <select onchange="createjs.Ticker.setFPS(Number(this.value));">
                  <option value="10">10 fps</option>
                  <option value="20" selected>20 fps</option>
                  <option value="30">30 fps</option>
                  <option value="40">40 fps</option>
                  <option value="50">50 fps</option>
                  <option value="60">60 fps</option>
          </select><br>
          <canvas id="demoCanvas" width="500" height="200">
                  alternate content
          </canvas>
  </body>
  </html>


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.