ヽ|∵|ゝ(Fantom) の 開発blog? ホーム »WebGL
このページの記事一覧

【UnrealEngine】HTML5 (WebGL) ビルドする (UE4.8.3/Windows10)  


 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 出力してみよう。インストールさえ成功していれば、あとは簡単にできると思う。

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



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



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



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



5.設定し終わったら、「ファイル」メニューから「プロジェクトをパッケージ化>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で起動できる。ブラウザは ChromeFirefox なら WebGL に対応している。また、WebGL は起動に多少時間かかるので、気長に待とう。


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


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


スポンサーサイト

category: UnrealEngine

thread: ゲーム開発

janre: コンピュータ

tag: UnrealEngine  WebGL  サンプル 
tb: 0   cm: --
IS<インフィニット・ストラトス> アーキタイプ・ブレイカー
キルドヤ


プロフィール

Twitter

検索フォーム

全記事一覧

カテゴリ

ユーザータグ

最新記事

リンク

PR

▲ Pagetop