[CreateJS] 疑似3Dの直方体

CreateJSを使って、疑似3Dで直方体を回転させてみた。 :bouzu:

createjs_cuboid

EaselJS 0.8.1 から、点線が描けるようになったので、使ってみた。

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cuboid | CreateJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/Cuboid.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #header{
    display:block;
    width:600px;
    height: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 cuboid;
var bw = 600, bh = 400;
var speed = 1;

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

  createjs.Ticker.setFPS(30);
  createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

  background();
  initialize();
  start();
}
function initialize() {
  cuboid = new Cuboid(200, 250, 150, 0.3, 2, "#000000");
  stage.addChild(cuboid);
  cuboid.x = bw/2;
  cuboid.y = 300;
  cuboid.surfaces({top: "rgba(51, 204, 255, 0.6)", side: "rgba(102, 204, 0, 0.6)"});
  cuboid.angle = 0;
  cuboid.update();

  stage.update();
}
function start() {
  createjs.Ticker.addEventListener("tick", update);
}
function update(event) {
  cuboid.angle += speed;
  cuboid.update();

  stage.update();

  stats.update();
}
function transit() {
  id = (id + 1)%max;
  mosaic(dots[id]);
}
function selectSpeed(target, selected, restore) {
  if (selected.options[selected.selectedIndex].value != "") {
    speed = Number(selected.options[selected.selectedIndex].value);
  }
}

function background() {
  var basic = new createjs.Text("HTML5 / CreateJS [0.8.1]", "14px Arial", "#000000");
  stage.addChild(basic);
  basic.textAlign = "left";
  basic.textBaseline = "top";
  basic.x = 4;
  basic.y = 2;
  basic.alpha = 0.6;
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <div id="header">
    <form>
      <select id=menu onchange="selectSpeed(parent, this, 0)" name=menu>
      <option value="0.5">speed: 0.5</option>
      <option value="1" selected>speed: 1</option>
      <option value="2">speed: 2</option>
      <option value="3">speed: 3</option>
      <option value="4">speed: 4</option>
      <option value="5">speed: 5</option>
      </select>
    </form>
  </div>
  <canvas id="canvas" width="640" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>


:caution: 実線と点線が混在する場合の注意点
//実線を引く (通常)
graphics.setStrokeStyle(2).beginStroke("#000000");

//点線を引く (実線と点線が混在する場合)
graphics.setStrokeStyle(2).beginStroke("#000000").setStrokeDash([6, 4], 0);

//実線を引く (実線と点線が混在する場合)
graphics.setStrokeStyle(2).beginStroke("#000000").setStrokeDash(null);