topical media & game development
mobile-graphic-easel-examples-Sparkles.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>EaselJS Example: Using BitmapAnimation Objects</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-utils-Ticker.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Text.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-SpriteSheet.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 canvas;
var stage;
var imgSeq = new Image(); // The image for the sparkle animation
var bmpAnim; // The animated sparkle template to clone
var fpsLabel;
function init() {
// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
stage.enableDOMEvents(true)
// attach mouse handlers directly to the source canvas.
// better than calling from canvas tag for cross browser compatibility:
stage.addEventListener("stagemousemove", moveCanvas);
stage.addEventListener("stagemousedown", clickCanvas);
// define simple sprite sheet data specifying the image(s) to use, the size of the frames,
// and the registration point of the frame
// it will auto-calculate the number of frames from the image dimensions and loop them
var data = {
images:["mobile-graphic-easel-examples-assets-sparkle-21x23.png"],
frames:{width:21, height:23, regX:10, regY:11}
}
// set up an animation instance, which we will clone
bmpAnim = new createjs.BitmapAnimation(new createjs.SpriteSheet(data));
// add a text object to output the current FPS:
fpsLabel = new createjs.Text("-- fps", "bold 14px 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.setFPS(20);
createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
// loop through all of the active sparkles on stage:
var l = stage.getNumChildren();
for(var i = l - 1; i > 0; i--) {
var sparkle = stage.getChildAt(i);
// apply gravity and friction
sparkle.vY += 2;
sparkle.vX *= 0.98;
// update position, scale, and alpha:
sparkle.x += sparkle.vX;
sparkle.y += sparkle.vY;
sparkle.scaleX = sparkle.scaleY = sparkle.scaleX + sparkle.vS;
sparkle.alpha += sparkle.vA;
//remove sparkles that are off screen or not invisble
if (sparkle.alpha <= 0 || sparkle.y > canvas.height) {
stage.removeChildAt(i);
}
}
fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";
// draw the updates to stage
stage.update(event);
}
//sparkle explosion
function clickCanvas(evt) {
addSparkles(Math.random() * 200 + 100 | 0, stage.mouseX, stage.mouseY, 2);
}
//sparkle trail
function moveCanvas(evt) {
addSparkles(Math.random() * 2 + 1 | 0, stage.mouseX, stage.mouseY, 1);
}
function addSparkles(count, x, y, speed) {
//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 = bmpAnim.clone();
// set display properties:
sparkle.x = x;
sparkle.y = y;
//sparkle.rotation = Math.random()*360;
sparkle.alpha = Math.random() * 0.5 + 0.5;
sparkle.scaleX = sparkle.scaleY = Math.random() + 0.3;
// 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() | 0);
// add to the display list:
stage.addChild(sparkle);
}
}
</script>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Sparkles Demo</h1>
<p>Example showing how to use simple animated <strong>BitmapAnimation</strong> elements. Move your mouse and click
on the canvas. It also demonstrates displaying the current measured framerate with <strong>Ticker.getMeasuredFramerate()</strong>
and <strong>Text</strong>. Click repeatedly to generate lots of sparkles and slow down the framerate.<br/>
</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
(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.
