topical media & game development
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

talk show tell print

mobile-graphic-easel-examples-SpriteSheet-simple.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <title>EaselJS: Simple SpriteSheet Example</title>
  
          <link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
  
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-SpriteSheet.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-BitmapAnimation.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Rectangle.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script type="text/javascript">
          var stage;
                  function init() {
  
                          // create a new stage and point it at our canvas:
                          stage = new createjs.Stage(document.getElementById("testCanvas"));
  
                          // Define a spritesheet. Note that this data was exported by Zoë.
                          var ss = new createjs.SpriteSheet({
                                  "animations":
                                  {
                                          "run": [0, 25, "jump"],
                                          "jump": [26, 63, "run"]},
                                          "images": ["mobile-graphic-easel-examples-assets-runningGrant.png"],
                                          "frames":
                                                  {
                                                          "height": 292.5,
                                                          "width":165.75,
                                                          "regX": 0,
                                                          "regY": 0,
                                                          "count": 64
                                                  }
                                  });
  
                          var grant = new createjs.BitmapAnimation(ss);
                          grant.x = 360;
                          grant.y = 22;
  
                          grant.gotoAndPlay("run");
  
                          // Add Grant to the stage, and add it as a listener to Ticker to get updates each frame.
                          stage.addChild(grant);
                          createjs.Ticker.setFPS(60);
                          createjs.Ticker.addEventListener("tick", stage);
                  }
  
          </script>
  </head>
  <body onload="init();">
  
          <header id="header" class="EaselJS">
                  <h1><span class="text-product">Easel<strong>JS</strong></span> Simple SpriteSheet Example</h1>
                  <p>A simple example of a sprite sheet using <strong>BitmapAnimation</strong>. This demos also shows playing named
                          animations (jump and run), and animation chaining using <strong>getAnimation("name").next</strong>.</p>
          </header>
  
          <div class="canvasHolder">
                  <canvas id="testCanvas" width="960" height="400"></canvas>
          </div>
  </body>
  </html>
[] readme course(s) preface I 1 2 II 3 4 III 5 6 7 IV 8 9 10 V 11 12 afterthought(s) appendix reference(s) example(s) resource(s) _

(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.