Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Umg の ドラッグアンドドロップ

235 views

Published on

2ちゃんねるUE4初心者質問スレより

Published in: Software
  • Be the first to comment

  • Be the first to like this

Umg の ドラッグアンドドロップ

  1. 1. UMG の ドラッグアンドドロップ FirstPersonTemplateで作っていくよー
  2. 2. 下準備 1.DragDropOperationクラスのブループリントを作る いつもどおりブループリントを作っていきますが クラスはDragDropOperationを指定します 名前は「MyDragDrop」とでもしておきましょう
  3. 3. 下準備 続き 2つのWidgetBlueprintを作ります それぞれ「DraggableWidget」「HUD」と名前をつけます 今の段階でコンテンツブラウザーはこのようになっているはずです
  4. 4. DragDropOperationの編集 さっき作った「MyDragDrop」を開き変数を作成していきます 作る変数は2つ どちらの変数とも Editableと Expose on Spawn に✔を入れておきま しょう
  5. 5. DraggableWidgetの編集 (9ページまで続きます) 下準備で作った「DraggableWidget」を開きましょう このウィジェットをドラッグアンドドロップで動かしていきます まずはデザイナーを編集します 1.ヒエラルキーにもともとあるCanvasPanelを削除します 2.パレットからSizeBoxとImageを下図のように配置します
  6. 6. DraggableWidgetの編集 続き ヒエラルキーのSizeBoxを選択して詳細か らサイズを変更していきます サイズは適当に256×64にしましょう 右図の赤丸のところが今はFillScreenに なっていますがDesired on Screenに変更 しましょう すると右図のようになります
  7. 7. DraggableWidgetのGraphの編集 DraggableWidgetのGraphに移ります まずは関数をオーバーライドしていきます 赤丸で囲ったところをクリックして  OnMouseButtonDown  OnDragDetected の2つの関数を作ります
  8. 8. OnMouseButtonDownの編集 以下のように組みます DetectDragifPressedのDragKeyをLeftMouseButtonにするのを忘れないようにしま しょう これでドラッグしていることの検知ができます
  9. 9. OnDragDetectedの編集 ドラッグが検知できるようになったのでOnDragDetected関数をいじっていきましょう まずCreateDragDropOperationノードを作 成します Classに最初に作った「MyDragDrop」を指定 します PvotにはMouseDownを指定します 左下のSelfはGetReference to Selfです これでドラッグしたときにウィジェットがマウスに付いてきてくれるようになりました
  10. 10. HUDの編集(13ページまで続きます) まずさっき作ったDraggableWidgetを配置していきましょう パレットのユーザークリエイトからヒエラルキにそのままドラッグ アンドドロップしましょう 右図のようになっていればオーケーです ついでにヒエラルキーのHUDのVisiblityを詳細にてVisibleに変 更しておきましょう
  11. 11. HUDの編集 続き 右図のようになっていればオー ケーです 赤丸がFillScreenになっていること を確認してください
  12. 12. HUDのGraphの編集 さてここでも関数をオーバーライドしていきます 先ほどの手順と同様にOnDrop関数を作っていきます
  13. 13. 前のページの説明 1.Cast to My DragDropは一番最初に作ったMyDragDropブループリントの変数を呼 び出すためのものです 更に言うと変数DraggedWidgetには9ページにてDraggableWidgetが代入されていま す 2.GetScreenPositionとAbsolute to Localを図のように組むとスクリーンに対する相対 位置を取得できます 質問者さんのマウスの場所を 取得する方法はだいたい正し かった 3.Returnノードの✔を忘れずにつけましょう
  14. 14. 完成(?)
  15. 15. さっそく動かしてみよう 下図のようにFirstPersonCharacterブループリントで「I」キーを押した時にHUDウィ ジェットを呼び出せるようにしてプレイしてみよう
  16. 16. ドラッグアンドドロップできだ たろうか?
  17. 17. ドラッグアンドドロプの位置調整 さてドラッグアンドドロップできることはできるようになった しかしDraggableWidgetの端のほうを掴むとドロップ位置がずれてしまうのではないだろ うか 思い出して欲しい 最初に作ったMyDragDropでの変数ClickLocationをまだ一度も使ってない さて、修正していこう
  18. 18. DraggableWidgetの修正(20ページまで続きます DraggableWidgetのOnMouseButtonを開こう まずは一つ変数をつくります タイプはVector2D 名前は「Offset」にしましょう
  19. 19. DraggableWidgetの修正 下図のように組みます これはDraggableWidgetどの部分をクリックしたか変数「Offset」にSetするものです
  20. 20. DraggableWidgetの編集 続いてOnDragDetectedも修正していきましょう 修正箇所は一つだけ CreateMyDragDropのClickLocationにさっきつくった変数「Offset」をつなぎましょう
  21. 21. HUDの修正 OnDropを開き下図のように修正します ドロップした位置からクリックした位置を引くことによって 正しい位置にドロップ位置を割り出せるようになります
  22. 22. 今度こそ完成です プレイして試してみてね

×