Unreal Engine 5 ドキュメントは Epic Developer Community に移動しました

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

エンジンに同梱されているリモート コントロール Web アプリケーションでエンジンを制御して、UI を作成またはフォーマットを行うための追加のコードを書くことなく、エンジンにビルトインされた UI エディタで独自の UI を作成する方法を学びます。

Choose your operating system:

Windows

macOS

Linux

Remote Control Web Interface (リモート コントロール ウェブ インターフェース) プラグインのコンパニオン Web アプリケーションのウィジェットに、 Remote Control Preset (リモート コントロール プリセット) で公開されるパラメータと関数を接続することで、エンジンをリモートで制御できるようになります。この Web アプリケーションには組み込み UI エディタがあるので、コードを追加せずにインターフェースをカスタマイズして作成やフォーマット化することができます。

Remotely editing post process contrast using a widget

Web アプリケーションなので、複数のクライアントを同時に実行することができます。クライアントの 1 つで変更されたプロパティは、Web サーバーを介して他のすべてのクライアントにもその変更が伝播されます。そのため、ライブ環境で共同作業を行う際に便利です。

このページでは、公開されたプロパティと関数をコンパニオン リモート コントロール Web アプリケーションのウィジェットに接続し、アプリケーションの UI ビルダーを使用して独自の UI をビルドする方法について説明します。

前提条件

リモート コントロール ウェブ インターフェース は NodeJS を使用します。それにより、ゲージ、スライダー、カラーピッカーなどのデフォルト ウィジェットをコンパニオン Web アプリに提供して、追加のコードなしでエンジンをリモートで制御できるようになります。

次の手順に従って、Web アプリケーションをプロジェクトに接続します。

マシンに NodeJS をインストールします。 

1. 最低バージョン：8.8. 

2. 最高バージョン：14.15.5.14.15.5.

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

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

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

    Remote Control web interface plugin

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

  5. Web アプリが正常に起動したことを確認します。エディタのメインメニューで、 [Window (ウィンドウ)] > [Developer Tools (デベロッパーツール)] > [Output Log (アウトプットログ)] を選択し、「remote control web」でフィルタリングして、次のような成功ログを表示します。LogRemoteControlWebInterface:

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

    Success message displayed in the output log

リモート コントロール Web アプリケーションを使い始める

リモート コントロール パネルのプロパティと機能を Web アプリケーションに接続します。Web アプリケーションは、Unreal のセッションで開いたリモート コントロール プリセットを読み取ります。公式でサポートされているブラウザは、Chrome、Firefox、Safari です。Chrome、Firefox、Safari

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

Use Less CPU in the Background setting in the Editor Preferences

次の手順に従って、Web アプリケーションを起動し、公開されたプロパティを追加します。

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

    Enter the URL in your browser

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

    Remote control web interface plugin

    リモート コントロール プリセット から Web アプリケーションを起動することもできます。詳細については、「 リモート コントロール パネル リファレンス 」を参照してください。

  2. ページが読み込まれると、空白のリモート コントロール アプリケーションが表示されます。Web アプリケーションの [Control (コントロール)] トグルをクリックして [Design (デザイン)] モードに切り替え、ウィジェットが追加できるようにします。

    Mode toggle in Control mode

    Mode toggle in Design mode

  3. [Properties (プロパティ)] タブを選択します。

    Remote control properties tab

  4. 公開されているプロパティの 1 つを右側のパネルにドラッグアンドドロップします。 [Properties] パネルからプロパティを追加すると、 Panel Widget (パネル ウィジェット) が現在存在しない場合は作成され、プロパティに関連付けられているウィジェットがパネル ウィジェットに追加されます。

    次の例では、パネル ウィジェットが作成され、カラーピッカー ウィジェットがパネル ウィジェットに追加されています。カラーピッカーは、シーンの PostProcessVolume の [Contrast (コントラスト)] フィールドにバインドされています。

    Color Picker Widget bound to Post Process Volume Contrast property

  5. [Control] モードに切り替えます。

    Color Picker Widget in Control mode

  6. Web アプリで公開されたプロパティを変更し、その後、関連するプロパティがエディタでも更新されていることを確認します。

    Remotely editing post process contrast using a widget

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

プリセット

Web アプリケーションでは複数のリモート プリセットを使用できますが、一度に開くことができるリモート コントロール プリセットの数は 1 つだけです。 [Design] モードで、 [Presets] セクションに移動して、ウィンドウの左側にある使用可能なリモート プリセットを確認し、表示するプリセットを選択します。すると、現在開いているリモート コントロール プリセットの名前がウィンドウの右上に表示されます。

Multiple presets in the Remote Control window

タブ

Web アプリケーションに複数のタブをもつことができます。これは、オペレーターがライブ環境でさまざまなビューを作成する際に便利です。

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

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

Multiple tabs

ここには、

