HTML5 ゲーム エンジンの詳細な評価_html/css_WEB-ITnose

最近、「2016 年に最も人気のある 15 の HTML5 ゲーム エンジン」というタイトルの記事をオンラインで見ました。現在、HTML5 ゲームには多くのソリューションがありますが、どれが優れていてどれが悪いのかについての比較情報はありません。私は意図的に数日をかけて、この記事に登場した 12 個の無料のオープンソース エンジンの比較的完全な比較分析を行いました。これが皆さんのお役に立てれば幸いです。

技術的な製品を比較する場合、通常、技術レベルだけでなく、使用結果に影響を与える多くの非技術レベルも含め、複数の比較要素が存在します。この記事では、以下の観点から複数の比較を行います。

1. 2D と 3D
2. プログラミング言語
3. デザインコンセプトと機能
4. ワークフロー
5. パフォーマンス
6. 学習教材
7. ビジネス アプリケーション

2D と 3D、プログラミング言語の比較

2D と 3D

ゲーム分野で最もわかりやすい分類方法の 1 つは、2D と 3D の区別です。通常、私たちはこれらをゲーム エンジンの分野における 2 つの異なるタイプの製品として考えます。元の記事で言及されているエンジンは、確かに現時点で最も人気のある HTML5 ゲーム エンジンです。多くのエンジンは 2D および 3D オールインワン タイプに属しており、それらを比較するために表を使用します。

プログラミング言語

HTML5 テクノロジーに基づくゲーム エンジンの場合、ブラウザで実行できるスクリプトは JavaScript のみである必要があります。しかし現在、TypeScript、CoffeeScript、LiveScript など、JavaScript の代替手段が数多く市場に出回っています。言語が異なれば、直接的な位置付けも言語哲学も異なります。一部のゲーム エンジンは、言語の選択において非常に興味深いものもあります。

Engine	2D Render	3D Render	JavaScript	TypeScript
Three.js	NO	YES	YES	NO
Phaser	YES	NO	YES	YES
Pixi.js	YES	NO	YES	YES
Egret	YES	YES	NO	YES
enchant.js	YES	NO	YES	NO
craftyJS	YES	NO	YES	NO
Turbulenz	YES	YES	YES	YES
cocos2d-js	YES	NO	YES	NO
PlayCanvas	NO	YES	YES	NO
melonJS	YES	NO	YES	NO
Quintus	YES	NO	YES	NO
Hilo	YES	NO	YES	NO

結論

表からわかるように、次の 3 つのエンジンは 2D および 3D テイクオール タイプに属します。

• Egret
• Turbulenz
• PlayCanvas

Web ゲームの分野で勝利を収めているプログラミング言語は JavaScript と TypeScript です。しかし、ほとんどの HTML5 ゲーム エンジンは依然として JavaScript 言語を使用しています。 TypeScript をサポートすることを選択したエンジンは 3 つだけです。その中で Egret は最も徹底しており、TypeScript のみをサポートし、JavaScript 言語版はリリースされていません。

現在のフロントエンド テクノロジー サークル環境の分析から、多くのフロントエンド フレームワークまたはエンジンが将来、対応する TypeScript 言語ブランチを立ち上げる可能性があります。AngularJS が開発に TypeScript を使用することを発表して以来、TypeScript が使用されてきました。フロントエンドによって大部分が認識されます。 Microsoft はオープンソース界で善戦していると言わざるを得ません。

設計コンセプトと機能

アーキテクチャ設計は大学の科目であり、オープンソース エンジン アーキテクチャの設計パターンは主に作成者のプログラミング哲学と製品の位置づけに依存します。機能だけを議論するよりも、設計思想と機能を合わせて比較検討する方が有意義です。エンジンの機能は多ければ多いほど、その機能はエンジンの配置に基づいて決定される必要があります。以下では、各エンジンを 1 つずつ分析していきます。

Three.js

位置付け

Three.js プロジェクトは 2010 年 4 月 24 日に作成されました。現時点では、比較的古いオープン ソース プロジェクトであると考えられます。 。実際、Three.js は定義上、ゲーム エンジンではありません。著者はGithubのホームページで「JavaScript 3Dライブラリ」と呼ばれるThree.jsの位置づけを明確に定義している。これは、JavaScript 言語に基づいた単なる 3D ライブラリです。もちろん、ゲームでもクールな 3D ディスプレイでも、何にでも使用できます。

