リモート コントロール プリセットと Web アプリケーション

UI パラメータと関数を収集してリモート コントロール プリセットで整理し、Web アプリケーションのウィジェットへ接続する方法を説明します。

Windows
MacOS
Linux

リモート コントロール プリセット を使って、UI パラメータまたは関数を単一パネルに収集および整理して、 Remote Control API に公開することができます。これらのパラメータおよび関数を Remote Control Web Interface プラグインで提供されているコンパニオン Web アプリケーションのウィジェットに接続して、エンジンをリモート制御することができます。この Web アプリケーションには組み込み UI エディタがあるので、コードを追加せずにインターフェースをカスタマイズして作成やフォーマット化することができます。

Web アプリケーションなので、複数のクライアントを同時に実行することができます。あるクライアントでプロパティの変更をすると、ウェブ サーバーを介して、その他すべてのクライアントにその変更が継承されます。これは、ライブ環境で共同のワークフローを作る上で役立ちます。

このページでは、プロパティと関数を Unreal Editor から Remote Control API に公開し、コンパニオン リモート コントロール Web アプリケーションのウィジェットへ接続する方法を説明します。

GIF of a sky rotating with the turn of a dial widget in the remote control web application

必要なプラグイン

リモート コントロール プリセットおよびリモート コントロール Web アプリケーションの使用を開始するには、次のプラグインをプロジェクトに追加します。

Remote Control API

Remote Control API プラグインは、リモート コントロール プリセット用のデータとウェブ ソケット接続をホストするウェブ サーバーを提供します。

使用しているプロジェクトでプラグインを有効にするには、次のステップに従います。

  1. Unreal Editor でプロジェクトを開きます。

  2. エディタのメイン メニューから [Edit (編集)] > [Plugins (プラグイン)] を選択し、[Plugins (プラグイン)] ウィンドウを開きます。

  3. [Plugins (プラグイン)] ウィンドウで、[Messaging] カテゴリから [Remote Control API] プラグインを見つけます。[Enabled (有効にする)] にチェックを入れます。

    image alt text

  4. エンジンを再起動します。

Remote Control Web インターフェース

Remote Control Web インターフェース は NodeJS を使用して、追加コードなしでエンジンをリモートで制御するために、ゲージ スライダー、カラー ピッカーなどのデフォルト ウィジェットをコンパニオン Web アプリケーションに提供します。

このプラグインは、マーケットプレイス で取得できます。プラグインをライブラリに追加し、Unreal Engine の互換性のあるバージョンにインストールしてから、次の手順を開始してください。

使用しているプロジェクトに Web アプリケーションを接続するには、次のステップに従います。

  1. Install NodeJS バージョン 8 以降をマシンにインストールします。

    • 最小バージョン: 8.

    • 最大バージョン: 14.15.5.

  2. Unreal Editor でプロジェクトを開きます。

  3. エディタのメイン メニューから [Edit (編集)] > [Plugins (プラグイン)] を選択し、[Plugins (プラグイン)] ウィンドウを開きます。

  4. [Plugins (プラグイン)] ウィンドウで、[Messaging]カテゴリから Remote Control Web Interface プラグインを見つけます。[Enabled (有効にする)] にチェックを入れます。

    image alt text

  5. エンジンを再起動します。

  6. Web アプリケーションが正常に起動したことを確認します。エディタのメイン メニューから [Window (ウィンドウ)] > [Developer Tools (デベロッパーツール)] > [Output Log (アウトプットログ)] を選択し、「remote control web (リモート コントロール ウェブ)」でフィルターをかけて以下のような成功ログを確認します。

    LogRemoteControlWebInterface: [Success]Remote Control Web Interface is running - WebApp started, port:7000

    image alt text

リモート コントロール パネルとリモート コントロール API にプロパティを公開する

Unreal Editorリモート コントロール パネル は、簡単にアクセスできるようにレベル内の複数のオブジェクトからプロパティを収集してある場所です。パネルに関数を追加して、それらをパネルから呼び出すこともできます。プロパティと関数が リモート コントロール パネル に公開されると、リモート コントロール API にも公開されます。ライブ環境で制御する必要のあるアイテムをオペレータが簡単に整理できるようになります。

リモート コントロール プリセット を追加して リモート コントロール パネル を開くには、次のステップに従います。

  1. コンテンツ ブラウザ を右クリックし、[Miscellaneous] セクションに移動します。[Remote Control Preset] を選択します。

    image alt text image alt text

  2. Remote Control Preset Asset アセットをダブルクリックして [Remote Control Panel] を開きます。

    image alt text

  3. [Edit Mode (モードを編集)] にチェックを入れます。

    image alt text

  4. アセット[Details (詳細)] パネルでは、すべてのプロパティの横に、閉じた目あるいは開いた目のアイコンが表示されています。

    image alt text

  5. 目のアイコンは、プロパティが リモート コントロール パネル に追加されているかどうかを決定します。

    • 目が開いて いれば、プロパティはリモート コントロール パネルに 追加されている ことを意味します。

    • 目が閉じて いれば、プロパティはリモート コントロール パネルに 追加されていない ことを意味します。

    • 開いている目のアイコンをクリックすると、プロパティがリモート コントロール パネルに追加されます (閉じている目のアイコンの場合は、プロパティが除去されます)。

  6. プロパティがリモート コントロール プロパティにあると、インターフェースは 詳細 パネルと同じになります。

    image alt text image alt text

    リモート コントロール パネル (左) と詳細パネル (右) のライト カラー プロパティおよび RGB 値

  7. [Remote Control Preset] を右クリックし、[Save (保存)] を選択して変更を保存します。

