EmscriptenとC++で作るネイティブライクな商用ブラウザゲーム

株式会社Aqualead代表取締役

林原 裕之

2015年08月26日

自己紹介

林原 裕之

株式会社Aqualead代表取締役

2001年よりコンシューマゲーム会社に入り、7年間コンシューマゲーム開発を行う。

その後独立し、ゲーム用ライブラリAqualeadフレームワークを開発しながら、

ゲーム開発案件を受け、今に至る。

2/22

今回の講演内容概要

『EmscriptenとC++で作るネイティブライクな商用ブラウザゲーム』

• Emscriptenとは

• ブラウザゲーム開発の現状

• Emscriptenでつくるゲームの特性

• 実際に商用ゲームを開発した経験について

• 実際に作ったゲームの構成について

• ソース付きサンプルについて

3/22

Emscriptenとは

・Emscriptenとは、C++で書いたアプリをJavaScriptに変換してブラウザで動かすためのフリーウェア。使用することで、ブラウザアプリをC++で記述が可能

・EmscriptenはLLVMというコンパイラ基盤を使用。

C++のソースコードをLLVM形式の中間コードに変換し、それをJavaScriptに変換することで、ブラウザでC++で作られたアプリを動作させる

※今回の講演で説明するブラウザゲームは、一度ゲームのページを開くとその後ページ遷移を行わない、ネイティブアプリのようなゲームを想定。以降、ブラウザゲームと呼ぶ場合は、すべてこのようなタイプとする

4/22

変換できるC++のソースについて

・Emscriptenは、一旦アセンブラのような中間コードを経由することで、C++の言語的な特性が消え、単なるアセンブラのソースになるため、ほとんどのC++ソースをそのままJavaScriptに変換できる

・注意点１：Emscriptenで変換するソースでは、アライメントのずれたメモリアクセスは出来ない

・注意点２：スレッドが使用できない

・注意点３：setjmp,longjmpが常に使えるとは限らない

5/22

HTML5について

・ゲームを作る上で最も重要な描画に関しては、ブラウザのHTML5という規格を使用

・HTML5とは、ブラウザで使用するHTMLのバージョン5に相当するもの

・Flashのようなプラグインを使わなくてもブラウザだけでゲームのようなリッチコンテンツが作れる

・描画に使用するのはHTML5 Canvas

・その他、効果音やムービー再生の仕様、WebSocketのような通信仕様、Web Storageのような簡易ストレージ機能なども追加された

6/22

HTML5 Canvas

・Flashを使わずリアルタイムアニメーションが出来る

・秒間６０フレームでゲームを動かすことも可能

・ゲームの描画に必要な、αチャンネル付き画像合成、加算・減算等のブレンディング、ラインや矩形等のプリミティブ描画、描画範囲のクリッピング、テキストの描画等一通りの事が可能

・テクスチャ描画時、α値は指定出来るが、頂点カラーのような色変更が出来ない

・UVを指定するような三角形描画が出来ないため、ポリゴンモデルの表示や、メッシュ変形などが出来ない

7/22

WebGLについて

・ブラウザ上でOpenGLESを動作させる仕様

・OpenGLESはAndroidやiOS等のスマートフォンでも使用されている描画API

⇒スマートフォンで表現できるようなグラフィック表現は全て可能

・HTML5 Canvasに比べ動作環境が限られるが、順次解決しつつある

⇒PCのブラウザは、ChromeやFirefoxは早くから対応済。IEは11以降から対応。スマートフォンは、Android5.0以降、iOS８以降からの対応

8/22

採用例

・弊社ではEmscriptenを使用した商用ゲームを３本開発

スマートフォンブラウザ＋Androidネイティブ+iOSネイティブを１本

PCブラウザ+Androidネイティブを２本

⇒C++で組むことで、ブラウザ版とネィティブアプリ版を同時開発出来る

採用ゲーム内のひとつにおけるCanvasとWebGLの割合

Canvas：63.6％

WebGL：36.4％

9/22

Emscripten以外のブラウザゲーム開発環境

・Flashプラグイン○歴史的に一番古く、最も使われている

×スマートフォンが非対応

×セキュリティ問題がよく発生する

・Unityプラグイン○Unityの機能がほぼ使えるため、開発が容易で3Dも問題がない

×ユーザーにプラグインをインストールさせる必要がある

×ChromeがUnityプラグインのサポートを終了

・JavaScript+HTML5○プラグインを必要としない

×ライブラリやツールを用意する必要性がある

10/22

Emscriptenでのブラウザゲーム開発を行うメリット

○ネイティブアプリとの同時開発が可能

○C++の資産が使える

○準備を整えればメインの開発をPC上のC++統合環境で行うことも可能

○複数人数で開発する場合に、型チェックがないスクリプト言語ではなくコンパイル式の言語を使用出来る

11/22

Emscriptenでのブラウザゲーム開発を行うデメリット

×ブラウザのバージョンアップ等の仕様変更の影響を受けやすい

今までに発生した問題

・サウンドによるブラウザクラッシュ

・大きな関数によるブラウザクラッシュ

×ゲーム内容を確認されやすい

実質アセンブラソースのようなものなのでJavaScriptで直接記述したものに比べれば解析しにくい

画像をpngやjpg等で使用する場合、見られて困るような画像に対しては、何かしらの暗号化等を行う必要がある

