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

プロジェクトでプレイヤーが画面上で UI エレメントをドラッグ アンド ドロップできると良い場合があります。これには、インターフェースのレイアウトをカスタマイズしたり (ヘルスバーやユニット フレームを配置)、インベントリ画面 (アイテムを追加したり、取り除いたりします) でゲームプレイ システムとインタラクションするなどが考えられます。UMG を使って、 DragAndDropOperation ノードを使ってこうしたタイプのインタラクションを作成し、インタラクションのメソッドに応じて継承されたブループリント関数のいくつかをオーバーライドすることができます。

この例では、プレイヤーがマウスの左ボタンを使って画面上のヘルスバーをドラッグして再配置する方法を示します。このガイドの最後まで進むと、ビューポート内でドラッグして、新しい場所にドロップできる UI ウィジェットを作成することができます。

1 - プロジェク設定

作業を開始する前に、プロジェクト設定の一部としていくつかのアセットを作成する必要があります。この例では、HUD でドラッグ アンド ドロップを可能にする要素は、 HealthBar に配置されます。 このためには、実際のヘルスバーをドラッグするのではなく、ヘルス バーと同じ形状の DragWidget を作成します。ここが、ヘルス バーのプログラミングとドラッグ アンド ドロップ機能の違う点です。

1. コンテンツ ブラウザ で、 DragWidget 、 HealthBar 、および HUD という 3 つの ウィジェット ブループリント を作成します。

2. コンテンツ ブラウザ 内を 右クリック して DragDropOperation クラスの新規 Blueprint クラス を作成し、「 WidgetDrag 」と名前を付けます。

   この特殊な Blueprint クラスを使って、ドラッグ アンド ドロップ操作の一部として情報を渡すことができます。

3. WidgetDrag ブループリントを開き、 WidgetReference という User Widget を作成します。 Instance Editable と Expose on Spawn のチェックボックスにチェックを入れます。

   これは、画面上でドラッグする UMG ウィジェットを保持するために使います。

4. DragOffset という Vector 2D 変数を作成します。 Instance Editable と Expose on Spawn のチェックボックスにチェックを入れます。

   これにより、ウィジェットのドラッグ アンド ドロップ開始点からの位置をオフセットします。
   

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

6. WidgetDrag ブループリントを開き、 WidgetReference という User Widget を作成します。 Instance Editable と Expose on Spawn のチェックボックスにチェックを入れます。

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

プロジェクトを設定したら、次にドラッグ可能な UI にする HealthBar Widget ブループリントでの作業を開始します。

2 - Health Bar ウィジェットのセットアップ

マウスの左ボタンが押されたことを判断し、スクリーン スペースで押された場所を保存します。また、 DetectDragIfPressed ノードを使って、プレイヤーが指定されたキーでドラッグしているかを判断します。

1. HealthBar Widget ブループリントを開いて、 [Hierarchy] ウィンドウで キャンバス パネル を削除します。

2. Size Box と Progress Bar をボックスに追加します。[Size Box] の [Details (詳細)] パネルで、 [Width Override (幅をオーバーライド)] と [Height Override (高さをオーバーライド)] を 500x50 に変更します。

   プレビューを [Desired on Screen] に設定すると、進捗バーを自分でスタイライズできます。にします。進捗バーが最後まで到達すると色が緑に変わるように、 [Percent (パーセント)] を 1.0 に設定します。
   

2.1 - On Mouse Button Down 関数のスクリプト化

プレイヤーがマウスの左ボタンをドラッグしているかを判断するための天順です。

1. イベント グラフ で、 OnMouseButtonDown オーバーライドと OnDragDetected オーバーライドを追加します。イベント グラフのそれぞれのオーバーライドに対してタブが作成されます。

   独自のカスタム スクリプトを呼び出すようにオーバーライドできるいくつかの関数があります。ここでは、マウス ボタンが押されたとき、およびウィジェットのドラッグが検知される場合にいくつかのチェックを行います。

2. [OnMouseButtonDown] タブを選択します。 OnMouseButtonDown ノード内で、 My Geometry ピンを引き出して Absolute to Local ノードを追加します。

3. Mouse Event ピンを引き出して Get Screen Space Position ノードを追加し、Return Value を Absolute Coordinate に接続します。

   マウスボタンがボタンのキー押下を登録したスクリーン スペースの位置を取得して、 Health Bar ウィジェットの絶対座標をローカル空間に変換します。これにより位置が変数で格納されるため、ウィジェット上でプレイヤーが実際にクリックし落ちる位置を決定することができます。
   

