1. Epic GamesDeveloper
  3. バーチャル カメラ コンポーネントのクイック スタート

バーチャル カメラ コンポーネントのクイック スタート

バーチャル カメラ コンポーネントは、Unreal Engine でカスタムバーチャル カメラを構築するための基盤を提供する基本アーキテクチャです。

バーチャル カメラ コンポーネントのクイック スタート

概要

バーチャル カメラ コンポーネント (VCamComponent) は、 Unreal Engine でカスタム バーチャル カメラを構築するための基本コンポーネントです。

VCamComponent を使用すると、カスタム仕様の モディファイア と 出力プロバイダ を追加することで、Unreal Engine 内で Cine カメラ を操作できます。

目標

このクイック スタート ガイドは、バーチャル カメラ コンポーネントを使用してバーチャル カメラを作成するための基本的な手順を説明するために作成されました。

目的

このガイドを修了すると、次の内容を習得できます。

  • シーンにカメラを配置して VCamComponent を追加する方法。

  • カメラにモディファイアを追加して動作をカスタマイズする方法。

  • モディファイアを有効または無効にする基本キーの入力を追加する方法。

  • さまざまな出力プロバイダを使用する方法。

  • 接続ポイントを使って入力アクションをモディファイアからウィジェットにパスする方法。

  • ボタンをさまざまなシナリオで再利用できるようにカスタマイズする方法。

1 - 必要な設定

始める前に、プロジェクト内で適切なプラグインを有効にする必要があります。

  1. [Settings (設定)] > [Plugins (プラグイン)] を選択し、[Plugins (プラグイン)] メニューを開きます。

  2. Virtual Camera ブラグインを見つけて 有効 にします。

  3. エディタを再起動します。

このセクションの結果

バーチャル カメラの作成を開始する準備が整いました。

2 - バーチャル カメラを作成する

バーチャル カメラ コンポーネントは Cine Camera コンポーネントを持つアクタで機能します。この操作ガイドでは便宜上 Cine Camera アクタを使用します。

  1. [Place Actors (アクタの配置)] パネルで [Cinematic (シネマティック)] カテゴリを選択し、[Cine Camera Actor (Cine カメラ アクタ)] をクリックしてシーンにドラッグします。

  2. Cine カメラ アクタを選択した状態で [Details (詳細)] パネルに移動して、CameraComponent (カメラ コンポーネント) を選択します。

  3. [Add Component (コンポーネントを追加)] ボタンをクリックし、「VCam」コンポーネントを検索して追加します。VCam コンポーネントがカメラ コンポーネントの子になっていることを確認します。

  4. カメラ アクタ を選択し、コンポーネントの階層から VCam コンポーネントを選択します。

  5. 利用可能なプロパティが [Virtual Camera] セクションに表示されます。

以下のプロパティがあります。

プロパティ 説明
Enabled バーチャル カメラ コンポーネント全体の有効/無効を切り替えます。
Live Link Subject Live Link プラグインで使用される被写体です。コンポーネントでは、被写体のカメラ情報を使ってシーン内でカメラを操作します。
Lock Viewport to Camera ビューポートは、バーチャル カメラの視点からレンダリングされます。
Disable Component when Spawned by Sequencer バーチャル カメラ コンポーネントがシーケンスによってスポーンされた際に、バーチャル カメラ コンポーネントを無効化します。これにより、Spawnable (スポーン可能) として設定された VCam コンポーネントを含むシーケンスを再生する際に、2 つの VCam コンポーネントが同時に有効になることが回避されます。
Target Viewport コンポーネントのビューをレンダリングするために、コンポーネントによって使用されるエディタ ビューポートです。
Output Providers すべての出力先デバイスのリストが含まれます。
Modifier Context すべてのモディファイアで共有される任意のデータを含む任意のオブジェクト。
Modifier Stack コンポーネントに追加されたすべてのモディファイアのリストが含まれます。

このセクションの結果

シーンに Cine カメラ アクタを配置し、バーチャル カメラ コンポーネントを追加しました。これで、モディファイア を追加してカメラをカスタマイズする準備が整いました。

3 - モディファイアを追加する

モディファイア は、バーチャル カメラに追加してカスタム仕様のエフェクトや動作を作成できる特殊な ブループリント クラス です。モディファイアを使用すると、カメラの揺れや焦点の調整、露出の変更といった実際のカメラ動作をバーチャル カメラでシミュレートすることができます。モディファイアは ブループリント または C++ を使って作成できます。

複数のモディファイアを単一のユニークなバーチャル カメラ レンダリング スタック に追加して、エフェクトや動作をプロジェクトのバーチャル カメラに適用できます。スタックでは、上から下の順でこれらのモディファイアが適用されてレンダリングされます。

モディファイアを作成する

