サイトトップ
Director Flash 書籍 業務内容 プロフィール
 

HTML5 / Flash ActionScript講座 		Webクリエイターのための
CreateJSスタイルブック 		gihyo.jp連載
「HTML5のCanvasでつくる
ダイナミックな表現
―CreateJSを使う」
■Twitter: @FumioNonaka / Facebook Page: CreateJS

CreateJS勉強会〜末〜

CreateJS今日この頃:
EaselJS 0.7.0および0.7.1で何が変わったのか

CreateJSのライブラリは2013年9月にアップグレードされ、12月17日付CreateJS Blogで0.0.1のマイナーアップデートがリリースされた(図001)。とくに大きな変更が加えられたのはEaselJSのイベントモデルだ。EaselJS 0.7.0と0.7.1を併せて、イベントモデルといくつかの興味深い項目、それにバグの修正について説明する(詳しくは、「EaselJS 0.7.0の改訂」および「EaselJS 0.7.1が公開される」参照)。

図001■2013年12月にリリースされたCreateJSの最新版ライブラリ
図001


01 新たなイベントモデル

EaselJS 0.7.0のイベントモデルの改訂では、EventDispatcherクラスがイベントリスナーを扱うほとんどのクラスから継承されることとなり、またイベントオブジェクトの基本クラスとしてEventクラスが新たに定められた(「EaselJS次期バージョンのイベントモデル改訂」)。実際のスクリプティングで大きく変わったのは、マウスイベントの扱いだ。

01-01 マウスイベント

EaselJS 0.6.1と異なり、0.7.0からマウスイベントは基本的にDisplayObjectクラスで扱うようになった。すると、オブジェクトのドラッグ&ドロップの仕方がまず変わってくる(「EaselJS 0.7.0でインスタンスをドラッグ&ドロップする」)。EaselJS 0.6.1では、イベントリスナーを加えるクラスがDisplayObjectとMouseEventのふたつに分かれていた。

    EaselJS 0.6.1のドラッグ&ドロップで扱うマウスイベント
  1. インスタンスの上でマウスボタンが押されたらドラッグを始める
    • DisplayObject.mousedownイベントに加えたリスナーが呼出される
    • リスナー関数はイベントオブジェクトにふたつのイベントのリスナーを加える
      • MouseEvent.mousemoveイベント
      • MouseEvent.mouseupイベント
  2. ボタンを押したままマウスを動かしたらインスタンスが追いかける
    • MouseEvent.mousemoveイベントに加えたリスナーが呼出される
    • マウスポインタの座標にインスタンスの位置を合わせる
  3. マウスボタンを放したらドラッグは終える
    • MouseEvent.mouseupイベントに加えたリスナーが呼出される
    • リスナー関数はイベントオブジェクトからふたつのイベントのリスナーを除く
      • MouseEvent.mousemoveイベント
      • MouseEvent.mouseupイベント

つぎのコード01-001では、リスナーを後で除くために、イベントオブジェクトの参照を変数(dispatcher)にもたせている(第1および第4行目)。

コード01-001■EaselJS 0.6.1でインスタンスをドラッグ&ドロップする
  1. var dispatcher;
  2. var instance.addEventListener("mousedown", startDrag);
  3. function startDrag(eventObject) {
  4.   dispatcher = eventObject;
  5.   eventObject.addEventListener("mousemove", drag);
  6.   eventObject.addEventListener("mouseup", stopDrag);
  7. }
  8. function drag(eventObject) {
  9.   var instance = eventObject.target;
  10.   instance.x = eventObject.stageX;
  11.   instance.y = eventObject.stageY;
  12.   stage.update();
  13. }
  14. function stopDrag(eventObject) {
  15.   dispatcher.removeEventListener("mousemove", drag);
  16.   dispatcher.removeEventListener("mouseup", stopDrag);
  17. }

EaselJS 0.7.0からは、マウスイベントのリスナーを加えるインスタンスはDisplayObjectにまとめられた。リスナーを除くために、イベントオブジェクトの参照をもたなくて済む。ただし、イベント名が変わったことに注意しなければならない(表001)。また、EaselJS 0.7.0には、MouseEventクラスのイベントがなくなった()。

