オブジェクトは、できれば使い回した方がお得です(「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」 第14回「オブジェクトの使い回しとアニメーション素材の変更」の「ガベージコレクションを減らす」参照)。EaselJS 0.8.0には、そのために使えるプロパティを定め直せるメソッドが加わったり、これまでのメソッドが変わったりしました。本稿はそのいくつかを、かいつまんでご説明します。

01 geomパッケージのクラスにプロパティ値を定め直す新たなメソッドが備わった

役目の終わったオブジェクトを使い回すには、プロパティ値を新たにあたえなければなりません。EaselJS 0.8.0のgeomパッケージの幾何学的なクラスには、プロパティ値を定め直すメソッドが新たに備わりました(表001)。メソッドの名前はsetValues()に統一されており、引数はコンストラクタと同じです^[*1]。

プロパティ値を定め直すメソッド	引数
Point.setValues(x, y)	x, y － xy座標。
Rectangle.setValues(x, y, width, height)	x, y － 左上角座標。 width, height － 幅および高さ。
Matrix2D.setValues(a, b, c, d, tx, ty)	a, b, c, d, tx, ty － 変換行列の6成分(「EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算」参照)。  a   c   tx  b d ty 0 0 1
DisplayProps.setValues(visible, alpha, shadow, compositeOperation, matrix)	visible, alpha, shadow, compositeOperation, matrix － 表示オブジェクトに備わる各プロパティ。

EaselJS 0.7.1までのCreateJSのクラスは、コンストラクタがそれぞれの引数をinitialize()メソッドに渡して呼出していました。したがって、一般にオブジェクトのinitialize()メソッドでプロパティを与えることができたのです。ところが、EaselJS 0.8.0から、ライブラリのクラス継承の仕方が変わりました(「CreateJS 14/12/12: 新たな継承の仕組みを定めるextend()とpromote()メソッド」参照)。そして、クラスの定めからinitialize()メソッドが除かれてしまったのです。

以下のサンプル001は、EaselJS 0.7.1で書いたコードを0.8.0に直しました。このサンプルでは、Pointオブジェクトを変数(currentPointとlastPoint)に与え、その座標値を変えることによりオブジェクトは使い回しています。ただし、0.7.1でプロパティ値を定めるために用いたinitialize()メソッドがなくなりましたので、0.8.0の新しいPoint.setValues()メソッドに置き替えました。

var currentPoint = new createjs.Point(); var lastPoint = new createjs.Point(); function draw() {   var midPoint = new createjs.Point((lastPoint.x + currentPoint.x) / 2, (lastPoint.y + currentPoint.y) / 2);   // lastPoint.initialize(currentPoint.x, currentPoint.y);   lastPoint.setValues(currentPoint.x, currentPoint.y);   // lastMidPoint.initialize(midPoint.x, midPoint.y);   lastMidPoint.setValues(midPoint.x, midPoint.y); }

サンプル001■EaselJS 0.8.0: Smooth Line tuned

02 DisplayObjectインスタンスにプロパティをコピーする

DisplayObjectとそのサブクラスには、setValues()のようなメソッドは備わっていません。けれど、複製した新たなインスタンスを返すDisplayObject.clone()メソッドがあり、内部的にDisplayObject._cloneProps()メソッドによりプロパティをコピーしています。したがって、このメソッドをオブジェクトの使い回しに役立てられそうです。

ところが、EaselJS 0.7.1までは、メソッドの名前はアンダースコアのないDisplayObject.cloneProps()でした。内部的(protected)なメソッドのため、ドキュメントにも変わったことが触れられていません。以下のサンプル002は、Spriteオブジェクトを使い回すEaselJS 0.7.0のコードについて、0.8.0のメソッドに差替えた例です。

function getClone(original) {   // original.cloneProps(mySprite);   original._cloneProps(mySprite); }

サンプル002■EaselJS 0.8.0: Optimized Sparkling Stars with Fade and Blur

内部的なメソッドを使っていると、前触れもなくいきなり仕様が変わってしまうこともあります。できれば、公(public)のメソッドを用いる方が安心でしょう。DisplayObject.set()メソッドは、引数に渡したオブジェクトのプロパティすべての値をインスタンスにコピーします^[*2]。前掲サンプル002と同じEaselJS 0.7.0のコードを、DisplayObject.set()メソッドで書替えたのが以下のサンプル003です。

DisplayObjectオブジェクト.set(オブジェクト)

function getClone(original) {   // original.cloneProps(mySprite);   mySprite.set(original); }

サンプル003■EaselJS 0.8.0: Optimized Sparkling Stars with Fade and Blur 2

DisplayObject.set()は、もともと与えたいプロパティだけをObjectインスタンスに加えて渡すためのメソッドです。そのため、もとオブジェクトをそのまま引数として渡すと、プロパティが残らず拾われて参照するインスタンスに与えられます。コピーするプロパティを絞りたいときは、DisplayObject._cloneProps()メソッドの実装を参考にして新たな関数を定めるというやり方もあるでしょう^[*3]。

作成者: 野中文雄
作成日: 2015年2月6日