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

# やりたいこと

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

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

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

https://qiita.com/motoyasu-yamada/items/777b50d658d47f920a4d


# 手順

## プロジェクト作成
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/240dc4cd-663c-5ebb-8f2c-b5e20246a491.png)

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

## 空のプロジェクト
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/c6ac923d-9271-28d2-8f67-389b72fce96a.png)

## 画像を配置する
画像ファイルをステージにドラッグ＆ドロップする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/0de9f9a4-811c-258b-b791-c30c4cc3b01f.png)

## シンボルに変換する

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/239e50b6-3ecf-3bf8-19db-96495b61880b.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/b2158d08-29af-9fda-85e8-b288b9a04fb2.png)

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/97640337-f269-2a7c-df0e-4209d9f02f68.png)

ループさせるために回転処理用のフレームに`run`というラベルをつける。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/30d1b506-f1af-5dc0-b769-407152a6282a.png)


## ソースコードエディタを開く
レイヤー及びキーフレームを選択して「F9」
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/1e71bb1b-b5e9-1946-a307-7e020516a10e.png)

### グローバル
![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/9c8fe390-d415-459f-a718-912f9e0a2afa.png)


```js:global
var N = 10000;
var objects = [];

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/9f4e6060-c6fc-ac91-eb7f-ca478abaac11.png)

### フレーム1 初期化

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/fc43ac6a-1c87-8aef-8f8c-c889bbdec85d.png)


```ts: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 回転

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/b1104f8d-e152-5b53-4bd2-0c9735cfe6de.png)


### フレーム3 ループ＆測定

```js: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");
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/d07845e7-74fd-2ef5-cc26-43b4dd696725.png)

# まとめ

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/302078/54d7ffc0-b867-52a1-0be3-8cb803fdcdb0.png)