こんにちは。
CreateJS でいろいろ試したい年頃の ひろゆき です。
今回は、ひよこちゃんをたくさん動かしてみることに挑戦してみます。
あ。そうそう。こっそり Text クラスも試しています。
HTMLソースコード
[sourcecode language=”js”]<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Piyo [carousel] | CreateJS</title>
<link rel="stylesheet" type="text/css" href="css/index.css" media="all">
<script src="js/easeljs-0.7.0.min.js"></script>
<script src="js/tweenjs-0.5.0.min.js"></script>
<script src="js/movieclip-0.7.0.min.js"></script>
<script src="js/Piyo.js"></script>
<script src="js/stats.min.js"></script>
<script>
var canvas, stage, piyos, stats;
var interval = 60;
var unit = 20;
var speed = 1;
var limit = interval*unit/2;
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);
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 title = new createjs.Text("CreateJS", "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.0]", "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;
var subtitle = new createjs.Text("carousel", "20px Myriad Pro", "#FFFFFF");
stage.addChild(subtitle);
subtitle.textAlign = "center";
subtitle.textBaseline = "bottom";
subtitle.x = canvas.width/2;
subtitle.y = 120;
subtitle.alpha = 0.6;
var publish = new createjs.Text("authoring: Sublime Text + Flash CS6 [CreateJS]", "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;
var layers = new Array();
layers.push({y: 164, scale: 0.581});
layers.push({y: 179, scale: 0.610});
layers.push({y: 196, scale: 0.641});
layers.push({y: 215, scale: 0.676});
layers.push({y: 236, scale: 0.714});
layers.push({y: 259, scale: 0.758});
layers.push({y: 285, scale: 0.806});
layers.push({y: 316, scale: 0.862});
layers.push({y: 350, scale: 0.926});
layers.push({y: 390, scale: 1});
piyos = new Array();
for (var n = 0; n < layers.length; n++) {
var layer = layers[n];
var container = new createjs.Container();
stage.addChild(container);
container.x = canvas.width/2;
container.y = layer.y;
container.scaleX = container.scaleY = layer.scale;
for (var t = 0; t < unit; t++) {
var piyo = new lib.Piyo();
container.addChild(piyo);
var frame = Math.floor(Math.random()*95);
piyo.container.base.head.eyeL.gotoAndPlay(frame);
piyo.container.base.head.eyeR.gotoAndPlay(frame);
piyo.x = interval*(t – (unit – 1)/2) + interval/2*(n%2);
piyo.y = 0;
piyos.push(piyo);
}
}
stage.update();
createjs.Ticker.setFPS(30);
//createjs.Ticker.useRAF = true;
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
//createjs.Ticker.addListener(this);
createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
for (var n = 0; n < piyos.length; n++) {
var piyo = piyos[n];
piyo.x += speed;
if (piyo.x >= limit) {
piyo.x = – limit;
}
}
stage.update();
stats.update();
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="600" height="200" style="background-color:#FFFFFF"></canvas>
</body>
</html>[/sourcecode]
ひよこちゃん200匹だと、重いです。(ToT)
Flashだと、こんな感じですけど。
Piyo [carousel] | Flash [ActionScript3.0]
[追記] (2013.06.30.)
Ticker.addListener() は非推奨になっているようなので、書き換えました。
[追記] (2013.10.30.)
CreateJS を 0.7.0 にバージョンアップ。
Ticker.useRAF は非推奨になっているようなので、書き換えました。