新しい VCam モディファイア ブループリントを作成するには、次のステップを実行します。

  1. コンテンツ ブラウザで [+ Add (+ 追加)] をクリックし、[VCam] > [VCam Modifier (VCam モディファイア)] を選択します。

    Create a VCam modifier via the Content Browser.

  2. Unreal Editor によって 入力マッピング コンテキスト を追加するよう促すプロンプトが表示されます。モディファイアで 拡張入力 による入力をサポートする場合は、入力マッピング コンテキストを追加する必要があります。拡張入力を使用しない場合は入力マッピング コンテキストの追加を省略できます。

    The prompt for adding an input mapping context, which is required for using enhanced input.

  3. ブループリントに「VCM_LookAt」と名前を付けて、ダブルクリックして開きます。

    Blueprint named VCM_LookAt visible in the Content Browser.

アクタ参照変数を設定する

モディファイア ブループリント内で、バーチャル カメラでトラックする被写体を参照する アクタ参照変数 を定義する必要があります。

ブループリント内でアクタ参照変数を設定するには、次のステップを実行します。

  1. [My Blueprint (マイ ブループリント)] タブの [Variables (変数)] の隣にある プラス記号 (+) をクリックして、新しい TargetActor 変数を追加します。

    Adding a new TargetActor variable by clicking the right-hand plus sign.

  2. TargetActor 変数のタイプを選択して、コンテキスト メニューの [Object Types (オブジェクト タイプ)] > [Actor (アクタ)] > [Object Reference (オブジェクト参照)] をクリックし、この変数のタイプを アクタ オブジェクト参照 に変更します。

    The pathway to set the actor type to be Object Reference.

  3. この変数の [Detail (詳細)] パネルで、Instance Editable プロパティを有効にします。

    Enabling the actor variable to be edited.

  4. このモディファイア ブループリントを 保存 して コンパイル します。

ブループリント ロジックを作成する

参照変数を作成したので、次はモディファイア ブループリント ロジックを構築します。

ブループリント ロジックを構築するには、次のステップを実行します。

  1. モディファイア ブループリント内で TargetActor 変数を イベント グラフ にドラッグし、コンテキスト メニューから [Get TargetActor] オプションを選択します。

    Drag the TargetActor variable into the Event Graph to create an instance of the variable.

  2. Is Valid ノードを作成して Target Actor Variables 出力ピンにつなげます。

    Creating and connecting an Is Valid node.

  3. グラフの Event on Apply ノードを Is Valid ノードの実行ピンにつなげます。

  4. Event on Apply ノードの Camera Component ピンから Get World Location ノードを作成してつなげます。

    Creating and connecting a Get World Location node.

  5. Target Actor ノードから Get Actor Location ノードを作成してつなげます。

    Connecting a Get Actor Location node to the Target Actor.

  6. Find Look at Rotation ノードを作成し、それを Get World Location ノードの Return Value ピンにつなげます。

    Connecting a Find Look at Rotation node to the return value of the Get World Location node.

  7. Get Actor Location ノードの Return Value ピンを、Find Look at Rotation ノードの Target ピンにつなげます。

    Connecting the Get Actor Location and Find Look at Rotation nodes.

  8. Event On Apply ノードの Camera Component ピンからドラッグし、「Set World Rotation」を検索して選択します。

    Connecting a Set World Rotatin node to the Camera Component pin for the Event On Apply node.

  9. Is Valid ノードの Is Valid ピンを Set World Rotation ノードにつなげます。Find Look at Rotation ノードの Return Value ピンを Set World Rotation ノードの New Rotation ピンにつなげます。

    Connecting the nodes to complete the Blueprint logic.

  10. ブループリントを 保存 して コンパイル します。

被写体を追加する

シーンにはカメラでトラックする被写体オブジェクトが必要です。この例では、シンプルな球体スタティックメッシュ オブジェクトを使用します。

被写体を追加するには、次のステップを実行します。

  • 任意のゲーム オブジェクトを [Place Actors (アクタを配置)] タブからレベルにドラッグし、ビューポート 内にドロップします。

    Add a subject into the Viewport for your virtual camera to track.

モディファイアをスタックに追加する

カスタム仕様のモディファイアを モディファイア スタック に追加する準備が整いました。

  1. VCamActor を選択し、コンポーネント階層内で VCam コンポーネントを選択して [Modifier Stack (モディファイア スタック)] に移動し、その プラス記号 (+) をクリックします。

    Adding a new modifier stack on the VCam Actor.

  2. モディファイアの名前を入力します (「LookAt」など)。名前を追加することで、後でこのモディファイアをブループリント内で参照できるようになります。

    Name your modifier so you can reference it in Blueprints later.

  3. [Generated Modifier (生成されたモディファイア)] の 下向き矢印 をクリックし、リストから VCM_LookAt を選択します。

    Selecting your modifier.

  4. この モディファイア の [Default (デフォルト)] セクションを展開して、[Target Actor (ターゲット アクタ)] のドロップダウンをクリックします。レベルに追加した Sphere (球体) アクタを選択します。

    Selecting your target actor.

  5. プロジェクトを 保存 して コンパイル します。

これで、ビューポート内で VCam を有効にして、ターゲット ゲーム オブジェクトを移動できるようになりました。カメラは回転してオブジェクトをトラックします。