表001■EaselJS 0.7.0からドラッグ&ドロップに用いるマウスイベント
MouseEventクラスの
イベント(0.6.1)		 DisplayObjectクラスの
イベント(0.7.0)		 マウス操作
mousedown インスタンス上でマウスボタンが押された。
mousemove → pressmove インスタンス上でマウスボタンが押されたまま、ポインタが動かされた。
mouseup → pressup インスタンス上で押されたマウスボタンが放された。

つぎのコード01-002では、イベントリスナーを加えたインスタンスはEvent.targetプロパティから得られるので、その参照からリスナーを除いている(第14〜16行目)。

コード01-002■EaselJS 0.7.1でインスタンスをドラッグ&ドロップする
    // var dispatcher;
  1. instance.addEventListener("mousedown", startDrag);
  2. function startDrag(eventObject) {
      // dispatcher = eventObject;
  3.   var instance = eventObject.target;
      // eventObject.addEventListener("mousemove", drag);
  4.   instance.addEventListener("pressmove", drag);
      // eventObject.addEventListener("mouseup", stopDrag);
  5.   instance.addEventListener("pressup", stopDrag);
  6. }
  7. function drag(eventObject) {
  8.   var instance = eventObject.target;
  9.   instance.x = eventObject.stageX;
  10.   instance.y = eventObject.stageY;
  11.   stage.update();
  12. }
  13. function stopDrag(eventObject) {
  14.   var instance = eventObject.target;
      // dispatcher.removeEventListener("mousemove", drag);
  15.   instance.removeEventListener("pressmove", drag);
      // dispatcher.removeEventListener("mouseup", stopDrag);
  16.   instance.removeEventListener("pressup", stopDrag);
  17. }

サンプル001■EaselJS 0.7.1でShapeインスタンスをドラッグ&ドロップする

01-02 イベントのバブリング

バブリングというのは、泡のように上っていくこと。EaselJS 0.7.0から、ほとんどのマウスイベントは、イベントが起こったインスタンス(ターゲット)から表示リストの階層を上って伝わるようになった。その流れに先立って、表示リストの頂点からターゲットに向かって伝わることをキャプチャという(図002)。

図002■イベントのバブリングとキャプチャ
図002

イベントの流れは止められる。バブリングが採り入れられたのに合わせて、Eventクラスにはイベントの流れを扱うメソッドが備わった(表002)。

表002■EaselJS 0.7.0からEventクラスに備わったイベントの流れを扱うメソッド
Eventクラスでイベントの流れを扱うメソッド
Event.preventDefault() イベントが起こったときに行われるべきデフォルトの動きを止める。
Event.stopImmediatePropagation() イベントが後続のリスナーに伝わるのを止める。
Event.stopPropagation() イベントが後続のオブジェクトに伝わるのを止める。

Event.stopImmediatePropagation()メソッドはイベントを直ちに(immediate)止めて、リスナーが加えられた現行オブジェクト(Event.currentTargetプロパティの参照)のつぎのリスナーにもイベントは送らない。それに対して、Event.stopPropagation()メソッドは、表示リストのつぎの階層のオブジェクトへのイベントを止める(「EaselJS 0.7.0: Eventクラスでイベントの流れを扱うメソッド」参照)。

図003■現行オブジェクトと表示リストのつぎの階層へのイベントの流れ
図003

サンプルとして後にコード01-003を掲げた。ボタンにするShape(button)と背景画像のBitmapインスタンスを、Containerオブジェクト(container)に入れ子にした。そして、ボタンをクリックするとURLが開き、親Containerオブジェクトは画像とボタンをまとめてドラッグできるようにしたい(図004)。

図004■ボタンのクリックと背景画像のドラッグ
図004左
ボタンはクリック 		図004右
背景画像はドラッグ

ドラッグのスクリプトは、基本的に前掲コード01-002と変わらない。ただし、ドラッグするインスタンスは、マウス操作をしたBitmapではない。このインスタンスをボタン(button)とともに入れ子にした親Containerオブジェクト(container)だ。そして、イベントが起こったインスタンスはEvent.targetプロパティで参照を得るのに対して、リスナーが加えられてイベントを処理しているインスタンスはEvent.currentTargetプロパティで参照する(第6、第13、および第19行目)。

