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

![スクリーンショット 2015-07-20 03.07.46.png](https://qiita-image-store.s3.amazonaws.com/0/28576/593e7f4c-c5e0-b1fb-844a-91da8398e543.png)

【前提／環境】
---

> [UE4のHTML5出力でTappyChickenを飛ばすまで by @housakusleeping](http://qiita.com/housakusleeping/items/39dd40a0b9d11c4e7f9e)

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

・python 2.7.9
・Emscripten 1.29.0 [^1]
・OSX 10.10.4
・Unreal Engine 4.8.2 日本語
[^1]: Emscriptenの1.34.3では、ビルド後の起動でコケます：`Error: Uncaught TypeError: Module.getMemory is not a function`とかalert出て止まりました

# emsdk_portable のインストール

[Download and install &mdash; Emscripten 1.34.1 documentation](http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html#sdk-downloads) の「Linux and Mac OS X＞Portable Emscripten SDK for Linux and OS X」から、`emsdk-portable.tar.gz`をダウンロード、展開して出来たフォルダを`~/.emsdk`にリネーム。

```bash:~/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をインストールします。

```bash
$ ./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` を更新します。

```bash
$ ./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 を起動し、左メニューの「ラーニング」から「タッピーチキン」をダウンロードします。

![normal_と_Downloads.png](https://qiita-image-store.s3.amazonaws.com/0/28576/987bcd97-db79-6afb-69f5-538877a26132.png)
![スクリーンショット_7_20_15__02_12.png](https://qiita-image-store.s3.amazonaws.com/0/28576/d6d03a07-2b4d-8b11-c6ed-c35e8c0162e9.png)

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

![normal_と_Downloads.png](https://qiita-image-store.s3.amazonaws.com/0/28576/c94ba3df-1335-e01b-8166-701d1c9f4da6.png)
![スクリーンショット 2015-07-20 02.17.37.png](https://qiita-image-store.s3.amazonaws.com/0/28576/9b03f21a-4063-f364-2a2f-7ec7e23b772a.png)

## プロジェクトの設定

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

![スクリーンショット_2015-07-20_02_26_18.png](https://qiita-image-store.s3.amazonaws.com/0/28576/fa7c776a-9a73-aa34-8c05-9c5fdc3373dd.png)

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

*「HTML5」をチェック

![プロジェクト設定_と_TappyChickenMap.png](https://qiita-image-store.s3.amazonaws.com/0/28576/af6826d6-c949-584c-1e41-e4d24d57c014.png)

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

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

![normal_と_プロジェクト設定_と_TappyChickenMap.png](https://qiita-image-store.s3.amazonaws.com/0/28576/6aa00de4-340e-a2a5-a310-dbd725f83554.png)

## パッケージ化…HTML5 出力

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

![スクリーンショット_2015-07-20_02_36_23.png](https://qiita-image-store.s3.amazonaws.com/0/28576/0b3caaf4-529d-bce4-d330-ca95e4c8e269.png)

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

```bash
# 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`が作成されました。このファイルを実行すれば、タッピーチキンが起動します。

![スクリーンショット 2015-07-20 03.01.58.png](https://qiita-image-store.s3.amazonaws.com/0/28576/74f1c3e4-cd83-05cb-0af3-ee95d5d7c617.png)

が、[file://上ではCORSで動作しないので](https://developer.mozilla.org/ja/docs/HTTP_access_control)、このフォルダを静的サーバーとして起動します。

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

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

![スクリーンショット 2015-07-20 03.07.46.png](https://qiita-image-store.s3.amazonaws.com/0/28576/593e7f4c-c5e0-b1fb-844a-91da8398e543.png)

この HTML5 を DropBox の公開ディレクトリ`/Users/59naga/Dropbox/Public`あたりに置くと、[そのまま公開する](https://dl.dropboxusercontent.com/u/22608895/UA4/TappyChicken/TappyChicken.html)ことも出来ます。

これについては alwei氏の「[UE4 無料のDropbox上にUE4のHTML5コンテンツを置いて公開してみる - Let&#39;s Enjoy Unreal Engine](http://unrealengine.hatenablog.com/entry/2015/04/30/230000)」の記事が詳しいです。