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

第2回　トゥイーンをランダムに定める

HTML5, Canvas, CreateJS, アニメーション, トゥイーンアニメーション

この記事を読むのに必要な時間：およそ 5.5 ～ 6.5 分

前回の第1回は，CreateJSのTweenJSライブラリでオブジェクトの座標をトゥイーンさせた。このトゥイーンにランダムな繰返しの動きを加えていく。

たが，その前にやらなければならないことがある。第1回が公開された2月14日（日本時間）に，CreateJSの新バージョンがリリースされた。その対応を先に済ませておきたい。

CreateJS新バージョンに対応した修正を加える

第1回には，コード2としてつぎのようなJavaScriptコードを書いた。このスクリプトに，CreateJS新バージョンに対応するための修正を加える。

第1回 コード2　時間と位置をランダムに定めてトゥイーンアニメーションする（再掲）

var stage;
var myBitmap;
var top = 0;
var bottom;
var right;
function initialize() {
  canvasObject = document.getElementById("myCanvas");
  var file = "images/Pen.png";
  var loader = new createjs.PreloadJS(false);
  right = canvasObject.width;
  bottom = canvasObject.height;
  stage = new createjs.Stage(canvasObject);
  loader.onFileLoad = draw;
  loader.loadFile(file);
}
function draw(eventObject) {
  var myImage = eventObject.result;
  var halfWidth = myImage.width / 2;
  var halfHeight = myImage.height / 2;
  top += halfHeight;
  bottom -= halfHeight;
  right -= halfWidth;
  myBitmap = new createjs.Bitmap(myImage);
  myBitmap.regX = halfWidth;
  myBitmap.regY = halfHeight;
  myBitmap.x = halfWidth;
  myBitmap.y = (top + bottom) / 2;
  stage.addChild(myBitmap);
  stage.update();
  setRandomTween(myBitmap);
  createjs.Ticker.addListener(window);
}
function setRandomTween(target) {
  var nextY = Math.random() * (bottom - top) + top;
  var nextPoint = new createjs.Point(right, nextY);
  var randomTime = Math.random() * 5000 + 1000;
  setTween(target, nextPoint, randomTime, createjs.Ease.bounceOut);
}
function setTween(target, myPoint, time, easing) {
  createjs.Tween.get(target)
  .to({x:myPoint.x, y:myPoint.y}, time, easing);
}
function tick() {
  stage.update();
}

まず，script要素に読込むCrateJSのJavaScriptファイルのバージョンが変わる。「⁠CreateJS CDN Libraries」を見ると，EaselJSが0.6.0，PreloadJSは0.3.0，TweenJSは0.4.0と，いずれも0.1上がっている。

<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.3.0.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.4.0.min.js"></script>

第1回コード2のJavaScriptをそのままにして実行すると，動かない。PreloadJSライブラリの名前はそのまま変わらないものの，クラス名はPreloadJSからLoadQueueに変更されたからだ。このクラス名を変えれば，取りあえずはトゥイーンアニメーションが見られるようにはなる。

しかし，新CreateJSでは，イベントを扱う仕組みが新しくなった。前回はイベントにはハンドラを定めて扱うと解説した（⁠「⁠画像ファイルを読込んでCanvasに描く」参照⁠）⁠。このイベントハンドラも，当面は残されている。だから，上記の修正だけでも，アニメーションは動いた。

オブジェクト.イベント = ハンドラ

けれども，これからは「イベントリスナー」でイベントを扱うことが推奨されている。イベントリスナーの仕組みでは，addEventListener()メソッドでイベントに関数を登録する。この関数を「リスナー」と呼ぶ。なお，メソッドの第1引数には，イベント名を文字列で渡す。

オブジェクト.addEventListener(イベント名, リスナー)

すると，PreloadJSによる画像ファイルの読込みは，クラス名をLoadQueueに置き換えるだけでなく，読込み終えたときのイベント（"fileload"）に関数（draw()）をaddEventListener()メソッドで加えることになる。

function initialize() {
  canvasObject = document.getElementById("myCanvas");
  var file = "images/Pen.png";
  // var loader = new createjs.PreloadJS(false);
  var loader = new createjs.LoadQueue(false);
  right = canvasObject.width;
  bottom = canvasObject.height;
  stage = new createjs.Stage(canvasObject);
  // loader.onFileLoad = draw;
  loader.addEventListener("fileload", draw);
  loader.loadFile(file);
}

前掲第1回コード2では，もうひとつイベントの扱いがある。Tickerクラスだ。Ticker.addListener()メソッドの替わりに，やはりTicker.addEventListener()メソッドで"tick"イベントにリスナー関数を加える。つまり，イベントはすべてaddEventListener()メソッドによりリスナーで扱うように統一されたのだ。

function draw(eventObject) {
  // createjs.Ticker.addListener(window);
  createjs.Ticker.addEventListener("tick", tick);
}
function tick() {
  stage.update();
}

上記のようにステートメントを書き替えれば，新CreateJSでトゥイーンアニメーションが正しく動く。ただ，ここでTickerのリスナー関数（tick()）が行っているのは，Stage.update()メソッドの呼出しだけだ。このような場合にかぎっては，もっと簡単な書き方がある。

addEventListener()メソッドの第2引数には，オブジェクトを渡すこともできる（※1⁠）⁠。そして，Ticker.addEventListener()メソッドの第2引数にStageオブジェクトを渡せば，リスナー関数（tick()）を定めなくても，Stage.update()メソッドが自動的に呼び出せる。これらの修正を加えたのが，つぎのコード1だ。改訂したjsdo.itのコードも添えた。

コード1　新CreateJSで時間と位置をランダムに定めてトゥイーンアニメーションする

var stage;
var myBitmap;
var top = 0;
var bottom;
var right;
function initialize() {
  canvasObject = document.getElementById("myCanvas");
  var file = "images/Pen.png";
  var loader = new createjs.LoadQueue(false);
  right = canvasObject.width;
  bottom = canvasObject.height;
  stage = new createjs.Stage(canvasObject);
  loader.addEventListener("fileload", draw);
  loader.loadFile(file);
}
function draw(eventObject) {
  var myImage = eventObject.result;
  var halfWidth = myImage.width / 2;
  var halfHeight = myImage.height / 2;
  top += halfHeight;
  bottom -= halfHeight;
  right -= halfWidth;
  myBitmap = new createjs.Bitmap(myImage);
  myBitmap.regX = halfWidth;
  myBitmap.regY = halfHeight;
  myBitmap.x = halfWidth;
  myBitmap.y = (top + bottom) / 2;
  stage.addChild(myBitmap);
  stage.update();
  setRandomTween(myBitmap);
  createjs.Ticker.addEventListener("tick", stage);
}
function setRandomTween(target) {
  var nextY = Math.random() * (bottom - top) + top;
  var nextPoint = new createjs.Point(right, nextY);
  var randomTime = Math.random() * 5000 + 1000;
  setTween(target, nextPoint, randomTime, createjs.Ease.bounceOut);
}
function setTween(target, myPoint, time, easing) {
  createjs.Tween.get(target)
  .to({x:myPoint.x, y:myPoint.y}, time, easing);
}
※1
TickerクラスはaddEventListener()メソッドをEventDispatcherクラスから受継いでいる。EventDispatcher.addEventListener()メソッドについて詳しくは，「⁠EaselJSでイベントリスナーを扱うEventDispatcherクラス」をお読みいただきたい。

HTML5, Canvas, CreateJS, アニメーション, トゥイーンアニメーション

著者プロフィール

野中文雄（のなかふみお）

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

URL：http://www.FumioNonaka.com/

著書