HTML5ゲームエンジンの徹底評価[日本語訳] (2) Three.jsとPixi.js

こちらの記事「HTML5ゲームエンジンの徹底評価 日本語訳 (1) 2D・3D対応とプログラミング言語の比較」の続き

設計思想と機能

設計思想と、どのような機能提供がされるべきかが、重要です。オープンソースエンジンの設計は、主に開発者のワークフローへの考え方と製品コンセプトより決まります。個々の機能を議論するよりも、設計思想と機能をセットで議論するほうがより有意義です。どのようなエンジンも必要なすべての機能を提供することはありません。エンジンのコンセプトに応じて提供される機能は決まります。特にいくつかのエンジンではこの傾向が顕著です。各エンジンをひとつづつ分析してきます。

Three.jsのコンセプト

Three.jsプロジェクトはは2010年4月24日にはじまりました。だいぶ歴史のあるオープンソースプロジェクトです。厳密にはThree.jsはゲームエンジンではありません。 開発者はGitHubでは"JavaScript 3D ライブラリー"とThree.jsのコンセプトを明確に定義しています。JavaScript言語で書かれた3Dライブラリです。ゲームやクールな3D映像などを作るために使うことができます。

設計思想

設計という点では、開発者は簡単にHTML5ベースの3Dコンテンツを作成するのに役立つ非常に軽量な3Dライブラリを目指しています。つまり、シンプルなAPIにより、3Dコンテンツの開発の複雑さが最小限に抑えられています。Three.jsはWebGLとCCS3Dのレンダリングモードの両方をサポートしています。データを分析すると、開発者はWebGLレンダリングを使うことが多いようです。

機能

この記事で花、2Dゲームエンジンについて徹底分析をしたいと考えております。Three.jsと他の一般的な3Dエンジンを機能面では比較しません。

Pixi.js コンセプト

Pixi.jsの公式サイトをみたら、Pixi.jsのことはゲームエンジンだと勘違いします。しかし開発者はホームページ上では、Pixi.jsを "Canvasフォールバック型のWebGLレンダラー"と定義しています。Canvasに依存したWebGLレンダラーということです。 驚くことにPixi.jsは単なるレンダラーにもかかわらず、たくさんの機能を提供しています。

デザインコンセプト

Pixi.jsがもっとも大事にしていることは、レンダリングパフォーマンスです。2Dレンダリングアーキテクチャは非常に成熟しているAdobe Flashを参考に、APIはActionScriptを参考にしており、Pixi.jsは使うのは簡単です。

たとえば、Pixi.jsでは、PIXI.Spriteとしてカプセル化されたDisplyObjectを作成します。画像を表示する場合は、テクスチャ(PIXI.Texture)を使用して描画します。最後にDisplayObjectの座標を設定します。コードは次のようになります。

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レンダリング用に内部構造が最適化されています。

機能

ゲームエンジンの機能を細かく分類することはできますが、すべての分類について詳しくは説明しません。 簡単に比較できるように、二階層で機能を分類しました。