Help us understand the problem. What is going on with this article?

UE4のHTML5出力でTappyChickenを飛ばすまで

More than 5 years have passed since last update.

【前提】

・Unreal Engine 4.8.1使用を前提に記述しています
・うそを書くつもりはありませんが。経験に基づいて記述しているため、間違いが多分にある可能性があります。
・Windows環境前提です
・手順の使用は自己責任でどうぞ
・公式のHTML5導入手順を一読してください
https://docs.unrealengine.com/latest/JPN/Platforms/HTML5/GettingStarted/index.html
・Emscriptenのバージョンは2015年07月11日現在最新は1.34.1ですが。最新版を使用するとHTML5化に不具合があるようですのでEmscriptenSDK はSDK 1.29.0を使用します

【目的】

UE4.8のHTML5出力機能を使って、UE4のサンプルであるTappyChickenを飛ばす。

【公式ドキュメント】

上記の前提にある、公式ドキュメントですが。
私が読んでいて、よくわからない部分がありました。

もしかしたら、同じところで引っかかる方もいらっしゃるかもしれないので、以下に簡単に説明します。

>ソースコード
>Empscripten は HTML5 プラットフォームと使用するためにエンジンをコンパイルするので、エンジン ソースコードが存在しなくてはなりません。

UE4.7から製品版のエンジンにソースコードが添付されているので、ここの項は必要ありません。
ソースコードをGitHUBからダウンロードする必要はなくなりました。

Emscripten のインストール

SDKのダンロードするため以下のURLを開きます
http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#

画面の下の方にある古いSDKリンクをクリックします。
SDK 1.29.0を推奨します。

emsdk-1.29.0-full-64bit.exeをダウンロードします。
222.jpg

インストーラをダウンロードしたら実行します。
4.jpg
次へのボタンをクリックします。

5.jpg
インストールするフォルダをCドライブから変更などする場合は矢印部分を変更します。
変更しない場合はそのままで問題ありません。インストールボタンをクリックします。

6.jpg
インストールが始まります。

7.jpg

以下の画面が出力されればインストール完了です。
8.jpg
クローズボタンをクリックします。

Emscripten のチェック

Windowsのスタートボタン、すべてのプログラムからEmscriptenフォルダを探します。
1.jpg
↑赤枠のEmscripten Command Promptを開きます。

2.jpg

赤枠のファイルはこの先で使用しますので、場所を覚えておきます。

emsdk activate latest

5.jpg

実行が完了したらコマンドプロンプトを閉じてください。

環境変数
環境変数を確認、設定するため、Windowsのコントロールパネルを開きます。
1.jpg
システムをクリックしてください。

2.jpg
システムの詳細設定をクリックします。

3.jpg
環境変数をクリックします。

4.jpg
EMSCRIPTENが設定されえていれば問題ありません。
デフォルトのCドライブインストールなら
c:\Program Files\Emscripten\emscripten\1.29.0になっています。

.emscripten ファイル
次に.emscripten ファイルを確認、設定します。

ファイルの存在するフォルダをHOMEのフォルダですが。
先ほどのEmscripten Command Promptのところで画面の赤枠がそのファイルです。
デフォルトなら
5.jpg
ここにあります。
C:\Users\sleepingdragon sleepingdragonの部分はあなたのWindowsのユーザ名(ログイン名)です。

さて、ここのフォルダにある.emscriptenのファイルをテキストエディタで開きます。
Windowsに標準でインストールされているメモ帳で問題ありません。

EmscriptenをデフォルトのCドライブにインストールしている場合は以下の変数が正しく設定されていることを確認します、この例はバージョン1.29.0のものです。

LLVM_ROOT='c:/Program Files/Emscripten/clang/e1.29.0_64bit'
NODE_JS='c:/Program Files/Emscripten/node/0.10.17_64bit/node.exe'
PYTHON='c:/Program Files/Emscripten/python/2.7.5.3_64bit/python.exe'
EMSCRIPTEN_ROOT='c:/Program Files/Emscripten/emscripten/1.29.0'

以下の画像のように設定されていれば問題ありません。
7.jpg

ブラウザのインストール
HTML5の実行に必要なブラウザをインストールします。
公式のドキュメントには64bitブラウザが必要と書いてありますが、現在は必要ありません。

エンジンのコンフィグファイルに書かれているブラウザがあれば問題ありません。
エンジンのコンフィグのパスは
C:\Program Files\Epic Games\4.7\Engine\Config\HTML5
または
C:\Program Files\Unreal Engine\4.7\Engine\Config\HTML5
にあるHTML5Engine.iniに記述されているブラウザがあれば良いです。

1.jpg
赤枠部分です。

ブラウザのパスはこのファイルに記述されているとおりでないとうまくHTML5のビルドツールが起動しない場合があるので合わせます。
デフォルトのCドライブにインストールする場合はほぼ問題ありません。

私のお勧めは32bit版のFireFoxです。

以下のURLからインストーラをダウンロードして実行します。
https://www.mozilla.org/ja/firefox/new/

3.jpg
インストールのフォルダはデフォルトでインストールします、トラブルが起きにくいです。
もし、どうしても変更したい場合は、上記のエンジンの設定ファイルのフォルダパスを変更します。

HTML5化

UE4のランチャーやエディタが起動している場合は閉じてUE4の再起動から実施してください。
(windowsの再起動ではありません。念のため)