12/22

Emscriptenで描画を行う方法

・ブラウザ側：HTML5 CanvasかWebGLを使用

・C++側：Emscriptenでは、SDLとOpenGLES2.0をサポート

・HTML5 Canvasを使用する場合、SDLを使用

・WebGLを使う場合は、OpenGLES2.0を使用

⇒OpenGLESはWindowsではサポートされていないので、angle projectというライブラリを使用する

・どちらの場合も、初期化周りに若干のプラットフォーム毎にifdefを入れる必要があるが、ゲーム本体はPCのexeと、ブラウザで動作するJavaScript版の同時開発が可能

13/22

Emscriptenでのファイルアクセスについて

・Emscriptenを使用する場合、ファイルアクセスの部分がネイティブアプリと違いが出る

ネイティブアプリ：ストレージから読み込む

ウェブアプリ：原則毎回Webからダウンロード

Emscripten：http経由のファイル単位の読み込み、仮想ファイルシステム

・ある程度の規模のゲームになるとこの仮想ファイルシステムのイメージファイルが巨大化が問題

⇒分割読み込みの実装で対応

・画像と音関連は、ブラウザの機能を使い直接読み込める

14/22

パフォーマンスについて

・ゲームを実際に作る方に取っては、実際どの程度の速度が出るかというのは気になる点の一つ

・PCブラウザであれば、６０フレーム動作が十分可能

・最近の環境であれば、WebGLを使えば描画負荷はほとんど気にならなくなる

・スマートフォンでは、６０フレームは厳しい

⇒１５フレーム程度で動かすのが無難

15/22

メモリについて

・Emscriptenを使用してゲームを作る場合、メモリ使用量にも注意する

・低スペック環境で動作させて動かないと言われた場合、メモリ不足である可能性が非常に高いため、出来る限りメモリを浪費しない

・前述した大きな関数の問題はこのメモリに関連している

⇒大きな関数が存在すると、ブラウザの使用メモリが一気に増大し、その後減るという挙動が発生する。この時メモリ不足が発生するとそのままアプリが落ちる

16/22

ゲームライブラリについて

・Emscriptenは単にC++からJavaScriptへ変換するツール

⇒ゲームを作るためには何かしらのゲームライブラリを使った方が簡単

・UnityやUnreal用に、Emscriptenを用いてJavaScriptに出力できるゲームエンジンもあるが、C++を使用してEmscriptenをサポートしているゲームライブラリはほとんどない

・弊社では、自社開発のAqualeadフレームワークを使用

⇒コンシューマ機,iOS,Android,Windowsで動作する

⇒外部向けライセンスも行っている

17/22

スマートフォンでの動作について

・Emscriptenで開発したアプリは、Android,iOS等のスマートフォンブラウザで動作させることも可能だが、PCに比べ、メモリや速度等の制限が増える

・iOSのブラウザは、各種スワイプでブラウザ自体のページ戻りや、メニューオープンなどの機能があるため、スワイプに注意する必要がある

・音に関しての制約

⇒HTML5のAudioを使うと同時に１音しか音を鳴らせない

⇒最初の音はタッチしてからでないと鳴らせない

・Android標準ブラウザの制約

テクスチャへの書き込みが実質出来ない

18/22

64ビットiOS8の問題

・現在、スマートフォンでEmscriptenのアプリを動かすための最大の問題が、64ビット環境のiOS8のSafariのバグ

⇒Appleにもバグレポートとして報告を行っているが、8.4.1の時点ではまだ発生する

⇒結果的に、この問題を回避してアプリをリリースする事は出来たが、調査と対策に一ヶ月以上かかった

・現時点ではiOSでのブラウザアプリをEmscriptenで作ってリリースすることはおすすめ出来ない

19/22

実際のアプリの構成

Emscriptenから少し離れ、実際にリリースしたアプリの構成を簡単に紹介

・開発した商用アプリは、全てゲーム内課金があるタイプですので、サーバーと通信しながら動作

・サーバーは、Tomcat+Scala+Jythonで構成

・Scalaとは、JVM上で動作する関数型言語で、オブジェクト指向言語に慣れた人でも比較的使いやすい

・Jythonとは、JVM上で動作するpython

・サーバープラットフォームはAmazonWebServiceを使用

・使用したものは、Elastic Beanstalk+DynamoDB+EC2+S3+CloudFront

・通信にはWebSocketを使用

20/22

サンプルについて

弊社開発ゲームのソース公開

・ゲーム内容はシンプルなタワーディフェンスタイプのゲーム

・メニューに関してはPhotoshop、演出系はFlashを、キャラのアニメーションはSpriteStudioのデータをコンバートして使用

・ソースの使用に関してはライセンスフリー。ただし、画像等のリソースに関しては、使用禁止

・ダウンロードは弊社のHPから行うことが可能

http://www.aqualead.co.jp/

21/22

質疑応答

22/22

本日はご清聴ありがとうございました。

講演内容に関しまして疑問点、ご不明な点がございましたら、講演終了後でも構いませんので、お気軽にお問い合わせください。

E-mail：hayashibara@aqualead.co.jp

Twitter：https://twitter.com/aqrs

※サンプルのダウンロードはこちらからどうぞ。 http://www.aqualead.co.jp/