HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第34回 パーティクルの弾けるような動きをつくる

この記事を読むのに必要な時間:およそ 7.5 分

この連載を始めてから,はや1年半が過ぎた。実は,今回のお題が連載の締めとなる。そこで最近の解説のおさらいも兼ねて,つぎのjsdo.itのようなパーティクルを選んだ。先頃大ヒットしたディズニーアニメの雪(サウンドあり)を想い起こさせる表現だ。池田泰延(clockmaker)氏によるParticle 3000を下敷きにした。このコードがCanvas APIを使っているのに対し,本解説ではもちろんCreateJSを用いる。今回を含めた都合3回で仕上げるつもりだ。

クラスでつくったパーティクルをステージに置く

まず,アニメーションは後に回して,パーティクルをひとつステージの真ん中に置こう図1)。CreateJSのライブラリは,EaselJSを使う。そして,body要素からonload属性で,script要素に定めた初期設定の関数(initialize())を呼び出すのは毎度おなじみのとおりだ。なお,パーティクルを白くするので,Canvasの背景色は黒に定めておく。

<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 ステージの真ん中にパーティクルをひとつ置く

図1 ステージの真ん中にパーティクルをひとつ置く

パーティクルはクラス(Particle)で定める。コンストラクタには,つぎのように位置のxy座標を渡すものとする。先に,このクラスからつくったパーティクル(Particle)のオブジェクトを,ステージに置くJavaScriptコードから書いてしまおうコード1)。パーティクルをつくる関数(createParticle())が,オブジェクト(particle)をつくってステージ(stage)に加えている。

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

パーティクルのクラス(Particle)は,Shapeクラスをつぎのように継承する。これは,第18回「クラスの継承と透視投影」Shapeクラスを継承する3次元座標のクラス定義のおさらいだ。CreateJSのクラスを継承するときは,コンストラクタからinitialize()メソッドを忘れずに呼び出そう。

function Particle(x, y) {
  this.initialize();
  // ...[初期設定]...
}
Particle.prototype = new createjs.Shape();

まだアニメーションはさせないので,パーティクルのクラス(Particle)のコンストラクタはプロパティを定めて,自身のGraphicsオブジェクトに描画するメソッド(drawParticle())を呼び出すだけだ。これらコード1コード2で,ステージの真ん中に矩形のパーティクルがひとつ描かれる(前掲図1)。

コード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);
};

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入