2014年05月24日

UE4 による HTML5 の出力を試してみた

SnapCrab_NoName_2014-5-24_13-12-12_No-00

※ここに記載している内容は正式リリース前のものでのテスト結果です。正式リリース版では結果が異なる可能性が有ります。

現在、ソースコードからビルドすると試せる HTML5 (WebGL)の環境で動作するアプリのビルドを試してみました。動作は起動さえしてしまえばブラウザで動いてるとは思えないくらい快適です。しかし、データのダウンロードと読み込み時間はかなり待たされました。

ビルド後のファイルサイズは SwingNinja の場合にはこんな感じです。 UE4Game と名前の付いてるファイルはランタイムファイルです。ランタイム全部で約300MBと結構デカイです。まぁ、正式リリース時にはもっと小さく成ってるかも知れませんが…

SnapCrab_NoName_2014-5-24_18-18-26_No-00

(2014/05/26 追記)

そう言えば、ビルド設定を Development でビルドしていたのに気が付いたので Shipping に切り替えてビルドしてみた所、以下の様な結果と成りました。 Development の時に比べるとかなりファイルサイズは小さく成りましたが、それでもランタイム全部で約150MBと結構デカイですね。

SnapCrab_NoName_2014-5-26_11-16-14_No-00

(追記ここまで)

HTML5 対応のビルドは結構、一筋縄に行かないのと作業時間があまり取れない為に HTML5 向けへのビルド自体はもっと前から使えるようには成っていたのですが実際に確認出来たのが本日と成りました。

実際にやってみると色々と苦労するのでその辺りを「いくらでも根気よく対応してやるぜ」と自信を持って言える方以外は素直にビルド済み版に組み込まれるまで待ったほうが良いかと思います。

ソースコードをビルドした環境

  • Windows 7
  • Visual Studio Express 2013 for Desktop

HTML5 出力したアプリを動作テストした環境

  • Windows 7
  • Firefox Nightly(64bit版)
  • Python によるローカルサーバ

ビルドする前にしっかりと読んでおくべきページ

公式のドキュメント

Unreal Engine | Getting Started: Developing HTML5 Projects

https://docs.unrealengine.com/latest/INT/Platforms/HTML5/GettingStarted/index.html


「 HTML5 のビルドできないぞー」とのユーザの投稿に Epic Games のスタッフが回答しているスレッド

※一番丁寧に回答して有る一番重要なドキュメント。スタッフの回答部分をしっかりとしっかりと読む事。

Why when I build Html5 can Firefox not find the file "MyProject.html"? - UE4 AnswerHub

https://answers.unrealengine.com/questions/18136/html5-build-firefox-cant-find-the-file-myprojectht.html

ビルドするマシン環境によっては読んでおく良いかも?

Emscripten が使用するCPUのコア数の設定についての話。

UnrealBuildTool Crashes Computer When Building HTML5

https://forums.unrealengine.com/showthread.php?445-UnrealBuildTool-Crashes-Computer-When-Building-HTML5&highlight=html5

ビルドする時の注意点

使用するソースコード

4.0.1 とか 4.1.0 などバイナリ版がリリースされたタイミングのものがzipで固められて配布されていますがこちらのものでは HTML5 のビルドは上手く行きませんでした。

このページ記載されているように git checkout latest-preview を実行しましょう。

Emscripten

Emscripten を別途インストールする事。

UE4Editor.exe ではなく UnrealFrontend.exe を使う

UE4Editor.exe ではビルドできません。 UE4Editor.exe では通常のビルドは HTML5 についてはグレーアウトしていて無効な状態に成っています。

ソリューションエクスプローラーに UnrealFrontend というプロジェクトが有るのでこれを右クリックし、「ビルド」を実行すると UE4Editor.exe と同じフォルダにUnrealFrontend.exe という実行ファイルが生成されるのでこれを使ってビルドします。 UnrealFrontend で行う設定はこちらのページを参照。

出力先フォルダ

出力先は常に ( Unreal Engine のソースコードフォルダ)\Engine\Binaries\HTML5 です。

デフォルトでは asm.js が使用するメモリ容量は1.5GB

デフォルトでは asm.js が使用するメモリ容量は1.5GBに設定されています。この状態では TappyChicken はビルドは成功しても起動は出来ませんでした。こちらのページを参考に使用するメモリを増やした所、自分のPCではメモリが足らずに動作出来ませんでしたorz

SwingNinja で有れば、デフォルトの設定のままでゲームが起動出来ました。まずは SwingNinja を起動させるのを目標にしましょう。

動作させる時の注意点

ブラウザ

扱うデータの量が多いので64bit版のブラウザが必要みたいです。 Firefox 推奨、 Chrome は動くけど一部の機能が動作しないという状況みたいです。なお、 Firefox は通常使用のものとテスト用の Nightly ビルド版を一緒に使っているとタブの表示状況などで色々とストレスが溜まる場面が多くなるかと思いますので Nightly ビルド版は新規に Firefox のプロファイルを作成してbatファイルやランチャーアプリを使ってそちらのプロファイルで使用するようにしておくのがオススメです。

データ

Ajax を使ってデータをロードしてる部分が有るのでローカルで動作確認する場合には XAMPP など、ローカルにサーバ立てて動作させないとブラウザの種類や設定によってはセキュリティエラーが発生し、動作しない可能性が有ります。

もし、動作環境に Python がインストールされている場合にはビルドされた HTML ファイルが存在するフォルダに移動してこちらのページに記載されている方法でサーバを立てるのが楽です。

Pythonで簡易Webサーバを立てる - 強火で進め

http://d.hatena.ne.jp/nakamura001/20110925/1316966331

  
Posted by tsuyobi at 17:39Comments(0)TrackBack(0)