ドラッグ アンド ドロップの UI を作成する

UMG を使って、ドラッグ、ドロップ可能な UI ウィジェットを作成する方法を説明します。

Windows
MacOS
Linux

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

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

このチュートリアルで作成するヘルス バーは機能せず、デモ目的に限ったものです。HUD の作成方法については、「Displaying Health, Energy & Ammo 」をご参照ください。

1 - プロジェク設定

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

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

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

    DragDrop1.png

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

    DragDrop2.png

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

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

    DragDrop3a1.png

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

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

    DragDrop3b1.png

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

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

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

    UpdatedDragDrop2.1.png

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

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

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

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

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

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

    DragDrop4a.png

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

    DragDrop4b.png

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

プレイヤーが Left Mouse Button をドラッグしているかを判断するための天順です。

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

    DragDrop5.1.png

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

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

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

    DragDrop6.png

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

  4. Absolute to Local ピンの Return Value右クリック し、Drag Offset という変数に Promote (昇格) します。変数に 「Name」 と名前を付けます

    DragDrop7.png

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

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

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

    • Mouse EventPointer Event に接続します。

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

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

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

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

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

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

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

    UpdatedDragDrop1.png

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

    UpdatedDragDrop3.png

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

  2. 右クリックし DragAndDropOperation ノードを作成します。[Class][Widget Drag] に設定し、[Pivot][Mouse Down] に設定します。

    UpdatedDragDrop4.png

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

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

    • Dragged Widget Set から**Exec 行を Return Node** へ

    • SelfWidget Reference

    • Dragged WidgetDefault Drag Visual

    • Drag OffsetDrag Offset

    UpdatedDragDrop5.png

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

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

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

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

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

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

    DragDrop13.png

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

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

    DragDrop14.png

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

    DragDrop15.png

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

    DragDrop16.png

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

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

    DragDrop17.png

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

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

    UpdateDragDrop1.1.png

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

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

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

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

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

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

    UpdateDragDrop2.1.png

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

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

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

4 - Drag Widget のスクリプト化

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

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

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

    UpdateDragDrop3.png

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

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

    UpdateDragDrop4.1.png

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

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

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

    UpdateDragDrop5.png

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

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

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

    • Widget Size を両方の Target ピンへ

    • Break Vector 2D XIn Height Override

    • Break Vector 2D YIn Width Override

    UpdateDragDrop6.png

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

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

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

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

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

    DragDrop19.png

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

最終結果

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

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

Select Skin
Light
Dark

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信