ボタンのShapeインスタンス(button)については、DisplayObject.clickイベントに加えたリスナー関数(navigateToURL())でURLを開けばよい(第3および第23〜25行目)。ただし、このスクリプトの組立てだけでは、意図しない動きが生じる。Shapeインスタンスの上でマウスボタンを押すと、イベントはバブリングして親Containerオブジェクト(container)に伝わる。すると、そのリスナー関数(startDrag())が呼出され、ドラッグを始めたことになる。つまり、ひとたびボタンを押すと、Shapeインスタンスの外にマウスポインタが出せなくなってしまうのだ。

  1. container.addEventListener("mousedown", startDrag);
  2. button.addEventListener("click", navigateToURL);
  1. function startDrag(eventObject) {
  2.   var instance = eventObject.currentTarget;
  1.   instance.addEventListener("pressmove", drag);
  2.   instance.addEventListener("pressup", stopDrag);
  3. }
  4. function drag(eventObject) {
  5.   var instance = eventObject.currentTarget;
  6.   instance.x = eventObject.stageX;
  7.   instance.y = eventObject.stageY;
  8.   stage.update();
  9. }
  10. function stopDrag(eventObject) {
  11.   var instance = eventObject.currentTarget;
  12.   instance.removeEventListener("pressmove", drag);
  13.   instance.removeEventListener("pressup", stopDrag);
  14. }
  15. function navigateToURL(eventObject) {
  16.   window.open("http://plus.adobe-adc.jp/2_10/", "_blank");
  17. }

そこで、マウスイベントのバブリングを止める。ボタンのShapeインスタンス(button)にも、DisplayObject.mousedownイベントのリスナー(stopEvent())を加える(第4行目)。この関数がやることは、Event.stopPropagation()メソッドで親オブジェクトへのイベントを止めることだけだ(第26〜28行目)。

コード01-003■EaselJS 0.7.1で入れ子インスタンスのマウスイベントがバブリングするのを止める
  1. var offset = new createjs.Point();
  2. container.addEventListener("mousedown", startDrag);
  3. button.addEventListener("click", navigateToURL);
  4. button.addEventListener("mousedown", stopEvent);
  5. function startDrag(eventObject) {
  6.   var instance = eventObject.currentTarget;
  7.   offset.x = instance.x - eventObject.stageX;
  8.   offset.y = instance.y - eventObject.stageY;
  9.   instance.addEventListener("pressmove", drag);
  10.   instance.addEventListener("pressup", stopDrag);
  11. }
  12. function drag(eventObject) {
  13.   var instance = eventObject.currentTarget;
  14.   instance.x = eventObject.stageX + offset.x;
  15.   instance.y = eventObject.stageY + offset.y;
  16.   stage.update();
  17. }
  18. function stopDrag(eventObject) {
  19.   var instance = eventObject.currentTarget;
  20.   instance.removeEventListener("pressmove", drag);
  21.   instance.removeEventListener("pressup", stopDrag);
  22. }
  23. function navigateToURL(eventObject) {
  24.   window.open("http://plus.adobe-adc.jp/2_10/", "_blank");
  25. }
  26. function stopEvent(eventObject) {
  27.   eventObject.stopPropagation();
  28. }

サンプル002■EaselJS 0.7.1で入れ子インスタンスのマウスイベントのバブリングを止める

マウスイベントのバブリングについて、ひとつ気をつけるべきことがある。EaselJS 0.7.1でつぎのようなコードを書いたとき、手前に重ねたインスタンスがリスナーをもたなければ、後ろのインスタンス(instance)にマウスイベントが起こってそのリスナー(rotate())は呼出される。つまり、インスタンスの重なりをクリックすれば、後ろのインスタンスが回る(図005)。

  1. instance.addEventListener("click", rotate);
  2. function rotate(eventObject) {
  3.   var instance = eventObject.currentTarget;
  4.   instance.rotation += 30;
  5.   stage.update();
  6. }

図005■手前に重ねたインスタンスがリスナーをもたなければ後ろのインスタンスにイベントが起こる
図005

ところが、以下のコード01-004のように、ふたつのインスタンスがマウスイベントのリスナーをもつ親Containerオブジェクト(container)の入れ子になっていたとする(第2〜4行目)。すると、手前のインスタンス(no_listener)は自らにリスナーがなくても、マウスイベントを起こしてバブリングしてしまう。つまり、インスタンスが重なった部分をクリックしたマウスイベントは、前のインスタンスが奪って、後ろのインスタンス(instance)のリスナー(rotate())に渡らなくなる(図006)。

