Help us understand the problem. What is going on with this article?

phina.jsのフレーム更新サイクル

More than 1 year has passed since last update.

前々から気になったのですが、気運が高まったのでまとめてみようと思います。
対象バージョンはv0.2.3です。

基本

こちらの図が大変分かりやすいです。

いくつか補足すると以下のような順番になっています。

0. (app更新)
1. input(mouse/touch/keyboard)イベント発火
2. app更新
3. scene更新
4. scene子要素(element)更新
5. interactionのチェック(onpointstart等の発火)
6. 描画処理
7. statsのupdate(あれば)
(最初に戻る)

  • 最初の方のカッコ書き何?って思うかもですが、これについては後述します。
  • interactionと描画処理も逆になってますが、これは後にタイミングが変更されました

こちらのサンプルで実際に動作確認できます。

onenterframeとon('enterframe', func)とupdate

app/scene/element系クラスについては以上の更新処理関数を定義しているとそれが毎フレーム実行されます。updateはおなじみですね。

// 毎フレーム、3種類のログが表示される
phina.define('MainScene', {
  superClass: 'DisplayScene',

  init: function(options) {
    this.superInit(options);

    this.on('enterframe', function(e) {
      console.log('scene: enterframe');
    });
  },

  onenterframe: function(e) {
    console.log('scene: onenterframe');
  },

  update: function(app) {
    console.log('scene: update');
  },
});

実はこれらも順番が決まってて、

onenterframe -> on('enterframe', func) -> update

の順で実行されます。

on('enterframe', func)は複数定義でき、定義した順番に実行されます。
また基本的にオーバーライドされないので、派生クラスにも何らかの更新処理を仕込みたいときも便利です。

onenterframeは…あんまり使い所が浮かびませんが(というかそもそも使用が推奨されていない)、真っ先に実行したい処理を明示したいときに使うといいかもしれません。

inputイベントに関する補足

inputイベント発火はappのon('enterframe')によって実現しています。
なので厳密に言えば最初の方は

app.onenterframe -> input発火 -> 他のapp.on('enterframe') -> app.update -> scene更新...

の順になっています。
ちなみにmouse -> touch -> keyboardの順で発火します。

描画処理は?

図のとおりですが、何か思うところがあったら追記するかも…。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away