4. Absolute to Local ピンの Return Value を 右クリック し、 Promote to Variable を選択します。変数に「 Drag Offset 」と名前を付けます

   On Mouse Button Down ノードでエラーが発生しても大丈夫です。関数が完了するとエラーはなくなります。

5. グラフ内を 右クリック して、 Detect Drag if Pressed ノードを追加します。 Drag Key を Left Mouse Button に設定します。

6. 残りのピンの接続も完了させます。

   • Mouse Event を Pointer Event に接続します。

   • Return Value ピンを Detect Drag if Pressed から Return Node へ接続します。

   • 実行 ピンを 4 つのノードへ接続します。

   プレイヤーが Left Mouse Button をドラッグして On Drag Detected スクリプトが開始するかを決定します。

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

2.2 - On Drag Detect 関数のスクリプト化

このステップでは、プレイヤーが実際にヘルスバーを画面上でドラッグすると何が起こるかを定義します。

1. [OnDragDetected] タブを選択します。 OnDragDetected ノードから、 Drag Widget ノードを右クリックして追加します。 Class を Drag Widget に設定します。

2. Widget Reference ピンから Self ノードに接続します。Return Value を Dragged Widget という変数へ Promote (昇格) させてピンを接続します。
   

   作成されたドラッグ ウィジェットは、既存の Health Bar ウィジェットへの参照を持ちます。ダミーのドラッグ ウィジェットを変数に昇格し、後でアクセス可能にし、ウィジェットをドロップすることを選んだ場合に表示から除去できるようにします。

3. 右クリックし Drag & Drop Operation ノードを作成します。 Class を Widget Drag に設定し、 Pivot を Mouse Down に設定します。

   Pivot は、ドラッグ操作を行っているポインタと相対的にドラッグされる場合、Drag Widget Visual が表示される場所を決定します。

4. 以下のノードを DragAndDropOperation ノード ピンに接続します。

   • Dragged Widget Set から 実行 行を Return Node へ

   • Self を Widget Reference へ

   • Dragged Widget を Default Drag Visual へ

   • Drag Offset を Drag Offset へ

   上の図では、参照する Widget ブループリントを示し、ドラッグのビジュアルがどのようなものになるかを示し、ドラッグを開始するオフセットを提供しました。ノード上にはデフォルトでオフセット ピンがあります。しかしながら、Mouse Button Down が押された時のドラッグの開始位置を決定するために独自の計算を行います。

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

次に、プレイヤーがマウスの左ボタンを放して OnDrop を行う場合、何が起こるかを決める必要があります。

3 - On Drop 関数のセットアップ

メインの HUD Widget ブループリントをセットアップし、 OnDrop 関数を行うときに起こることをオーバーライドします。

1. HUD Widget ブループリントを開きます。 [Canvas Panel (キャンバス パネル)] の [Details (詳細)] パネルで、 [Visibility (可視性)] を [Visible (表示)] に設定します。

   Health Bar ウィジェット内で、ドラッグ検知を行っていますが、マウスの左ボタン放したときに、それを HUD Widget ブループリントにドロップするようにスクリプト化します。HUD がヒット検知を受け取るためには、その [Visibility] を [Visible] に設定します。

2. [Palette] ウィンドウから、 Health Bar ウィジェットをキャンバスに追加します。

3. イベント グラフ グラフで、 OnDrop 関数のオーバーライドを [My Blueprint] パネルから追加します。

4. OnDrop ノードから、 Operation を引き出して Cast to WidgetDrag ノードに追加します。次に Get Widget Reference を追加して As Widget Drag ピンを Widget Reference と Drag Offset ノードに追加します。

   OnDrop 関数の一部としてどの型の演算が行われるかをチェックするためにキャストします。 Widget Drag の場合、 WidgetReference (ドラッグされているウィジェットとしてパスする) および DragOffset (すなわち、ドラッグを開始した位置) を取得します。

5. My Geometry ピンから Absolute to Local ノードを追加します。 Pointer Event ピンから GetScreenSpacePosition ノードを追加します。

   これは、マウスの左ボタンを放して、ウィジェットをドロップする場所である 2D 空間における位置を示します。ここから、 DragOffset を差し引いて、ドロップするときにどこにウィジェットを配置するかを決定します。