図006■親インスタンスがリスナーをもつと子インスタンスのマウスイベントはバブリングする
図006

コード01-004■EaselJS 0.7.1で親インスタンスがリスナーをもつと入れ子のマウスイベントはバブリングする
  1. stage.addChild(container);
    // stage.addChild(instance);
  2. container.addChild(instance);
    // stage.addChild(no_listener);
  3. container.addChild(no_listener);
  4. container.addEventListener("mousedown", function() {});
  5. instance.addEventListener("click", rotate);
  6. function rotate(eventObject) {
  7.   var instance = eventObject.currentTarget;
  8.   instance.rotation += 30;
  9.   stage.update();
  10. }

01-03 EventDispatcherクラスの変更

EaselJS 0.7.0のEventDispatcherクラスには、新たにメソッドがふたつ加わった(表003)。また、これらのメソッドと関わるEventクラスの新しいメソッドも併せてご紹介する。なお、EventDispatcherクラスの他のメソッドも細かいところで変わっているので、詳しくは「EaselJS 0.7.1: イベントリスナーを扱うEventDispatcherクラス」をお読みいただきたい。

表003■EaselJS 0.7.0でEventDispatcherとEventクラスに加わったイベントリスナーを扱う新しいメソッド
EventDispatcherクラス
EventDispatcher.on() 第1引数のイベントに第2引数のリスナーを加える。残りの引数で、さらに細かな定めが加えられる。EventDispatcher.addEventListener()メソッドの拡張。
EventDispatcher.off() 第1引数のイベントに加えた第2引数のリスナーを除く。EventDispatcher.removeEventListener()メソッドと同じ。
Eventクラス
Event.remove() そのイベントオブジェクトが渡されたリスナー関数をイベントリスナーから除く。

例として、EaselJSとPreloadJSで外部画像ファイルを読込む場合について考える。以下のコード01-005は、EaselJS 0.6.1とPreloadJS 0.3.1でロードした画像のBitmapインスタンス(instance)をステージに配置する処理の枠組みだ。このコードはEaselJS 0.7.1とPreloadJS 0.4.1でも、とくに問題なく動作する。

コード01-005■EaselJS 0.6.1とPreloadJS 0.3.1で外部画像ファイルを読込む
  1. var loader = new createjs.LoadQueue(false);
  2. loader.addEventListener("fileload", draw);
  3. loader.loadFile({src:file, data:instance});
  4. function draw(eventObject) {
  5.   var loader = eventObject.target;
  6.   var image = eventObject.result;
  7.   var instance = eventObject.item.data;
      // Bitmapインスタンスへの処理
  8.   loader.removeEventListener("fileload", draw);
  9.   stage.update();
  10. }

ここで問われるのは、LoadQueue.fileloadイベントのリスナー(draw())からどうやって画像が読込まれたBitmapインスタンスを参照するかだ。このコード01-005では、Bitmapインスタンスの参照をLoadQueue.loadFile()メソッドの引数のオブジェクトにdataプロパティとして与えた(第3行目)。すると、LoadQueue.fileloadイベントのリスナーが引数に受取るイベントオブジェクトのitemプロパティから取出せる(第7行目)。

さて、EventDispatcher.on()メソッドには、第3引数でリスナー関数がthis参照とすべきオブジェクトを定められる。すると、リスナー関数から参照したいインスタンスは、このメソッドの第3引数に与えることもできる。

オブジェクト.on(イベント名, リスナー, this参照先)

前掲コード01-005で、EventDispatcher.on()メソッドを用いれば、第3引数によりBitmapインスタンスをリスナー関数(draw())のthis参照に定められる。後に掲げるコード01-006には、その書替えを施した(第2〜3行目)。

  1. var loader = new createjs.LoadQueue(false);
    // loader.addEventListener("fileload", draw);
  2. loader.on("fileload", draw, instance);
    // loader.loadFile({src:file, data:instance});
  3. loader.loadFile({src:file});

