1. Epic GamesDeveloper
  3. 高度なカスタム インタラクションを作成する

高度なカスタム インタラクションを作成する

ビュー バインディングを使用して、カスタム UI を高度なインタラクションの仕掛けにつなぎます。

高度なカスタム インタラクションを作成する

このウォークスルーでは、UMG (Unreal Motion Graphics) デザインおよびその ビューモデル バインディングの例を示しています。この例を使用して、高度なインタラクション の仕掛け用のカスタム UI を作成できます。

高度なカスタム インタラクションを作成する際は、インタラクションを開始するためのイベントを必ず設定します。高度なインタラクションを正常に完了したことに対してプレイヤーにアイテムを付与するイベント トリガーを設定することもできます。

プレイヤーまたはオブジェクトが特定のゾーンをターゲットにしたときに ムービー カットシーン を設定することで、これらの例をベースにして構築することができます。

Golf Example

このチュートリアルでは、プレイヤーがトリガー入力を保持したままで正しいゾーンにターゲット設定できる、迅速な操作を要する高度なインタラクションを作成する方法について説明します。

UI のカスタマイズを始める前に、デザインで使用するすべてのアセットを作成してインポートしておく必要があります。デザインでマテリアルを使用する方法の詳細については、「マテリアルからカスタム UI ウィジェットを作成する」を参照してください。

仕掛けを設定する

次の手順を実行して、プレイヤーが完璧ゾーンを狙って、命中したら成功をもらえる、ゴルフの例を作成します。UI をデザインする際に、[Hierarchy (階層)] パネルに UI を配置するときにパネルの名前を自由に変更できます。

  1. 高度なインタラクションの仕掛けを、コンテンツ ブラウザ からプロジェクトに配置します。

  2. この仕掛けの [Details] パネルで、以下の設定を変更します。

    Modified Golf Example
    オプション 値 説明
    UI Type Bar 表示するユーザー インターフェースのタイプを指定します。
    Custom Widget カスタム ユーザー ウィジェット を追加する インタラクションに使用するカスタム ウィジェットを選択します。
    Interaction Type Charge and Release Charge and Release では、トリガー ボタンを押している間はアニメートされ、解除したときにアクティブになります。
    Meter Color 色を選択する この例では赤を使用します。
    Good Zone Size 80.0 良好ゾーンのサイズを、メーター全体に対するパーセンテージとして設定します。
    Good Zone Position 0.0 良好ゾーンの位置を設定します。
    Perfect Zone Size 15.0 完璧ゾーンのサイズを、良好ゾーンに対するパーセンテージとして設定します。
    Perfect Zone Position 100.0 完璧ゾーンの位置を設定します。
    Good Zone Color 色を選択する この例ではダークグリーンを使用します。
    Perfect Zone Color 色を選択する この例ではライムグリーンを使用します。

背景画像を追加する

Golf Example

以下の手順を実行して、この例の垂直メートルバーの背景画像を作成します。このウォークスルーでの背景は、上部にゾーンがある、丸みを帯びた黒いバーです。

このチュートリアルでの手順を作り直す場合は、この画像を基準として使用します。

  1. インタラクション用の ユーザー ウィジェット を作成します。

  2. この仕掛けにアタッチされている ユーザー ウィジェット を見つけてダブルクリックし、その ユーザー ウィジェット エディタ にアクセスします。

  3. [Hierarchy] パネルで、Overlay をドラッグしてネストさせ、全体的なキャンバスとして利用します。この例では、このオーバーレイは Overlay という名前になっています。次に、別の Overlay をドラッグして、背景がその中に入るようにします。この例では、このオーバーレイは SID という名前になっています。

  4. この例では Bar という名前になっている Image をドラッグし、子の Overlay 内にネストさせます。

  5. Image の [Details] パネルで、背景のマテリアルまたはテクスチャを設定します。

ゾーンを設定する

狙うと自動的に失敗になる、無効ゾーンを作成できます。ただし、この例では完璧ゾーンだけを使用していて、次の 3 つのコンテナで構成されています。

  • PerfectZoneStart という名前の、先頭の空の領域

  • SizeBox という名前の、良好ゾーンまたは完璧ゾーン

  • PerfectZoneEnd という名前の、その後の空の領域

以下の手順を実行して、この例の完璧ゾーンを作り直します。

