[3D 액션게임] 14. UI 배치하기

🔔 유튜브 크리에이터 골든메탈님의 유니티강의 3D 쿼터뷰 액션게임 [BE5] 를 보고 공부하여 작성한 게시글입니다! 🔔

🧷 1. 캔버스 추가

• UI -> Canvas를 추가시켜줍니다.

 

• UI는 2D로 이루어져 있기에 2D로 작업해줍시다.

 

• 꼭  Ui Scale Mode를 Screen Size에 맞게 설정해줍시다.

 

• Pixel Perfect도 체크해줍시다.

 

• 1920 , 1080으로 Resolution 값을 설정하였습니다.

 

🧷 2. 메뉴 UI

- Menu Panel

• 메뉴의 기본이 되는 UI로 살짝 어두워지게 검정에 가까운 색을 주었습니다.

 

- Menu Panel/ Title Image

• UI - Image 를 추가한 뒤, Set Native Size를 클릭하여 줍니다. 이후, Y값을 올려주었습니다.

 

- Menu Panel/ Max Score Image, Max Score Text

쿠키런 Bold 폰트: https://www.cookierunfont.com/

 

Max Score Image

• Image를 만든 후 - Score Icon를 Source Image로 넣습니다.
• 이후 Set Native Size를 누를 후, 위치와 사이즈를 조정해줍니다.

 

Max Score Text

• Text 를 만든 후 - 다운받은 쿠키런 Bold 폰트를 집어넣습니다. (Assets 폴더안에 폰트가 저장되어있어야합니다.
• 여기서 글씨가 잘보이는 꿀팁은, 폰트 Size를 2배 늘리고 Scale 을 줄여주면 선명하게 사용할 수 있습니다.
• Image와 같이 위치를 정해주고, Alignment도 중간으로 두었습니다.
• 글씨 크기가 텍스트 사이즈보다 넘칠경우 안보이는데 이땐, Overflow를 Truncate에서 Overflow로 바꿔주면 됩니다.

 

- Menu Panel/ Start Button

• Button을 만든 후, 에셋-Sprites에서 Panel A라는 이미지를 넣어줍니다.
• Image Type을 Simple로 바꾼 후, Set Native Size로 사이즈를 원래대로 바꾼 다음에, Type을 Sliced로 바꿔줍니다.
• 버튼 위치를 조정 해줍니다.

또한 아래 UI로 Game Start라 쓸 Text를 만들어줍니다.

• Text Color 색
• Alignment 및 선명히 보이는 스케일링을 해주면 됩니다.

 

🧷 3. 인게임 UI

 

인게임에서 값을 하나하나 설명하기 보단 중요한 점 위주로 사용하는 스킬을 적어보겠습니다.

 

-  각 Group들 위치 조정

• 그룹별로 속에 있는 UI 컴포넌트 까지 모두 Anchor Presets으로 맞춰줘야합니다.

 

• 아무것도 안누른 상태에서 움직이면, 위치 기준점이 바뀝니다.

 

• Alt 키를 누르면, 기준점과 동시에 컴포넌트의 위치도 같이 바뀝니다.

 

• Shift를 누르게 된다면, 컴포넌트의 위치에 맞게 위치 기준점이 바뀝니다.

 

 

따라서 Alt, Shift 눌다 눌러, 컴포넌트와 기준점을 각 위치마다 맞게 설정해준뒤, 위치를 한꺼번에 변경해주면 좋습니다.

 

 

-  각 UI 컴포넌트 복사해서 사용하기

• 하나의 세트를 만들었으면 Ctlrl + D 키를 눌러 자연스레 넣은다음에 위치를 넣고, 소스만 넣어주면 됩니다.

 

---

-  인게임 UI인 Game Panel 설명

 

Score

• 점수를 나타내는 UI로, 왼쪽 상위를 기준을 잡고, Image Text를 넣습니다.

 

Status

• 아이템의 개수와 체력을 나타내는 UI로, 왼쪽 하위를 기준으로 잡고 이미지와 텍스트를 넣습니다.

 

Stage

• 게임 스테이지와, 흘러간 시간을 나타내는 UI로, 오른쪽 상위를 기준으로 잡고 이미지와 텍스트들을 넣습니다.

 

Enemy

• 남아있는 적들의 숫자를 나타내기 위한 UI로, 오른쪽 하위를 기준으로 잡고, 이미지와 텍스트들을 넣습니다.

 

Equip

• 사용자에게 장비의 단축키를 직관하게 만들어주는 UI로 이미지 2개가 한쌍으로 5개가 있습니다. 위치는 중앙 하위입니다.

Boss

• 보스 출현시, 보스의 상태를 나타낼 UI로, 이미지 3개를 넣습니다. 위치는 중앙 상위입니다.

• 여기서 Health 바는 오른쪽부터 줄어들기 위하여, 좌측에 기준점을 잡아줘야합니다.

 

UI를 만들면서 정말 게임제작에 가까워졌다는걸 느꼈고, 게임을 만들기위한 에셋 Source들을 골든메탈님께서 잘 가춰놔주셔서 아주 멋지게 UI를 만들었던 것 같습니다. 또한 UI에 대한 Source도 정말 필요하다는 걸 느끼고, 멋진 UI를 위해서는 간결함과, 적절한 위치배정이 필요하다고 느끼게되는 강의였습니다.

 

 

 

 

출처: 골든메탈님 유튜브

https://www.youtube.com/watch?v=N4PLRkupABM&list=PLO-mt5Iu5TeYkrBzWKuTCl6IUm_bA6BKy&index=14