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

EgretEngineでログを出力する

More than 1 year has passed since last update.

課題

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ミリ秒の分解能に制限されません。その代わりに、マイクロ秒までの精度を持った浮動小数点の値で表します。

https://developer.mozilla.org/ja/docs/Web/API/Performance/now

ログの出力方法

ロギング方法

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

ログ表示方法

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

IMG_1961.PNG

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

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>
motoyasu-yamada
1999年にスパイシーソフト起業、iアプリ等のマーケット「アプリゲット」や、カジゲー「チャリ走・糸通し」等のゲーム配信を手がける。約20年近くたち、新しい事業に取り組むために、2018年より新会社「Liberapp」を立ち上げ。HTML5アプリのプラットフォームを手掛けるスタートアップです。
https://twitter.com/MotoyasuYamada
Why not register and get more from Qiita?
  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
No 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
ユーザーは見つかりませんでした