Merge pull request #916 from DavidHGillen/master

Updates to demos and StageGL. Fixes demo disparities and adds better texture cleanup handling to StageGL

Author: lannymcnie

examples/Sparkles.html

@@ -16,14 +16,18 @@
 	var canvas;
 	var stage;
 
-	var imgSeq = new Image();        // The image for the sparkle animation
-	var sprite;                        // The animated sparkle template to clone
+	var imgSeq = new Image();       // The image for the sparkle animation
+	var sprite;                     // The animated sparkle template to clone
 	var fpsLabel;
+	var fader;                      // Semi fades the Background to give a tracing effect
+	var spkls;                      // Container for all the sparkles
 
 	function init() {
 		// create a new stage and point it at our canvas:
 		canvas = document.getElementById("testCanvas");
 		stage = new createjs.Stage(canvas);
+		stage.autoClear = false;
+
 		// attach mouse handlers directly to the source canvas.
 		// better than calling from canvas tag for cross browser compatibility:
 		stage.addEventListener("stagemousemove", moveCanvas);
@@ -34,14 +38,29 @@
 		// it will auto-calculate the number of frames from the image dimensions and loop them
 		var data = {
 			images: ["../_assets/art/spritesheet_sparkle.png"],
-			frames: {width: 21, height: 23, regX: 10, regY: 11}
+			frames: {
+				width: 21,
+				height: 23,
+				regX: 10,
+				regY: 11
+			}
 		};
 
 		// set up an animation instance, which we will clone
 		sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
 
+		// setup slow fadeout
+		fader = new createjs.Shape();
+		stage.addChild(fader);
+		var gfx = fader.graphics;
+		gfx.beginFill("rgba(0,0,0, 0.3)").drawRect(0,0, 1024, 704).endFill();
+		fader.cache(0,0, 1024,1024, 1/32); // Power of two textures smooth better, but we don't need full resolution either
+
+		spkls = new createjs.Container();
+		stage.addChild(spkls);
+
 		// add a text object to output the current FPS:
-		fpsLabel = new createjs.Text("-- fps", "bold 14px Arial", "#FFF");
+		fpsLabel = new createjs.Text("------ @ -- fps", "bold 14px Arial", "#FFF");
 		stage.addChild(fpsLabel);
 		fpsLabel.x = 10;
 		fpsLabel.y = 20;
@@ -53,69 +72,81 @@
 
 	function tick(event) {
 		// loop through all of the active sparkles on stage:
-		var l = stage.numChildren;
+		var l = spkls.numChildren;
 		var m = event.delta / 16;
-		for (var i = l - 1; i > 0; i--) {
-			var sparkle = stage.getChildAt(i);
+		for (var i = 0; i < l; i++) {
+			var sparkle = spkls.getChildAt(i);
+
+			if(--sparkle.life <= 0) {
+				spkls.removeChild(sparkle);
+				i--; l--;
+				continue;
+			}
 
 			// apply gravity and friction
-			sparkle.vY += 0.8 * m;
-			sparkle.vX *= 0.99;
+			sparkle.vY += 0.1 * m;
 
 			// update position, scale, and alpha:
 			sparkle.x += sparkle.vX * m;
 			sparkle.y += sparkle.vY * m;
-			sparkle.scale = sparkle.scaleX + sparkle.vS * m;
-			sparkle.alpha += sparkle.vA * m;
 
-			//remove sparkles that are off screen or not invisble
-			if (sparkle.alpha <= 0 || sparkle.y > canvas.height) {
-				stage.removeChildAt(i);
+			sparkle.alpha = sparkle.alphaStart * (sparkle.life / sparkle.lifeMax);
+
+			// remove sparkles that are off screen or not invisible
+			if (sparkle.y > canvas.height) {
+				sparkle.vY *= -(Math.random() * 0.1 + 0.8);
+				sparkle.vX += Math.cos( Math.random() * Math.PI * 2) * 3;
+			} else if (sparkle.y < 0) {
+				sparkle.vY *= 0.9;
+			}
+
+			if (sparkle.x > canvas.width || sparkle.x < 0) {
+				sparkle.vX *= -1;
 			}
 		}
 
-		fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
+		fpsLabel.text = l + " @ " + Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
 
 		// draw the updates to stage
 		stage.update(event);
 	}
 
-	//sparkle explosion
+	// sparkle explosion
 	function clickCanvas(evt) {
 		addSparkles(Math.random() * 200 + 100 | 0, stage.mouseX, stage.mouseY, 1);
 	}
 
-	//sparkle trail
+	// sparkle trail
 	function moveCanvas(evt) {
-		addSparkles(Math.random() * 6 + 3 | 0, stage.mouseX, stage.mouseY, 0.5);
+		addSparkles((Math.random() * 4 + 2) | 0, stage.mouseX, stage.mouseY, 0.1);
 	}
 
 	function addSparkles(count, x, y, speed) {
-		//create the specified number of sparkles
+		// create the specified number of sparkles
 		for (var i = 0; i < count; i++) {
 			// clone the original sparkle, so we don't need to set shared properties:
 			var sparkle = sprite.clone();
 
 			// set display properties:
 			sparkle.x = x;
 			sparkle.y = y;
-			//sparkle.rotation = Math.random()*360;
-			sparkle.alpha = Math.random() * 0.5 + 0.5;
+			sparkle.rotation = Math.random()*360;
+			sparkle.alpha = sparkle.alphaStart = Math.random() * 0.7 + 0.6;
 			sparkle.scale = Math.random() + 0.3;
 
+			sparkle.life = sparkle.lifeMax = Math.random() * 100 + 50;
+
 			// set up velocities:
 			var a = Math.PI * 2 * Math.random();
 			var v = (Math.random() - 0.5) * 30 * speed;
 			sparkle.vX = Math.cos(a) * v;
 			sparkle.vY = Math.sin(a) * v;
-			sparkle.vS = (Math.random() - 0.5) * 0.2; // scale
-			sparkle.vA = -Math.random() * 0.05 - 0.01; // alpha
 
 			// start the animation on a random frame:
-			sparkle.gotoAndPlay(Math.random() * sparkle.spriteSheet.getNumFrames());
+			sparkle.gotoAndPlay(Math.random() * sparkle.spriteSheet.getNumFrames() | 0);
 
 			// add to the display list:
-			stage.addChild(sparkle);
+			spkls.addChild(sparkle);
 		}
 	}
 
@@ -138,8 +169,7 @@ <h1>Sparkles</h1>
 </header>
 
 <div>
-	<canvas id="testCanvas" width="960" height="400"
-			style="background:black"></canvas>
+	<canvas id="testCanvas" width="960" height="400" style="background:black"></canvas>
 </div>
 </body>
 </html>

examples/WebGL/Sparkles.html

@@ -16,17 +16,18 @@
 	var canvas;
 	var stage;
 
-	var imgSeq = new Image();		// The image for the sparkle animation
-	var sprite;						// The animated sparkle template to clone
+	var imgSeq = new Image();       // The image for the sparkle animation
+	var sprite;                     // The animated sparkle template to clone
 	var fpsLabel;
-	var fader;						// Semi fades the Background to give a tracing effect
-	var spkls;						// Container for all the sparkles
+	var fader;                      // Semi fades the Background to give a tracing effect
+	var spkls;                      // Container for all the sparkles
 
 	function init() {
 		// create a new stage and point it at our canvas:
 		canvas = document.getElementById("testCanvas");
 		stage = new createjs.StageGL(canvas, {preserveBuffer:true, antialias:true});
 		stage.autoClear = false;
+		stage.setClearColor(0x000000);
 
 		// attach mouse handlers directly to the source canvas.
 		// better than calling from canvas tag for cross browser compatibility:
@@ -39,17 +40,17 @@
 		var data = {
 			images: ["../../_assets/art/spritesheet_sparkle.png"],
 			frames: {
-				regX: 10,
-				regY: 11,
+				width: 21,
 				height: 23,
-				width: 21
+				regX: 10,
+				regY: 11
 			}
 		};
 
 		// set up an animation instance, which we will clone
 		sprite = new createjs.Sprite(new createjs.SpriteSheet(data));
 
-		//setup slow fadeout
+		// setup slow fadeout
 		fader = new createjs.Shape();
 		stage.addChild(fader);
 		var gfx = fader.graphics;
@@ -93,7 +94,7 @@
 
 			sparkle.alpha = sparkle.alphaStart * (sparkle.life / sparkle.lifeMax);
 
-			//remove sparkles that are off screen or not invisible
+			// remove sparkles that are off screen or not invisible
 			if (sparkle.y > canvas.height) {
 				sparkle.vY *= -(Math.random() * 0.1 + 0.8);
 				sparkle.vX += Math.cos( Math.random() * Math.PI * 2) * 3;
@@ -120,7 +121,7 @@
 
 	// sparkle trail
 	function moveCanvas(evt) {
-		addSparkles(Math.random() * 4 | 0, stage.mouseX, stage.mouseY, 0.1);
+		addSparkles((Math.random() * 6 + 3) | 0, stage.mouseX, stage.mouseY, 0.1);
 	}
 
 	function addSparkles(count, x, y, speed) {
@@ -160,18 +161,16 @@
 <header class="EaselJS">
 	<h1>Sparkles</h1>
 
-	<p>Example showing how to use simple animated <code>Sprite</code> instances
-		with <code>stagemousemove</code> and <code>stagemousedown</code> events.
-		Move your mouse and click
-		on the canvas. It also demonstrates displaying the current measured
-		framerate with <code>Ticker.getMeasuredFramerate()</code>
-		and <code>Text</code>. Click repeatedly to generate lots of sparkles and
-		slow down the framerate.<br/>
+	<p>Example showing the differences in a <code>StageGL</code> project, compare
+		the two files to see how little changed.
+		It also demonstrates persistent drawing with <code>Stage.autoclear = false</code>
+		and <code>preservesBuffer: true</code>. Click repeatedly to generate lots of sparkles and
+		try to slow down the framerate. We're using more sparkles this time!<br/>
 	</p>
 </header>
 
 <div>
-	<canvas id="testCanvas" width="960" height="400" style="background:black"></canvas>
+	<canvas id="testCanvas" width="960" height="400"></canvas>
 </div>
 </body>
 </html>