Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 69 lines (55 sloc) 1.93 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>EaselJS: Simple SpriteSheet 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>
<script src="../lib/easeljs-NEXT.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries. -->
<script id="editable">
var stage;
function init() {
// create a new stage and point it at our canvas:
stage = new createjs.Stage(document.getElementById("testCanvas"));
// Define a spritesheet. Note that this data was exported by Zoë.
var spriteSheet = new createjs.SpriteSheet({
framerate: 30,
"images": ["../_assets/art/spritesheet_grant.png"],
"frames": {"regX": 82, "height": 292, "count": 64, "regY": 0, "width": 165},
// define two animations, run (loops, 1.5x speed) and jump (returns to run):
"animations": {
"run": [0, 25, "run", 1.5],
"jump": [26, 63, "run"]
// Events from SpriteSheet (not required for the demo)
spriteSheet.on("complete", function(event) {
console.log("Complete", event);
spriteSheet.on("error", function(event) {
console.log("Error", event);
var grant = new createjs.Sprite(spriteSheet, "run");
grant.x = stage.canvas.width / 2;
grant.y = 22;
// Add Grant to the stage, and add it as a listener to Ticker to get updates each frame.
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", stage);
<body onload="init();">
<header class="EaselJS">
<h1>Simple SpriteSheet Example</h1>
<p>A simple example of defining a <code>SpriteSheet</code> and playing it
back using <code>Sprite</code>.</p>
<canvas id="testCanvas" width="960" height="400"></canvas>
You can’t perform that action at this time.