デザイン コンセプト

Three.js は、開発者が HTML5 に基づいて 3D コンテンツを迅速に構築できるようにする非常に軽量の 3D ライブラリを作成するように設計されています。同時に、シンプルな API を公開することで、3D コンテンツ開発の複雑さが最小限に抑えられます。

レンダリング環境に関しては、Three.js は WebGL と CCS3D の 2 つのレンダリング モードをサポートしています。現在の使用状況と標準の人気を分析すると、開発者は WebGL レンダリング方式に傾いていることがわかります。

機能

このテキストは主に 2D ゲーム エンジンの詳細な分析を行うことを目的としているため、Three.js の機能をそれらの一般的な 3D エンジンと比較するものではありません。

Pixi.js

ポジショニング

Pixi.js の公式 Web サイトを初めて見たとき、多くの人は無意識にこれがゲーム エンジンだと思うでしょう。しかし、作者はホームページで Pixi.js を「キャンバス フォールバックを備えた 2D WebGL レンダラー」と定義しており、これを中国語に翻訳すると、キャンバスに依存する WebGL レンダラーになります。したがって、Pixi.js は単なるレンダラーであるため、提供する機能がほとんどないことに驚かないでください。

デザインコンセプト

Pixi.js のデザインコンセプトは主にその位置付けに由来します。これは単なるレンダラーであり、レンダリング機能を最大限に活用する必要があります。このような位置付けにより、Pixi.js が他のエンジンのレンダリング コアになります。 Pixi.js をベースに開発されたゲーム エンジンや製品がよく見られます。

Pixi.js の最優先事項は、究極のレンダリング パフォーマンスを追求することです。Pixi.js を使いやすくするために、著者は API 設計において非常に成熟した 2D レンダリング アーキテクチャである Flash を参照し、以下を提供します。 APIも可能な限りActionScriptを参照するようにしました。

たとえば、Pixi.js で PIXI.Sprite としてカプセル化された表示オブジェクトを作成します。画像を表示する必要がある場合は、PIXI.PIXI.Texture テクスチャを使用してレンダリング データを埋めます。最終的に表示オブジェクトの座標を設定するには、コードは次のようになります。

var stage = new PIXI.Container();var texture = PIXI.Texture.fromImage('bunny.jpg');var bunny = new PIXI.Sprite(texture);bunny.position.x = 80;bunny.position.y = 60;stage.addChild(bunny);

Pixi.js の表示アーキテクチャは完全に Flash デザインを参照しており、すべての表示オブジェクトはツリー状のデータ構造に結合されていますが、内部は WebGL レンダリング メソッド用に最適化されています。 Flashのようにレイヤーが使用されないのが大きな違いです。

関数

ゲーム エンジンの関数は多くのカテゴリに細分化できます。1 つの記事ですべての分類の詳細を明確に説明することはできません。分析を容易にするために、すべての機能を 2 レベルの分類に分けました。

Phaser

Positioning

Phaser 自体には独自のレンダリング コアがないため、Pixi.js は分析のために意図的に前面に配置されています。 Pixi.jsの位置付けが異なるのと同様に、Phaserの位置付けは「デスクトップおよびモバイルHTML5ゲームフレームワーク」と呼ばれる「デスクトップおよびモバイルHTML5ゲームフレームワーク」です。 Phaser はそれ自体をエンジンとして定義するのではなく、フレームワークとして定義します。したがって、Phaser の機能設計とそのレンダリング コアを見ると、それは驚くべきことではありません。

設計コンセプト

Phaser はゲーム フレームワークとして位置付けられているため、ゲーム機能の点で非常に包括的です。考えられるほとんどの機能は Phaser によって実装されています。レンダリングに関しては、Phaser には独自のレンダリング カーネルがありませんが、Pixi.js を直接参照します。 Pixi.js はレンダリング パフォーマンスの点で非常に強力であるため、これは確かに賢い選択です。プログラミング言語自体は複雑であり、Phaser は TypeScript のサポートを非常に意識しています。

架构方面，Phaser进行非常多的高度封装。就显示部分而言，如果你使用过Pixi.js就是发现，设计思路本身差别不大，但API使用起来则方便很多。Phaser为一准备好了游戏所需要的一切。当我们像创建一个游戏界面时，可以在Phaser初始化时针对不同阶段进行定制。

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

