LoginSignup
5
5

More than 5 years have passed since last update.

HTML5ゲームエンジンの徹底評価[日本語訳] (3) PhaserとEgretEngine

Last updated at Posted at 2018-12-13

こちらの記事の続き

Phaser コンセプト

意図的にPixi.jsを先に分析しました。というのもPhaser自身はレンダリング機能を持っていないからです。Pixi.jsのようなコンセプトで、Phaserは「デスクトップとモバイル向けのHTML5ゲームフレームワーク」というコンセプトです。Phaserは、ゲームエンジンではなく、ゲームフレームワークと定義されています。だからPhaserの機能やレンダリングは見慣れないものです。

ここの翻訳は自信なし
所以,当你看到Phaser的功能设计和它的渲染内核时就不会经验了。

だからPhaserの機能やレンダリングは見慣れないものです。

##設計思想
Phaserはゲームフレームワークと定義されているとおり、ゲーム開発に必要な機能の大半を提供しています。Phaserは独自のレンダリングエンジンを持ちません、Pixi.jsをそのまま使っています。Pixi.jsのレンダリング性能が高いため賢い判断です。プログラミング言語は上に書いた通りです。ゲーム開発には複雑なロジックとたくさんのアルゴリズムが書かれるため、PhaserはTypeScriptをサポートしています。

アーキテクチャという点で、Phaserは、高度にカプセル化をされています。Pixi.jsを使ったことがあれば、レンダリングの設計思想には、Pixi.jsと違いがないことに気づくでしょう。APIはとても使いやすいです。Phaserはゲーム開発に必要なものをすべて提供しています。

ゲームインターフェースを作る際のPhaserの初期化時に、各段階で発生するイベントをカスタマイズすることができます。

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

このコードでは、 Phaser は、preloadcreateupdateなどを定義しています。リソースが読み込まれたら、Phaserはpreloadコールバックを呼び出します。スクリーンがリフレッシュされたら、updateコールバックが呼び出されます。Phaserの一番の機能は、イベント管理およびプラグイン管理だということができます。

機能

Phaserはたくさんの機能を提供していますが、大多数はサードパーティによって提供されています。

image.png

#Egretのコンセプト
EgretはHTML5エンジンとしては新しいエンジンです。たんにHTML5ゲームエンジンだけにとどまらず、公式サイトでば、「ゲームソリューション」と記載されており、HTML5には限定されてはいません。HTML5技術にもとづいたゲームエンジンの提供のみならずネイティブアプリにパッケージングするツールやその他周辺製品を提供しており、ソリューションと位置づけられています。

##設計思想
Egret EngineはTypeScriptに対応しており、2D/3Dの両方に対応しています。アーキテクチャはPixi.jsに近く、Adobe Flashの成熟した2Dアーキテクチャを参考にしています。APIもまたActionScriptを参考にしています。それだけにとどまらずTypeScriptのおかげで、イベントシステムでは、イベントのハンドラーを登録するメカニズムはaddEventListenerといった形で、ActionScriptの似ています。

EgretEngineのコア部分はモジュール型になっており機能ごとに分割されています。さらに興味深いのは、Adobe Flashの素晴らしいダーティーレクタングル(差分描画時に更新が必要なエリア)が実装されていることです。

Canvasモードでは、描画性能を向上させるためにダーティーレクタングルが実装されており、他のエンジンにくらべてそこが優れています。Adobe Flashに慣れていれば、Egret Engineで開発をはじめるのは大変ではありません。

##機能
モジュール型の設計のため、Egret Engineは機能はモジュールに分割されておりライブラリーという形で提供されています。下の表は対応しているモジュールのすべての機能をあわせたものです。ただしWeChat APIパッケージのようなプラットフォームAPIは含まれていません。

image.png

続く
HTML5ゲームエンジンの徹底評価[日本語訳] (3) enchant.jsとcrafty.js

5
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
5