これで、LoadQueue.fileloadイベントのリスナー関数(draw())は、Bitmapインスタンスをthis参照で扱える。ただし、リスナーを除くときは気をつけなければならない。EventDispatcher.on()メソッドがリスナーに加えるのは、第2引数の関数から第3引数のオブジェクトをthis参照にして新たにつくる関数だ。つまり、リスナーを除くメソッドに、第2引数の関数を渡してもイベントからは消せない。ふたつの関数が別だからだ。

  1. function draw(eventObject) {
      // var loader = eventObject.target;
      // var instance = eventObject.item.data;
      // Bitmapインスタンスへの処理
      // loader.removeEventListener("fileload", draw);
      loader.off("fileload", draw);   // 関数がリスナーではないため除けない
  1.   stage.update();
  2. }

EventDispatcher.on()も、EventDispatcher.addEventListener()メソッドと同じく、インスタンスに加えたリスナーを返す。だったら、その参照をとっておいて、イベントリスナーから除けばよい。もっとも、今回のお題は、Bitmapインスタンスの参照を使わないのが売りだった。替わりにリスナー関数の参照をもたなければならないのでは意味がない。

そこで使えるのが、新たなEvent.remove()メソッドだ。そのイベントオブジェクトを受取った関数が、リスナーから除かれる。イベントオブジェクトに対してメソッドを呼出すので、リスナー関数の参照は求められない(第6行目)。これで、Bitmapインスタンスもリスナーも、参照をとっておかなくて済む。

コード01-006■EaselJS 0.7.1のメソッドとPreloadJS 0.4.1で外部画像ファイルを読込む
  1. var loader = new createjs.LoadQueue(false);
    // loader.addEventListener("fileload", draw);
  2. loader.on("fileload", draw, instance);
    // loader.loadFile({src:file, data:instance});
  3. loader.loadFile({src:file});
  4. function draw(eventObject) {
      // var loader = eventObject.target;
  5.   var image = eventObject.result;
      // var instance = eventObject.item.data;
      // Bitmapインスタンスへの処理
      // loader.removeEventListener("fileload", draw);
  6.   eventObject.remove();
  7.   stage.update();
  8. }

ひとつ気をつけなければならないのは、Event.remove()メソッドが直ちにイベントリスナーを消すのではないことだ。そのイベントリスナーをもう呼出さないというフラグが与えられる。内部的には、つぎにイベントが配信されるとき、フラグのついたリスナーが除かれる。そのため、Event.remove()メソッドを呼出したすぐ後にEventDispatcher.hasEventListener()メソッドでリスナーがあるか調べると、trueが返されてリスナーは残っている。

そもそも、EventDispatcher.on()メソッドに第3引数を渡すと、呼出すたびに新たなリスナー関数がつくられる。したがって、第3引数を与える呼出しは、できるだけ少なくすることが望ましい。

EaselJS 0.7.1では、イベントに関わるつぎのようなメソッドとプロパティが加えられた(表004)。

表004■EaselJS 0.7.1でEventDispatcherとMouseEventクラスに加わった新しいメソッドとプロパティ
EventDispatcherクラス
EventDispatcher.willTrigger() 指定したイベントをフローの中で受取るリスナーがあるかどうかをブール(論理)値で返す。
MouseEventクラス
MouseEvent.localX
MouseEvent.localY 		[読取り専用] イベントリスナーが加えられたオブジェクトから見たマウスポインタのxy座標値。

02 Matrix2Dクラスの変換行列でxy座標を回す

EaselJS 0.7.0に備わったMatrix2D.transformPoint()メソッドは、Matrix2Dオブジェクトの変換行列でxy座標を変換して返す。gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」の第15回「Matrix2Dクラスで座標を回す」と第16回「3次元空間で座標を回す」でつくった作例にもとづいて、メソッドの使い方をご紹介したい。

02-01 Pointオブジェクトのxy座標を変換するMatrix2D.transformPoint()メソッド

Matrix2D.transformPoint()メソッドは参照したMatrix2Dの変換行列で、はじめのふたつの引数に渡したxy座標を変換する。第3引数にPointなどのオブジェクトを渡せば、そのxとyのプロパティに対して変換された座標値が与えられる。第3引数を省くと、新たなオブジェクトにxyのプロパティ値が納められて返される。

