Animate CC で HTML5 ベンチマークアプリを作って TinyUnity / EgretEngineと比較する

やりたいこと

こちらの各HTML5ゲームエンジンの比較がよくまとまっています
https://cloud.tencent.com/developer/article/1075163

このベンチマークと同じものを動かしてみたいと思いAnimate CCでプロジェクトを作り動かしてみました

この記事とほぼ同じ方法で画像オブジェクトを数千～数万個動かして、Egret / Tiny Unityの性能を超ざっくりみてみたい。

手順

プロジェクト作成

新規ドキュメントを「ゲーム」種別→「最高」プリセットで作成します

空のプロジェクト

画像を配置する

画像ファイルをステージにドラッグ＆ドロップする。

シンボルに変換する

シンボルの名前をtestにする

キーフレームを作成する

初期化用のキーフレーム1、回転処理用のフレーム2、計測＆ループ用のフレーム3を作成する。

ループさせるために回転処理用のフレームにrunというラベルをつける。

ソースコードエディタを開く

レイヤー及びキーフレームを選択して「F9」

グローバル

global

var N = 10000;
var objects = [];

var executedFrames = 0;
var startedTime = currentMillis();

function currentMillis() {
	return (new Date()).getTime();
}

フレーム1 初期化

frame1

var stage =  new createjs.MovieClip(); 
stage.name = "stage";
this.addChild(stage);
executedFrames++;

for (var i = 0; i < N; i++) {
    var o = new lib.test();
	o.x = Math.random() * 1024;
	o.y = Math.random() * 968;
	o.name = i.toString();
	stage.addChild(o);
	objects.push(o);
}

フレーム2 回転

frame2

for (var i = 0; i < N; i++) {
	var o = objects[i];
	o.rotation = (o.rotation + 1) % 360;
}

フレーム3 ループ＆測定

frame3

executedFrames ++;
if (executedFrames % 100 == 0) {
	var nowTime = currentMillis();
	var elapsedTime = Math.floor(nowTime  - startedTime) / 1000;
	var fps = Math.floor(executedFrames/ elapsedTime);
	console.log(fps, executedFrames, elapsedTime);
}

this.gotoAndPlay("run");

まとめ

あくまでも手元のパソコン(X280 / Chrome)でのテストですが、TinyUnityは5FPSですがEgretEngineは60FPS近く、Animate CCは10FPS弱で安定してでます。

ソースコードはこちらから
https://github.com/motoyasu-yamada/HTML5-Benchmark-201812