Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
3
Help us understand the problem. What is going on with this article?
@motoyasu-yamada

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

More than 1 year has passed since last update.

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

機能

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

image.png

3
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
motoyasu-yamada
1999年にスパイシーソフト起業、iアプリ等のマーケット「アプリゲット」や、カジゲー「チャリ走・糸通し」等のゲーム配信を手がける。約20年近くたち、新しい事業に取り組むために、2018年より新会社「Liberapp」を立ち上げ。HTML5アプリのプラットフォームを手掛けるスタートアップです。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
3
Help us understand the problem. What is going on with this article?