[CreateJS] 動的スプライトシート (3) ~SpriteSheetBuilder, Container~

CreateJSを使って、SpriteSheetBuilderクラスを学習するよ。 :bouzu:
Containerクラスでアニメーション配置して、スプライトシートを動的に生成してみるよ。 :boy:

createjs_spritesheetbuilder3

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

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteSheetBuilder [Container] | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/tweenjs-0.6.1.min.js"></script>
<script src="js/movieclip-0.8.1.min.js"></script>
<script src="js/piyo.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;
  }
  #footer{
    display:block;
    width:512px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>

var canvas, stage, stats;
var builder;
var piyo;

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();
  initialize();

  createjs.Ticker.setFPS(60);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
  stage.update();
}
function initialize() {
  builder = new createjs.SpriteSheetBuilder();
  builder.maxWidth = 512;
  builder.padding = 2;

  var container = new createjs.Container();
  var mc = new lib.Piyo();
  container.addChild(mc);
  container.mc = mc;
  var txt = new createjs.Text("", "bold 16px Arial", "#333333");
  container.addChild(txt);
  container.txt = txt;
  txt.textAlign = "center";
  txt.textBaseline = "middle";
  txt.y = -9;
  txt.alpha = 0.8;
  var cap = new createjs.Shape();
  container.addChild(cap);
  container.cap = cap;
  cap.graphics.setStrokeStyle(2);
  cap.graphics.beginStroke("#000000");
  cap.graphics.beginLinearGradientFill(["#FF0000", "#660000"], [0, 1], -10, 0, 20, 0);
  cap.graphics.moveTo(-10, 0);
  cap.graphics.lineTo(10, 0);
  cap.graphics.lineTo(14, 10);
  cap.graphics.bezierCurveTo(14, 10, 0, 14, -14, 10);
  cap.graphics.lineTo(-10, 0);
  cap.graphics.endFill();
  cap.y = -65;

  var rect = new createjs.Rectangle(-26, -70, 52, 76)
  var frames = [];
  for (var n = 0; n < 60; n++) {
    var index = builder.addFrame(container, rect, 1, setup, n);
    frames.push(index);
  }
  builder.addAnimation("piyo", frames);

  var spritesheet = builder.build();

  piyo = new createjs.Sprite(spritesheet, 0);
  stage.addChild(piyo);
  piyo.x = canvas.width/2;
  piyo.y = 175;
  piyo.play();

  window.footer.appendChild(spritesheet._images[0]);

  createjs.Ticker.addEventListener("tick", update);
}
function setup(target, data) {
  target.mc.gotoAndStop(data);
  target.txt.text = String(data + 1);
  var hue = (6*data + 180)%360 - 180;
  var matrix = new createjs.ColorMatrix().adjustHue(hue).adjustBrightness(51);
  var colorfilter = new createjs.ColorMatrixFilter(matrix);
  target.cap.filters = [colorfilter];
  target.cap.cache(-14, -2, 28, 16);
}
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("SpriteSheetBuilder", "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("[Container]", "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>
  <div id="footer"></div>
</body>
</html>


[修正] (15/09/21 Mon 00:56)
CreateJS 0.8.1 にバージョンアップ。