[UE4] Drag & Drop

RPG 장르에는 빠지지 않는 아이템 인벤토리.

인벤토리에 사용되는 Drag, Drop을 사용하는 방법에 대해 알아보았다.

기본 HUD와 Player Controller는 이전의 포스트와 동일하다.

Drag를 하기 위해서는 Unreal에서 제공해주는 'DragDropOperation'을 사용해야한다.

Drag 하는 Widget과 그 Widget의 정보를 관리하는 'DragDropOperation'을 상속받은 블루프린트가 필요하다.

DragDropOperation을 상속받는 블루프린트를 생성한다.

그리고 User Widget과 Vector 2D Type의 변수 2개를 선언해야 한다.

User Widget Type의 변수는 드래그 되는 Widget을 저장할 변수이고, 

Vector 2D Type의 변수는 저장된 Drag된 Widget을 중심으로 클릭된 Mouse Position을 저장할 변수이다.

변수를 생성 하였으면, 두 변수 모두 Details 탭에서 Editable과 Expose on Spawn을 체크해주어야 한다.

체크를 해주었으면 Compile & Save를 한다.

이제 Drag되는 Widget을 블루프린트로 생성한다.

Drag되는 Widget도 Scroll에 추가되는 Widget과 마찬가지로 Canvas Panel을 삭제해준다.

그리고 드래그되는 Widget을 목적에 맞게 생성하면 된다.

나는 Size Box -> Border -> Image를 생성하여 설명하겠다.

먼저 Editor 우측 상단의 'Fill Screen'을 'Desired on Screen'으로 변경해주고,

Size Box의 Width & Height Override를 체크해준다.

그리고 Width, Height의 크기를 지정해준다. (나는 100, 100)

그리고 Border의 값을 대충 RGBA -> 0.2, 0.2, 0.2, 20.0 으로 값을 지정해주고 Graph로 넘어가겠다.

Graph로 넘어와서 My Blueprint 탭의 Override를 선택하여 On Mouse Button Down, On Drag Detected를 추가한다.

그리고 감지 된 마우스의 화면 위치를 저장할 Vector 2D Type의 변수를 선언해준다.

On Mouse Button Down 함수로 이동하여 Drag Detected 함수를 불러야한다.

먼저 Mouse의 위치를 현재의 Widget 기준으로 좌표를 변경해준 후 생성한 변수에 저장한다.

그리고 마우스의 좌클릭을 Drag의 시작으로 삼아 Detected 함수에 던져주는 Detect Drag if Pressed 노드를 연결한다.

위와 같은 노드가 되었으면 On Drag Detected 함수로 이동한다.

Create Drag Drop Operation 노드를 생성하여 이전에 변수만 선언했던 Drag Widget을 생성한다.

그리고 On Mouse Button Down 함수에서 저장한 변수를 앞서 Drag Widget의 Vector 2D 변수로 저장한다.

Drag Widget에서 User Widget 값과 Default Drag Visual 값으로 Self를 저장한다.

Default Drag Visual은 드래그 될때 마우스를 따라서 함께 움직일 Widget을 말한다.

선택한 Widget이 움직이는 것이 자연스럽기에 Self의 값을 저장한다.

Pivot는 Mouse Down으로 변경하여 마우스가 클릭된 위치를 설정해준다.

그리고 Remove from Parent 노드를 생성하여 현재의 View로부터 분리시킨다.

그리고 Create Drag Drop Operation 노드로부터 생성된 값을 Return Node로 연결한다.

그러면 위와 같은 그래프가 그려질 것이다.

Compile & Save를 한 후, 화면에 비출 Main HUD로 이동하여 Drag할 Widget을 추가한다.

Widget을 추가한 후, Graph로 이동하여 On Drop 함수를 Override 한다.

Drag가 끝나면 마우스 좌클릭으로 인하여 View로부터 분리된 Widget을 마우스 위치로 View로 다시 생성해야한다.

On Drop 함수로 전달된 Operation으로 Drag된 정보를 저장한 Widget으로 Cast를 해준다.

그리고 Cast된 Drag Widget 으로부터 Drag된 Widget 변수를 가져와 Add to View Port 노드의 Target으로 연결한다.

다음으로 생성된 Widget의 위치를 지정하기 위해 On Mouse Button Down에서 했던 마우스의 위치를 계산한다.

반환된 값을 Drag Widget에 미리 저장한 Vector 2D 값을 빼준다.

빼준 값을 Set Position in Viewport의 Position으로 지정하고, View로 추가한 Target을 연결해준다.

Set Position in Viewport의 Remove DPIScale은 체크를 해제한 후, Return Node의 Return Value 값은 체크해준다.

그리고 Designer로 돌아와서, Hierarchy의 최상위 root를 선택하여, Behavior의 값을 Visible로 바꾸어주어야 한다.

Visible로 바꾸어주는 이유는 Main Widget에 속한 Drag Widget의 Drag가 감지한 것을 Drop 할 때에,

부모인 Main Widget의 On Drop으로 연결하기 위함이다.

이제 Compile & Save를 한 후, Main HUD로 설정해준 후 실행하면 된다.

Widget을 자유롭게 Drag & Drop이 가능한 것을 확인 할 수 있다.

이제 이를 응용하여 인벤토리와 같은 인터페이스를 만들면 된다.