topical media & game development
mobile-graphic-easel-examples-SpriteSheet.htm / htm
<!DOCTYPE html>
<html>
<head>
<title>EaselJS: Sprite Sheet Example</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script src="mobile-graphic-easel-examples-assets-preloadjs-0.3.0.min.js"></script>
<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-SpriteSheet.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Bitmap.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-geom-Rectangle.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script type="text/javascript">
var assets;
var stage;
var w, h;
var sky, grant, ground, hill, hill2;
var runningRate, isInWarp, isStationary;
var stationaryPosition, isPassed;
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
document.getElementById("loader").className = "loader";
var canvas = document.getElementById("testCanvas")
stage = new createjs.Stage(canvas);
runningRate = 2.5;
isInWarp = false;
isStationary = false;
stationaryPosition = 300;
isPassed = false;
spriteSheet ={"animations": {"run": [0, 25], "jump": [26, 63]}, "images": ["mobile-graphic-easel-examples-assets-runningGrant.png"], "frames": {"regX": 0, "height": 292.5, "count": 64, "regY": 0, "width": 165.75}};
var ss = new createjs.SpriteSheet(spriteSheet);
grant = new createjs.BitmapAnimation(ss);
// Set up looping
ss.getAnimation("run").next = "run";
ss.getAnimation("jump").next = "run";
grant.gotoAndPlay("run");
// Position the Grant sprite
grant.x = -200;
grant.y = 90;
grant.scaleX = grant.scaleY = 0.8;
// grab canvas width and height for later calculations:
w = canvas.width;
h = canvas.height;
assets = [];
manifest = [
{src:"mobile-graphic-easel-examples-assets-runningGrant.png", id:"grant"},
{src:"mobile-graphic-easel-examples-assets-sky.png", id:"sky"},
{src:"mobile-graphic-easel-examples-assets-ground.png", id:"ground"},
{src:"mobile-graphic-easel-examples-assets-parallaxHill1.png", id:"hill"},
{src:"mobile-graphic-easel-examples-assets-parallaxHill2.png", id:"hill2"}
];
loader = new createjs.LoadQueue(false);
loader.onFileLoad = handleFileLoad;
loader.onComplete = handleComplete;
loader.loadManifest(manifest);
stage.autoClear = false;
}
function handleFileLoad(event) {
assets.push(event.item);
}
function handleComplete() {
for(var i=0;i<assets.length;i++) {
var item = assets[i];
var id = item.id;
var result = loader.getResult(id);
if (item.type == createjs.LoadQueue.IMAGE) {
var bmp = new createjs.Bitmap(result);
}
switch (id) {
case "sky":
sky = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0,0,w,h));
break;
case "ground":
ground = new createjs.Shape();
var g = ground.graphics;
g.beginBitmapFill(result);
g.drawRect(0, 0, w+330, 79);
ground.y = h-79;
break;
case "hill":
hill = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0,0,282,59));
hill.x = Math.random() * w;
hill.scaleX = hill.scaleY = 3;
hill.y = 144;
break;
case "hill2":
hill2 = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0,0,212,50));
hill2.x = Math.random() * w;
hill2.scaleX = hill2.scaleY = 3;
hill2.y = 171;
break;
}
}
document.getElementById("loader").className = "";
if (grant == null) {
//console.log("Can not play. Grant sprite was not loaded.");
return;
}
stage.addChild(sky, ground, hill, hill2, grant);
stage.addEventListener("stagemousedown", handleJumpStart);
createjs.Ticker.setFPS(40);
createjs.Ticker.addEventListener("tick", tick);
}
function handleJumpStart() {
grant.gotoAndPlay("jump");
}
function tick(event) {
var outside = w + 20;
var position = grant.x+runningRate;
grant.x = (position >= outside) ? -200 : position;
ground.x = (ground.x-15) % 330;
hill.x = (hill.x - 0.8);
if (hill.x + 838 <= 0) { hill.x = outside; }
hill2.x = (hill2.x - 1.2);
if (hill2.x + 633 <= 0) { hill2.x = outside; }
stage.update(event);
}
</script>
</head>
<body onload="init();">
<div id="loader"></div>
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Sprite Sheets</h1>
<p>An example of a sprite sheet using <strong>BitmapAnimation</strong>. This demos also shows playing named
animations (jump and run), and animation chaining using <strong>getAnimation("name").next</strong>.
Click the stage to initialize a jump, which will continue back into the run when it is complete.</p>
<p>Some browsers can not load images or access pixel data when running local files, and may throw a security error or not
work unless the content is running on a server.</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.