[Level Snapshots (レベル スナップショット)](ProductionPipelines/SourceControl/LevelSnapshot)
と Sequencer (シーケンサ) という 2 つの固有のタブがあります。これらは、他の Unreal ツールで動作するように設定がすでに済んでいる Web アプリケーションに追加できます。以下のセクションでは、これらのリモート コントロールとの統合について説明します。

レベル スナップショットを統合する

リモート コントロール Web アプリケーションでは、レベルの新しいスナップショットを作成するか、以前に作成したスナップショットにリモートで切り替えることができます。プロジェクトでのレベル スナップショットの使用の詳細については、「

[レベル スナップショット](ProductionPipelines/SourceControl/LevelSnapshot)
」を参照してください。

Remote Control Level Snapshots

リモート コントロール Web アプリケーションでこの機能を使用するには、Level Snapshots プラグインを有効にする必要があります。

シーケンサを統合する

リモート コントロール Web アプリケーションでは、プロジェクト内のすべてのシーケンスを表示し、名前でフィルタ処理して、表示するシーケンスを選択できます。プロジェクトでのシーケンスの使用の詳細については、「[シーケンサ]()」を参照してください。シーケンスの右側にある [Play (プレイ)] ボタン アイコンをクリックすると、現在のレベルでシーケンスを開始または再開できます。シーケンスの再生が開始されるまでに少し時間がかかる場合があります。

ページ内のシーケンスは、アウトラインにリストされている名前ではなく、アセット名でリストされます。ワールドに配置された後に名前が変更されたアセットは、コンテンツ ブラウザではそれらの名前で一覧表示されます。

Remote Control Sequencer integration

このタブにはプロジェクト内のすべてのシーケンスが表示されますが、再生できるのは現在のレベルに存在するシーケンスのみです。フィルタはアセットのパスのみに基づいているため、現在、レベル内のシーケンスに基づいてフィルタリングすることはできません。

ウィジェット

ウィジェットは、Web アプリケーションに含まれており、エンジン内でやり取り可能なデータ形式を表したり、Web ページの形式を提供したりします。

Adding Panel widgets

次のリストは、UI に追加できるすべての利用可能なウィジェットを示しています。

  • Button (ボタン)

  • Color Picker (カラーピッカー)

  • Dial (ダイヤル)

  • Dropdown (ドロップダウン)

  • Joystick (ジョイスティック)

  • Label (ラベル)

  • List (リスト)

  • MiniColorPicker (ミニ カラーピッカー)

  • Panel (パネル)

  • Slider (スライダ)

  • Spacer (スペーサー)

  • Tabs (タブ)

  • Text (テキスト)

  • Toggle (トグル)

  • Vector (ベクター)

Panel ウィジェットは、他のすべてのウィジェットをまとめるために使用します。そのため、これは他のウィジェットを配置する前に配置する必要があります。 List ウィジェットは、 Panels をまとめ、同じ Tab に複数の UI を提供するために使用します。

Adding List widgets

プロパティ

リモート コントロール ウェブ アプリケーションの [Properties] タブにリストされているプロパティとグループは、リモート コントロール プリセットのプロパティとグループに一致します。

Comparing properties in Web Application and Preset

Web アプリケーションの左側のトレイからキャンバス領域にプロパティをドラッグアンドドロップして、UI のプロパティに既にバインドされているウィジェットを追加します。そのプロパティをパネル上で離すことで、自動的に追加されます。パネルがない場合は、空のパネルが作成され、内部にラップされます。

Add a property

ウィジェットとプロパティを設定する

[Design] モードで Web ページのウィジェットを選択すると、ウィンドウの左下隅に設定パネルが表示されます。ウィジェットのタイプとそれが表すデータに応じて、そこに異なるフィールドが表示されます。

ウィジェットのタイプごとに、そのラベルを変更できます。ウィジェットがプロパティにバインドされている場合は、接続されているプロパティを変更できます。

ウィジェットのモード

Vector などの一部のデータ形式は、UI で複数の方法により表示が可能です。

ウィジェットのモードを変更するには、次の手順に従います。

  1. 表示するウィジェットを選択して、その設定パネルを開きます。

  2. ウィジェットの設定パネルで、使用するモードを選択します。たとえば、Vector を使用すると、 Joystick 、 Dial 、または**Sliders** を選択できます。

    Select a widget's mode

  3. モードを選択すると、プロパティの横に [ゲームコントローラー] アイコンが表示されます。選択したモードでプロパティを開くには、このボタンを選択します。

    Click game controller button to open property

  4. モードはウィンドウの下部に表示されます。

    Widget mode appears at the bottom of the screen

ウィジェットを削除する

ウィジェットの削除は、個別に行うことも、パネル内のすべてのウィジェットを同時に削除することもできます。個別にウィジェットを削除するには、ウィジェットを選択して設定パネルを開き、 [Delete Widget (ウィジェットの削除)] を選択します。パネル内のすべてのウィジェットを削除する場合は、パネルを選択して設定パネルを開き、 [Delete Widget (ウィジェットの削除)] を選択します。

Deleting widgets

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