Matrix2Dオブジェクト.transformPoint(x座標, y座標, Pointオブジェクト)

以下のサンプル003はつぎの関数(rotate())で、配列(points)に入れた星形の頂点座標のPointインスタンスをすべてforループで取出し、Matrix2D.transformPoint()メソッドにより回転している。変換行列による回転は、数多くの座標を同じ角度回すとき効率に優れる(行列演算では「三角関数で座標を回転するふたつの計算方法」の2の式を用いている)。なお、Matrix2D.identity()メソッドは、Matrix2Dオブジェクトを初期化する。オブジェクトは使い回した方がお得だ。

  1. function rotate(eventObject) {
  2.   var count = points.length;
  3.   matrix.identity().rotate(angle);
  4.   for (var i = 0; i < count; i++) {
  5.     var point = points[i];
  6.     matrix.transformPoint(point.x, point.y, point);
  7.   }
  1. }

サンプル003は、マウスポインタの水平位置によって星形の頂点座標を回す角度の速さは変えて、頂点を直線で結んでいる(コードの詳しい解説は「Matrix2Dクラスで座標を回す」参照)。

サンプル003■マウスポインタの水平位置に応じてMatrix2D.transformPoint()メソッドで星形の頂点座標を回転する

02-02 Matrix2D.transformPoint()メソッドを3次元空間の回転に応用する

つぎに、同じ星形をy軸で回す。ただし、CreateJSに3次元座標を扱うクラスはない。そこで、座標はObjectインスタンスとし、xyzのプロパティをもたせる。z座標値は初め0でよい。

{x:x座標値, y:y座標値, z:0}

座標をy軸で回すということは、y座標の値は変えず、残るふたつの座標値をxz平面で変換するということだ(図007)。

図007■xz平面で座標を回す
図007

以下のサンプル004はつぎの関数(rotate())で、配列(points)に入れた星形の3次元頂点座標のObjectインスタンスをすべてforループで取出す。そして、そのxz座標をMatrix2D.transformPoint()メソッドにより回転している。そのうえで、変換したPointインスタンス(_point)のxy座標値を、3次元座標のObject(point)のxとzプロパティに与えた。なお、座標を変換するPointオブジェクトは、ただObjectの3次元座標に値を戻す中継用なので、予め変数にひとつつくって使い回している。

  1. var _point = new createjs.Point();
  1. function rotate(eventObject) {
  2.   var count = points.length;
  1.   matrix.identity().rotate(angle);
  2.   for (var i = 0; i < count; i++) {
  3.     var point = points[i];
  4.     matrix.transformPoint(point.x, point.z, _point);
  5.     point.x = _point.x;
  6.     point.z = _point.y;
  1.   }
  1. }

サンプル004は、このようにして3次元頂点座標をy軸で回している。ただし、星形のワイヤーフレームを描くには、透視投影の座標計算をしないと遠近感が加わらない。それらのコードの詳しい解説については、「3次元空間で座標を回す」をお読みいただきたい。

サンプル004■Matrix2D.transformPoint()メソッドにより星形の頂点座標をy軸で回転する

03 Ticker.tickイベントのタイミングにrequestAnimationFrameを用いる

TckerクラスはタイミングのAPIに、setTimeoutかrequestAnimationFrameを使うことができる。EaselJS 0.7.0では、タイミングを決めるプロパティとしてTicker.useRAFに替わってTicker.timingModeが備わり、3つのモードから選べるようになった。

03-01 Ticker.timingModeプロパティ

Ticker.timingModeは、Ticker.tickイベントのタイミングをsetTimeoutとrequestAnimationFrameのどちらのAPIで決めるか、および用いるモードを示す静的プロパティだ。つぎの3つの定数から選ぶ(表001)。setTimeoutは間隔のばらつきが小さく、requestAnimationFrameはブラウザの描画とタイミングが合う。ブラウザがrequestAnimationFrameのAPIをサポートしていないときは、Ticker.TIMEOUTモードが用いられる。

表005■Tickerクラスに定められたタイミングモードの定数
Tickerクラスの定数 API 説明
TIMEOUT setTimeout フレームレートに合わせた時間間隔(デフォルト)。
RAF requestAnimationFrame フレームレートによらず、requestAnimationFrameの呼出しにもとづく。アニメーションは経過時間を調べて進める。
RAF_SYNCHED requestAnimationFrame フレームレートに合わせてTicker.tickイベントを間引く。ただし、間隔はばらつく。また、基本となるリフレッシュレート60Hzの約数にフレームレートを定めないと効果は少ない。

