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-Icons.htm / htm



  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: Displaying icons using BitmapAnimation and SpriteSheet</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-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-geom-Rectangle.js"></script>
          <script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-BitmapAnimation.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script>
          var stage;
  
          var iconSheet = new Image();
  
          function init() {
                  //find canvas and load images, wait for last image to load
                  iconSheet.onload = handleImageLoad;
                  iconSheet.src = "mobile-graphic-easel-examples-assets-icons.png";
          }
  
          function handleImageLoad() {
                  // create a new stage and point it at our canvas:
                  // note that we can just pass the id of the canvas:
                  stage = new createjs.Stage("testCanvas");
* FIRST: the "simple" approach **

  
                  // create a simple SpriteSheet using iconSheet with a frame size of 80x80:
                  var data = {images:[iconSheet], frames:{width:80, height:80}};
                  var spriteSheet  = new createjs.SpriteSheet(data);
  
                  // create a BitmapAnimation to display frames from the sprite sheet:
                  var icon1 = new createjs.BitmapAnimation(spriteSheet);
          icon1.x = 10;
          icon1.y = 100;
  
                  // because we didn't specify frameData, we have to reference frames by number:
                  icon1.gotoAndStop(2);
                  stage.addChild(icon1);
  
                  // we'll clone icon1 to save a little work:
                  var icon2 = icon1.clone();
                  icon2.x += 111;
                  icon2.gotoAndStop(5);
                  stage.addChild(icon2);
* Next: the more robust approach **

  
                  // define sprite sheet data describing the available icons:
                  // we can use the form {frameName:frameNumber} in animations because each "sequence" is only a single frame:
                  var data = {
                          images:[iconSheet],
                          frames:{width:80, height:80},
                          animations: {trash:0, male:1, wait:2, library:3, female:4, hanger:5, stairs:6, noparking:7}
                  }
  
                  // create a SpriteSheet using the data:
              spriteSheet = new createjs.SpriteSheet(data);
  
              // we'll clone icon2, to preserve the x/y, and swap out the SpriteSheet:
              var icon3 = icon2.clone();
              icon3.spriteSheet = spriteSheet;
              icon3.x += 111;
  
              // we can reference frames by name now:
              icon3.gotoAndStop("male");
              stage.addChild(icon3);
  
              var icon4 = icon3.clone();
              icon4.gotoAndStop("female");
              icon4.x += 111;
              stage.addChild(icon4);
  
              var icon5 = icon4.clone();
              icon5.gotoAndStop("trash");
              icon5.x += 111;
              stage.addChild(icon5);
  
              // finally, we'll add one that just plays through:
              var icon6 = icon1.clone();
              icon6.x = icon5.x + 111;
              icon6.gotoAndPlay(0);
              stage.addChild(icon6);
  
                  createjs.Ticker.setFPS(3); // slow, so we can see the icons
                  createjs.Ticker.addEventListener("tick", stage);
          }
  
          </script>
          <style>
                  #content {
                          padding: 10px;
                  }
          </style>
  </head>
          
  <body onload="init();">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Spritesheet Icons</h1>
              <p>Shows two approaches to use <strong>BitmapAnimation</strong> to display individual icons or graphics from a <strong>SpriteSheet</strong>.</p>
          </header>
  
          <div class="canvasHolder">
                  <canvas id="testCanvas" width="960" height="270"></canvas>
          </div>
  
          <div id="content">
          The original icons.png file, images from <a href="http://thenounproject.com/">the Noun project</a>:<br/>
          <img src="mobile-graphic-easel-examples-assets-icons.png"/>
          </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.