正向上面这行代码，Phaser为我们定义了 preload 、 create 、 update 等方法，使用时只需要填写callback函数即可。在资源加载时，Phaser会为你调用 preload 回调。 当画面刷新时，可以调用 update 回调。

其他方面，信号和插件系统算是Phaser的最大特色了。

功能

Phaser功能众多，但绝大部分应用其他第三方作为实现。

Egret

定位

Egret算是HTML5游戏引擎中的新起之秀，其定位已不单纯为HTML5游戏引擎。官方将其定位为“游戏解决方案”，同时也并未过多提及HTML5。究其原因在于Egret不仅仅提供了一个基于HTML5技术的游戏引擎，更是提供了原生打包工具和众多周边产品，使其成为“解决方案”。

设计理念

这里单独分析Egret Engine这个产品，其语言使用TypeScript，有2D和3D版本。在架构设计上，同Pixi.js一样，参考了Flash成熟的2D架构体系。API方面，也参考了ActionScript。不仅如此，由于TypeScript的缘故，在事件系统中，也仿照ActionScript实现了 addEventListener 这样的事件注册机制。

内核方面，Egret Engine采用了模块化的设计。这样可以将不同的功能进行解耦。更加有趣的是，Flash中引以为傲的自动脏矩形技术在Egret Engine中也被实现。在canvas模式下，脏矩形会是渲染性能得到提升，比其他引擎更加有优势。

如果你会Flash，那么Egret Engine对你来说不需要过多的学习即可上手。

功能

Egret Engine由于模块化设计的原因，将不同功能放到了不同模块中。这些模块以库的形式提供，下面表中是所有支持模块的总和，但不含平台API部分，例如微信API的封装。

enchant.js

定位

enchant.js并非一个引擎，而是一个框架。同时，enchant.js也不仅仅用于游戏，还可以用于app。

设计理念

鉴于支持游戏开发和APP开发，这个框架必定会顾全一些东西，不能在游戏方面放开手脚。架构设计上，没讲所有的元素全部按照OOP方式设计，内部使用实践驱动，并有效的结合了异步处理。游戏方面则仅仅对动画相关功能做了支持。enchant.js框架提供了一套插件机制，你可以将使用到的功能模块作为插件注入到enchant.js框架中。

enchant.js还特意提供了一个在线的图像库，方便开发者免费使用其中的素材。当从游戏效果来看，以小游戏居多。

功能

enchant.js框架自身提供的功能非常有限，如果需要其他功能，必须自己扩展或者寻找响应的插件。

craftyJS

定位

craftyJS将自己定义为针对JavaScript游戏的框架。

设计理念

由于框架的定位，craftyJS在设计上提供了一些系统级别支持，例如将canvas和Dom两种渲染方式封装为同一套API，尽量小的文件体积，实体组件系统，显示对象封装，碰撞检测，事件系统，还有很多功能组件模块。所有的模块都依赖于实体组件系统的设计。

在实际测试中，craftyJS在API上的设计思路也是使用起来最为不舒服的一个。

功能

Turbulenz

定位

Turbulenz引擎实际上是为自己的游戏渠道中的游戏提供的游戏引擎。因为和自身渠道绑定，所以在引擎中提供了很多low level API。借助这些底层API，可以呼叫Turbulenz游戏渠道中的一些系统级别功能。

设计理念

由于Turbulenz引擎更多的为自己设计，更多的提供runtime支持，从严格意义上将，Turbulenz引擎不算是纯正的HTML5游戏引擎。为了满足其自身渠道的需求，Turbulenz引擎力求增加更加完整的功能，同时提高其运行性能。

功能

由于Turbulenz对很多功能做了扩展，同时推出Low Level API和 High Level API。这里不再对其中庞杂的系统进行功能分析，大家如果有兴趣可以到其官网查看。

cocos2d-js

定位

cocos2d-js是喊着Cocos2D-X的金钥匙出身的，它仅仅是Cocos2D-X的一个HTML5实现的分支。

設計コンセプト

cocos2d-js と Cocos2D-X の設計コンセプトは同じです。すべての API と構文が完全に Cocos2D-X に基づいていることがわかります。 Cocos2D-X については国内の人々はすでによく知っているので、ここではあまり紹介しません。

機能

cocos2d-jsの機能は非常に充実しており、ゲームに必要な機能はほぼ全て揃っています。

PlayCanvas

位置決め