03-02 アニメーションをrequestAnimationFrameで行う

Ticker.timingModeプロパティをTicker.RAFモードにすると、Ticker.tickイベントの間隔がばらつく。その調整をしたい場合、Eventオブジェクトのdeltaプロパティから経過ミリ秒数が得られる。フレームレート(FPS)を基準にして変化を与えるなら、つぎの調整係数を乗じればよい。

deltaプロパティ値×FPS / 1000

つぎのコード03-001は、フレームレートを変数(fps)に与え、フレームあたりの角度(5)にEventオブジェクトのdeltaプロパティからから求めた上記調整係数を乗じて、インスタンス(instance)が回転する速さを保っている。

コード03-001■Ticker.RAFモードでインスタンスを一定の速さで回すアニメーション
  1. var fps = 30;
  2. createjs.Ticker.timingMode = createjs.Ticker.RAF;
  3. createjs.Ticker.on("tick", rotate, instance);
  4. function rotate(eventObject) {
  5.   this.rotation += 5 * eventObject.delta * fps / 1000;
  6.   stage.update();
  7. }

サンプル005■Ticker.RAFモードでインスタンスを指定した速さで回す

04 EaselJS 0.7.1で修正されたおもなバグ

EaselJS 0.7.1は0.0.1のアップデートなので、バグ修正が多くを占める。その中でもEaselJS 0.7.0から直された大きなバグを2件ご紹介する。

04-01 Ticker.on()メソッドが関数を返さない

Ticker.addEventListener()とTicker.on()は、ともにイベントリスナーを加える静的メソッドだ。どちらも、登録されたリスナー関数を返すと定められている。ところが、EaselJS 0.7.0では戻り値はundefinedで、関数が返されない。

var func = createjs.Ticker.addEventListener("tick", function (eventObject) {});
alert(func);   // undefined

EaselJS 0.7.0のTicker.addEventListener()メソッドはつぎのように実装されている。関数を返すreturnステートメントがない。Ticker.on()メソッドも内部的にTicker.addEventListener()を呼んでいるので、同じ問題が生じる。

  1. Ticker.addEventListener = function() {
  2.   !Ticker._inited && Ticker.init();
  3.   Ticker._addEventListener.apply(Ticker, arguments);
  4. };

EaselJS 0.7.1では、この実装はつぎのように改められ、リスナー関数が正しく返される(詳しくは、「EaselJS 0.7.0のTicker.addEventListener()やTicker.on()メソッドが関数を返さない」参照)。

  1. Ticker.addEventListener = function() {
  2.   !Ticker._inited && Ticker.init();
  3.   return Ticker._addEventListener.apply(Ticker, arguments);
  4. };

04-02 ColorMatrixクラスのバグ3種盛り

ColorMatrixクラスはカラー変換行列を表し、ColorMatrixFilterのカラー変換に用いられる。EaselJS 0.7.0で見つかったつぎの3つのメソッドのバグが直された(「EaselJS 0.7.0: バグが確認されているColorMatrixクラスのメソッド」)。

    ColorMatrixクラスでバグが修正されたメソッド
  1. ColorMatrix.toArray()
  2. ColorMatrix.concat()
  3. ColorMatrix.clone()
ColorMatrix.toArray()メソッド

ColorMatrix.toArray()とColorMatrix.concat()のバグは同じ原因なので、確かめやすい前者のメソッドで見てみよう。カラー変換行列は5行×5列の正方行列で、ColorMatrix.toArray()メソッドはその25成分をエレメントに納めた配列にして返す。ところが、戻り値は空の配列になってしまう。

var _array = new createjs.ColorMatrix();
console.log(_array.toArray());   // []