RGB 値と

image alt text

リモート コントロール パネルを整理して、リモート コントロール API で要素名を変更して参照しやすくできます。以下の表は、プロジェクトのニーズに合わせてパネルをカスタマイズするための UI の説明です。

アクション

UI 要素

説明

Create Group

create_group_panel.png

同類のプロパティおよび関数をまとめて整理するために複数のグループを作成します。

Add Function

add_function_panel.png

単にプロパティでなはい関数を公開するためのパネルに関数を追加します。関数のパラメータをカスタマイズして、パネルから実行することができます。

Remove Property or Function

remove_property_panel.png

プロパティまたは関数をパネルから削除し、リモート コントロール API に公開されないようにします。

Reset Property

reset_property_value.png

プロパティの値をデフォルト値に戻します。

Move Element

move_panel_element.png

パネル内で要素をドラッグ アンド ドロップして、プロパティ、関数、グループを再編成します。

Rename Element

rename_panel_element.png

プロパティ、関数、グループの名前を変更して、参照を明確にし、関数の呼び出しをよりシンプルにします。

リモート コントロール Web アプリケーションを使用する

[Remote Control] パネルのプロパティと関数を web アプリケーションに接続します。Web アプリケーションは、Ureal セッションで開いたリモート コントロール プリセットを読み取ります。公式にサポートされているブラウザは以下になります。Chrome、Firefox、Safari

Web アプリケーションでプロパティ値を変更した時にエディタで更新内容を表示するには、[Edit] > [Editor Preferences (エディタの環境設定)] を開き、[Performance] セクションの [General (一般)][Use Less CPU when in Background (バックグラウンドでの処理により少ないCPUを使用)] を無効にします。** image alt text

Web アプリケーションを起動し、インターフェースをカスタマイズするには、次のステップを実行します。

  1. エンジンを実行しているマシン上で web ブラウザを開き、URL「127.0.0.1:7000」を入力します。リモート コントロール API を他のマシンに公開する方法の詳細については、リモート コントロール クイックスタート を参照してください。

    image alt text

    Remote Control Web インターフェース がプロジェクト用に使用するポートを変更することができます。エディタのメイン メニューから [Edit (編集)] > [Project Settings (プロジェクト設定)] を選択して、[Project Settings (プロジェクト設定)] ウィンドウを開きます。[Project Settings (プロジェクト設定)] ウィンドウで、[Plugin] セクションの [Remote Control Web Interface] を選択して、デフォルト ポートを変更することができセッティングを確認します。

    image alt text

  2. ページがロードされると、ブランクのリモート コントロール アプリケーションが表示されます。Web アプリケーションに タブ を作成して、ウィジェットの追加を開始します。

    image alt text

  3. Web アプリケーションはグリッドを基本としています。スクリーン レイアウトを自由に設計することができます。右側で、4 つのパネル調整から選択できます。それぞれのパネルに複数のウィジェットが含まれています。

    Web アプリケーションのレイアウトで利用できる 4 種類のパネル配列
  4. パネルの [Plus] ボタンをクリックして [Set Widget (ウィジェットを設定)] ウィンドウを開きます。

    image alt text

  5. [Set Widget (ウィジェットを設定)] ウィンドウには、プリセットで公開されている使用可能なプロパティ リストがあります。

    image alt text

  6. プロパティを選択します。

    • ウィンドウの右側の [Available Widgets (使用可能な] セクションには、web アプリケーションの UI にプロパティを表示するために使用できるすべてのウィジェットがあります。

    • [Available Widgets] の下にある [Widget Options] セクションで、最大値最小値 の設定など、ウィジェットをより細かくカスタマイズできます。

    image alt text

    Web アプリケーションで使用可能なウィジェットの例の一部

  7. パネルにウィジェットをスタックして web アプリケーションの UI をシンプルにすることができます。カラーピッカーなど同じウィジェット タイプを使用するプロパティがいくつかある場合は、同じウィジェット インターフェースを使用することができますが、スタックされたリストからプロパティを選択して変更を適用するプロパティを変更します。

    image alt text

  8. Web アプリケーションに複数のタブをもつことができます。ライブ環境でオペレータに対して異なるビューを作成するのに便利です。

    • タブを区別するために、タブのラベルを変更し、アイコンのライブラリからアイコンを選択することができます。

    • タブを複製して、新しいインターフェースを開始するときに使用することもできます。

    image alt text

  9. Unreal Editor に対応する リモート コントロール プリセット を保存することで、web アプリケーションへの変更を保存することができます。次回 web アプリケーションを開くと、最後をアセットを保存した時と同じレイアウトになります。

  10. [Play] をクリックして web アプリケーション の [Edit] モードを終了します。

    image alt text

Web アプリケーションでは複数のリモート プリセットを使用することができますが、一度に開くことができる リモート コントロール プリセット は 1 つのみです。使用可能なリモート プリセットはウィンドウの左側にあります。

image alt text

Select Skin
Light
Dark
Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信