PlayCanvas は主に 3D レンダリングに使用され、PlayCanvas についてはあまり分析しません。を分析します。

melonJS

ポジショニング

melonJS は軽量の HTML5 ゲーム フレームワークであり、プラグイン メカニズムを通じてその機能を拡張します。

設計コンセプト

melonJS はすべての機能設計において軽量であり、これに基づいて必要な機能モジュールを構築できます。 melonJS は Tiled Map を非常に適切にサポートしており、互換性も melonJS の焦点です。

関数

Quintus

位置付け

Quintus は、次のサポートをサポートするシンプルで使いやすい JavaScript ゲーム エンジンとして自身を位置付けています。モバイル版とPC版の両方。

設計コンセプト

Quintus はモジュール式かつ軽量になるように設計されており、シンプルで使いやすい JavaScript 構文を使用するように努めています。 JavaScript API 構造の設計では、標準の OOP パターンを使用するようにしてください。 Quintus は jQuery も使用し、jQuery プラグインを通じてイベントとセレクター構文を実装します。言語設計レベルでは、Quintus には従来の継承の使用に関する設計上の制限がないため、コンポーネント モデルの再利用が容易になります。

関数

Quintus 自体は WebGL をサポートしておらず、提供する関数も少なく、Github では非常に低いランクにあります。

Hilo

ポジショニング

Hilo は Alibaba のフロントエンド チームから派生したエンジンです。公式 Web サイトのトップページより、ポジショニングです。このエンジンは比較的曖昧です。 Hilo は、クロスターミナルのインタラクティブなミニゲーム ソリューションとして、包括的なソリューションとしても知られています。その進化から判断すると、Hilo は実際には Alibaba フロントエンドによってまとめられた一連のツール ライブラリに属しています。エンジン全体は当初から計画および考案されたものではありませんでした。

デザイン コンセプト

Hilo がサポートする機能から判断すると、Hilo のデザイン アイデアはゲーム開発者よりもフロントエンド開発者を対象としています。 Hilo は、さまざまなフロントエンド開発者の習慣に実際に適合する、複数のモジュール パラダイムのパッケージ バージョンを提供します。これらの機能は、ゲームの場合は完全に優先されますが、Alibaba の社内チームの共通エンジンとしては、単純なインタラクティブ ゲームのマーケティングには十分です。シナリオ。

関数

Hilo の関数は、ゲーム開発にとっては比較的単純です。

ワークフロー

チーム開発においてワークフローの確立は非常に重要であり、私自身もこれを大切にしています。小規模なチームまたは個人開発者の場合、これはあまり必要ないかもしれません。プロジェクトが大きくなると、優れたワークフローでは半分の労力で 2 倍の結果が得られます。

エンジンの機能が異なるため、使用するツールも異なるため、ここでは表の比較は行いません。

Three.js

3D はこの記事の範囲外です。同時に、Three.js はゲーム エンジンではなく、ゲーム開発ワークフローはありません。 Three.js が提供するオンライン エディターについて簡単に紹介します。

Three.js が提供するオンラインエディタは Three.js をベースに開発されており、機能はそれほど多くありませんが、非常にコンパクトです。

Pixi.js

レンダラーとしてのPixi.jsは、そのツールサポートも非常にきれいですが、プログラムライブラリを除いて、ツールは提供されていません。

Phaser

Pixi.js と同様、Phaser はツールのサポートを提供しておらず、公式 Web サイトでは 2 つのコード エディターのみを推奨しています。シンプルなオンライン コード エディターも提供されます。

Egret

Egret は、ソリューションの位置づけを組み合わせた多くのツールを提供します。 Egret システム全体で次のツールのサポートが確認できます。

Egret Wing: E​​gret によって作成された IDE エディター。コード編集機能を提供すると同時に、ビジュアル UI エディターも組み込まれています。 Egret Engine の GUI および EUI フレームワークと組み合わせて使用​​されます。

ResDepot: これは、ゲーム リソース読み込みテーブルを構成するために使用される小さなツールです。ゲームに大量のリソースがある場合は、この小さなツールを使用してリソースをドラッグ アンド ドロップします。

TextureMerger: TexturePacker と少し似た機能を持つ、テクスチャ結合用の小さなツールです。

DragonBones Pro: Egret の骨格アニメーション ソリューション用に提供される DragonBones アニメーション エディター。

Egret Inspector: Egret ゲームをデバッグできる Chrome ブラウザベースのプラグイン。