Golf Example

  1. [Palette (パレット)] パネルから Stack Box をドラッグし、SID という子の Overlay 内にネストさせます。

  2. 次に、Stack Box > Size Box をドラッグし、Stack Box 内にネストさせます。

    1. Scale Box の [Details] パネルで、Stretch オプションを [User Specified (ユーザー指定)] に設定します。次に、[User Specified Scale (ユーザー指定スケール)] を、完璧ゾーンの上に空けるスペースを表すように設定します。この例の目的に合うように、そのスケールを 0.27 に設定します。
    2. Size Box で、Height Override 設定項目をメーターの一番上の高さに設定します。

  3. 同じ Stack Box 内に、Size Box > Scale Box > Overlay > Image もドラッグします。

    1. Size Box の [Details] パネルで、Height Override を完璧ゾーンのサイズに設定します。

    2. Scale Box の [Details] パネルで、Stretch 設定項目を [User Specified] に設定します。次に、[User Specified Scale] を、1 に設定します。

    3. Overlay の PerfectZone には完璧ゾーンのマテリアルおよびテクスチャが入ります。

  4. 同じ Stack Box 内に、Overlay > Size Box もドラッグします。

    1. Overlay の PerfectZoneEnd の [Details] パネルで、Stretch 設定項目を [User Specified] に設定します。次に、[User Specified Scale (ユーザー指定スケール)] を、完璧ゾーンの上に空けるスペースを表すように設定します。この例の目的に合うように、そのスケールを 0.49 に設定します。
    1. Size Box の [Details] パネルで、Height Override 設定項目をメーターの一番下の高さに設定します。

  5. 詳細を追加するために、この例では Notches という名前の Image を Stack Box の真下に追加して、背景ゾーンのノッチを含めることができます。

スクラバーを設定する

この例では、動くコンテナ内にスクラバーがある必要があります。そうするには、2 つの項目がある Stack Box を作成する必要があります。

1 つ目の項目は、[User Specified Scale] に設定されている Size Box を保持します。後で、それを ViewModel の Skilled Interaction Meter Scale にバインドします。2 つ目の項目は、スクラバーがあるコンテナを保持します。

Scrubbers

  1. SID という Overlay の真下に、この例では ScrubberStackBox という名前の Stack Box をドラッグしてネストさせて、2 つの子セットアップ Overlay > Size Box と Size Box > Scale Box > Image (名前は Scrubber) がその中に入るようにします。

    1. Overlay の ScrubberMovingZone の [Details] パネルで、Stretch 設定項目を [User Specified] に設定します。次に、[User Specified Scale] 設定項目を 0 に設定します。
    1. Size Box の [Details] パネルで、Height Override 設定項目を、メーターの一番上の高さに設定します。
    1. Size Box の ScrubberContainer の Height Override 設定項目を 0 に設定します。
    1. Overlay の Scale Box の Stretch 設定項目を [User Specified] に変更します。[User Specified Scale] 設定項目を 1 に設定します。
    1. Image の Scrubber の Image 設定項目で、スクラバーのマテリアルまたはテクスチャを設定します。

ビューモデルを設定する

カスタム UI を高度なインタラクションの仕掛けにつなぐには、以下の手順を実行します。

  1. User Widget で、[Window (ウィンドウ)] > [Viewmodels (ビューモデル)] を選択すると、[Viewmodels] ウィンドウが開きます。

  2. [+Viewmodel (+ビューモデル)] をクリックします。次に、[Device - Skilled Interaction View Model] を選択し、[Select (選択)] をクリックします。 ViewModel

  3. ボトム ツールバーまたは [Window] タブのいずれかで、[View Bindings (ビューバインディング)] を選択します。

  4. [View Bindings] を、次の画像のようにセットアップします。

    Viewbindings
    1. [+ Add Widget (+ウィジェットを追加)] をクリックして ScrubberMovingZone を追加します。
    2. ScubberMovingZone を [User Specified Scale] に設定し、UEFN_SkilledInteraction_ViewModel を [Current Meter Value (現在のメーター値)] に設定します。
    3. [+ Add Widget] をクリックして、PerfectZoneStart を追加します。
    4. PerfectZoneStart を [User Specified Scale] に設定し、UEFN_SkilledInteraction_ViewModel を Perfect Zone Min に設定します。
    5. [+ Add Widget] をクリックして、PerfectZoneEnd を追加します。
    6. PerfectZoneStart を [User Specified Scale] に設定し、Add Int Double の変換関数を追加します。
    7. A を 1 に設定します。
    8. B を UEFN_SkilledInteraction_Viewmodel/Perfect Zone Max に設定します。
    9. Negate B を True に設定します。

Ask questions and help your peers Developer Forums

Write your own tutorials or read those from others Learning Library

On this page