[Unreal_블루프린트]#24_Skill UI

 

[Unreal_블루프린트]#24_Skill UI

Unreal 블루프린트 개발 중 "UI" 구현에 대해 알아보겠습니다.

"블루 프린트" 활용에 대한 내용입니다.

 

---

 

Slot 

1. Widget 블루프린트 생성

WB_Slot 생성 화면

 

2. 팔레트 구성

WB_Slot의 계층 구조

1. Desired On Screen

오른쪽 상단의 Full Screen을 Desired On Screen으로 변경

2. Size Box 추가

3. Border 추가

슬롯과 콘텐츠 모두 정렬 상태를 가로 + 세로 채우기 정렬로 설정합니다. 더불어, Padding 값은 10으로 설정합니다.

4. Overlay 추가

위젯을 서로 쌓을 수 있도록 해 주고, 각 레이어의 콘텐츠에 간단한 플로우 레이아웃을 사용할 수 있게 해 줍니다.
이 또한, 슬롯의 Padding 값을 10으로, 정렬 상태를 가로 + 세로 모두 채우기 정렬해줍니다.

5. Image 추가 x 2

각각 Background 이미지와 Skill Icon 이미지를 Brush에 설정합니다. 정렬 상태 또한 가로 + 세로 채우기 정렬로 설정합니다.

6. Selected(Boolean) 변수 생성

BP_Slot의 그래프 화면

7. 변수 인지 설정 체크

WB_Slot의 변수 인지 설정 체크

변수 인지 설정을 체크하면, 해당 컴포넌트를 "변수"로 인지합니다.

 

Slots (Slot 관리 위젯)

1. WB_Slots 생성

WB_Slots

1. Size Box 추가

2. Horizontal Box 추가

정렬 상태를 가로 오른쪽 정렬 + 세로 위 정렬로 설정합니다.

4. Slot x 4개

앞서 생성한 WB_Slot을 총 4개 가져옵니다.

 

2. Slot 브러시 이미지 설정

WB_Slots 그래프 내부 Constructed 이벤트

1. Set Bruch From Texture

Texture를 통해 각 Slot의 브러쉬 이미지를 설정합니다.

 

3. On Select 커스텀 이벤트 구현

WB_Slots 그래프 내부 On Select 커스텀 이벤트 구현

1. Index 입력 값

입력으로 받은 Index 값을 통해 Slots(WB_Slot 타입을 담고 있는 배열)에서 특정 항목에 접근합니다.

2. WB_Slot::Selected 변수 설정 + Set Brush Color

Index 입력 값을 통해 접근한 Slot 항목의 Selected 변수를 True로 설정하고, Brush Color를 변경합니다.

 

BP_Player

1. Add To Viewport

BP_Player의 BeignPlay 노드 그룹의 Add To Viewport 노드 그룹

1. Add To Viewport

게임의 뷰포트에 추가하고 화면에 나타냅니다.

2. Set Visibility

Combat Type이 "Wizard"일 때만 나타내도록, 시작 시점에 Hidden 상태로 설정합니다.

 

2. BP_Player의 Wizard Event 추가 구현

BP_Player의 Wizard Event 그룹 내부 Start Wizard Mode + End Wizard Mode

Start Wizard Mode가 호출됨과 동시에 "Slots"의 Visibility를 켜줍니다. 반대로 End Wizard Mode가 호출되면 Hidden 상태로 변경해야겠죠!

 

3. BP_Player의 Selected Wizard Event 추가 구현

BP_Player의 Selected Wizard Skill

1. WB_Slots::OnSelect 커스텀 이벤트 호출

Wizard 스킬 중 선택된 스킬들을 처리하는 Selected Wizard Event 그룹 내부에서 선택된 Skill(BP_WizardSkill)의 Index 값을 넘겨주어 특정 Skill의 Widget 처리를 구현합니다.

 

결과 화면

Game 플레이 화면