はてなブログでProcessing.jsのFPSを計測する

Processing

サンドボックスタイプのゲームは一度はまってしまうと止め時がわからなくなってしまうのが怖いですね。携帯ゲーム機で出来るものは尚更です。テラリアめ。

stats.jsでProcessing.jsのFPSを計測する

前回に引き続きブログの環境整備の一環として、Processing.jsのFPSを計測してみます。

Processingコード内で自前で計測してもよいのですが、Processing.jsから外部のJavaScriptライブラリを使う練習もかねて、Three.jsの作者であるMr.doobが開発したstats.jsを利用することにします。

stats.jsの読み込み

まず、Proccesing.jsと共にcdnjsでホストされているstats.jsを読み込みます。

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>

stats.jsの呼び出し

次にstats.jsを呼び出します。Processing.jsではProcessing言語の中にJavaScriptを混在させることが可能なので、Processingコードに直接、初期化と更新の処理を追加します。

初期化処理ではstats.jsのインスタンスを作成し、表示位置をdisplayとverticalAlignプロパティで調整した後に、描画先canvasの親ノードに子供として登録します。

var stats = new Stats();
stats.domElement.style.display = "inline-block";
stats.domElement.style.verticalAlign = "top";
externals.canvas.parentNode.appendChild(stats.domElement);

更新処理は、draw関数の最後でupdateメソッドを呼び出します。

void draw() {
  // 通常の描画処理
  stats.update();
}

動作を確認する

今回のコード全文です。

<script src="//cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>

<div style="text-align:center">
  <script type="application/processing">

var stats = new Stats();
stats.domElement.style.display = "inline-block";
stats.domElement.style.verticalAlign = "top";
externals.canvas.parentNode.appendChild(stats.domElement);

void setup() {
  size(200, 200);
}

void draw() {
  background(frameCount % 255, 0, 0);
  stats.update();
}

  </script>
  <canvas></canvas>
</div>

無事、FPSが表示されました。

終わりに

下準備が整いましたので、次回から実際にProcessing.jsを使って何かを作っていきたいと思います。

蛇足ですが、stats.jsとThree.jsの先頭を大文字にするか小文字にするかで今回地味に迷いました。なんとなくThree.jsだけ大文字です。