[CreateJS] スプライトシート (1) 〜SpriteSheet, Sprite〜

CreateJSを使って、スプライトシートを学習するよ。 :bouzu:
単に、アニメーションするだけだがな! :piyo:

createjs_spritesheet1

SpriteSheetクラスSpriteクラスで表示してみたよ。 :boy:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteSheet [piyo] | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/preloadjs-0.6.1.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:600px;
    margin-top:40px;
    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();

  var manifest = [
    {src: "assets/piyo.png", id: "piyo"},
    {src: "assets/piyo_jumper.png", id: "piyo_jumper"}
  ];
  loader = new createjs.LoadQueue(false);
  loader.addEventListener("complete", complete);
  loader.loadManifest(manifest);

  createjs.Ticker.setFPS(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 data1 = {"images": ["assets/piyo.png"],"frames": [[164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [110, 203, 52, 65], [56, 203, 52, 65], [2, 203, 52, 65], [164, 136, 52, 65], [110, 136, 52, 65], [56, 136, 52, 65], [110, 136, 52, 65], [164, 136, 52, 65], [2, 203, 52, 65], [56, 203, 52, 65], [110, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [164, 203, 52, 65], [2, 136, 52, 65], [164, 69, 52, 65], [110, 69, 52, 65], [56, 69, 52, 65], [2, 69, 52, 65], [164, 2, 52, 65], [110, 2, 52, 65], [56, 2, 52, 65], [2, 2, 52, 65]],"animations": {"piyo":[0, 59]}};

  var spritesheet1 = new createjs.SpriteSheet(data1);

  piyo1 = new createjs.Sprite(spritesheet1, 0);
  stage.addChild(piyo1);
  piyo1.x = 240;
  piyo1.y = 175;
  piyo1.regX = 26;
  piyo1.regY = 59;
  piyo1.play();

  var data2 = {"images": ["assets/piyo_jumper.png"],"frames": [[674, 184, 54, 180], [674, 184, 54, 180], [674, 184, 54, 180], [674, 184, 54, 180], [674, 184, 54, 180], [618, 184, 54, 180], [562, 184, 54, 180], [506, 184, 54, 180], [450, 184, 54, 180], [394, 730, 54, 180], [394, 548, 54, 180], [394, 366, 54, 180], [394, 184, 54, 180], [338, 730, 54, 180], [338, 548, 54, 180], [338, 366, 54, 180], [338, 184, 54, 180], [282, 730, 54, 180], [282, 548, 54, 180], [282, 366, 54, 180], [282, 184, 54, 180], [954, 2, 54, 180], [898, 2, 54, 180], [842, 2, 54, 180], [786, 2, 54, 180], [730, 2, 54, 180], [674, 2, 54, 180], [618, 2, 54, 180], [562, 2, 54, 180], [506, 2, 54, 180], [450, 2, 54, 180], [394, 2, 54, 180], [338, 2, 54, 180], [282, 2, 54, 180], [226, 730, 54, 180], [226, 548, 54, 180], [226, 366, 54, 180], [226, 184, 54, 180], [226, 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], [674, 184, 54, 180]],"animations": {"piyo_jumper":[0, 59]}};

  var spritesheet2 = new createjs.SpriteSheet(data2);

  piyo2 = new createjs.Sprite(spritesheet2);
  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 [0.8.1]", "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%)

createjs_spritesheet_piyo

piyo_jumper.png (縮小50%)

createjs_spritesheet_piyo_jumper


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