Egret iOS および Android のサポート: これら 2 つのツールは、HTML5 ゲームをネイティブ APP にパッケージ化できます。

他にもいくつかツールはありますが、ゲーム開発とは位置づけが異なりますので、興味のある方は公式サイトをご覧ください。

从上幂啊你的分析看出，Egret在工作流的支持上做的还是非常完成的，从Wing的代码编写，到ResDepot和TextureMerger的资源整合，再到Inspector调试，和原生打包。游戏开发过程中的每个环节基本都有工具支撑。

enchant.js

enchant.js 没有提供任何工具支撑，在官网中也没有任何相关支持工具的介绍。

craftyJS

craftyJS也没有提供任何工具支撑，仅仅是一个开源代码库。

Turbulenz

Turbulenz在你下载的目录中包含了很多工具，大部分与格式转换相关。所有工具均为命令含小工具，没有提供任何可视化操作软件支持。

cocos2d-js

Cocos2d-js近年来变化很大，但对于JS这个分支的支持却少之又少。前一段时间新出了一个工具叫做Cocos Creator。我没有具体使用过，但看截图仿佛有Unity3D的影子。从介绍中看，应该对游戏支持还是不错的，编辑方面目前还欠缺。

PlayCanvas

PlayCanvas也提供了一个在线编辑器，不过是针对它的3D功能。编辑器看上去和Three.js提供的在线编辑器份很相似。这里直接借用官方文档中的截图给大家看一下。

melonJS

melonJS除了源码库以外，也没有提供任何工具支持。但在其官方主页中，包含几个其他编辑器的连接。比如著名的Tiled地图编辑器等。

Quintus

Quintus没有提供任何工具支撑。

Hilo

Hilo没有提供任何工具支撑。

总结

结果并不出乎意料，对于开源游戏引擎来讲，维护库就是耗费作者很大一部分精力，更何况去制作编辑器之类的软件产品。很多引擎都会依赖一些比较流行的第三方工具，例如Tiled、TexturePacker等等。虽然可以实现功能，但整个工作流搭配起来还是多多少少会有一些问题。只有Egret和Cocos2D-js提供了相关可视化编辑工具。而这两对于工作流的理解则完全不同。从产品中不难看出，Cocos2D-JS更像Unity3D，提供一个大而全的软件给开发者用。Egret则是什么角色用什么工具，将产品按照角色划分，针对不同角色和开发流程中的各个环节进行产品设计。

相对来说，Egret的这种方式使得每个工具更加垂直，能够做的功能也更加深入，不会让工具显得臃肿。而Cocos Creator则力求完整，一个软件解决所有事情。

性能

性能测试上，我只针对2D游戏引擎做了一个渲染压力测试。

测试内容为同屏渲染对象数量相同的情况下进行帧频数据对比，为了保证测试的公平性，我使用同一台电脑，相同版本的Chrome浏览器进行测试，游戏场景尺寸均为800*600，显示的图片也为同一张。每个引擎进行同屏5000、10000、20000个显示对象渲染。

其中craftyjs引擎渲染出现问题，这里不作数据对比。

Quintus引擎不支持WebGL渲染模式，因此这里页不作数据对比。

Phaser渲染内核使用Pixi.js，因此Phaser渲染数据参考Pixi.js结果。

所有引擎编写的代码大致相同，开始做for循环，创建定量显示对象，然后在循环中对每个显示对象做旋转操作。

测试代码如下：

Pixi.js

var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});document.body.appendChild(renderer.view);var stage = new PIXI.Container();var texture = PIXI.Texture.fromImage('bunny.jpg');var tnum = 5000;console.log("render Object Number:",tnum);var bunnys = [];for(var i=0;i<tnum;i++){    var bunny = new PIXI.Sprite(texture);    bunny.position.x = Math.random()*800;    bunny.position.y = Math.random()*600;    stage.addChild(bunny);    bunnys.push(bunny);}animate();function animate() {    requestAnimationFrame(animate);    for(var i=0;i<tnum;i++)    {       bunnys[i].rotation += 0.1;    }    renderer.render(stage);}

Egret

