[CreateJS] トゥイーン (6) 〜override〜

CreateJSを使って、トゥイーンを学習するよ。 :bouzu:
Tweenのoverrideプロパティがどのような機能なのか確認してみた! :piyo:

createjs_tween_override
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tween [override] | 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/soundjs-0.6.1.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/button.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #header{
    display:block;
    width:600px;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
  #canvas{
    display:block;
    width:600px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>

var canvas, stage, stats;
var piyo;
var playBtn;
var tween, playing;
var type = "";
var subtitle, reached;

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

  piyo = new lib.Piyo();
  stage.addChild(piyo);
  piyo.x = canvas.width/2;
  piyo.y = 170;
  piyo.mouseEnabled = false;

  playBtn = new lib.PlayButton();
  stage.addChild(playBtn);
  playBtn.x = canvas.width/2;
  playBtn.y = 220;
  playBtn.addEventListener("click", play);
  playBtn.enabled();

  var loader = new createjs.LoadQueue(false);
  loader.installPlugin(createjs.Sound);
  loader.addEventListener("complete", complete);
  loader.loadFile({src: "assets/bound.mp3", id: "bound"});
  loader.loadFile({src: "assets/piyo.mp3", id: "se"});

  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() {
  playing = false;

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

  stats.update();
}
function play(event) {
  if (type == "") return;
  if (!playing) {
    playing = true;

    piyo.swingHead();

    switch (type) {
      case "1" :
        moveToLeft(false);
        moveToRight(false);
        break;
      case "2" :
        moveToLeft(false);
        moveToRight(true);
        break;
      case "3" :
        moveToLeft(true);
        moveToRight(false);
        break;
      case "4" :
        moveToLeft(true);
        moveToRight(true);
        break;
    }

  }

  playBtn.selected();

  reached = "";
}
function moveToLeft(value) {
  createjs.Tween.get(piyo, {override: value})
    .to({x: 100}, 1000, createjs.Ease.quadOut)
    .call(reachToLeft);
}
function moveToRight(value) {
  createjs.Tween.get(piyo, {override: value})
    .to({x: 500}, 1000, createjs.Ease.quadOut)
    .call(reachToRight);
}
function reachToLeft() {
  piyo.addEventListener("jumped", jumped);
  piyo.jump();

  reached += "reachToLeft";
}
function reachToRight() {
  piyo.addEventListener("jumped", jumped);
  piyo.jump();

  reached += "reachToRight";
}
function jumped(event) {
  piyo.removeEventListener("jumped", jumped);

  createjs.Tween.get(piyo, {override: true})
    .wait(500).to({x: 100}).call(reset);
}
function reset() {
  playing = false;

  piyo.x = 300;

  playBtn.enabled();
}
function playSound(id, volume) {
  var sound = createjs.Sound.play(id);
  sound.volume = volume;
}
function selectCase(target, selected, restore) {
  type = selected.options[selected.selectedIndex].value;
  select();
  if (restore) selected.selectedIndex = 0;
}
function select() {
  var override;
  switch (type) {
    case "1" :
      override = "{override: false} + {override: false}";
      break;
    case "2" :
      override = "{override: false} + {override: true}";
      break;
    case "3" :
      override = "{override: true} + {override: false}";
      break;
    case "4" :
      override = "{override: true} + {override: true}";
      break;
    default :
      override = "override";
      break;
  }
  subtitle.text = override;
}
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, 200);
  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("TweenJS", "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 version = new createjs.Text("[0.6.1]", "14px Myriad Pro", "#FFFFFF");
  stage.addChild(version);
  version.textAlign = "center";
  version.textBaseline = "bottom";
  version.x = canvas.width/2;
  version.y = 80;
  version.alpha = 0.6;
  subtitle = new createjs.Text("override", "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">
  <div id="header">
    <form>
      <select id=menu onchange="selectType(parent, this, 0)" name=menu>
      <option value="" selected>case</option>
      <option value="">----</option>
      <option value="1">case 1</option>
      <option value="2">case 2</option>
      <option value="3">case 3</option>
      <option value="4">case 4</option>
      </select>
    </form>
  </div>
  <canvas id="canvas" width="600" height="240" style="background-color:#FFFFFF"></canvas>
</body>
</html>


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