Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
156 lines (130 sloc) 4.578 kB
<!DOCTYPE html>
<html>
<head>
<title>EaselJS: Sprite Sheet Example</title>
<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
<script src="../_assets/js/examples.js"></script>
</head>
<body onload="init();">
<header class="EaselJS">
<h1>Sprite Sheets</h1>
<p>An example of the <code>SpriteSheetLoader</code>, which automatically parses loaded JSON, and will internally preload
associated images and instantiate a <code>SpriteSheet</code> instance before the <code>complete</code> event is fired.</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>
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
<script src="../_assets/libs/easeljs-NEXT.min.js"></script>
<script type="text/javascript" src="../lib/preloadjs-NEXT.combined.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script type="text/javascript" id="editable">
var assets;
var stage;
var w, h;
var sky, grant, ground, hill, hill2;
var runningRate, isInWarp, isStationary;
var stationaryPosition, isPassed, spriteSheet;
function init() {
examples.showDistractor();
var canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
runningRate = 2.5;
isInWarp = false;
isStationary = false;
stationaryPosition = 300;
isPassed = false;
// grab canvas width and height for later calculations:
w = canvas.width;
h = canvas.height;
assets = [];
manifest = [
{src: "../_assets/art/sky.png", id: "sky"},
{src: "../_assets/art/ground.png", id: "ground"},
{src: "../_assets/art/hill2.png", id: "hill2"},
{src: "../_assets/art/hill1.png", id: "hill"},
{src: "../_assets/static/grant.json", id:"grant", type:"spritesheet"}
];
var loader = new createjs.LoadQueue();
loader.on("fileload", handleFileLoad);
loader.on("complete", handleComplete);
loader.loadManifest(manifest);
stage.autoClear = false;
}
function handleFileLoad(event) {
assets.push(event);
}
function handleComplete() {
for (var i = 0; i < assets.length; i++) {
var event = assets[i];
var id = event.item.id;
var result = event.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.f("#f00");
g.beginBitmapFill(result);
g.drawRect(0, 0, w + 330, 79);
ground.y = h - 79;
break;
case "hill":
// Vertically offset the pattern fill by 1 to solve a Chrome bug on BitmapFills
hill = new createjs.Shape(new createjs.Graphics().f("#f00").beginBitmapFill(result).drawRect(0, 1, 282, 60));
hill.x = Math.random() * w | 0;
hill.scaleX = hill.scaleY = 3;
hill.y = 144;
break;
case "hill2":
hill2 = new createjs.Shape(new createjs.Graphics().beginBitmapFill(result).drawRect(0, 1, 212, 51));
hill2.x = Math.random() * w | 0;
hill2.scaleX = hill2.scaleY = 3;
hill2.y = 171;
break;
case "grant":
var spriteSheet = result;
spriteSheet.getAnimation("run").next = "run";
spriteSheet.getAnimation("jump").next = "run";
grant = new createjs.Sprite(spriteSheet, "run")
.set({x: -200, y:40, scaleX:0.8, scaleY:0.8});
}
}
examples.hideDistractor();
if (grant == null) {
console.error("Can not play. Grant sprite was not loaded.");
return;
}
stage.addChild(sky, hill, hill2, ground, grant);
stage.on("mousedown", handleJumpStart);
createjs.Ticker.setFPS(40);
createjs.Ticker.on("tick", tick);
}
function handleJumpStart() {
grant.gotoAndPlay("jump");
}
function tick() {
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();
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.