モディファイアの動作を変更する

現時点では、カメラは選択したターゲット アクタを常に追跡します。ブループリントを使ってモディファイアに動作を加えることで、この動作のオン/オフを切り替えることができます。

追跡のオン/オフの切り替えを追加するには、次のステップを実行します。

  1. Event On Apply ノードの Camera Component を右クリックして [Promote to Variable (変数へ昇格)] を選択します。

    Promoting the Camera Component to a Variable.

  2. [Details (詳細)] パネル の [Advanced (詳細設定)] ドロップダウンをクリックし、Camera Component 変数 を見つけて [Transient (一時的)] をオンにします。

    Making the Camera Component Variable transient.

  3. この変数をクリックして ブループリント のウィンドウにドラッグし、Set Camera Component をクリックして、これを Event on Apply ノードの実行ピンにつなげます。

  4. [My Blueprint (マイ ブループリント)] タブの [Variables (変数)] の隣にある プラス記号 (+) をクリックして、新しい ShouldLookAt ブール変数を追加します。この変数を ブループリント のウィンドウにドラッグして、Get ShouldLookAt を選択します。

  5. ShouldLookAt 変数からドラッグして Branch を選択します。これにより、カメラの LookAt の動作のオン/オフを切り替えるこのブール変数を使用できるようになります。

    Selecting Branch from the ShouldLookAt variable.

  6. この Branch を Set Camera Component の後につなげて、True を IsValid にアタッチします。

    Connecting your branch and making it valid.

  7. [My Blueprints (マイ ブループリント)] 変数ウィンドウから Camera Component 変数をドラッグし、Get Camera Component を選択します。

    Selecting Get Camera Component.

  8. Camera Component からドラッグして、「Get World Rotation」を検索して選択します。

    Searching for Get World Rotation.

  9. Camera Component から再びドラッグして「Set World Rotation」を検索し、Get World Rotation を Set World Rotation につなげます。

    Connecting Get World Rotation and Set World Rotation.

  10. 先ほど作成した Branch の False ピンを Set World Rotation につなげます。

    Connecting the False pin from your branch to Set World Rotation.

  11. ブループリントを 保存 して コンパイル します。これで、ShouldLookAt ブール変数を通じて、VCam コンポーネントの LookAt 動作のオン/オフを切り替えられるようになりました。

次のセクション では、拡張入力を使ってキーの押下でこのブール変数を制御し、LookAt 動作のオン/オフを即座に切り替える方法について説明します。

このセクションの結果

このセクションでは、ブループリントを使用してカスタム仕様のカメラ モディファイアを作成する方法について学習しました。

また、カスタム仕様のモディファイアを モディファイア スタック に追加して、エディタ内でバーチャル カメラを操作する方法についても学習しました。

4 - (任意) 拡張入力を使用する

VCam モディファイア では、ユーザーによる追加制御を可能にする 「拡張入力」入力アクション を使用できます。

ここでは、このシステムを使用して、モディファイアに機能を追加する方法について説明します。

目的

このセクションでは、モディファイアに 入力アクション を加えて、ユーザーが単一のキーを押すことでその効果を有効/無効にできるようにします。

入力イベントを作成する

