ドラッグアンドドロップの UI を作成する | Unreal Engine 4.27 ドキュメンテーション

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

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

このチュートリアルでは、ヘルスバーは作成しません。これはデモ目的用になります。HUD の作成方法については、UMG UI デザイナのクイックスタートガイドをご参照ください。

1 - プロジェク設定

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

この操作ガイドでは、ブループリントのサードパーソン テンプレートプロジェクトを使用しています。

コンテンツブラウザ で、DragWidget、HealthBar、および HUD という 3 つの ウィジェットブループリント を作成します。
コンテンツブラウザ内を 右クリック して DragDropOperation クラスの新規 Blueprint クラス を作成し、「WidgetDrag」と名前を付けます。

この特殊な Blueprint クラスを使って、ドラッグアンドドロップ操作の一部として情報を渡すことができます。
WidgetDrag ブループリントを開き、WidgetReference という User Widget を作成します。Instance Editable と Expose on Spawn のチェックボックスにチェックを入れます。

これは、画面上でドラッグする UMG ウィジェットを保持するために使います。
DragOffset という Vector 2D 変数を作成します。Instance Editable と Expose on Spawn のチェックボックスにチェックを入れます。

これにより、ウィジェットのドラッグアンドドロップ開始点からの位置をオフセットします。
WidgetDrag ブループリントを コンパイル して保存します。
WidgetDrag ブループリントを開き、WidgetReference という User Widget を作成します。Instance Editable と Expose on Spawn のチェックボックスにチェックを入れます。
DragWidget ブループリントを コンパイル して保存します。

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

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

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

HealthBar Widget ブループリントを開いて、[Hierarchy] ウィンドウで キャンバスパネル を削除します。
Size Box と Progress Bar をボックスに追加します。[Size Box] の [Details (詳細)] パネルで、[Width Override (幅をオーバーライド)] と [Height Override (高さをオーバーライド)] を 500x50 に変更します。

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

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

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

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

独自のカスタムスクリプトを呼び出すようにオーバーライドできるいくつかの関数があります。ここでは、マウスボタンが押されたとき、およびウィジェットのドラッグが検知される場合にいくつかのチェックを行います。
[OnMouseButtonDown] タブを選択します。OnMouseButtonDown ノード内で、My Geometry ピンを引き出して Absolute to Local ノードを追加します。
Mouse Event ピンを引き出して Get Screen Space Position ノードを追加し、Return Value を Absolute Coordinate に接続します。

マウスボタンがボタンのキー押下を登録したスクリーンスペースの位置を取得して、 Health Bar ウィジェットの絶対座標をローカル空間に変換します。これにより位置が変数で格納されるため、ウィジェット上でプレイヤーが実際にクリックし落ちる位置を決定することができます。
Absolute to Local ピンの Return Value を 右クリック し、Promote to Variable を選択します。変数に「Drag Offset」と名前を付けます

On Mouse Button Down ノードでエラーが発生しても大丈夫です。関数が完了するとエラーはなくなります。
グラフ内を右クリックして、 Detect Drag if Pressed ノードを追加します。Drag Key を Left Mouse Button に設定します。
残りのピンの接続も完了させます。
- Mouse Event を Pointer Event に接続します。
- Return Value ピンを Detect Drag if Pressed から Return Node へ接続します。
- 実行ピンを 4 つのノードへ接続します。
プレイヤーが Left Mouse Button をドラッグして On Drag Detected スクリプトが開始するかを決定します。
HealthBar ブループリントを コンパイル して保存します。

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

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

[OnDragDetected] タブを選択します。OnDragDetected ノードから、Drag Widget ノードを右クリックして追加します。Class を Drag Widget に設定します。
Widget Reference ピンから Self ノードに接続します。Return Value を Dragged Widget という変数へ Promote (昇格) させてピンを接続します。

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

