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

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

前々から気になったのですが、気運が高まったのでまとめてみようと思います。

対象バージョンはv0.2.3です。

基本

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

1箇所間違いがありました…
修正版はこちらです pic.twitter.com/KHhiXDXDlY

— axion014 (@axion014) 2017年12月3日

少し補足すると以下のような順番になっています。

input（mouse/touch/keyboard）イベント発火 -> app更新 -> scene更新 -> scene子要素（element）更新 -> interactionのチェック -> 描画処理 -> statsのupdate（あれば）

• 最初の方順番ちゃうやん！って思うかもですが、これについては後述します。
• interactionと描画処理も逆になってますが、これは後にタイミングが変更されました。

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

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

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

// 毎フレーム、３種類のログが表示される 
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')は複数定義でき、定義した順番に実行されます。

また基本的にオーバーライドされないので派生クラスにも何らかの更新処理を仕込みたいときも便利。

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

inputイベントに関する補足

inputイベント発火はappのon('enterframe')によって実現しています。

なので厳密に言えば最初の方は

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

の順になっています。

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

描画処理は？

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