class Main extends egret.DisplayObjectContainer {    public constructor() {        super();        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);    }    private tnum:number = 100000;    private bunnys:egret.Bitmap[] = [];    private onAddToStage(event:egret.Event)     {        console.log("render Object Number:",this.tnum);        this.stage.dirtyRegionPolicy = egret.DirtyRegionPolicy.OFF;        RES.getResByUrl('resource/bunny.jpg',this.onComplete,this,RES.ResourceItem.TYPE_IMAGE);    }    private onComplete(event:any)    {        var img:egret.Texture = <egret.Texture>event;        for(var i:number=0;i<this.tnum;i++)        {            var bunny = new egret.Bitmap(img);            bunny.x = Math.random()*800;            bunny.y = Math.random()*600;            this.addChild(bunny);            this.bunnys.push(bunny);        }        this.addEventListener(egret.Event.ENTER_FRAME, this.animate,this);    }    private animate(evt:egret.Event)    {        for(var i:number=0;i<this.tnum;i++)        {            this.bunnys[i].rotation += 1;        }    }}

enchant.js

enchant();window.onload = function () {   var game = new Game(800, 600);    game.fps = 60;   game.preload('bunny.jpg');   game.onload = function() {    var tnum = 100000;    console.log("render Object Number:",tnum);    var bunnys = [];      var scene = new Scene();      game.pushScene(scene);      for(var i=0;i<tnum;i++)        {            var sprite = new Sprite(50, 50);            sprite.image = game.assets['bunny.jpg'];            sprite.x = Math.random()*800;            sprite.y = Math.random()*600;            scene.addChild(sprite);            bunnys.push(sprite);        }        game.addEventListener('enterframe', function() {          for(var i=0;i<tnum;i++)            {               bunnys[i].rotation += 1;            }        });   };   game.start();};

Turbulenz

TurbulenzEngine = WebGLTurbulenzEngine.create({    canvas: document.getElementById("canvas")});var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});var draw2D = Draw2D.create({    graphicsDevice: graphicsDevice});var bgColor = [1.0, 1.0, 0.0, 1.0];var tnum = 50000;console.log("render Object Number:", tnum);var bunnys = [];for (var i = 0; i < tnum; i++) {    var sprite = Draw2DSprite.create({        width: 50,        height: 50,        x: Math.random() * 800,        y: Math.random() * 600,        color: [1.0, 1.0, 1.0, 1.0],        rotation: Math.PI / 4    });    bunnys.push(sprite);}var texture = graphicsDevice.createTexture({    src: "bunny2.jpg",    mipmaps: true,    onload: function (texture) {        if (texture) {            for (var i = 0; i < tnum; i++) {                var sprite = bunnys[i];                sprite.setTexture(texture);                sprite.setTextureRectangle([0, 0, texture.width, texture.height]);            }        }    }});var PI2 = Math.PI * 2;var rotateAngle = PI2 / 360; // 1 deg per framefunction update() {    if (graphicsDevice.beginFrame()) {        graphicsDevice.clear(bgColor, 1.0);        draw2D.begin();        for (var i = 0; i < tnum; i++) {            var sprite = bunnys[i];            sprite.rotation += rotateAngle;            sprite.rotation %= PI2; // Wrap rotation at PI * 2            draw2D.drawSprite(sprite);        }        draw2D.end();        graphicsDevice.endFrame();    }}function render() {    var tnum = 5000;    console.log("render Object Number:", tnum);    for (var i = 0; i < tnum; i++) {        sprite.position.x = Math.random() * 800;        sprite.position.y = Math.random() * 600;    }}

cocos2d-js