入力イベントを作成するには、次のステップを実行します。

  1. コンテンツ ブラウザで [+ Add (+ 追加)] > [Input (入力)] > [Input Action (入力アクション)] を選択します。入力に「IA_ToggleActivation」と名前を付けて、ダブルクリックして開きます。

    Create an input action from the Content Browser.

  2. 入力マッピング コンテキスト アセットを追加するために、コンテンツ ブラウザ 内を右クリックして [Input (入力)] > [Input Mapping Context (入力マッピング コンテキスト)] を選択します。

  3. アセットに「IMC_LookAt」と名前を付けて、ダブルクリックして開きます。

  4. 新しい マッピング を追加するために、プラス記号 (+) をクリックします。[Input Actions (入力アクション)] で IA_ToggleActivation を選択します。

    Selecting toggle activation under Mappings.

  5. この入力アクションを有効にするデフォルト キーとして「S」を設定します。

    Setting S as a default key for the input action.

  6. Is Player Mappable プロパティをオンにして、その名前を「IA_ToggleActivation」に設定します。

    Enabling the Is Player Mappable property.

  7. コンテンツ ブラウザ 内で VCM_LookAt ブループリントをダブルクリックして開きます。

  8. [Class Defaults (クラスのデフォルト)] を選択して IMC_LookAt を [Input Mapping Context (入力マッピング コンテキスト)] に加えます。

    Adding IMC_LookAt to the Input Mapping Context.

  9. イベント グラフ 内を右クリックして「ToggleActivation」を検索し、[Enhanced Action Events (強化されたアクション イベント)] にある ToggleActivation を選択します。

    Searching for toggle activation under Enhanced Action Events.

  10. ShouldLookAt ブール コンポーネントを ブループリントのウィンドウ にドラッグして、Get ShouldLookAt を選択します。

    Selecting Get ShouldLookAt.

  11. ShouldLookAt ブール コンポーネントからドラッグし、「Branch」を検索して選択します。

    Searching for Branch from the ShouldLookAt boolean.

  12. EnhancedInputAction ToggleActivation ノードの Triggered ピンからドラッグして Branch につなげます。

    Connecting the triggered pin to the Branch.

  13. ShouldLookAt ブール コンポーネントを ブループリントのウィンドウ にドラッグして、Set ShouldLookAt を選択します。

    Selecting Set ShouldLookAt for the ShouldLookAt boolean.

  14. Set ShouldLookAt を True ピンにアタッチし、Set ShouldLookAt ノードのチェックボックスがオフであることを確認します。

    Attaching Set ShouldLookAt and making it True.

  15. 上記の手順を繰り返して 2 つ目の Set ShouldLookAt ノードを追加し、False ピンにつなげます。こちらの Set ShouldLookAt ノードでは、そのチェックボックスがオンになっていることを確認します。

    Adding a second Set Should LookAt node, connected to False. Graph showing two nodes, one false and one true.

  16. ブループリントを 保存 して コンパイル します。次のようになるはずです。

    The resulting Blueprint, after following all the steps above.

  17. シーンに戻ると、レベル内で Sphere アクタを動かす際に、S キーを押してこの効果のオン/オフを切り替えることができます。

    バーチャル カメラ入力システムは、ビューポートにフォーカスがない場合でも、カメラのユーザーがキーを押すたびに実行されます。これにより、別のユーザーが別の目的でそのキーを押した場合にコンフリクトが生じることがあります。たとえば、別のユーザーが コンテキスト ブラウザ 内でアセットの名前を変更して「S」の文字を使用した場合は、前述の作成したイベントが実行されます。

  18. (任意) ToggleActivation で使用するキーをバインドし直したい場合は、そのデフォルト キーを IMC_LookAt で変更できます。

  19. LookAt カメラの動作が、S キーを使って有効に切り替えたときのみに実行されるようになります。

このセクションの結果

このセクションでは、S キーを押した際に実行される入力イベントを加えました。このイベントでは、モディファイアの効果を有効/無効に切り替えます。

5 - 出力プロバイダを追加する

出力プロバイダ システムでは、ビューポート、リモート セッション プロトコルを使用するデバイス、Composure プラグイン、サポートされている各種ビデオ キャプチャ カードなど、さまざまなプロバイダにバーチャル カメラの出力を送信します。

利用可能な出力プロバイダは次のとおりです。出力プロバイダを追加する方法の説明については、それぞれのプロバイダ名をクリックしてください。

  • ビューポート出力プロバイダ

  • Pixel Streaming 出力プロバイダ

  • Unreal リモート出力プロバイダ

  • メディア出力プロバイダ

  • Composure 出力プロバイダ

ビューポート出力プロバイダ

ビューポート出力プロバイダ は、バーチャル カメラのビューをエディタのメイン ビューポートに直接出力します。

  1. VCam コンポーネントを選択し、[Output Providers (出力プロバイダ)] の横にある プラス記号 (+) をクリックして新しいプロバイダをリストに加えます。

    Adding a new Output Provider.

  2. リストから [Viewport Output Provider (ビューポート出力プロバイダ)] オプションを選択します。

    Selecting Viewport Output Provider from the list.

  3. 異なるプロバイダ間で共有される以下のプロパティが表示されます。たとえば、UMG Overlay ドロップダウンをクリックして、「TestUMG」を検索して選択し、ビューポートにテスト用の ウィジェット を追加します。

    プロパティ 説明
    Is Active プロバイダを有効/無効にします。
    UMG Overlay 画像出力の上にオーバーレイされる UMG ウィジェット。
    Use Override Resolution 出力画像用のカスタム仕様の解像度を設定します。解像度固定の外部デバイスを使用する際に特に便利です。
    Override Resolution 出力画像に使用される固定された解像度です。

  4. 最後に Is Active チェックボックスをオンにして、この 出力プロバイダ を 有効 に設定します。

    Setting Is Active to True on the Output Provider.

    シーンのメイン ビューポートにオーバーレイが表示されるようになります。これは、特定のニーズに合わせてカメラ出力をカスタマイズする方法の一例です。

    Example of seeing an overlay of the main viewport in your scene.

Pixel Streaming 出力プロバイダ

Pixel Streaming 出力プロバイダ は VCam のメイン出力プロバイダです。このプロバイダは、メインのエディタ ビューポートを Live Link VCam アプリなどの WebRTC で接続されたリモート デバイスに出力します。この方法で接続されており (Web ブラウザを含む)、互換性があれば、あらゆるデバイスを使用できます。

Pixel Streaming は Pixel Streaming 出力プロバイダ のインスタンスで完全に設定されるため、VCam では 1 つのストリームのみがサポートされるものの、追加の設定は必要ありません。**

リモート セッションによる iOS デバイスの設定

Live Link VCam アプリ を App Store から ARKit 対応の iOS デバイスにダウンロードして起動します。

