22-1. 스펠 메뉴 UI - (1) 스펠 글로브 버튼, 액티브 & 패시브 스펠 트리

0. 개요

스펠 포인트를 사용하여 스펠 트리에 따라 어빌리티를 해금하는 스펠 메뉴를 제작한다.

 

 

1. 스펠 글로브 버튼

클릭하여 특정 스펠(게임플레이 어빌리티)를 습득할 수 있게 하기 위해 버튼을 생성할 것이다.

 

(1) 오버레이의 Value 글로브 복제 및 수정

오버레이에서 사용되었던 스펠 글로브의 기능을 일부 제거한 Value 글로브 위젯을 복제하여 수정해서 사용한다.

Value 글로브에서 플레이어의 레벨을 기다리는 이벤트 노드들을 제거한다.

 

 

(2) 잠금 이미지 추가

스펠을 해금하지 못했을 때 기본적으로 잠금 이미지를 표시한다.

 

 

(3) 링을 버튼으로 만들기

스펠 글로브의 테두리인 링을 이미지가 아닌 버튼으로 생성할 것이다.

 

 

(4) 선택 애니메이션

하얀 링이 아주 짧은 시간동안 줄어드는 애니메이션이다.

 

 

2. 액티브 스펠 트리

스펠 트리 메뉴에서 9개의 게임플레이 어빌리티를 계층에 따라 배치하고 하위 어빌리티를 해금하면 상위 어빌리티를 해금하는 식의 액티브 스펠 트리를 만든다.

 

(1) 사이즈 박스 크기 오버라이드

사이즈 박스를 하나 배치하고 변수를 사용해 너비와 높이를 변경하게 한다.

 

 

(2) 랩 박스(Wrap Box)

랩 박스는 위젯의 여러 요소를 래핑하는 요소이다.

랩 박스의 오리엔테이션에 따라 요소들을 가로 혹은 세로로 쌓을 수 있다.

메인 랩 박스 안에 각각의 랩 박스를 3개 두고, 하나의 랩 박스에 계층 구조가 될 3개의 버튼을 배치한다.

오리엔테이션을 Vertical로 설정해 세로로 배치되게 한다.

 

 

(3) 계층 구조 간 연결 표현

하나의 랩 박스는 하나의 계층 구조를 가진다.

이를 시각적으로 표현하기 위해 선 이미지를 이용한다.

 

 

(4) 스페이서(Spacer) 배치

위젯의 각 요소 사이의 공간을 차지하는 스페이서를 배치한다.

계층 구조 사이에 스페이서를 위치하게 하려면, 스페이서가 랩 박스의 하단보다 길게 되어서 오른쪽으로 넘어가게 해야 한다.

수직 크기를 늘려서 오른쪽으로 넘어가게 만든다.

 

 

 

3. 패시브 스펠 트리

위의 액티브 스펠 트리를 복사하여 수정한다.

 

(1) 수정

기본 높이를 낮추고 루트를 제외한 랩 박스를 모두 제거한다.

 

 

(2) 버튼 배치 및 사이즈 조절

버튼을 3개 배치하고 크기를 조절한다.

 

크기를 조절했는데도 수직 크기가 줄어들지 않으면 세로 정렬을 중앙으로 선택한다.

 

 

(3) 스페이서 배치