window.onload = function(){    cc.game.onStart = function(){        //load resources        cc.LoaderScene.preload(["bunny.jpg"], function () {            var tnum = 100000;              console.log("render Object Number:",tnum);              var bunnys = [];            var MyScene = cc.Scene.extend({                onEnter:function () {                    this._super();                    var batchNode = cc.SpriteBatchNode.create("bunny.jpg");                    this.addChild(batchNode);                    for(var i=0;i<tnum;i++)                    {                      var sprite = cc.Sprite.create("bunny.jpg");                      sprite.setPosition((Math.random()*800), (Math.random()*600));                      batchNode.addChild(sprite);                      bunnys.push(sprite);                    }                    this.scheduleUpdate();                },                update:function () {                  for(var i=0;i<tnum;i++)                    {                      bunnys[i].setRotation(bunnys[i].getRotation()+1);                    }                    this.scheduleUpdate();                }            });            cc.director.runScene(new MyScene());        }, this);    };    cc.game.run("gameCanvas");};

melonJS

var PlayScreen = me.ScreenObject.extend( {    onResetEvent: function() {        me.game.world.addChild(new me.ColorLayer("background", "#5E3F66", 0), 0);        for (var i = 0; i < 5000; i++) {            me.game.world.addChild(new Smilie(i), 3);        }    }});var Smilie = me.Sprite.extend({    init : function (i) {        this._super(            me.Sprite,            "init",            [                (-15).random(800),                (-15).random(600),                {                    image: me.loader.getImage(game.assets[0].name)                    ,width : 50                    ,height : 50                }            ]        );        this.rotation = 0;        this.alwaysUpdate = true;    },    update : function () {        this.rotation += 3/180*Math.PI;        this.angle = this.rotation ;        return true;    },}  );

Hilo

function init(){    var stage = new Hilo.Stage({        renderType:'canvas',        container: gameContainer,        width: 800,        height: 600    });    var sum = 5000;    var bitmaps = [];   var ticker = new Hilo.Ticker();   ticker.addTick(stage);   ticker.start(true);    for(var i = 0; i < sum; i++) {            var bmp = new Hilo.Bitmap({            image: 'images/hero.jpg',            rect: [0, 0, 50, 50],            x: Math.random()*800,            y: Math.random()*600            }).addTo(stage);            bitmaps.push(bmp);    }    function animate() {        requestAnimationFrame(animate);        for(var i = 0; i < sum; i++) {                    bitmaps[i].rotation += 0.1;        }    }    animate();}

我的电脑配置如下：

最终测试结果

Engine	5000 Display	10000 Display	20000 Display
Pixi.js	60fps	60fps	60fps
Egret	60fps	45fps	24fps
enchant.js	7fps	4fps	2fps
Turbulenz	60fps	60fps	60fps
cocos2d-js	60fps	32fps	15fps
melonJS	4fps	崩溃	崩溃
Hilo	12fps	6fps	3fps

結論

上記のテスト方法により、大まかなエンジン性能ランキングを作成できます。

1位：Pixi.jsとTurbulenz

2位：Egret

3位：Cocos2d-js

4位：Hilo

5位：enchant.js

6位 名前：melonJS

最後にテスト レンダリングをリリースします

学習教材

通常は、すべての製品の使い方を学ぶのに適した教材を選択します. 結局のところ、使用中にさまざまな問題が発生します。現在、ゲーム エンジンのドキュメント、ディスカッション グループなどが製品の標準機能になっています。次の表は、各エンジンの「標準構成」を比較したものです。

Engine	Document	API Document	examples	forum	IRC&Other	Language
Three.js	YES	YES	YES	第三方	YES	EN
Phaser	YES	YES	YES	第三方	YES	EN
Pixi.js	YES	YES	YES	第三方	YES	EN
Egret	YES	YES	YES	YES	YES	CN
enchant.js	YES	YES	NO	NO	NO	JP EN
craftyJS	YES	YES	NO	第三方	NO	EN
Turbulenz	YES	YES	YES	第三方	第三方	EN
cocos2d-js	YES	YES	YES	YES	YES	CN EN
PlayCanvas	YES	YES	YES	YES	YES	EN
melonJS	YES	YES	YES	NO	YES	EN
Quintus	YES	YES	NO	YES	NO	EN
Hilo	YES	YES	YES	NO	NO	CN

結論

上記の比較表からわかるように、ほとんどのエンジンは比較的詳細なドキュメントチュートリアルを備えていますが、完成度は異なります。ドキュメントのほとんどは英語で書かれているため、国内の開発者が学習するには少し費用がかかるかもしれません。中国語をサポートする 2 つのエンジン、Egret と Hilo はどちらも中国の製品です。これら 2 つのエンジンのドキュメントに関しては、開発者は Egret の edn.egret.com から大量の中国語資料を確認できます。

学習の難易度という点では、中国語の完全性と人気の両方の点で、Egret が最も簡単であると考えられています。

商用アプリケーション

比較のこの部分は、商用製品アプリケーションの割合です。エンジンが商品として広く使用されている場合には、そのエンジンが商品価値があることを証明できれば十分です。平たく言えば、他の人がこれを使ってゲームを作ることができるなら、あなたもそれができるということです。それでは、これら 2 つの側面について大まかに分析してみましょう。

私は海外の HTML5 ゲーム市場については何も知りません。この市場の分析は大きすぎて評価できません。国産エンジンを分析して、どのエンジンがより多く使用されているかを簡単に見てみましょう。

データサンプリングの基礎として、中国で人気のある HTML5 ゲームプラットフォームである Sina Weibo を使用しました。一人ではエネルギーが限られており、完全に実行することはできません。ゲームアドレスはクライアント側で暗号化されているため、直接取得することはできません。そこで、いくつかのデバッグ ツールを使用してゲーム Web ページのマークアップを調べ、ゲームがどのエンジンで作られているかを判断しました。

最終的な統計結果は次のとおりです:

游戏名称	引擎	游戏名称	引擎	游戏名称	引擎
CEO养成计划	纯HTML5	全民把妹	Egret	鬼吹灯	laya
一夜成名	纯HTML5	决斗西游	Egret	边锋斗地主	cocos
上吧主公（萌喵闯三国）	纯HTML5	呆呆忍者村	cocos	少女战机	Egret
三国魂	Egret	全民穿越之宫	Egret	虫虫大战	createjs
传世霸业	cocos	召唤师学院	cocos	我欲封天H5	Egret
传奇世界	Egret	全民狂戳	Egret	萌战姬	Egret
全力游戏	Egret	全民魔魔哒	cocos	我们的萌萌	Egret
全员加速中	Egret	战神	cocos	药水英雄	cocos
全民宫斗	纯HTML5	全民首富	纯HTML5	愚公移山	Egret
坦克风云	Egret	无限穿越	cocos	觉醒吧MT	cocos
大主宰	cocos	星愿城市	cocos	悟空归来 – 西游神传	Egret
大侠归来	Egret	深海保卫战	Egret	美人心计	Egret
大大大掌门	Egret	泡泡奥特曼	Egret	德州扑克H5	Egret
天天赚钱	Egret	暴走大乱斗	Egret	经典玛丽h5	Egret
小鸟情人OL	纯HTML5	狂挂传奇	Egret	少年，好功夫	Egret
少女H计划	Egret	盗墓英雄	Egret	秘密魔法花园	cocos
少女H计划2	Egret	神传	Egret

上の表に示すように、合計 50 のゲームが見つかりました。エンジンは 50 個あり、そのうち 6 個は純粋な HTML5 を使用して開発され、30 個は Egret を使用して開発され、14 個は Cocos2d-js を使用し、1 個は laya を使用し、1 個は createjs を使用して開発されました。

統計結果は次のとおりです:

Egret と Cocos2D-js が市場の大部分を共有していることは、難しくありません。実は白鷺が半分以上を占め、58%に達します。 Egret は国内の HTML5 ゲーム市場では依然として強いようです。

概要

1. Three.js: ベテラン 3D ライブラリとして、すでに多くの事例があり、現在 PC のマルチ Web ページ 3D に適しています。
2. Phaser: ドキュメント、チュートリアル、ケースは非常に充実しており、機能も豊富です。独立したゲーム開発や小規模チームに最適です。
3. Pixi.js: レンダラーとしての描画パフォーマンスは非常に優れていますが、ゲーム機能のサポートが非常に貧弱で、オタクなプログラマーに適しています。
4. Egret: 優れたパフォーマンスと優れたワークフロー サポートを備えており、中規模および高負荷の HTML5 ゲーム開発に適しており、多くの商用プロジェクトで検証されており、商用チームに非常に適しています。
5. enchant.js: パフォーマンスにばらつきがあるため、推奨されません。
6. craftyJS: ドキュメントとチュートリアルは完璧ではないため、対応する技術サポートを見つけるのは困難です。お勧めできません。
7. Turbulenz: パフォーマンスは優れていますが、独自のビジネスとバンドルされており、国内市場には適していません。
8. cocos2d-js: ベテランのエンジンで、パフォーマンスはランキングの真ん中にあり、ワークフローのサポートも比較的充実しており、お勧めします。
9. PlayCanvas: 重い 3D ゲーム開発エンジン この記事は 3D を推奨しません。
10. melonJS: パフォーマンスは理想的ではないため、推奨されません。
11. Quintus: WebGL モードをサポートしていないため、パフォーマンスが低く、推奨されません。
12. Hilo: Alibaba のフロントエンド チームの仕事は、フロントエンド開発エンジニアに偏っていて、プロのゲーム開発とは程遠いものです。HTML5 マーケティングにおける小規模なインタラクションに推奨されます。