UE4 PixelStreamingの手引き（導入編）

本日UE4.21がリリースされました

https://forums.unrealengine.com/unreal-engine/announcements-and-releases/1547816-unreal-engine-4-21-released

今回のアップデートの中で、僕が一番注目しているのが、PixelStreaming（EarlyAccess）です
EarlyAccessとはいえ、ゲームのみならずノンゲーム、エンタープライズ向けにも非常に有用なアップデートですので、大まかに解説していきたいと思います

# 検証環境
- Windows10 64bit
    - 何らかのモダンWebブラウザを準備すること(Chrome、Firefoxなど)
    - Node.js（後ほど解説）
- UnrealEngine4.21.0


# 参考リンク
- https://docs.unrealengine.com/en-us/Platforms/PixelStreaming

## 導入手順

[Getting Started　with Pixel Streaming](https://docs.unrealengine.com/en-US/Platforms/PixelStreaming/PixelStreamingIntro)の手順に従って進めていきましょう

### クライアント側
まず、適当なプロジェクトを新規作成してください

それから、プラグイン設定で`Pixel Streaming`をEnableにしましょう
EarlyAccessのため警告が出ますが、よく読んでから無視すればOKです
![2018-11-08_14h37_03.png](https://qiita-image-store.s3.amazonaws.com/0/117589/1ce14859-fe5a-505c-99f7-ce1a4271e27c.png)


以下、必須ではないですがいくつか設定をしておきます

ProjectSettingsのInputで`Allow Show Touch Interface`をONにしておきましょう
PCでは不要ですが、タブレットで試す場合はあると便利です
![2018-11-08_14h37_12.png](https://qiita-image-store.s3.amazonaws.com/0/117589/b92068ea-39c8-e736-d00d-b6f2851b5438.png)


`EditorPreference > Play`セクションで、`Play in Standalone Game`の`Additional Launch Parameters`に`-AudioMixer`と書き込んでおきます
これはEditorからStandaloneGameとして起動して、PixelStreamingを行うときに使います
![2018-11-08_14h37_34.png](https://qiita-image-store.s3.amazonaws.com/0/117589/736886b6-e92c-8cd0-0549-06734cfa7dd2.png)


今回の説明ではパッケージングして使用しますので、Windows(x64)の設定でPackagingしておきます
設定はDevelopmentで構いません

パッケージングしたUE4アプリケーションのバイナリへのショートカットを作成し、ショートカットのプロパティでリンク先の末尾に` -AudioMixer`と書き加えておきます
![2018-11-08_14h58_26.png](https://qiita-image-store.s3.amazonaws.com/0/117589/d6143128-5a5b-4160-c5d5-300fd9fd2671.png)


### サーバ側
まず、PixelStreamingを動かすためにはサーバとなるマシンにNode.jsが必要です
[Node.jsのサイト](https://nodejs.org/ja/)にアクセスして、Node.jsをダウンロード、インストールしてください
LTS版でOKです
（このときは10.13.0LTSを選択しました）

それから、UE4のエンジンインストール先の`UE4.21/Engine/Source/Programs`の中にある`PixelStreaming`フォルダを別のところにコピーしておきましょう
読み取り専用だと余計なエラーを吐く場合があるので、コピーしたあとに読み取り専用を解除しておきましょう

あとは、Firewallのポートを開けておきましょう。
TCPの80,8888,8124の3つへのインバウンドを開けておきます

なお、TCP80ポートを使用しているアプリがある場合は停止しておいてください
（例：Skype、Apache、IISなど）

### 実行手順

まず最初に`PixelStreaming/WebServers/SignalingWebServer/`の中にある`run.bat`を実行してください
![2018-11-08_15h14_57.png](https://qiita-image-store.s3.amazonaws.com/0/117589/3716ec79-de0c-9741-4a01-cb8df93fa5a6.png)
※auditの警告が出ることがありますが、試すだけなら問題ありません
※実際のプロジェクトに使用する際には、プロジェクトのセキュリティポリシーに従って修正してください


次に、`PixelStreaming/WebRTCProxy/bin/`の中にある`Start_WebRTCProxy.bat`を実行してください
![2018-11-08_15h15_12.png](https://qiita-image-store.s3.amazonaws.com/0/117589/7e9698b6-4e6c-22bf-9bf5-83f5e4109706.png)


参考サイトではいろいろ出力されるように書いてありますが、この時点でそのとおりに出ていなくても問題はありません

上記２つを起動したあと、パッケージングしたアプリをショートカットから起動します

### 接続確認
これまでの手順ではローカルで実行していると思いますので、ブラウザから`http://127.0.0.1`にアクセスしてください（`http://localhost`でも可）
別のPCから確認する場合は、実行しているPCのIPアドレスをブラウザのアドレス欄に入力します

うまく起動すれば、下記のような画面になるはずです
あとは、画面の内容に従って操作してください
![2018-11-08_15h16_44.png](https://qiita-image-store.s3.amazonaws.com/0/117589/8acf392f-2078-e1d8-f31f-5b0eb88eada8.png)

Webで動かした内容がUE4アプリ側にも反映されているはずです（逆も同様）
また、別のPCからもアクセスできることが確認できるとテンションが上がるかと思います
![2018-11-08_15h16_57.png](https://qiita-image-store.s3.amazonaws.com/0/117589/2a1333aa-f2d7-0c80-2e3a-c8e4677b7e71.png)


[次はカスタマイズ編を書きたい](https://qiita.com/T_Sumisaki/items/68d37587890f379f0b8e)
↑書きました