UE4.7から非常にお手軽な方法でHTML5とWebGLで作ったコンテンツをインターネット上に公開が出来るようになりました。そして今回は無料版のDropboxを使って、UE4のHTML5コンテンツを公開するところまでやってみたいと思います。
今回使用するUE4のバージョンは現時点での最新の安定板であるUE4.7.6です。
事前にプロジェクトの作成
HTML5での公開を行ないたいプロジェクトを作成しておきます。今回は最近自分で自作したステートマシンのサンプルプロジェクトをGitHub上に公開しましたので、これをWebに公開する事にしました。
これの内容に関してはぜひ中身を参考にしてみてください。ステートマシンだけでなく、ブループリント コンポーネントやインターフェースの使い方など参考になる点が沢山あると思います。
それでは今回このプロジェクトをHTML5として公開するまでの手順を解説したいと思います。
Dropboxの導入
まずは無料版Dropboxを導入しておきます。
もちろん有料が使えるのであればその方が何かと良いですが、今回は無料でも大丈夫です。具体的なインストール方法などはリンク先から登録するの手順に従って導入してください。
Emscriptenの導入
UE4でHTML5のパッケージデプロイのために必要となるEmscriptenをインストールしておきます。
Download and install — Emscripten
今回はWindows版として動作させますので、Windowsの"Emscripten SDK Web Installer"を使います。確認はしていませんが、"Emscripten SDK Offline Installer"でも多分大丈夫です。
基本的に特に問題がなければインストーラーの画面の指示に従い、インストールを行なっていきます。インストーラーが環境変数などを自動で設定してくれるので、インストールが完了したら一度Windows全体に設定を適用するためにOSごと再起動しておきます。（再起動なしでもいけるらしいですが、念の為）
UE4上でHTML5ビルド
ここまでの手順が正常に行なわれておれば、あとの手順は非常に簡単です。
まずビルドを行なう前に、画像のようにビルドコンフィギュレーションを"開発（Development）"から"出荷（Shipping）"へと変更しておきます。これを行なわないと、ランタイムパッケージサイズが3倍から4倍ほど大きくなり、転送量がとても大きいものとなってしまうので、HTML5でのビルドを行なう前に必ずやっておきます。
あとはプロジェクトをパッケージ化から"HTML5"を選択するのみです。この時にビルドが開始されず、Webページに飛ばされてドキュメントが開かれた場合、Emscriptenのインストールが正常に行なわれていない可能性があります。OSを再起動せずに行なうとそのような事が起きやすいです。
あとはパッケージビルド後にどのフォルダーに出力するかを選択してOKを選択すればビルドが開始されて、指定のフォルダー上にHTML5のパッケージが出来あがります。
指定のフォルダー上にHTML5というフォルダーがあるはずです。
開くと画像のような感じになって出力されていればOKです。もし、パッケージビルドでエラーがでている場合は出力ログなどを確認しながらエラーを取り除いておきます。今回はとても小さいプロジェクトなので全体でも65MB程度と、かなりミニマムなプロジェクトとなりました。
Dropbox上にデプロイ（公開）する
あとはDropboxが使えるようになっていれば、特に何も考えずに出力されたHTML5フォルダーをそのままDropboxの任意のフォルダー上に配置します。
Dropbox上でデプロイされたかを確認するには各ファイルごとにステータスアイコンがつきますので、それが緑のチェックアイコンになるまでは待機しておきます。ステータスアイコンが完了する前にアクセスしようとすると正しく動かない可能性がありますので、注意してください。
最後にフォルダー内に1つだけ存在する、".html"ファイルを右クリックして、"公開リンクをコピー"を選択します。これであとはWebブラウザー上にリンクURLをペーストして実行すればHTML5デプロイしたものが遊べるはずです！
以下のリンクをクリックしてもらえば今回公開したゲームを遊ぶ事ができます。
※HTML5 & WebGL対応ブラウザーを使用する必要があります。Firefox、Google Chrome、Opera、Vivaldiなど。IEは非対応。
※転送量があまりに多すぎた場合にDropbox側から制限をかけられる可能性があります。そうなった場合にはリンク公開を事前予告なしに閉じる可能性がありますのでご了承ください。
HTML5でコンテンツを作る工夫
Webで公開する場合、待ち時間や転送量を考慮するために少しでもファイルサイズを削る必要があります。無駄なアセットは極力入れないようにしましょう。
そしてHTML5ビルドの見た目は基本的にモバイルレンダリングと同等です。実行時の見た目を確認する場合にはOpenGL ES2プレビューを使用する必要があります。
あとは今回解説したビルドコンフィギュレーションを"開発"から"出荷"にするのも忘れないでください。これらの基本的な事を守ればHTML5とWebGLを使ったUE4のコンテンツを公開するのは全く難しくありません。
Dropboxのお手軽さと組み合わせれば更に簡単です。ただし転送量には常に注意してください。
2015/09/01追記
UE4.9から上記の方法は使えなくなったようです。ひとまずローカルでのテスト方法は下記の記事を参考にしてください。
