この連載を始めてから，
クラスでつくったパーティクルをステージに置く
まず，
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script>
var stage;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stage = new createjs.Stage(canvasElement);
// ...[初期設定]...
}
</script>
<body onLoad="initialize()">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
図1 ステージの真ん中にパーティクルをひとつ置く
パーティクルはクラス
new Particle(x座標, y座標)
コード1 クラスからつくったパーティクルをひとつステージに置く
var stage;
var stageWidth;
var stageHeight;
var particle;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stageWidth = canvasElement.width;
stageHeight = canvasElement.height;
stage = new createjs.Stage(canvasElement);
createParticle();
stage.update();
}
function createParticle() {
particle = new Particle(stageWidth / 2, stageHeight / 2);
stage.addChild(particle);
}
パーティクルのクラス
function Particle(x, y) {
this.initialize();
// ...[初期設定]...
}
Particle.prototype = new createjs.Shape();
まだアニメーションはさせないので，
コード2 パーティクルを定めるクラス
function Particle(x, y) {
this.initialize();
this.x = x;
this.y = y;
this.radius = 4;
this.drawParticle();
}
Particle.prototype = new createjs.Shape();
Particle.prototype.drawParticle = function () {
var size = this.radius * 2;
this.graphics.beginFill("white")
.drawRect(-this.radius, -this.radius, size, size);
};
