topical media & game development
mobile-graphic-easel-examples-SpriteSheetBuilder.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-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-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-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-utils-SpriteSheetBuilder.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;
function init() {
//find canvas and load images, wait for last image to load
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
// set up a couple of display objects which will act as source material, and add them to the stage:
var circle = new createjs.Shape();
circle.graphics.beginFill("#F00").drawCircle(0,0,30).beginFill("#C00").drawCircle(0,0,10);
circle.setTransform(100,90);
var square = new createjs.Container();
var squareBg = square.addChild(new createjs.Shape());
squareBg.graphics.beginFill("#00F").drawRect(0,0,80,80);
var squareFld = square.addChild(new createjs.Text("1", "bold 72px Arial", "#9BF"));
squareFld.textBaseline = "top";
squareFld.textAlign = "center";
squareFld.x = 40;
square.setTransform(150,50);
// we'll define the bounds of this shape here, and it will be used when we addFrame:
square.bounds = new createjs.Rectangle(0,0,80,80);
stage.addChild(circle, square);
// create the sprite sheet builder:
var builder = new createjs.SpriteSheetBuilder();
// add the circle as a frame, specify the bounds to draw, and grab the frame index:
var index = builder.addFrame(circle, new createjs.Rectangle(-30,-30,60,60));
// add a named animation using the frame index:
builder.addAnimation("circle", index);
// add the square as a sequence of frames, each with a different number in the text field:
var frames = [];
for (var i=0; i<5; i++) {
// we're defining a setup function that will update the text before each frame draw.
// the setup function will be called right before the draw, and passed the setup params "[i]":
index = builder.addFrame(square, null, 1, function(num) { squareFld.text=num; }, [i]);
// save off the index of each frame in order to use when defining the animation:
frames.push(index);
}
// create an animation named square that comprises all of the frames we just added:
// we're also telling it to loop the animation and setting a frequency so it updates every 8 ticks:
builder.addAnimation("square", frames, true, 8);
// run the build operation, and grab the resulting sprite sheet:
// we could also do this asynchronously with buildAsync(...)
var spriteSheet = builder.build();
// create our bitmap animations using the generated sprite sheet, and put them on stage:
var circle2 = new createjs.BitmapAnimation(spriteSheet);
circle2.gotoAndPlay("circle");
circle2.setTransform(100,90+100);
stage.addChild(circle2);
var square2 = new createjs.BitmapAnimation(spriteSheet);
square2.gotoAndPlay("square");
square2.setTransform(150,50+100);
stage.addChild(square2);
// append the generated spritesheet image for demo purposes:
document.body.appendChild(spriteSheet._images[0]);
// we want to do some work before we update the canvas,
// otherwise we could use Ticker.addEventListener("tick", stage);
createjs.Ticker.addEventListener("tick", stage);
}
</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 at run time.</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.
