EgretEngineでログを出力する

課題

HTML5ゲームの開発のすそ野を広げるために、EgretEngineでいわゆるランゲームをお試しで開発しています。

数秒に一回プチフリーズするので原因を突き止めたいという状況です。

サンプルURL:
https://liberapp.net/applications/643acd30-4074-11e9-bb24-e194797f46d1

各処理のパフォーマンスを測定してログ表示する方法をまとめます

結論

こちらのGitHubのCommitをご覧ください
https://github.com/liberapp-inc/h5g-qiita-jump-and-run/commit/cbc881e5db243fa84247dbb922cafd964517718e

測定方法

以下のようにperformance.now()を使いましょう

    const start = performance.now();
:
// 処理
:
    const cost = performance.now() - start;

MDNによると マイクロ秒までの精度を持った浮動小数点形式でミリ秒を取得できます。

performance.now() メソッドは、ミリ秒単位で計測された DOMHighResTimeStamp を返します。
performance.now() が返すタイムスタンプは、1ミリ秒の分解能に制限されません。その代わりに、マイクロ秒までの精度を持った浮動小数点の値で表します。

ログの出力方法

ロギング方法

egret.log関数(メソッド)でログを出力することができます

Log () method

public log( message:any,...optionalParams:any[] ):void

• Language version: all
• Runtime version: Web, Runtime

Output a log message to the console.

parameter

• Message:any — information to output to the console
• ...optionalParams: any[] —
  http://developer.egret.com/cn/apidoc/index/name/egret.globalFunction

ログ表示方法

ログを以下のように画面にリアルタイムに表示することができます。

そのためにはindex.htmlを以下のようにdata-show-logをtrueにしてください。

index.html

    <div
      style="margin: auto;width: 100%;height: 100%;"
      class="egret-player"
      data-entry-class="Main"
      data-orientation="portrait"
      data-scale-mode="fixedWidth"
      data-frame-rate="60"
      data-content-width="640"
      data-content-height="1136"
      data-show-paint-rect="false"
      data-multi-fingered="2"
      data-show-fps="true"
-      data-show-log="false"
+      data-show-log="true"      
      data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.5"
    ></div>