topical media & game development

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) _
mobile-graphic-easel-examples-SpriteSheetBuilderMC-SpriteSheetBuilder-MovieClip.htm / htm

  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: SpriteSheetBuilder</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-events-EventDispatcher.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-geom-Matrix2D.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-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-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-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-Graphics.js"></script>
          <script type="text/javascript" src="../mobile-graphic-easel-src-easeljs-display-Shadow.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-utils-SpriteSheetBuilder.js"></script>
          <script type="text/javascript" src="../mobile-graphic-easel-src-easeljs-display-Text.js"></script>
          
          <script src="../mobile-graphic-easel-examples-assets-tweenjs-0.4.0.min.js"></script> <!-- required for MovieClip -->
          <script type="text/javascript" src="../mobile-graphic-easel-src-easeljs-display-MovieClip.js"></script>
          <script src="gunnertron_g.js"></script>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script>
          var canvas, stage, mc, w;
          var scale = 0.5;
  
          function init() {
                  //find canvas and load images, wait for last image to load
                  canvas = document.getElementById("testCanvas");
                  stage = new createjs.Stage(canvas);
                  
                  mc = new lib.gunnertron();
                  w = mc.nominalBounds.width*scale;
                  mc.setTransform(100+w/2,100,scale,scale);
                  stage.addChild(mc);
                  
                  var label1 = stage.addChild(new createjs.Text("MovieClip (vector)", "14px Arial", "#FFF"));
                  label1.textAlign = "center";
                  label1.setTransform(mc.x,30);
                  
                  var label2 = stage.addChild(label1.clone());
                  label2.text = "BitmapAnimation";
                  label2.x += w+30;
                  
                  // create the sprite sheet builder:
                  var builder = new createjs.SpriteSheetBuilder();
                  builder.scale = scale;
                  builder.maxWidth = 1024;
                  builder.addMovieClip(mc);
                  builder.addEventListener("complete" ,buildComplete);
                  builder.buildAsync();
                  
                  // append the generated spritesheet image for demo purposes:
                  document.body.appendChild(builder._data.images[0]);
                  
                  createjs.Ticker.setFPS(30);
                  createjs.Ticker.addEventListener("tick", stage);
          }
          
          function buildComplete(event) {
                  var spriteSheet = event.target.spriteSheet;
                  var bmpAnim = new createjs.BitmapAnimation(spriteSheet);
                  bmpAnim.setTransform(mc.x+w+30|0, mc.y);
                  stage.addChild(bmpAnim);
                  
                  mc.gotoAndPlay(0);
                  bmpAnim.gotoAndPlay(0);
          }
  
          </script>
  </head>
          
  <body onload="init();">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> SpriteSheetBuilder Sample</h1>
              <p>
              Using <strong>SpriteSheetBuilder</strong> to create <strong>SpriteSheet</strong> instances asynchronously at run time from a <strong>MovieClip</strong> instance.
              Note that a spritesheet of this animation (at scale=1) is 2.5MB, whereas the "over the wire" (zipped) size of the movieclip is only 19kb, and it can
              be scaled dynamically at runtime.
              
              </p>
          </header>
  
          <div class="canvasHolder">
                  <canvas id="testCanvas" width="960" height="200"></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) _
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.