単に、アニメーションするだけだがな! :piyo:
SpriteSheetクラスとSpriteクラスで表示してみたよ。 :boy:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=600” />
<title>SpriteSheet [piyo] | CreateJS</title>
<script src="js/easeljs-1.0.0.min.js"></script>
<script src="js/preloadjs-0.6.1.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-family: sans-serif;
}
#canvas{
display:block;
width:600px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
padding-left:0;
padding-right:0;
}
</style>
<script>
var canvas, stage, stats;
var loader;
var piyo1, piyo2;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
background();
loader = new createjs.LoadQueue(false);
loader.addEventListener("complete", complete);
loader.loadFile({src: "assets/piyo.png", id: "piyo"});
createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
if (createjs.Touch.isSupported()) {
createjs.Touch.enable(stage);
}
stage.update();
}
function complete(event) {
event.target.removeEventListener("complete", complete);
initialize();
}
function initialize() {
var data = {"images": ["assets/piyo.png"],"frames": [[546, 184, 54, 180], [546, 184, 54, 180], [546, 184, 54, 180], [546, 184, 54, 180], [546, 184, 54, 180], [506, 366, 54, 180], [450, 730, 54, 180], [450, 548, 54, 180], [490, 184, 54, 180], [450, 366, 54, 180], [394, 730, 54, 180], [394, 548, 54, 180], [394, 366, 54, 180], [434, 184, 54, 180], [944, 2, 54, 180], [888, 2, 54, 180], [832, 2, 54, 180], [776, 2, 54, 180], [720, 2, 54, 180], [664, 2, 54, 180], [608, 2, 54, 180], [552, 2, 54, 180], [496, 2, 54, 180], [440, 2, 54, 180], [338, 730, 54, 180], [338, 548, 54, 180], [338, 366, 54, 180], [384, 2, 54, 180], [338, 184, 54, 180], [282, 730, 54, 180], [282, 548, 54, 180], [282, 366, 54, 180], [328, 2, 54, 180], [282, 184, 54, 180], [226, 730, 54, 180], [226, 548, 54, 180], [226, 366, 54, 180], [226, 184, 54, 180], [272, 2, 54, 180], [170, 730, 54, 180], [170, 548, 54, 180], [170, 366, 54, 180], [170, 184, 54, 180], [170, 2, 54, 180], [114, 730, 54, 180], [114, 548, 54, 180], [114, 366, 54, 180], [114, 184, 54, 180], [114, 2, 54, 180], [58, 730, 54, 180], [58, 548, 54, 180], [58, 366, 54, 180], [58, 184, 54, 180], [58, 2, 54, 180], [2, 730, 54, 180], [2, 548, 54, 180], [2, 366, 54, 180], [2, 184, 54, 180], [2, 2, 54, 180], [546, 184, 54, 180], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [506, 816, 52, 65], [506, 749, 52, 65], [506, 682, 52, 65], [506, 615, 52, 65], [506, 548, 52, 65], [488, 912, 52, 65], [506, 548, 52, 65], [506, 615, 52, 65], [506, 682, 52, 65], [506, 749, 52, 65], [506, 816, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [434, 912, 52, 65], [380, 912, 52, 65], [326, 912, 52, 65], [272, 912, 52, 65], [218, 912, 52, 65], [164, 912, 52, 65], [110, 912, 52, 65], [56, 912, 52, 65], [2, 912, 52, 65]],"animations": {"piyo": [60, 119], "jumper": [0, 59]}};
var spritesheet = new createjs.SpriteSheet(data);
piyo1 = new createjs.Sprite(spritesheet, "piyo");
stage.addChild(piyo1);
piyo1.x = 240;
piyo1.y = 175;
piyo1.regX = 26;
piyo1.regY = 59;
piyo1.play();
piyo2 = new createjs.Sprite(spritesheet, "jumper");
stage.addChild(piyo2);
piyo2.x = 360;
piyo2.y = 175;
piyo2.regX = 27;
piyo2.regY = 168;
piyo2.play();
createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
stage.update();
stats.update();
}
function background() {
var sky = new createjs.Shape();
stage.addChild(sky);
sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 150);
sky.graphics.drawRect(0, 0, 600, 150);
var ground = new createjs.Shape();
stage.addChild(ground);
ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 150, 0, 50);
ground.graphics.drawRect(0, 150, 600, 50);
var basic = new createjs.Text("HTML5 / CreateJS [1.0.0]”, "14px Myriad Pro", "#FFFFFF");
stage.addChild(basic);
basic.textAlign = "left";
basic.textBaseline = "bottom";
basic.x = 10;
basic.y = 20;
basic.alpha = 0.6;
var title = new createjs.Text("SpriteSheet", "24px Myriad Pro", "#FFFFFF");
stage.addChild(title);
title.textAlign = "center";
title.textBaseline = "bottom";
title.x = canvas.width/2;
title.y = 65;
title.alpha = 0.6;
var subtitle = new createjs.Text("[piyo]", "20px Myriad Pro", "#FFFFFF");
stage.addChild(subtitle);
subtitle.textAlign = "center";
subtitle.textBaseline = "bottom";
subtitle.x = canvas.width/2;
subtitle.y = 110;
subtitle.alpha = 0.6;
var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#FFFFFF");
stage.addChild(publish);
publish.textAlign = "right";
publish.textBaseline = "bottom";
publish.x = canvas.width - 10;
publish.y = 20;
publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
<canvas id="canvas" width="600" height="200" style="background-color:#FFFFFF"></canvas>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name=”viewport” content=”width=600” />
<title>SpriteSheet [piyo] | CreateJS</title>
<script src="js/easeljs-1.0.0.min.js"></script>
<script src="js/preloadjs-0.6.1.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
html, body {
margin:0;
padding:0;
font-family: sans-serif;
}
#canvas{
display:block;
width:600px;
margin-top:50px;
margin-left:auto;
margin-right:auto;
padding-left:0;
padding-right:0;
}
</style>
<script>
var canvas, stage, stats;
var loader;
var piyo1, piyo2;
function init() {
stats = new Stats();
stats.setMode(0);
stats.domElement.style.position = "fixed";
stats.domElement.style.right = "0px";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
canvas = document.getElementById("canvas");
stage = new createjs.Stage(canvas);
background();
loader = new createjs.LoadQueue(false);
loader.addEventListener("complete", complete);
loader.loadFile({src: "assets/piyo.png", id: "piyo"});
createjs.Ticker.framerate = 60;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
if (createjs.Touch.isSupported()) {
createjs.Touch.enable(stage);
}
stage.update();
}
function complete(event) {
event.target.removeEventListener("complete", complete);
initialize();
}
function initialize() {
var data = {"images": ["assets/piyo.png"],"frames": [[546, 184, 54, 180], [546, 184, 54, 180], [546, 184, 54, 180], [546, 184, 54, 180], [546, 184, 54, 180], [506, 366, 54, 180], [450, 730, 54, 180], [450, 548, 54, 180], [490, 184, 54, 180], [450, 366, 54, 180], [394, 730, 54, 180], [394, 548, 54, 180], [394, 366, 54, 180], [434, 184, 54, 180], [944, 2, 54, 180], [888, 2, 54, 180], [832, 2, 54, 180], [776, 2, 54, 180], [720, 2, 54, 180], [664, 2, 54, 180], [608, 2, 54, 180], [552, 2, 54, 180], [496, 2, 54, 180], [440, 2, 54, 180], [338, 730, 54, 180], [338, 548, 54, 180], [338, 366, 54, 180], [384, 2, 54, 180], [338, 184, 54, 180], [282, 730, 54, 180], [282, 548, 54, 180], [282, 366, 54, 180], [328, 2, 54, 180], [282, 184, 54, 180], [226, 730, 54, 180], [226, 548, 54, 180], [226, 366, 54, 180], [226, 184, 54, 180], [272, 2, 54, 180], [170, 730, 54, 180], [170, 548, 54, 180], [170, 366, 54, 180], [170, 184, 54, 180], [170, 2, 54, 180], [114, 730, 54, 180], [114, 548, 54, 180], [114, 366, 54, 180], [114, 184, 54, 180], [114, 2, 54, 180], [58, 730, 54, 180], [58, 548, 54, 180], [58, 366, 54, 180], [58, 184, 54, 180], [58, 2, 54, 180], [2, 730, 54, 180], [2, 548, 54, 180], [2, 366, 54, 180], [2, 184, 54, 180], [2, 2, 54, 180], [546, 184, 54, 180], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [506, 816, 52, 65], [506, 749, 52, 65], [506, 682, 52, 65], [506, 615, 52, 65], [506, 548, 52, 65], [488, 912, 52, 65], [506, 548, 52, 65], [506, 615, 52, 65], [506, 682, 52, 65], [506, 749, 52, 65], [506, 816, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [542, 883, 52, 65], [434, 912, 52, 65], [380, 912, 52, 65], [326, 912, 52, 65], [272, 912, 52, 65], [218, 912, 52, 65], [164, 912, 52, 65], [110, 912, 52, 65], [56, 912, 52, 65], [2, 912, 52, 65]],"animations": {"piyo": [60, 119], "jumper": [0, 59]}};
var spritesheet = new createjs.SpriteSheet(data);
piyo1 = new createjs.Sprite(spritesheet, "piyo");
stage.addChild(piyo1);
piyo1.x = 240;
piyo1.y = 175;
piyo1.regX = 26;
piyo1.regY = 59;
piyo1.play();
piyo2 = new createjs.Sprite(spritesheet, "jumper");
stage.addChild(piyo2);
piyo2.x = 360;
piyo2.y = 175;
piyo2.regX = 27;
piyo2.regY = 168;
piyo2.play();
createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
stage.update();
stats.update();
}
function background() {
var sky = new createjs.Shape();
stage.addChild(sky);
sky.graphics.beginLinearGradientFill(["#0069A0", "#00AAE4"], [0, 1], 0, 0, 0, 150);
sky.graphics.drawRect(0, 0, 600, 150);
var ground = new createjs.Shape();
stage.addChild(ground);
ground.graphics.beginLinearGradientFill(["#99CC33", "#7EB133"], [0, 1], 0, 150, 0, 50);
ground.graphics.drawRect(0, 150, 600, 50);
var basic = new createjs.Text("HTML5 / CreateJS [1.0.0]”, "14px Myriad Pro", "#FFFFFF");
stage.addChild(basic);
basic.textAlign = "left";
basic.textBaseline = "bottom";
basic.x = 10;
basic.y = 20;
basic.alpha = 0.6;
var title = new createjs.Text("SpriteSheet", "24px Myriad Pro", "#FFFFFF");
stage.addChild(title);
title.textAlign = "center";
title.textBaseline = "bottom";
title.x = canvas.width/2;
title.y = 65;
title.alpha = 0.6;
var subtitle = new createjs.Text("[piyo]", "20px Myriad Pro", "#FFFFFF");
stage.addChild(subtitle);
subtitle.textAlign = "center";
subtitle.textBaseline = "bottom";
subtitle.x = canvas.width/2;
subtitle.y = 110;
subtitle.alpha = 0.6;
var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#FFFFFF");
stage.addChild(publish);
publish.textAlign = "right";
publish.textBaseline = "bottom";
publish.x = canvas.width - 10;
publish.y = 20;
publish.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
<canvas id="canvas" width="600" height="200" style="background-color:#FFFFFF"></canvas>
</body>
</html>
スプライトシートは「TexturePacker」というツールで作成。 :doki:
データ形式は「EaselJS」でパブリッシュ。(トリムモード: None)
:check: 「TexturePacker - Sprite sheet maker, image packer and optimizer | TexturePacker | Sprite sheet creation and image optimization」
piyo.png (縮小50%)

[修正] (14/12/17 Wed 14:00)
CreateJS 0.8.0 にバージョンアップ。
[修正] (15/09/20 Sun 21:44)
CreateJS 0.8.1 にバージョンアップ。
[修正] (19/12/22 Sat 14:22)
CreateJS 1.0.0 にバージョンアップ。