EaselJS 0.7.0のColorMatrix.toArray()メソッドは、実質的につぎのように実装されていた。ColorMatrix()コンストラクタ関数のFunction.prototypeプロパティにArrayオブジェクト(配列)を与えている(第4行目)。これでそのオブジェクトのクラスは継承できるのが原則だ。ところが、Array.lengthプロパティが正しい値に書替えられないため、ColorMatrix.toArray()メソッドから内部的に呼出されるArray.slice()メソッドが25成分値を取出せない。

  1. function ColorMatrix(brightness, contrast, saturation, hue) {
  2.   this.initialize(brightness, contrast, saturation, hue);
  3. }
  4. ColorMatrix.prototype = [];
  1. ColorMatrix.prototype.toArray = function() {
  2.   return this.slice(0, ColorMatrix.LENGTH);
  3. };

EaselJS 0.7.1のColorMatrixクラスは、もはやArrayクラスを継承しない。ColorMatrix.toArray()メソッドは、ColorMatrixオブジェクトがもつカラー変換行列の成分値をforループで取出して、新たな配列に納めたうえで返すように修正された(第2〜6行目)。JavaScriptではArrayクラスを完全に継承するのは難しい(FumioNonaka.com Newsletter: no.119「スクリプト覚え書き」参照)。

  1. ColorMatrix.prototype.toArray = function() {
      // return this.slice(0, ColorMatrix.LENGTH);
  2.   var arr = [];
  3.   for (var i = 0, l = ColorMatrix.LENGTH; i < l; i++) {
  4.     arr[i] = this[i];
  5.   }
  6.   return arr;
  7. };
ColorMatrix.concat()メソッド

ColorMatrix.concat()メソッドは、引数のカラー変換行列と合成(乗算)する。引数のカラー変換行列は、配列またはColorMatrixオブジェクトで渡す。ところが、EaselJS 0.7.0のColorMatrix.concat()メソッドは、引数にColorMatrixオブジェクトを渡すと行列演算が行われない。

EaselJS 0.7.0のColorMatrix.toArray()メソッドは、実質的につぎのように実装されていた。内部的には、引数を25エレメントの配列として扱うために、データの型を整えるメソッド(ColorMatrix._fixMatrix())が呼ばれる。このメソッドが、ColorMatrixオブジェクトから配列に換えるときArray.slice()メソッドを用いるため、ColorMatrix.toArray()メソッドと同じ理由で正しい演算が行われない。

  1. createjs.ColorMatrix.prototype.concat = function(matrix) {
  2.   matrix = this._fixMatrix(matrix);
  1. };
  2. createjs.ColorMatrix.prototype._fixMatrix = function(matrix) {
  3.   if (matrix instanceof ColorMatrix) {
  4.     matrix = matrix.slice(0);
  5.   };
  1.   return matrix;
  2. };

EaselJS 0.7.1では、ColorMatrixオブジェクトを配列に換えるとき、ColorMatrix.toArray()メソッドを呼出すよう修正された。

  1. createjs.ColorMatrix.prototype._fixMatrix = function(matrix) {
  2.   if (matrix instanceof ColorMatrix) {
        // matrix = matrix.slice(0);
  3.     matrix = matrix.toArray();
  4.   };
  1.   return matrix;
  2. };
ColorMatrix.clone()メソッド

ColorMatrix.clone()メソッドは、同じカラー変換行列のColorMatrixオブジェクトを新たにつくって返す。

EaselJS 0.7.0のColorMatrix.clone()メソッドは、実質的につぎのように実装されていた。しかし、内部的に呼出しているColorMatrix()コンストラクタに渡す引数は、ColorMatrixオブジェクトひとつでなく、つぎのような4つの数値でなければならない。引数の数とそのデータの型が違っているのだから、正しいオブジェクトは返らない。

new ColorMatrix(明度, コントラスト, 彩度, 色相)
  1. ColorMatrix.prototype.clone = function() {
  2.   return new ColorMatrix(this);
  3. };

EaselJS 0.7.1のColorMatrix.clone()メソッドは、コンストラクタでつくった新たなColorMatrixオブジェクトに、ColorMatrix.copyMatrix()メソッドでカラー変換行列の成分値をコピーするように修正された。

  1. ColorMatrix.prototype.clone = function() {
      // return new ColorMatrix(this);
  2.   return (new ColorMatrix()).copyMatrix(this);
  3. };

おまけ

「CreateJSのマイナーアップデートが公開される」


作成者: 野中文雄
更新日 2013年12月23日 細かな加筆・補正。
作成日: 2013年12月20日
Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.