サイトトップ

Director Flash 書籍 業務内容 プロフィール

HTML5テクニカルノート

Tickerクラスでtickイベントを配信する

ID: FN1207002 Technique: HTML5 and JavaScript

Tickerクラス
パッケージ easeljs.utils
継承 Ticker → Object
addListener()メソッド
文法 Ticker.addListener(listener, pauseable)
概要 [静的] tickイベントのリスナーを登録する。リスナーにはtickイベントで呼出すtick()メソッドが定められたオブジェクトか、任意の関数を渡す。tick()メソッドの引数には、直前のイベントからの経過ミリ秒とイベントを一時停止できるかどうかのブール(論理)値が渡される。
引数 listener ー リスナーとして加えるインスタンスまたは関数。
pauseablefalseを渡すと、tickイベントの一時停止はできない。すると、Ticker.setPaused()メソッドでtrueを設定し、一時停止されていても、tickイベントは呼出される。デフォルト値はtrue
戻り値 なし。
removeListener()メソッド
文法 Ticker.removeListener(listener, pauseable)
概要 [静的] 指定されたtickイベントのリスナーを削除する。
引数 listener ー リスナーから除くインスタンスまたは関数。
戻り値 なし。
setPaused()メソッド
文法 Ticker.setPaused(paused)
概要 [静的] trueにすると、一時停止可能なリスナーにはtickイベントが送られなくなる。falseであれば、tickイベントが送られる。デフォルト値はtrue
引数 pausedtickイベントを一時停止する(true)かしない(false)か定めるブール(論理)値。
戻り値 なし。
setFPS()メソッド
文法 Ticker.setFPS(frameRate)
概要 [静的] フレームレート(FPS)を設定する。
引数 frameRate ー 設定する1秒当たりのフレーム数(FPS)またはtickイベント数。
戻り値 なし。
setInterval()メソッド
文法 Ticker.setInterval(interval)
概要 [静的] tickイベント間隔のミリ秒数を設定する。
引数 なし。
戻り値 設定するtickイベント間隔のミリ秒数(または1000/FPS)。
tick()イベント
文法 リスナー.tick(timeElapsed, paused)
概要 定められた間隔(頻度)で繰返し配信されるイベントで、リスナーオブジェクトの同名の関数もしくはリスナー関数が呼出される。間隔はTicker.setInterval()またはTicker.setFPS()メソッドで変えられる。デフォルト値は50ミリ秒・20FPS。
引数 timeElapsed ー 直前のtickイベントからの経過ミリ秒数。
pausedtickイベントが一時停止されている(true)かいない(false)かを示すブール(論理)値。
戻り値 なし。

説明
Tickerクラスは、静的なプロパティとメソッドで成立っています。したがって、インスタンスはつくらずに、直接Tickerクラスを参照してそれらにアクセスします。定められた時間の間隔で、登録されたリスナーにtickイベントを繰返し配信します。間隔として定めた時間は目指す値なので、CPUの負荷が上がれば遅れも生じます。

リスナーのオブジェクトはTicker.addListener()の第1引数に渡して登録し、tick()という名前の関数またはメソッドでtickイベントを受取ります。

Ticker.addListener(this);
function tick() {
  // tickイベントで行う処理
}

var myObject = {};
Ticker.addListener(myObject);
myObject.tick = function() {
  // tickイベントで行う処理
};

Ticker.addListener()メソッドの第1引数にはオブジェクトのほか、tickイベントで呼出す関数の参照を渡すこともできます。すると、関数名は自由につけられます。

Ticker.addListener(animate);
function animate() {
  // tickイベントで行う処理
}

tickイベントの間隔は、Ticker.setFPS()メソッドでフレームレート(FPS)を定めるか、Ticker.setInterval()メソッドに間隔のミリ秒数を渡して変えられます。デフォルトの間隔は50ms(20FPS)です。

Ticker.setPaused()メソッドの引数にtrueを渡して呼出すと、tickイベントの配信が一時的に止まります。イベントの配信を再開したいときは、メソッドの引数にfalseを渡します。ただし、Ticker.addListener()メソッドの第2引数をfalseにして登録したリスナーについては、tickイベントの配信が止められません。

リスナーに定めた関数またはメソッドには、ふたつの引数が渡されます。第1引数は直前のtickイベントからの経過ミリ秒数、第2引数はtickイベントが一時停止されているかどうかのブール(論理)値です[*1]。これらの引数がとくに要らないときは、関数を引数なしで定めて構いません。

[*1] 本稿執筆時「EaselJS v0.4.2 API Documentation」の「tick」イベントの項には、第2引数が説明されていません。

また、tickイベントが一時停止されていて受取れないリスナーの関数は、そもそも呼出されません。つまり、受取れる場合の第2引数値はつねにfalseです。ただし、tickイベントが一時停止されていても、Ticker.addListener()メソッドの第2引数をfalseにして登録したリスナーの関数は呼出されるので、第2引数がtrueになります。


EaselJSで描いた星形を回す」をご参照ください。

参考
[EaselJS v0.4.2 API Documentation] > [Ticker]


作成者: 野中文雄
作成日: 2012年7月20日


Copyright © 2001-2012 Fumio Nonaka.  All rights reserved.