ヽ｜∵｜ゝ(Fantom) の 開発blog？

　UnrealEngine も無料化され、WebGL も一般的になってきたので、さっそく試してみることにした。


　ただ、WebGL 自体がまだ発展途中であり、バージョンアップごとにやり方が変わっているらしいので、あくまでも私がやった方法として記録しておく。バージョンが違う場合は役に立たないかもしれないが、なるべく詳細に書いておくので、つまずいた時の参考にでもして貰えると嬉しい。

※UE4.9 以降は「Emscripten」などサードパーティツールは必要なくなりました。以下のブログなどを参考にすると良いです。
（参考）UE4 4.9から変更になったHTML5ビルドの実行方法


　とりえあず Windows でやるには、いくつか必要なものがあるようだ(UE4.8)。Windows を再起動する必要があるので、先に全てインストールしてしまおう。また既にインストールしてある場合も、Emscripten や Python はバージョンによっては上手い行かないようなので、確認だけはしておいた方が良いかもしれない。また、Xampp は直接 Webサーバにアップロードする場合は必要ない。


■今回使用したもの
・Emscripten 1.27.0（C/C++ などを JavaScript に変換するコンパイラ）
・Python 2.7.10（プログラミング言語：HTML5ビルドに必要）
・Xampp（Webサーバ：ローカルPCで確認するには必要）

※UnrealEngine4.8.3/Windows10 で確認


■Emscripten をインストールする

　Emscripten は 以下のURLから SDK をダウンロードすることになるが、少々問題があった。
http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html

　というのは、掲載時点の最新版 1.34.1 では上手く行かないようだ。ビルド自体は成功するのだが、ブラウザでアプリ起動時に「Uncaught TypeError: Module.getMemory is not a function」といったエラーが出て止まってしまう。

　なので、とりあえず過去バージョンを試してみた。画面をスクロールして下の方にある「Archived releases」の中から「emsdk-1.27.0-full-64bit.exe」をダウンロードしよう。その上位バージョンは Windows の場合は NSIS Installer を使えば良いとあるが、面倒臭そうなのでやめた(笑)。できる人はやってみても良いかも知れない。


　ダウンロードしたら、あとはウィザードに従って適当にインストールするだけだ。以前のバージョンでは GitHub から UE のソースコードもダウンロードして、コンパイルしていたそうだが(?)、現バージョンではその必要はない。


■Python をインストールする

　Python は以下のURLからダウンロードすることになるが、こちらもバージョンには気をつけよう。
https://www.python.org/downloads/


　バージョンは 2.x (掲載時点：2.7.10）をダウンロードして欲しい。私のPCには昔インストした 2.7.8 があったのだが、そちらでも行けた。ついでにバージョン 3.x（掲載時点：3.4.3）も試したが、ビルドに失敗するようだ。

　ダウンロードしたら、あとはウィザードに従って適当にインストールするだけだ。マイナーバージョンはともかく、メジャーバージョン違いは上書きしないで、フォルダを分けてインストールしておいた方が安全だろう。


■UnrealEngine で HTML5(WebGL) ビルドする

　Windows を再起動したら、いよいよ UnrealEngine で HTML5 出力してみよう。インストールさえ成功していれば、あとは簡単にできると思う。

１．新規プロジェクトで適当にテンプレートでも選ぼう。試しに全てのデフォルトテンプレートでやってみたが、どれでも問題なく HTML5 ビルドできた。プロジェクトのターゲット設定は「モバイル/タブレット」「スケーラブルな2D/3D」にしておく。クオリティも十分と感じた。「デスクトップ/コンソール」「ハイエンド」でも構わないが、少し重くなる気がする。



２．プロジェクトが開いたら、「ファイル」メニューから「プロジェクトをパッケージ化＞パッケージング設定...」を開く。



３．「プロジェクト - パッケージ化」では「Build Configuration」を「Shipping」(出荷用)に設定する。「Development」のままだとファイルが巨大になってしまう。この設定はプロジェクトごとのようなので、新規で作る場合は毎回設定する必要がある（メニューの「ファイル＞プロジェクトをパッケージ化＞ビルドコンフィギュレーション」でも変更できる）。



４．次に左側のメニューを少し下までスクロールして、「プラットフォーム - HTML5 SDK」をクリックする。ここの「HTML5 SDK Paths」の「Location of Python.exe」に先にインストールした python.exe のパスを、同じように「Location of Emscripten SDK」にインストールした Emscripten のフォルダパスを設定する。この設定は１度やれば他のプロジェクトでも共通のようだ。



５．設定し終わったら、「ファイル」メニューから「プロジェクトをパッケージ化＞HTML5」でビルドしよう。出力するフォルダを指定したら、「HTML5」というフォルダが作成される。その中の「(プロジェクト名)-HTML5-Shipping.html」がアプリを起動するファイルだ。「index.html」にリネームしておけば使いやすいだろう。



　もし、「ファイル＞プロジェクトをパッケージ化＞HTML5」をしたとき、HTML5 ビルドの説明ページに飛ばされるなら、Emscripten のインストールに失敗している可能性がある。再度インストして Windows を再起動してみよう。ビルドに失敗するなら、Python のバージョンやパスなどを確認すると良い。



（参考）
・Unreal Engine 4.7 PreviewでHTML 5ビルドをしてみる


　ローカルPCで確認するには「Xampp」などをインストールすると良いだろう。インストールや使い方などは他のHPなどに譲ろう。ただ単純に表示するだけならば、あまりバージョンには依存しないだろう。起動も Apache だけで構わない。Web サーバにアップロードするなら、フォルダごとアップすればOKだ。起動ファイルを「index.html」にリネームしておいたなら、フォルダのURLで起動できる。ブラウザは Chrome か Firefox なら WebGL に対応している。また、WebGL は起動に多少時間かかるので、気長に待とう。


（参考）
・今さら聞けない！XAMPPをインストールする方法【超初心者向け】


　こういったサードパーティとの連携で実現するものは、各々のバージョンによって上手く行かない場合も多いので、なるべく古いバージョンもフォルダ分けなどして保管しておいた方が良いかもね。ただ、マイナーバージョンの場合、増えすぎて困るなら安定版（Stable/Recommended等）などを中心に残しておくと上手く行くことが多い。All In One パッケージのようなものがあったら、それが一番なんだけどね。





（関連記事）
【UnrealEngine】キャラをとりあえず簡単に動かしてみる (UE4.9/Windows)
【UnrealEngine】ランチャーがネットに繋がらない
【UnrealEngine】クラッシュを手動で修復する