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

  <!DOCTYPE html>
  <html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
      <title>EaselJS Example: Using cache and snapToPixel</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-Text.js"></script>
  
      <!-- We also provide hosted minified versions of all CreateJS libraries.
        http://code.createjs.com -->
  
      <script>
          var canvas;
          var stage;
          var shape;
          var circleRadius = 30;
          var rings = 30;
  
          function init() {
              if (window.top != window) {
                  document.getElementById("header").style.display = "none";
              }
  
              // create a new stage and point it at our canvas:
              canvas = document.getElementById("testCanvas");
              stage = new createjs.Stage(canvas);
  
              // create a large number of slightly complex vector shapes, and give them random positions and velocities:
  
              var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];
  
              for(var i = 0; i < 200; i++) {
                  shape = new createjs.Shape();
                  for(var j = rings; j > 0; j--) {
                      shape.graphics.beginFill(colors[Math.random() * colors.length | 0]).drawCircle(0, 0, circleRadius * j / rings);
                  }
                  shape.x = Math.random() * canvas.width;
                  shape.y = Math.random() * canvas.height;
                  shape.velX = Math.random() * 10 - 5;
                  shape.velY = Math.random() * 10 - 5;
  
                  // turn snapToPixel on for all shapes - it's set to false by default on Shape.
                  // it won't do anything until stage.snapToPixelEnabled is set to true.
                  shape.snapToPixel = true;
  
                  stage.addChild(shape);
              }
  
              // add a text object to output the current FPS:
              fpsLabel = new createjs.Text("-- fps", "bold 18px Arial", "#FFF");
              stage.addChild(fpsLabel);
              fpsLabel.x = 10;
              fpsLabel.y = 20;
  
              // start the tick and point it at the window so we can do some work before updating the stage:
              createjs.Ticker.addEventListener("tick", tick);
              createjs.Ticker.setFPS(50);
          }
  
          function tick(event) {
              var w = canvas.width;
              var h = canvas.height;
              var l = stage.getNumChildren() - 1;
  
              // iterate through all the children and move them according to their velocity:
              for(var i = 1; i < l; i++) {
                  var shape = stage.getChildAt(i);
                  shape.x = (shape.x + shape.velX + w) % w;
                  shape.y = (shape.y + shape.velY + h) % h;
              }
  
              fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
  
              // draw the updates to stage:
              stage.update(event);
          }
  
          function toggleCache(value) {
              // iterate all the children except the fpsLabel, and set up the cache:
              var l = stage.getNumChildren() - 1;
  
              for(var i = 0; i < l; i++) {
                  var shape = stage.getChildAt(i);
                  if (value) {
                      shape.cache(-circleRadius, -circleRadius, circleRadius * 2, circleRadius * 2);
                  } else {
                      shape.uncache();
                  }
              }
          }
  
      </script>
  
      <style>
          .controls {
              padding: 10px;
          }
      </style>
  </head>
  
  <body onload="init();">
  
  <header id="header" class="EaselJS">
      <h1><span class="text-product">Easel<strong>JS</strong></span> Cache as Bitmap Example</h1>
  
      <p>This example demonstrates the effect of <strong>DisplayObject.cache()</strong> and <strong>snapToPixel</strong>
          on performance. Caching can provide performance benefits for some types of content because the complex vector
          shapes do not have to be re-rendered each tick. Different browsers have different thresholds for when
          caching makes sense. The results for snapToPixel vary between browsers, but in general it will have no
          effect on the un-cached shapes, but a significant effect when cached. </p>
  </header>
  
  <div class="controls">
      <input type="checkbox" onClick="toggleCache(this.checked);" id="toggleCache"/><label for="toggleCache">cache
      enabled</label><br /><strong>Note that Safari 6+ will performs worse in this demo with caching due to how it
      handles vectors very well, and small textures very poorly.</strong>
  </div>
  <canvas id="testCanvas" width="960" height="350"></canvas>
  </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.