[MSW] 모험가 키우기 - 1 (프로토타입을 위한 기본 UI 틀)

가장 먼저 전투 플레이 화면을 구성한다.

 

SpawnLocation으로 캐릭터 시작 위치를 고정시키고,

DefaultPlayer - CameraComponent의 ConfineCamera 옵션을 켜서

전형적인 방치형 게임의 카메라 구도를 연출시켰다.

 

이제 내가 구상한 UI를 게임에 넣어볼 차례다.

 

 

빠르게 프로토타입을 만들기 위해 기본 UI 세트를 최대한 활용하였다.

이 UI들은 기본적으로 알파값(투명도)이 설정되어있어서 SpriteGUIComponent의 Color 옵션에서

투명도를 전부 빼주었다.

 

MSW의 최고 장점이라 생각하는 Resource Storage에서 원하는 스프라이트의 RUID를 복사해

간단하게 UI를 구성하였다.

 

그리고 hp바 같은 슬라이더 효과를 연출하기 위해

SpriteGUIComponent의 Type을 Filled로 설정하여 (유니티와 비슷하게) 시도해보았지만

생각대로 되지가 않았는데, UI preset List 에서 hp바 샘플을 살펴보니 SpriteGUIComponent가 아니라

Slider Component를 사용하고 있었다.

 

hp바에 적용된 SliderComponent를 샘플 삼아 UI Preset List의 상태창에 적용시켰다.

상태창을 만지면서 한 가지 배운 것은

SpriteGUIRendererComponent의 Color 옵션은 스프라이트의 기본 색상에

추가로 색상 값을 덧입힌 것이란 거다.

 

예를 들어 위의 hp바에서 bar 엔티티의 스프라이트가 어떻게 되있냐면,

이런 스프라이트인데 이 스프라이트의 중앙 회색부분은 항상 저 회색이 나오게끔 색상 값, 알파 값이

설정되어 있다.(스프라이트는 고유의 알파값, 색상값을 가지고 있다.)

비유를 들자면 이 스프라이트에게 Color 옵션으로 물감을 뿌리는데, 스프라이트는 물감이 방수인

픽셀위치가 있어 그곳에는 상대적으로 덜 묻고, 또는 스펀지처럼 빨아들이는 부위도 있다.

그래서 bar 엔티티의 Color 옵션을 파란색으로 설정했음에도 스펀지같은 부위인 외곽선의 색만 

변하고 중앙의 회색 부분은 변하지 않은 것이다.

 

그래서 처음엔 회색 값을 넣지도 않았는데 어째서 상태창 백그라운드색이 회색이지... 했는데

1. 백그라운드 엔티티의 스프라이트 색 = 하얀색

 

2. 바 엔티티의 스프라이트 색 = 스프라이트의 기본 색상, 알파 값 + Color 옵션의 값

 

1번 + 2번의 결과로 회색이 나온 것이었다.

 

 

참고로 ui 엔티티가 그려지는 순서는 위에서부터 아래로 내림차순으로 그려지므로

맨 위의 background가 그려지고 그 위에 bar가 덧그려진다.

 

 

그리고 비슷한 과정을 반복해서 최종적인 UI의 기본 틀을 완성했다.

우측 상단의 MSW 기본 UI는 없앨 수가 없다길래 최대한 자연스럽게 UI에 포함시켰다.

I

개별적인 UI를 최대한 상위 계층의 범주에 속하게 해서 끄고 킬 때 간편하도록 했다.

 

하단에 보이는 스킬 버튼들은 상위의 엔티티가 ScrollLayoutGroup 컴포넌트를 가지고 있어

수가 늘어나는 대로 자동으로 정렬돼서 보여진다.