説明

DisplayObject.tickイベントは、Stage.update()メソッドが呼出されたとき、Stageオブジェクトを頂点とする表示リストに加わったDisplayObjectインスタンスに配信されます。イベントは、そのままでは表示リストのすべてのインスタンスに送られます。その無駄な流れを止めるため、DisplayObjectインスタンスにはDisplayObject.tickEnabled、ContainerオブジェクトにはContainer.tickChildrenプロパティが備わります(「Added DisplayObject.tickEnabled & Container.tickChildren」参照)。

DisplayObject.tickEnabledプロパティをfalseにすると、そのインスタンスおよび子インスタンスにDisplayObject.tickイベントが送られません。Container.tickChildrenプロパティをfalseに定めると、そのContainerオブジェクトはDisplayObject.tickイベントを受取るものの、子オブジェクトにはイベントが渡りません。どちらのプロパティもデフォルト値はtrueです。

DisplayObject.tickイベントが受取られると、インスタンスはCanvasに描かれる準備を整えます。アニメーションするSpriteやMovieClipオブジェクトはフレームを進め、DOMElementは表示を切替えたりします。イベントが止められれば、これらの更新の負荷も下がります。

例

「EaselJSのDisplayObject.tickイベント」の「例」に掲げた以下のJavaScriptコードは、Stageオブジェクト(stage)の表示リストにContainerオブジェクト(parent)を子として加え、さらにその子にShapeオブジェクト(shape)を与えました(第1〜2行目)。そのうえで、ふたつのオブジェクトのDisplayObject.tickイベントに同じリスナー関数(test)を定めています(第3〜4行目)。

そして、Stage.update()メソッドを呼出すと、ふたつのオブジェクトのリスナー関数が順に呼出され、window.alert()メソッドにより警告ダイアログボックスが2回開きます(第7行目)。示される値は、つぎのとおりです(詳しくは前出ノートの「例」の説明を参照)。

[Shape (name=null)],0
[Container (name=null)],1

stage.addChild(parent); parent.addChild(shape); parent.addEventListener("tick", test); shape.addEventListener("tick", test); stage.update(0); function test(eventObject) {   alert([eventObject.currentTarget, eventObject.params[0]]);   eventObject.params[0]++; }

前掲コードで親インスタンス(parent)のContainer.tickChildrenプロパティをfalseにすると、子インスタンス(shape)にはDisplayObject.tickイベントが渡らなくなり、そのリスナー関数(test())は呼ばれません。警告ダイアログボックスは1度だけ開いて、親オブジェクトの値を示します。

[Container (name=null)],0

parent.addEventListener("tick", test); shape.addEventListener("tick", test); parent.tickChildren = false; stage.update(0);

falseに定める親インスタンス(parent)のプロパティをDisplayObject.tickEnabledに書替えれば、このオブジェクトもDisplayObject.tickイベントを受取らなくなるので、警告ダイアログボックスはまったく開きません。

parent.addEventListener("tick", test); shape.addEventListener("tick", test); parent.tickEnabled = false; // tickChildren = false; stage.update(0);

作成者: 野中文雄
作成日: 2013年10月29日