The Live Link VCam app displayed on an ARKit enabled iPad.

デバイスを接続する

  1. バーチャル カメラ アクタの VCam コンポーネントを選択して、[Output Provider (出力プロバイダ)] ドロップダウン リストから[Pixel Streaming Provider (Pixel Streaming プロバイダ)] を選択します。

    Selecting Pixel Streaming Provider from the Output Provider dropdown.

  2. 出力プロバイダの変更後は、新しく選択した出力プロバイダの Is Active がオンになっていることを確認します。![i

    Making sure that the Is Active checkbox is enabled.

  3. デバイスで Live Link VCam アプリを起動します。接続を確立するために、コンピュータの IP アドレスを入力して [Connect (接続)] をタップします。

  4. メインのエディタ ビューポートがデバイスの画面にミラーリングされます。

Unreal リモート出力プロバイダ

Unreal リモート出力プロバイダ は、メインのエディタ ビューポートを Live Link VCam アプリなどのリモート セッション プロトコルで接続されたリモート デバイスに出力します。この方法で接続されており、互換性があれば、あらゆるデバイスを使用できます。

この出力プロバイダを使用するには、リモート セッションを使って外部デバイスと接続するようにプロジェクトを設定する必要があります。

  1. [Settings (設定)] > [Project Settings (プロジェクト設定)] を開きます 。

  2. [Plugins (プラグイン)] カテゴリの [UDP Message (UDP メッセージ)] セクションに移動して、コンピュータの IP アドレスの末尾にポート番号を表す「:0」を加えたものを [Unicast Endpoint (ユニキャスト エンドポイント)] に設定します。

    Setting your Unicast Endpoint to your computer's IP address.

  3. [Engine (エンジン)] カテゴリの [Rendering (レンダリング)] セクションに移動して、[Default Settings (デフォルト設定)] の矢印をクリックしてその詳細設定を開きます。[Frame Buffer Pixel Format (フレーム バッファ ピクセル形式)] を [8bit RGBA] に設定します。

  4. エディタを再起動します。

リモート セッションによる iOS デバイスの設定

Live Link VCam アプリ を App Store から ARKit 対応の iOS デバイスにダウンロードして起動します。

デバイスを接続する

  1. バーチャル カメラ アクタの VCam コンポーネントを選択して、[Output Provider (出力プロバイダ)] ドロップダウン リストから[Unreal Remote Output Provider (Unreal リモート出力プロバイダ)] を選択します。選択した出力プロバイダの Is Active がオンになっていることを確認します。

    Selecting the relevant settings for your Output Provider.

  2. デバイスで Live Link VCam アプリを起動します。歯車のアイコンを選択して、[Connection Type (接続タイプ)] を [Remote Session (リモート セッション)] に変更します。

    Changing the connection type to Remote connection.

  3. 接続を確立するために、コンピュータの IP アドレスを入力して [Connect (接続)] をタップします。

  4. メインのエディタ ビューポートがデバイスの画面にミラーリングされます。

    Seeing the main editor viewport on your device.

メディア出力プロバイダ

メディア出力プロバイダ は、Black Magic やAJA のビデオ キャプチャ カードなどの Unreal Media Framework でサポートされているデバイスにバーチャル カメラの出力を送信します。

選択すると、[Output Config (出力構成)] を使って出力パラメータを指定できるようになります。

Using Output Config to change the media provider.

Unreal Media Framework の使用方法の詳細については、「Media Framework」ドキュメントを参照してください。

Composure 出力プロバイダ

Composure 出力プロバイダ は、バーチャル カメラの出力を [Composure プラグイン](https://docs.unrealengine.com/5.0/ja/real-time-compositing-with-composure-in-unreal-engine) で直接使用可能なレンダリング ターゲットに送信します。加えて、カメラのビューがレンダリングされる Composure レイヤー ターゲット を指定することもできます。

Composure output provider.

このセクションの結果

このセクションでは、さまざまな出力プロバイダをバーチャル カメラ コンポーネントに追加する方法を学習しました。これで、バーチャル カメラを使用して、エディタ ビューポートまたは外部デバイスに Pixel Streaming およびリモート セッション プロトコルを使って直接出力できるようになりました。

また、Unreal Media Framework と Composure プラグインで処理される出力を送信する方法についても学習しました。

6 - (任意) 接続ポイントを使って入力アクションをモディファイアからウィジェットにパスする

モディファイア接続ポイントの使用は実験段階の機能です。

前のセクションではモディファイアで入力アクションを作成し、それをハードウェア入力にマッピングしました。拡張入力はハードウェア入力に関連して開発されたものですが、バーチャル カメラでも、入力インジェクションと VCam 接続ポイントの使用を通じて UMG 入力を再マッピングする手段として活用することができます。

ここでは、このシステムを使って、ハード参照やキャストの必要なしに、モディファイアにすばやく再マッピングできる UMG ウィジェットを作成する方法について説明します。

目的

このセクションでは、VCam 接続 と 接続ポイント を使って、機能の 2 つの異なる構成要素に再マッピング可能な VCam ウィジェット を モディファイア に作成します。**

接続ポイントをモディファイアに追加する

接続ポイントをモディファイアに追加するには、次のステップを実行します。

  1. VCM_LookAt モディファイアを開いて [Class Defaults (クラスのデフォルト)] を選択します。

  2. [VCam Connection Points (VCam 接続ポイント)] セクションの [Connection Points (接続ポイント)] を展開し、「**Toggle Activation」という名前の要素を加えます。

    Adding a Toggle Activation element under Connection Points.

  3. この要素を展開して Associated Action に IA_ToggleActivation 入力アクションを設定します。

    Selecting the Toggle Activation input action as the Associated Action.

  4. コンパイル して 保存 します。これで、接続ポイント トリガーを使ってモディファイア ブループリントを有効にできるようになりました。

VCam ウィジェットを作成する

VCam ウィジェット は、入力を受け入れて、モディファイア接続ポイントへの接続を定義できる機能を持つ点で ユーザー ウィジェット と異なります。

VCam ウィジェットを作成するには、次のステップを実行します。

  1. コンテンツ ブラウザで [+ Add (+ 追加)] をクリックし、[VCam] セクションの [VCam Widget (VCam ウィジェット)] を選択します。**

    Creating a VCam Widget via the Content Browser Add options.

  2. 新しいウィジェットに「VCW_ConnectionButton」と名前を付けます。このアセットをダブルクリックして開きます。

    入力マッピング コンテキスト に関するプロンプトが表示されますが、この場合は不要です。コンテキストを提供することで、「拡張入力を使用する」で説明されている モディファイア と同じ方法で、ウィジェットで 入力アクション イベント を発行できます。

  3. [Designer (デザイナ)] でライブラリからボタンを加えて、「ConnectionButton」と名前を付けます。

    Adding a button from the library.

  4. [Graph (グラフ)] を選択してブループリント スクリプト処理グラフを表示し、[Class Defaults (クラスのデフォルト)] を選択します。

  5. [VCam Connections (VCam 接続)] セクションの [Connections (接続)] 配列を展開し、プラス記号 (+) をクリックして要素を追加します。

  6. この要素に「Button」と名前を付けて展開し、そのプロパティを表示します。

    Adding a Button to the the Connections array.
    プロパティ 説明
    Required Interfaces ここに接続に必要なインターフェースが示されている場合、そのインターフェースが実装されていないモディファイアには接続されません。これを利用して、スライダの境界といった、ウィジェットに必要な情報がモディファイアで提供されていることを確認できます。ブループリント インターフェースの詳細については、「ブループリント インターフェース」ドキュメントを参照してください。
    Optional Interfaces この任意のインターフェースは、接続を正しく確立するうえで必須ではありません。これを使って、ボタンの色などの任意の情報を提供するためにモディファイアで使用できるインターフェースを格納することができます。
    Requires Input Action このフィールドでは、ターゲット モディファイア接続ポイント の Associated Action プロパティに入力アクションが必要な接続であるかどうか定義します。
    Action type Requires Input Action が有効な場合に、このプロパティを使って、接続を正しく確立するために必要な入力アクションのタイプを指定します。
    Manually Configure Connection このフィールドでは、ターゲット モディファイアと接続ポイント名を指定できます。現時点ではこのフィールドを空白のままにしても問題ありません。これは 組み立てた HUD で後で設定する必要があります。

  7. Requires Input Action プロパティをオンに切り替えて、Action Type を Digital (bool) に設定します。

    Setting the connection point to require an input action of a bool type.

  8. イベント グラフの [My Blueprint (マイ ブループリント)] > <ボタン名> > [Events (イベント)] に戻り、On Clicked イベントを追加します。

    Adding an On Clicked event.

  9. イベント グラフ 内を右クリックし、[VCam Connections] セクションの「Get Connections」を検索します。

    Searching for Get Connections.

  10. Get Connections ノードからドラッグして「Find」を検索します。キー を接続の名前と同じ「Button」に設定します。

    Setting the key to be Button. Make it match the name of your connection.

  11. 出力ピンからドラッグして、Get Connected Modifier > Get Owning VCam Component > Inject Input For Action の順でそれぞれ追加します。Get Owning VCam Component の出力ピンは Inject Input For Action の Target 入力につなげてください。

    Connecting Get Owning VCam Component to the Target input on Inject Input For Action. Blueprint element with all the nodes connected properly.

  12. Raw Value 入力を右クリックして [Split Strut Pin (構造ピンを分割)] を選択します。Inject Input For Action の Raw Value Type を Bool に設定 (接続で定義されている Action Type に一致) して、On Clicked の実行ピンを Inject Input for Action につなげます。

    Setting Split Strut Pin. Example of blueprint for the On Clicked boolean even with Inject Input for Action.

  13. Find ノードからドラッグして Get Connected Input Action を加えます。その結果を Inject Input For Action の Action ピンにつなげます。これにより、呼び出すアクションがモディファイアの接続ポイントで指定したものと同じになることを確認できます。

    Adding Get Connected Input Action from your Find node. Blueprint with Get Connected Input Action added.

  14. Raw Value X の浮動小数値を「1」に設定します。こうすることで、ボタンが押されたときにハードウェアのボタンが押されたことを模倣して、Input Action が True の値を必ず受け取るようになります。

    Setting the Raw Value X to 1.

  15. コンパイル して 保存 します。

HUD を作成して接続を管理する

HUD を作成するには、次のステップを実行します。

  1. コンテンツ ブラウザ 内を右クリックして、[VCam] > [VCam Widget (VCam ウィジェット)] に移動します。新しいウィジェットに「VCW_ConnectionHUD**」と名前を付けます。このアセットをダブルクリックして開きます。

  2. [Library (ライブラリ)] で「**Connection Button」を検索して追加します。

    Adding your Connection Button from the Library.

  3. Connection Button ウィジェットを 階層 にドラッグして追加し、[Details (詳細)] パネル に移動します。****

  4. 割り当てた際に HUD が全画面サイズのボタンにならないように、キャンバス パネル で VCW_ConnectionButton をラップします。

    The HUD as a full-screen button, before being wrapped. Wrapping the Connection Button with a Canvas Panel.

  5. [VCam Connections (VCam 接続)] セクションの [Connection (接続)] を展開して、Button 接続を見つけます。

  6. この接続を展開して Manually Configure Connection を有効にします。

    Enabling Manually Configure Connection.

  7. Connection Target Settings フィールドが新たに表示されます。**Target Modifier を「Look At」 (モディファイア スタックにあるモディファイアに先ほど付けた名前) に設定し、Target Connection Point を「Toggle Activation」 (VCM_LookAt の 接続ポイント** に付けた名前) に設定します。

  8. 保存 して コンパイル します。

  9. シーン アクタの Vcam コンポーネント に戻り、任意のタイプの **出力プロバイダ** を追加します。

  10. UMG Overlay を VCW_ConnectionHUD に設定します。

  11. VCam コンポーネント上で Is Active と Enabled の各チェックボックスをオンにします。

    これらがすでに有効 (オン) な場合は、一度オフにしてから再びオンにして、アクタをリフレッシュしてください。

  12. ビューポート内でボタンクリックします。モディファイアの有効/無効が切り替わるはずです。

  13. (任意) ボタンを新しい 接続ポイント にバインドし直したい場合は、VCW_ConnectionHUD に戻って Target Modifier と Target Connection を新しいターゲットに合うように変更します。

このセクションの結果

このセクションでは、VCam ウィジェット、接続、接続ポイントを使って、迅速かつ簡単に再マッピングして再設定できる UMG 要素を作成する方法について学習しました。

また、Unreal Media Framework と Composure プラグインで処理される出力を送信する方法についても学習しました。

次のステップ

バーチャル カメラを独自に構築する方法を学んだので、次は「[ バーチャル カメラ アクタのクイック スタート](https://docs.unrealengine.com/5.0/ja/using-virtual-cameras-in-unreal-engine)」を参照して、Unreal Engine に付属の事前ビルド済みの バーチャル カメラ アクタ を見てみましょう。

7 - (任意) ボタンをカスタマイズする

作成したバーチャル カメラ ボタンは接続とブループリント インターフェースを通じてカスタマイズできるため、モディファイアのステートに応じてボタンの色を変更したりできます。この機能を使ってボタンを他の用途で再利用することができます。たとえば、同じボタンの色を変えて、記録機能やスクリーンショット機能などに使用できます。

これは上級向けの機能であり、[バーチャル カメラ アクタがすでに設定されている](animating-characters-and-objects\Sequencer\Cameras\VirtualCamera\VirtualCameraComponentQuickStart\ 必要があります。

この方法でボタンをカスタマイズする際は、一部の機能が「バーチャル カメラ アクタのクイック スタート」で説明されている標準的な関数とは異なる場合があります。

ブループリント アセットを作成する

最初に、モディファイアに接続できるブループリント アセットを作成します。

ブループリント アセットを作成するには、次のステップを実行します。

  1. コンテンツ ブラウザ 内を右クリックして、**[Blueprints (ブループリント)] > [Blueprint Interface (ブループリント インターフェース)]** を選択します。新しいアセットに「BPI_ConnectionButton」と名前を付けます。

  2. アセットをダブルクリックして開きます。

  3. 既存の関数の名前を「Get Button Color」に 変更 します。

    Renaming the function to Get Button Color.

  4. [Details (詳細)] パネルの [Inputs (入力)] で Name タイプのパラメータを新たに追加して、「**Connection PointAdding a Name parameter.」と名前を付けます。

    Adding a Name parameter. Showing the Input you've called Connection Point.

  5. [Outputs (出力)] セクションで 2 つの新しいパラメータを加えます。

  6. Linear Color タイプのパラメータを作成して「Color」と名前を付けます。****

  7. Bool タイプのパラメータを作成して「Success」と名前を付けます。

    The outputs Color and Success that you have created.

  8. コンパイル して 保存 します。

ブループリント アセットをコンパイルする

アセットを生成して接続できるようにするには、VCam モディファイアでブループリント アセットを選択してコンパイルする必要があります。

アセットを選択するには、次のステップを実行します。

  1. VCM_LookAt モディファイアに戻ります。

  2. [Class Settings (クラス設定)] を開きます。**

  3. [Interfaces (インターフェース)] の [Implemented Interfaces (実装済みインターフェース)] にある [Add (追加)]** を選択します。

    Adding an inherited interface.

  4. BPI_ConnectionButton を選択します。

    Interfaces section showing you've added the implemented interface for your connection button.

  5. コンパイル します。

ブループリントを使ってボタンを接続する

ブループリントを使ってボタンを接続する準備が整いました。ここでは、選択した機能にボタンが送信する色を定義します。

ボタンを接続するには、次のステップを実行します。

  1. [My Blueprint (マイ ブループリント)] タブの [Interfaces (インターフェース)] セクションを展開します。Get Button Color 関数が表示されるはずです。この関数を編集するためにダブルクリックします。

    The Get Button Color function is now visible in the Interfaces section.

  2. Connection Point 出力ピンからドラッグして Switch On Name ノードを追加します。**

  3. デフォルトの Return Node を Switch on Name の Default ピンにつなげます。この Return Node の Success が False (オフ) になっていることを確認します。

    Adding Switch On Name.

  4. Switch on Name ノードを選択します。その [Details (詳細)] パネル で「Toggle Activation」 (接続ポイントと同じ名前) という名前の ピン を加えます。

    Adding a Toggle Activation pin.

  5. グラフ内を右クリックして別の Return Node を追加します。これを Switch on Name の先ほど作成した Toggle Activation ピンにつなげます。

    Searching for and selecting Add Return Node. Get Button Color now has two return nodes.

  6. ShouldLookAt ブール コンポーネントを ブループリントのウィンドウ にドラッグして、Get ShouldLookAt を選択します。

    Selecting GetShouldLookAt.

  7. ShouldLookAt からドラッグして Select Color ノードを追加します。

  8. A を緑色に、B を赤色に設定します。

    Setting the color values for your two options.

  9. Select Color の Return Value を、Toggle Activation に接続されている Return Node の Color ピンにつなげます。

    Blueprint where you've set colors for the return values for your button.

ルールを定義する

次に、先ほど設定した情報をウィジェットがリクエスト、パース、適用する方法を定義します。

ルールを定義するには、次のステップを実行します。

  1. 先ほど作成した VCW_ConnectionButton に戻り、[Class Defaults (クラスのデフォルト)] > [VCam Connections (VCam 接続)] > [Connections (接続)] に移動します。

  2. Button 接続を展開して、Required Interfaces または Optional Interfaces のいずれかの隣にある プラス記号 (+) をクリックし、BPI_ConnectionButton を追加します。

    Adding BPI_ConnectoinButton under your interface of choice.

    • これを Required Interfaces に追加した場合、正しく接続するためにはモディファイアに BPI_Connection Button が実装されている必要があります。

    • これを Optional Interfaces に追加した場合は、モディファイアにこのインターフェースが実装されているかどうかにかかわらず、正しく接続することができます。

  3. グラフ内を右クリックして、VCam Connections の Get Connections ノードを追加します。

    Searching and finding the Get Connections node.

  4. Get Connections ノードからドラッグして「Find」を検索します。キー を「Button」に設定します。この名前が接続の名前と一致することを確認してください。

  5. 出力ピンからドラッグして Get Connected Modifier を追加します。

  6. Get Connected Modifier の Return Value からドラッグして IsValid を追加します。Event Tick の実行ピンを Is Valid につなげます。

    Blueprint for Event Task.

  7. Get Connected Modifier の Return Value からドラッグして、BPI_ConnectionButton セクション から Get Button Color (Message) を追加します。

  8. Find の出力ピンからドラッグして Get Connection Point Name ノードを追加します。その Return Value を Get Button Color の Connection Point 入力につなげます。

  9. Is Valid の実行ピンを **Get Button Color につなげます。

    Blueprint with Is Valid connected to Get Button Color.

  10. その Success ピン からドラッグして Branch を追加します。

  11. [My Blueprints (マイ ブループリント)] タブの [Variables (変数)] セクションから Button をドラッグします。これを Get ノードとしてドロップし、Branch の近くに配置します。**

  12. この Get ノードからドラッグして Set Background Color を追加します。Get Button Color の Color 出力ピンを Set Background Color の In Background Color ピンにつなげます。

  13. Branch の True 実行ピンを Set Background Color につなげます。

    Complete Blueprint for changing your button color.

  14. コンパイル して 保存 します。

最終結果

ワールド内のアクタの VCam コンポーネントに戻り、Enabled のオン/オフを切り替えてリフレッシュできるようになりました。ブール値のステートに応じてボタンの色が変わるはずです。

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page