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

  <!DOCTYPE html>
  <html>
  <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
          <title>EaselJS Example: Using Stage.autoClear</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>
  
          <!-- We also provide hosted minified versions of all CreateJS libraries.
            http://code.createjs.com -->
  
          <script>
          var canvas;
          var stage;
          var starfield
          var moon;
          var sky;
  
          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);
  
                  // draw the sky:
                  sky = new createjs.Shape();
                  sky.graphics.beginLinearGradientFill(["#204","#003","#000"], [0,0.15,0.6], 0, canvas.height, 0, 0);
                  sky.graphics.drawRect(0, 0, canvas.width, canvas.height);
                  stage.addChild(sky);
  
                  // create a Shape instance to draw the vectors stars in, and add it to the stage:
                  starfield = new createjs.Shape();
                  stage.addChild(starfield);
  
                  // set up the cache for the star field shape, and make it the same size as the canvas:
                  starfield.cache(0,0,canvas.width,canvas.height);
  
                  // draw the moon in a separate shape, so it isn't part of the generative caching:
                  moon = new createjs.Shape();
                  moon.graphics.beginFill("#CCF").drawCircle(0,0,60);
                  moon.graphics.beginFill("#000").drawEllipse(-35,-57,96,114);
                  moon.rotation = -30;
                  stage.addChild(moon);
  
                  // 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(30);
          }
  
          function stop() {
                  createjs.Ticker.removeEventListener("tick", tick);
          }
  
          function tick(event) {
                  // draw a vector star at a random location:
                  starfield.graphics.beginFill(createjs.Graphics.getRGB(0xFFFFFF,Math.random())).drawPolyStar(Math.random()*canvas.width, Math.random()*canvas.height, Math.random()*4+1, 5, 0.93, Math.random()*360);
  
                  // draw the new vector onto the existing cache, compositing it with the "source-overlay" composite operation:
                  starfield.updateCache("source-overlay");
  
                  // if you omit the compositeOperation param in updateCache, it will clear the existing cache, and draw into it:
                  // in this demo, that has the effect of showing just the star that was drawn each tick.
                  // shape.updateCache();
  
                  // because the vector star has already been drawn to the cache, we can clear it right away:
                  starfield.graphics.clear();
  
                  // darken the sky:
                  sky.alpha -= 0.0005;
  
                  // move the moon across the sky:
                  var w = canvas.width+200;
                  moon.x = (moon.x+100+1+w)\%w-100;
                  moon.y = 250-Math.sin(moon.x/w*Math.PI)*150;
  
                  // draw the updates to stage:
                  stage.update(event);
          }
  
          </script>
  </head>
          
  <body onload="init();">
  
          <header id="header" class="EaselJS">
              <h1><span class="text-product">Easel<strong>JS</strong></span> Update Cache</h1>
              <p>This example draws a single vector star each tick, then composites it onto an existing cache using <strong>DisplayObject.updateCache();</strong> to avoid the cost of rendering the vectors each frame.
                      This provides a similar result as setting <strong>stage.autoclear</strong> to false, but can be managed on a per instance basis.
              </p>
          </header>
  
          <!-- background isn't set to black to demonstrate how the darkening applies -->
          <div class="canvasHolder">
                  <canvas id="testCanvas" width="960" height="400" style="background-color:#000"></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.