본문 바로가기
언리얼_엔진_게임개발_공부/프로젝트

[슈터게임] 1. 게임 UI 레퍼런스 분석 & WBP 레이아웃

by jaboy 2025. 2. 18.

이번 주부터 팀 단위로 1인칭/3인칭 슈터 게임을 만드는 프로젝트가 시작되었다.

나는 UI 를 맡기로 했기에 우선 다른 게임의 UI 레퍼런스를 찾고 분석하는 것부터 시작하였다.

(아래 구글 슬라이드에 정리 중이다)

https://docs.google.com/presentation/d/1DiTqs2Fio4uvlI678c3KocjWxqwHKY6ms593Gh7SoaU/edit#slide=id.g3371852ed3f_0_30

 

UI 레퍼런스 및 레이아웃 디자인

시작 화면

docs.google.com

 

시작 화면

이번 프로젝트의 범위가 그렇게 크지 않기 때문에 단순한 시작 화면이 무엇이었는지 플레이해 본 게임들을 떠올려 보았고, 드래곤즈 도그마 2 가 생각 났다.

 

 

보면 게임 타이틀의 가장 밑 부분 (R의 삐침?) 이 화면 중심 수평선에 닿을랑 말랑 한다.

Image 위젯을 추가한 후 Alignment 에서 y 값을 1.0 으로 주고 Position Y 를 540 으로 설정하면 될 것이다.

(1920 * 1080 기준으로 우선 제작 중이다.)

 

HUD

사이버펑크의 HUD 가 매우 유려하다고 평소에 생각했기에 아래 웹사이트에서 다양한 인게임 UI 중 HUD 를 위주로 살펴보았다.

https://www.gameuidatabase.com/gameData.php?id=439

 

Game UI Database

The ultimate interface reference Tool for game designers. Explore over 1,300 games, and 55,000 UI screenshots and videos, and filter by screen category, animation, colour, material, layout, texture, shapes, patterns, genre and more!

www.gameuidatabase.com

(누가 만들었는지 몰라도 정말 상 줘야돼...)

 

이 정도로 간단하게 요약해볼 수 있었다.

 

다른 게임 UI 를 살펴보았을 때 캐릭터 상태 (체력 바 등) 가 좌측 하단에 표시되는 경우도 있었다.

그러나 나는 위 화면처럼

좌측 상단 현재체력/최대체력 부분과 우측 하단 장탄 / 소지 탄창 부분이 뭔가 그럴듯한 대칭을 이루는 것이 마음에 들어서 이런 레이아웃을 아래와 같이 그대로 가져가려고 한다.

 

 

추가로 팀원분들 (특히 아이템을 담당하시는 분)과 협의가 필요한 부분은 바로 아이템 상호작용 버튼에 대한 안내메세지.

이것을 플레이어 HUD 스크린에 표시할지, 아니면 월드 내 아이템 위치에 표시할지 고민해보았는데,

나는 플레이어 스크린 기준 일정한 위치에 표시되는 것이 더 직관적이고 관습적으로 알아보기 쉽지 않나 생각한다.

그러나 아이템 위치에 표시하면 아이템에 시선을 집중시킬 수 있다는 이점도 있을 것이다만,,,,

HUD 에 구현하는 게 더 간편하다는 점도 있다 ㅋ

 

일단 아래와 같이 위치 정도 잡아두었다.

폰트 크기의 비율은 작은 숫자 2 : 큰 숫자 3 정도로 정했다. 

조금 큰가.. 싶지만... 난 눈이 침침해... 뭐 일단 이렇게 해봐야겠다!

나중에 UI 스케일 조정하는 기능도 구현해보고 싶다!

게임 오버

그 유명한 GTA 의 wasted 화면 ~ 이런 식으로 하나 넣고 메뉴로 진입하는 것도 괜찮을 수도 있겠다는 생각이 든다.

 

 

메뉴는 마찬가지로 간단하게 이런 느낌으로.

 

내일은 WBP 레이아웃을 최대한 빨리 마무리하고, 텍스쳐와 머티리얼 등을 만들어야겠다는 느낌?

그리고 시간이 나면 퀵슬롯 등에 표시할 아이콘 또는 에셋 썸네일을 만들어야겠다.

(그러면 에셋을 찾아야하네...ㅋ)

(코딩은 언제 하니...)