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

HTML5テクニカルノート

EaselJS 0.8.0: フレームレートを扱う

ID: FN1505001 Technique: HTML5 and JavaScript Library: EaselJS 0.8.0

Ticker.framerateプロパティ
文法 [静的] Ticker.framerate
プロパティ値

1秒当たりに進めるフレーム数となるフレームレート(FPS)の目標値を示す。
Ticker.intervalプロパティ
文法 [静的] Ticker.interval
プロパティ値

Ticker.tickイベントが送られるミリ秒間隔の目標値を示す。
MovieClip.framerateプロパティ
文法 MovieClipオブジェクト.framerate
プロパティ値

MovieClipオブジェクトが1秒当たりに進めるフレーム数(FPS)を示す。デフォルト値(null)では、DisplayObject.tickイベント(定数"tick")ごとにフレームが進む[*1]。

説明

アニメーションの進行する速さは、1秒当たりに進めるフレーム数となるフレームレート(FPS)またはフレームを進めるミリ秒間隔で表されます。Ticker.tickイベントがおおもととなって、Stageオブジェクトを頂点とする表示リスト内のインスタンスやイベントリスナーに送られます。値は目標値で、処理の負荷などにより間隔にはばらつきが生じます。

Ticker.framerateプロパティは、Tickerクラスが配信するTicker.tickイベントのフレームレート(FPS)を示します。内部的にはTicker.intervalプロパティでTicker.tickイベントの間隔が定められており、FPS = 1000 / Ticker.intervalで換算されます。Ticker.timingModeプロパティに定数Ticker.RAFを与えると、プロパティTicker.framerateとTicker.intervalの定めは無効になります。

MovieClip.framerateプロパティがデフォルト値nullのとき、インスタンスはDisplayObject.tickイベント(定数"tick")ごとに1フレーム進みます。プロパティに値を定めると、そのフレームレートにもとづく時間が過ぎたときにフレームを進めます[*2]。

フレームを進める仕組みは、Stage.update()メソッドに渡されるtickイベントオブジェクト(または適切なdeltaプロパティを備えたオブジェクト)にもとづきます。tickイベントの間隔にはばらつきがありますので、MovieClip.framerateプロパティで定められるフレームレートも厳密な値にはなりません。

なお、プロパティTicker.framerateとTicker.intervalが備わったことにもとづき、つぎの4つのメソッドは使うことが推奨されなくなりました。替わりに、ふたつのプロパティを用います。

[*1] 本稿執筆時の公式ドキュメントのMovieClip.framerateプロパティの項では、デフォルト値が0とされています。けれど、0に定めるとフレームは進まなくなります。

[*2] MovieClip.advance()メソッドがフレームの進行を担います。

[*3] 本稿執筆時の公式ドキュメントのTicker.getFPS()メソッドとTicker.getInterval()メソッドの項は、替わりに使うべきプロパティが入れ違いになっています。

例

Stageオブジェクトの子に加えたMovieClipインスタンスを変数(my_mc)に納め、つぎのようなJavaScriptコードを書くと、Ticker.tickイベントは40FPS(25ミリ秒間隔)で送られつつ、MovieClipインスタンスのフレームは10FPS(100ミリ秒間隔)で進みます。

Ticker.framerate = 40;
my_mc.framerate = 10;


作成者: 野中文雄
作成日: 2015年5月20日

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