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



  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: Extracting a frame from a sprite sheet</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-events-EventDispatcher.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-utils-SpriteSheetUtils.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>
          var imgSeq;                // bmp of the sprite sheet
  
          function init() {
                  //wait for the image to load
                  imgSeq = new Image();
                  imgSeq.onload = handleImageLoad;
                  imgSeq.src = "mobile-graphic-easel-examples-assets-testSeq.png";
          }
  
          function handleImageLoad() {
                  // create sprite sheet data from the loaded image, and define the animation sequences in it.
                  // for example, {walkUpRight:[0,19]} defines an animation sequence called "walkUpRight" that
                  // will play back frames 0 to 19 inclusive.
                  var data = {
                          images: [imgSeq],
                          frames: {width:64,height:68},
                          animations: {walkUpRight:[0,19], walkDownRight:[20,40], walkRight:[41,59]}
                  };
  
                  // create a spritesheet from the data:
                  var spriteSheet = new createjs.SpriteSheet(data);
  
                  // extract the first frame of the walkRight sequence as a new image:
                  // could alternately use the frame number.
                  img = createjs.SpriteSheetUtils.extractFrame(spriteSheet, "walkRight");
  
                  // note that you could use this as the source of a Bitmap object as well, though
                  // in almost all cases you'd be better just using BitmapAnimation.
              //var bmp = new createjs.Bitmap(img);
  
                  // add the newly created image to the bottom of this document:
                  document.getElementById("content").appendChild(img);
          }
  
          </script>
  </head>
  
  <body onload="init();">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Extract Frame Example</h1>
              <p>Demonstrates using the <strong>SpriteSheetUtils.extractFrame()</strong> method to extract a single frame from a loaded sprite sheet as an image.</p>
          </header>
  
          <!-- allow for alert of frame data-->
          <div id="content">
                  Original sprite sheet:<br/>
                  <img src="mobile-graphic-easel-examples-assets-testSeq.png"><br/><br/><br/>
                  Extracted frame:<br/>
          </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.