6. Vector2D - Vector 2D ノードを追加して Absolute to Local の Return Value から DragOffset を差し引きます。

7. 右クリックして、 Remove from Parent ノード、 Add to Viewport ノード、 Set Position in Viewport ノードを追加します。 実行 ピンを上の順番で 3 つすべてのモードに接続し、 Set Position in Viewport ノードを Return Node に接続します。

8. 接続と調節を次のように変更します。

   • Widget Reference ピンを 3 つすべてのノードの Target ピンに接続します。

   • Vector2D - Vector 2D ノードから Return Value ピンを Position ピンに接続します。

   • Remove DPIScale のチェックを外します。

   • Return Value にチェックを入れます。

   Remove DPIScale のチェックを外して、 Return Value にチェックを入れています。これは DPI Scaling を取り除く必要がないためです。この関数はすでに処理したので true を返します。このスクリプトで、Drag Offset に関係した新しい位置のスクリーンに再度追加する前に、既存の Health Bar ウィジェットを除去します。

9. HUD ウィジェット ブループリントを コンパイル して 保存 します。

HUD はドラッグしたウィジェットをドロップ処理するようにセットアップされて、ヘルスバーを表示させます。次のこのチュートリアルの最後のステップでは、ドラッグしたウィジェットをセットアップし、ヘルスバーの形状を模倣し、Character ブループリントに対してこの HUD をビューポートに追加するように指示します。

4 - Drag Widget のスクリプト化

このステップでは、 DragWidget (ドラッグしている視覚的ウィジェット) を設定します。

1. DragWidget の Widget ブループリントを開き、 Canvas Panel を子の Border を持つ Size Box と置き換えます。

2. [SizeBox] の名前を「 WidgetSize 」に変更し、 [isVariable] を true に設定し、 [Width Override] と [Height Override] の両方にチェックを入れます。

   ヘルスバー ウィジェットのサイズを反映するようにサイズ ボックスの幅と高さを設定します。

3. Border を選択し、 Brush Color を幾分透明になるように Alpha を 0.5 にして Black に設定します。

   この例では、実際のヘルスバーを同じ場所に維持しながらドラッグの外観としてヘルスバーのシルエットがあります。

4. イベント グラフ で Event Construct から Cast to HealthBar ノードへ接続します。 Widget Reference をドラッグして Object ピンに接続します。

5. As Health Bar ピンから Get Desired Size ノードを追加します。Return Value ピンを Break Vector 2D ノードへ接続します。

   これでヘルスバーのサイズが決まり、Size Box を同じサイズに設定することができます。オーバーライドは手入力することもできますが、Health Bar のサイズを変更する場合はここで変更も変更しなければなりません。

6. 右クリックして Set Height Override ノードと Set Widget Override ノードを追加し、それぞれを Cast to HealthBar ノードへ接続します。 Widget Size ノードへドラッグします。

7. 次のピンを接続します。

   • Widget Size を両方の Target ピンへ

   • Break Vector 2D X を In Height Override へ

   • Break Vector 2D Y を In Width Override へ

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

5 - HUD ウィジェットをビューポートに追加する

最後に、 HUD Widget ブループリントを Character ブループリントのビューポートに追加し、マウス カーソルを有効にして、ドラッグしている場所がわかるようにします。

1. コンテンツ ブラウザ の Content/ThirdPersonBP/Blueprints で ThirdPersonCharacter ブループリントを開きます。

2. Event Begin Play ノードから引き出して Create Widget ノードを追加し、 Class を HUD に設定します。 Add to Viewport ノードを作成して SET Show Mouse Cursor に接続します。 Get Player Controller ノードを追加し、 Return Value を SET Target に接続します。
   

3. コンパイル と 保存 を行い、 [Play] ボタンをクリックしてドラッグ アンド ドロップ ウィジェットでプレイします。

最終結果

エディタでプレイする場合、左クリックして画面上のヘルスバーをドラッグして、新しい位置にドロップします。

これは、ドラッグ アンド ドロップのプロセスを開始するために必要な要素の一例にすぎません。プレイヤーがセーフゾーンの外側にウィジェットをドラッグしないように、または他のウィジェットの上に重ならないようにさらにチェックが必要になることがあります。