ランチャーを起動し、ランチャーからTappyChickenのプロジェクトを作成します。
2.jpg
この先の「余談」で説明していますが、HTML5化するプロジェクトはプロジェクトファイルの置いてあるフォルダが重要になります、デフォルトと違う構成にするとHTML5化は成功しますが、ブラウザの実行で失敗することがあります。
(2015/03/08現在 UE4.7.2)

3.jpg

問題の起きにくい、プロジェクトの格納フォルダの例として
デフォルトの
C:\Users\sleepingdragon\Documents\Unreal Projects

ドライブのみ変更したい場合の
D:\Users\sleepingdragon\Documents\Unreal Projects
などであれば問題なく動作しました。

問題の起きる例としては
D:\Unreal Projects

D:\unrealengine
などフォルダパスの体系の違うフォルダ構成にすると「余談」で記述している現象が起こることがあります。

基本は、デフォルトのフォルダ構成を推奨します。
私はこれで大いにハマりました。

【UE4エディタ】

プロジェクトが作成できたら、UE4のエディタを開きます。
1.jpg

HTML5化するために、プロジェクトの設定を行います。
ファイル⇒プロジェクトのパッケージ化⇒パッケージング設定 を開きます。
2.jpg

まず、パッケージ化をdevelopmentからShippingに変更します。
3.jpg

対応プラットフォームにHTML5を加えます。
4.jpg

×をクリックして、設定を終了します。
5.jpg

HTML5のパッケージを作ります。
ファイル⇒プロジェクトのパッケージ化⇒HTML5
6.jpg

パッケージを作成するフォルダを選択する画面が開くのでパッケージを格納したいフォルダを指定します。
ここで、この画面ではなく、公式のHTML5化のドキュメントに飛ばされる場合は何か手順を間違っています、確認しなおしましょう。

7.jpg

この例ではD:\html5のフォルダを指定します。
8.jpg

OKをクリックすると

エディタ画面の右下にHTML5のプロジェクトをパッケージ化のメッセージが出ます。
9.jpg

パッケージ化に成功すれば「パッケージ化に成功しました」のメッセージが出ます。
10.jpg

不幸にも失敗しまった場合は、どこかで手順を間違ったか、他の原因かを確認するため、出力ログを確認します。
ウィンドウ⇒デベロッパツール⇒出力ログ
12.jpg
なんらかのエラーメッセージが出力されていると思います。
13.jpg

【実行】

先ほど指定したフォルダに以下のファイルが作成されているので
赤枠のTappyChicken-HTML5-Shipping.htmlをブラウザのfirefoxで開きます。

1.jpg

ファイルを開くと以下の様な画面になります。

2.jpg

このようなダイアログがでることがありますが処理を続行をクリックします。
3.jpg

無事に以下のように実行された方、おめでとうございます。
4.jpg

なんらかのエラーでJavaスクリプトのエラーが出てしまった方は、Javaスクリプトのエラーメッセージを確認し、手順をもう一度確認するか、実行環境を見直してみましょう。

以上でTappyChickenを飛ばすことができました。
当然、マウスを使用してゲームもできます。

【チューニング】

HTML5のWebGLはスマホ等と同様で、あまり重い処理は実行できません。
ですので、以下、簡単に私の試したチューニング方法を列記します。
ただし、完全に経験からの手法なので技術的にはウソが含まれる可能性は十分あります。

1.ターゲットハードウェアをモバイルに設定する
先ほどのファイル⇒プロジェクトのパッケージ化⇒パッケージング設定の画面で
5.jpg
ターゲットハードウェアを選択し、プロジェクト設定の最適化対象を「モバイル/タブレット」
に変更し画質の品質も「スケーラブルな3Dまたは2D」に変更します。

変更したら「今すぐ適用ボタン」をクリックします。
※ただし、この設定はせっかく作成した、プロジェクトをモバイル用に変えてしまうことになります。必ず実験用のクローン(コピー)プロジェクトで実施してください。

2.ライトを静的に
プロジェクトには沢山のライトが存在しますが。
ステーショナリーライトやムーバブルライトを使わず、スタティック(静的)なライトに変更します。
6.jpg

3.ブラウザのメモリを増やす
ブラウザで作成したパッケージを実行すると、エラーメッセージにout of memoryや配列が多すぎる的なメッセージが
出力されて実行が止まることがあります。そのようなときは実行するHTMLファイルのJavaスクリプトを修正してブラウザの使用メモリを増やしてあげます。
html5.png
赤枠の部分のメモリを増やします。ただし、この例は32bitブラウザを対象にしています。
32bitであるために増やせるメモリにも限界があります。

私は1の方法と3の方法を合わせてマチネのファイトシーンのサンプルをHTML5化することはできました。
mati.jpg

【余談】

一番多い、こんな画面や(なんで、プロジェクトファイルが必要なんだよ!)
ha.jpg

たまに、こんな画面がブラウザ上に表示される場合があります。
1.jpg

これは、UE4のHTML5化がまだ実験段階だからだと思われますが、以下の原因で起こります。
UE4のプロジェクトファイルのフォルダがデフォルトに合っていない
からです。

問題の起きにくい、プロジェクトの格納フォルダの例として
デフォルトの
C:\Users\sleepingdragon\Documents\Unreal Projects

ドライブのみ変更したい場合の
D:\Users\sleepingdragon\Documents\Unreal Projects
などであれば問題なく動作しました。

【おわりに】

UE4のHTML5まだまだ実験段階です。
まだまだ、問題も多いです。

さらなる進化に期待したいところです。

最後まで読んでいただいてありがとうございました。

housakusleeping
UE4でゲーム作っていたりしています よろしくおねがいします
https://twitter.com/housakusleeping
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした