Tweet

Pocket

　先々月にtwitterに実験動画を載せたのですが、投稿した気になっていて記事にするのを忘れていました。
　まあまんま公式を日本語化しただけです、的な内容です。UE4上の手順は。
　でもそれじゃあ記事としてあまり価値を感じないので、ピクセルストリーミングしているPCにスマホからアクセスして、操作するところまでを紹介します。

やってみよう

次の順序で作ってみましょう。

準備するもの、環境

ハード

・Windows 10 64bit OSを搭載したPC
・Wi-Fi環境。自前のWiMAXのルーターを用意。
・スマホ。今回はandroidのSONY EXPERIA XZ。（iPad Airでも検証済。手順は同じ。）

ソフト

・Unreal Engine。4.21以降。
　既存プロジェクト（UE4.19で作成）がある前提で話を進めます。
・Node.js

Node.jsをインストール

予め入れておきましょう。https://nodejs.org/ja/にアクセスしてダウンロード。LTS版でよいです。

UE4エディタでPixel Streaming対応の実行モジュールを出力

まずはプロジェクトをUE4.21にバージョンアップしましょう。

UE4.21でプロジェクトを開いたら、メインメニュの[編集]→[Plugins]を選択。[Built-in]→[Graphics]に「Pixel Streaming」がありますので、EnabledをチェックONにします。
再起動を促されるので再起動。

再起動後、2つ設定をします。
①メインメニュの[編集]→[プロジェクト設定]を開き、[インプット]の「Always Show Touch Interface」をONにします。

②メインメニュの[編集]→[エディタの環境設定]を開き、[プレイ]（英語：Play）の「Additional Launch Parameters」エディットボックスに「-AudioMixier」と記述します。

準備はこれだけです。あとはパッケージ化しましょう。
メインメニュの[ファイル]→[プロジェクトのパッケージ化]→[Windows]→[Windows (64ビット)]を選択してパッケージ化します。しばし待とう。
Full RebuildじゃなくてもOKみたいです。2回目以降のビルドだと数分で終わるかと思います。

実行ファイルが出力されたら、WindowsNoEditorフォルダのEXE形式ファイルを選択し、右クリックメニュを開き「ショートカットの作成」を選択。ショートカットが出来ます。

次にショートカットを選択し、右クリックメニュを開き「プロパティ」を選択。
実行の文字列の末尾に「 -AudioMixier」と追記します。「”」と「-」の間には半角スペースを忘れずに。

　

これでUE4の作業は終わり。

実行ファイル（EXE形式）を開く

UE4を実行するPCをWi-Fiに接続します。

エンジンの中にプラグインがあるのですが、そのなかにPixelStreamingのプラグインがありますので開きます。
（例：エンジンのインストール先が　D:¥Epic Games¥UE_4.21　の場合であれば、）
D:¥Epic Games¥UE_4.21¥Engine¥Source¥Programs¥PixelStreaming¥WebServers¥SignallingWebServer¥run.bat
を起動します。

なんか15秒ほどゴチャゴチャ動いていますが、緑色の文字の
　　**:**:**.*** Http listening on *: 80
が出たら準備完了。

次に
D:¥Epic Games¥UE_4.21¥Engine¥Source¥Programs¥PixelStreaming¥WebRTCProxy¥bin¥Start_WebRTCProxy.bat
を起動します。3行くらい文字が出ればOKです。

　

いよいよEXEを起動します。
このとき、ショートカットの方を起動しましょう。

はい、起動しました。

スマホからアクセスして、操作する

さてここから本題。

UE4を起動したPC側で　Windowsキー + R　を押すと[ファイル名を指定して実行]が出ますので「cmd」と入力します。

黒い画面がでます（DOS）。「ipconfig」と入力して、Enterキーを押します。
するとIPアドレスがでます。「IPV4 アドレス」というところの数字を覚えておいてください。今回はIPV4アドレスが「111.222.33.44」の場合で話を進めます。DOSは画面上に出しっぱなしにしておけばいいです。

スマホはPCと接続しているものと同じWi-Fiとルーターに接続します。
Google Chromeを開きます。
アドレスバーに「111.222.33.44」と入力して、GOします。

すると黒背景にClick to startという文字がでてきました。アクセスできています。
次に再生マークが出ますので選択。

できました！　ぐーだね。
画面の両端にある「◎」マークがコントローラーですから、あとは自由に操作してみましょう。

※皆さんに質問：スマホのブラウザのフルスクリーンモードってどうやるんでしたっけ？　…ならない

スマホでサイトにアクセスできない場合

　おおよそ以下の原因が考えられます。ご参考に。（私が全部ひっかかったやつです（笑））

●PC側
・セキュリティソフトの設定を見直してみてください。
・UE4のPixel Streamingプラグインは本当に有効になっていますか？
・EXEはショートカットから起動しましたか？
・2つのバッチは立ち上がっていますか？
・ポートの80番を使用するソフトが動いていませんか？　例：Apache、Skypeなど

●スマホ側
・ブラウザは最新ですか？
　私が試した環境だとGoogle Chromeでしか成功しませんでした。FireFoxはを押すと最初に戻されるし。iOSではSafariも同じでした。
・社内ネットワーク等であれば、プロキシ設定をしましたか？