[CreateJS] カウントダウン (2) ~BitmapText, SpriteSheet~

CreateJSを使って、カウントダウンさせてみるよ。 :bouzu:

createjs_countdown2

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

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BitmapText + SpriteSheet [count down] | 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/preloadjs-0.6.1.min.js"></script>
<script src="js/button.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:480px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>

var canvas, stage, stats;
var fill;
var txt, timer;
var spritesheet, spritesheet_timeout;
var limit = 15;
var count = limit;
var startBtn;

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

  startBtn = new lib.StartButton();
  stage.addChild(startBtn);
  startBtn.x = canvas.width/2;
  startBtn.y = 320;
  startBtn.addEventListener("click", start);
  startBtn.enabled();

  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("complete", complete);
  loader.loadFile({src: "assets/font.png", id: "font"});
  loader.loadFile({src: "assets/font_timeout.png", id: "font_timeout"});

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(stage);
  }
  stage.enableMouseOver(10);
  stage.update();
}
function complete(event) {
  event.target.removeEventListener("complete", complete);

  initialize();
}
function initialize() {
  var base = new createjs.Shape();
  stage.addChild(base);
  fill = base.graphics.beginFill("#33CCFF").command;
  base.graphics.drawCircle(0, 0, 90);
  base.graphics.endFill();
  base.x = canvas.width/2;
  base.y = 165;

  var data = {
    "images": ["assets/font.png"],
    "frames": [[354, 116, 86, 112, 0, 0, 50], [354, 2, 86, 112, 0, 0, 50], [266, 116, 86, 112, 0, 0, 50], [266, 2, 86, 112, 0, 0, 50], [178, 116, 86, 112, 0, 0, 50], [178, 2, 86, 112, 0, 0, 50], [90, 116, 86, 112, 0, 0, 50], [90, 2, 86, 112, 0, 0, 50], [2, 116, 86, 112, 0, 0, 50], [2, 2, 86, 112, 0, 0, 50]],
    "animations": {"0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9}
  };
  spritesheet = new createjs.SpriteSheet(data);
  var data_timeout = {
    "images": ["assets/font_timeout.png"],
    "frames": [[354, 116, 86, 112, 0, 0, 50], [354, 2, 86, 112, 0, 0, 50], [266, 116, 86, 112, 0, 0, 50], [266, 2, 86, 112, 0, 0, 50], [178, 116, 86, 112, 0, 0, 50], [178, 2, 86, 112, 0, 0, 50], [90, 116, 86, 112, 0, 0, 50], [90, 2, 86, 112, 0, 0, 50], [2, 116, 86, 112, 0, 0, 50], [2, 2, 86, 112, 0, 0, 50]],
    "animations": {"0": 0, "1": 1, "2": 2, "3": 3, "4": 4, "5": 5, "6": 6, "7": 7, "8": 8, "9": 9}
  };
  spritesheet_timeout = new createjs.SpriteSheet(data_timeout);

  txt = new createjs.BitmapText("", spritesheet);
  stage.addChild(txt);
  txt.x = canvas.width/2;
  txt.y = 165;
  txt.letterSpacing = -16;
  display(limit);

  createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
  stage.update();

  stats.update();
}
function start(event) {
  startTimer();

  startBtn.selected();
}
function startTimer() {
  clearTimer();
  timer = setInterval(countdown, 1000);
}
function countdown() {
  if (count > 0) {
    count -;
    display(count);
  } else {
    clearTimer();
    setTimeout(timeout, 2000);
  }
  if (count > 5) {
    fill.style = "#33CCFF";
    txt.spriteSheet = spritesheet;
  } else {
    fill.style = "#FF99CC";
    txt.spriteSheet = spritesheet_timeout;
  }
}
function clearTimer() {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
}
function timeout() {
  fill.style = "#33CCFF";
  txt.spriteSheet = spritesheet;
  count = limit;
  txt.text = count;

  startBtn.enabled();
}
function display(value) {
  txt.text = String(value);
  var bounds = txt.getBounds();
  txt.regX = bounds.width >> 1;
}
function background() {
  var back = new createjs.Shape();
  stage.addChild(back);
  back.graphics.beginFill("#E6E6E6");
  back.graphics.drawRect(0, 0, 480, 300);
  back.graphics.endFill();

  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Myriad Pro", "#000000");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "bottom";
  basic.x = 10;
  basic.y = 20;
  basic.alpha = 0.6;
  var title = new createjs.Text("BitmapText + SpriteSheet", "24px Myriad Pro", "#000000");
  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("[count down]", "20px Myriad Pro", "#000000");
  stage.addChild(subtitle);
  subtitle.textAlign = "center";
  subtitle.textBaseline = "bottom";
  subtitle.x = canvas.width/2;
  subtitle.y = 290;
  subtitle.alpha = 0.6;
  var publish = new createjs.Text("authoring: Sublime Text 2 + Flash CC", "14px Myriad Pro", "#000000");
  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="480" height="340" 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

font.png (縮小50%)

createjs_countdown_font
font_timeout.png (縮小50%)

createjs_countdown_font_timeout


[修正] (15/09/20 Sun 23:53)
CreateJS 0.8.1 にバージョンアップ。