Pivot は、ドラッグ操作を行っているポインタと相対的にドラッグされる場合、Drag Widget Visual が表示される場所を決定します。
以下のノードを DragAndDropOperation ノードピンに接続します。
- Dragged Widget Set から実行行を Return Node へ
- Self を Widget Reference へ
- Dragged Widget を Default Drag Visual へ
- Drag Offset を Drag Offset へ
上の図では、参照する Widget ブループリントを示し、ドラッグのビジュアルがどのようなものになるかを示し、ドラッグを開始するオフセットを提供しました。ノード上にはデフォルトでオフセットピンがあります。しかしながら、Mouse Button Down が押された時のドラッグの開始位置を決定するために独自の計算を行います。
HealthBar ブループリントを コンパイル して保存します。

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

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

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

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

Health Bar ウィジェット内で、ドラッグ検知を行っていますが、マウスの左ボタン放したときに、それを HUD Widget ブループリントにドロップするようにスクリプト化します。HUD がヒット検知を受け取るためには、その [Visibility] を [Visible] に設定します。
[Palette] ウィンドウから、Health Bar ウィジェットをキャンバスに追加します。
イベントグラフ グラフで、OnDrop 関数のオーバーライドを [My Blueprint] パネルから追加します。
OnDrop ノードから、Operation を引き出して Cast to WidgetDrag ノードに追加します。次に Get Widget Reference を追加して As Widget Drag ピンを Widget Reference と Drag Offset ノードに追加します。

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

これは、マウスの左ボタンを放して、ウィジェットをドロップする場所である 2D 空間における位置を示します。ここから、DragOffset を差し引いて、ドロップするときにどこにウィジェットを配置するかを決定します。
Vector2D - Vector 2D ノードを追加して Absolute to Local の Return Value から DragOffset を差し引きます。
右クリックして、Remove from Parent ノード、Add to Viewport ノード、Set Position in Viewport ノードを追加します。実行ピンを上の順番で 3 つすべてのモードに接続し、Set Position in Viewport ノードを Return Node に接続します。
接続と調節を次のように変更します。
- 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 ウィジェットを除去します。
HUD ウィジェットブループリントを コンパイル して保存します。

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

4 - Drag Widget のスクリプト化

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

DragWidget の Widget ブループリントを開き、Canvas Panel を子の Border を持つ Size Box と置き換えます。
[SizeBox] の名前を「WidgetSize」に変更し、[isVariable] を true に設定し、[Width Override] と [Height Override] の両方にチェックを入れます。

ヘルスバーウィジェットのサイズを反映するようにサイズボックスの幅と高さを設定します。
Border を選択し、Brush Color を幾分透明になるように Alpha を 0.5 にして Black に設定します。

この例では、実際のヘルスバーを同じ場所に維持しながらドラッグの外観としてヘルスバーのシルエットがあります。
イベントグラフ で Event Construct から Cast to HealthBar ノードへ接続します。Widget Reference をドラッグして Object ピンに接続します。
As Health Bar ピンから Get Desired Size ノードを追加します。Return Value ピンを Break Vector 2D ノードへ接続します。

これでヘルスバーのサイズが決まり、Size Box を同じサイズに設定することができます。オーバーライドは手入力することもできますが、Health Bar のサイズを変更する場合はここで変更も変更しなければなりません。
右クリックして Set Height Override ノードと Set Widget Override ノードを追加し、それぞれを Cast to HealthBar ノードへ接続します。Widget Size ノードへドラッグします。
次のピンを接続します。
- Widget Size を両方の Target ピンへ
- Break Vector 2D X を In Height Override へ
- Break Vector 2D Y を In Width Override へ
DragWidget ブループリントを コンパイル して保存します。

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

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

コンテンツブラウザ の Content/ThirdPersonBP/Blueprints で ThirdPersonCharacter ブループリントを開きます。
Event Begin Play ノードから引き出して Create Widget ノードを追加し、Class を HUD に設定します。 Add to Viewport ノードを作成して SET Show Mouse Cursor に接続します。Get Player Controller ノードを追加し、Return Value を SET Target に接続します。
コンパイル と保存を行い、[Play] ボタンをクリックしてドラッグアンドドロップウィジェットでプレイします。

最終結果

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

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