【前提／環境】

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

Win 用の記事を参考にしています。

・python 2.7.9
・Emscripten 1.29.0 ¹
・OSX 10.10.4
・Unreal Engine 4.8.2 日本語

emsdk_portable のインストール

Download and install — Emscripten 1.34.1 documentation の「Linux and Mac OS X＞Portable Emscripten SDK for Linux and OS X」から、emsdk-portable.tar.gzをダウンロード、展開して出来たフォルダを~/.emsdkにリネーム。

~/Downloads

$ gzip -dc emsdk-portable.tar.gz | tar xvf -
x emsdk_portable/
x emsdk_portable/emscripten-tags.txt
x emsdk_portable/emsdk
x emsdk_portable/emsdk_env.sh
x emsdk_portable/emsdk_manifest.json
x emsdk_portable/README.md

$ mv emsdk_portable ~/.emsdk

~/.emsdkに移動して、1.29.0をインストールします。

$ ./emsdk update
$ ./emsdk install sdk-tag-1.29.0-64bit
# ... ビルドは20分前後掛かる
# Done installing tool 'emscripten-tag-1.29.0-64bit'.
# Done installing SDK 'sdk-tag-1.29.0-64bit'.

~/.emscripten を更新します。

$ ./emsdk activate sdk-tag-1.29.0-64bit
# Writing .emscripten configuration file to user home directory /Users/59naga/
# The Emscripten configuration file /Users/59naga/.emscripten has been rewritten with the following contents:
# 
# import os
# SPIDERMONKEY_ENGINE = ''
# NODE_JS = 'node'
# LLVM_ROOT='/Users/59naga/.emsdk/clang/tag-e1.29.0/build_tag-e1.29.0_64/bin'
# NODE_JS='/Users/59naga/.emsdk/node/0.10.18_64bit/bin/node'
# EMSCRIPTEN_ROOT='/Users/59naga/.emsdk/emscripten/tag-1.29.0'
# EMSCRIPTEN_NATIVE_OPTIMIZER='/Users/59naga/.emsdk/emscripten/tag-1.29.0_64bit_optimizer/optimizer'
# V8_ENGINE = ''
# TEMP_DIR = '/var/folders/kr/tr9txzzd3rsbq0ydlhqpjf2c0000gn/T'
# COMPILER_ENGINE = NODE_JS
# JS_ENGINES = [NODE_JS]
# 
# To conveniently access the selected set of tools from the command line, consider adding the following directories to # PATH, or call 'source ./emsdk_env.sh' to do this for you.
# 
#    /Users/59naga/.emsdk:/Users/59naga/.emsdk/clang/tag-e1.29.0/build_tag-e1.29.0_64/bin:/Users/59naga/.emsdk/node/# 0.10.18_64bit/bin:/Users/59naga/.emsdk/emscripten/tag-1.29.0

TappyChickenプロジェクトの作成

Epic Games Launcher を起動し、左メニューの「ラーニング」から「タッピーチキン」をダウンロードします。

完了したら、左メニューの「ライブラリ」から「Tappy Chicken」のプロジェクトを名前、フォルダ場所はデフォルトのまま作成します。

プロジェクトの設定

作成したプロジェクトをダブルクリックで起動したら「設定＞プロジェクト設定」を開きます。

「対応プラットフォーム」の下記を変更します。

*「HTML5」をチェック

「HTML5 SDK Paths」の下記を変更します。

「Location of Python exe」を「$ which pythonコマンドの戻り値」に
「Location of Emscripten SDK」を「~/.emsdk」（リネームしたemsdk_portable）に

パッケージ化…HTML5 出力

「プロジェクト設定」ウィンドウを閉じて、メニューバーの「ファイル＞プロジェクトをパッケージ化＞HTML5」で HTML5 として出力を行います。出力先を聞かれるので、/Users/59naga/Downloads/stagingとしました。

ビルドが正常に完了すれば、出力ログにBUILD SUCCESSFULと出るはずです。

# MainFrameActions: パッケージ化 (HTML5): BuildCommand.Execute: BUILD SUCCESSFUL
# MainFrameActions: パッケージ化 (HTML5): Automation.Execute: Script execution successful, exiting.
# MainFrameActions: パッケージ化 (HTML5): Program.Main: AutomationTool exiting with ExitCode=0
# MainFrameActions: パッケージ化 (HTML5): Domain_ProcessExit

動作確認

/Users/59naga/Downloads/staging/HTML5というフォルダが作成され、TappyChicken.htmlが作成されました。このファイルを実行すれば、タッピーチキンが起動します。

が、file://上ではCORSで動作しないので、このフォルダを静的サーバーとして起動します。

$ cd /Users/59naga/Downloads/staging
$ python -m SimpleHTTPServer 8000
# Serving HTTP on 0.0.0.0 port 8000 ...

http://localhost:8000/ 経由で TappyChicken.html を実行してください。

この HTML5 を DropBox の公開ディレクトリ/Users/59naga/Dropbox/Publicあたりに置くと、そのまま公開することも出来ます。

これについては alwei氏の「UE4 無料のDropbox上にUE4のHTML5コンテンツを置いて公開してみる - Let's Enjoy Unreal Engine」の記事が詳しいです。

Emscriptenの1.34.3では、ビルド後の起動でコケます：Error: Uncaught TypeError: Module.getMemory is not a functionとかalert出て止まりました ↩

（Mac版）UE4のHTML5出力でTappyChickenを飛ばすまで