UE4
UnrealEngine
UnrealEngine4

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


参考リンク


導入手順

Getting Started with Pixel Streamingの手順に従って進めていきましょう


クライアント側

まず、適当なプロジェクトを新規作成してください

それから、プラグイン設定でPixel StreamingをEnableにしましょう

EarlyAccessのため警告が出ますが、よく読んでから無視すればOKです

2018-11-08_14h37_03.png

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

ProjectSettingsのInputでAllow Show Touch InterfaceをONにしておきましょう

PCでは不要ですが、タブレットで試す場合はあると便利です

2018-11-08_14h37_12.png

EditorPreference > Playセクションで、Play in Standalone GameAdditional Launch Parameters-AudioMixerと書き込んでおきます

これはEditorからStandaloneGameとして起動して、PixelStreamingを行うときに使います

2018-11-08_14h37_34.png

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

設定はDevelopmentで構いません

パッケージングしたUE4アプリケーションのバイナリへのショートカットを作成し、ショートカットのプロパティでリンク先の末尾に-AudioMixerと書き加えておきます

2018-11-08_14h58_26.png


サーバ側

まず、PixelStreamingを動かすためにはサーバとなるマシンにNode.jsが必要です

Node.jsのサイトにアクセスして、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

※auditの警告が出ることがありますが、試すだけなら問題ありません

※実際のプロジェクトに使用する際には、プロジェクトのセキュリティポリシーに従って修正してください

次に、PixelStreaming/WebRTCProxy/bin/の中にあるStart_WebRTCProxy.batを実行してください

2018-11-08_15h15_12.png

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

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


接続確認

これまでの手順ではローカルで実行していると思いますので、ブラウザからhttp://127.0.0.1にアクセスしてください(http://localhostでも可)

別のPCから確認する場合は、実行しているPCのIPアドレスをブラウザのアドレス欄に入力します

うまく起動すれば、下記のような画面になるはずです

あとは、画面の内容に従って操作してください

2018-11-08_15h16_44.png

Webで動かした内容がUE4アプリ側にも反映されているはずです(逆も同様)

また、別のPCからもアクセスできることが確認できるとテンションが上がるかと思います

2018-11-08_15h16_57.png

次はカスタマイズ編を書きたい

↑書きました