project2 개발일지 - 2 [Lobby UI]

Lobby UI 목표

팀의 기획자겸 모델러가 제시한 이미지를 바탕으로 작업 예정이다.

뒷배경은 인게임 마트 맵을 기반으로 카메라를 세팅할 예정이다.
따라서 우선은 로고와 버튼 완성을 우선으로 진행한다.

 

1. Canvas Scaler

참고한 유니티 공식문서
https://docs.unity3d.com/kr/530/Manual/script-CanvasScaler.html

캔버스 스케일러 - Unity 매뉴얼

 

게임의 해상도는 기본적으로 1920x1080을 기준으로 한다.

해상도를 변경하더라도 ui크기 비율을 일정하게 맞추기 위해

기본적으로 Canvas에 붙어 있는 canvas scaler를 사용했다.

프로퍼티:기능:

UI Scale Mode	캔버스에서 UI 요소가 스케일되는 방법을 결정합니다.
Constant Pixel Size	UI 요소가 화면 크기에 관계없이 동일한 픽셀 크기로 유지됩니다.
Scale With Screen Size	화면이 커질수록 UI 요소도 커집니다.
Constant Physical Size	화면 크기와 해상도에 관계없이 UI 요소가 동일한 물리적인 크기로 유지됩니다.

기획서에 따르면 화면의 크기에 따라 비율을 유지하기 위해 Scale With Screen Size 로 설정했다.

Reference Resolution

UI 레이아웃에 적합한 해상도입니다. 화면 해상도가 크면 UI가 더 크게 스케일되고 작으면 UI가 더 작게 스케일됩니다.

 

기본적인 화면 해상도로 1920 1080을 설정했다.

 

---

2.Vertical Layout

https://docs.unity3d.com/kr/2023.2/Manual/script-VerticalLayoutGroup.html

수직 레이아웃 그룹 - Unity 매뉴얼

프로퍼티:기능:

Padding	레이아웃 그룹 에지의 패딩입니다.
Spacing	레이아웃 요소 간의 간격입니다.
Child Alignment	사용 가능한 공간을 모두 채우지 않을 경우 자식 레이아웃 요소에 사용할 얼라인먼트입니다.
Control Child Size	레이아웃 그룹이 자식 레이아웃 요소의 너비와 높이를 제어할지 여부를 결정합니다.
Use Child Scale	요소의 크기를 지정하거나 요소를 배치할 때 레이아웃 그룹이 해당 자식 레이아웃 요소의 스케일을 고려할지 여부를 결정합니다. Width 및 Height는 각 자식 레이아웃 요소의 Rect Transform 컴포넌트에 있는 Scale > X 및 Scale > Y 값에 해당합니다.
Child Force Expand	추가로 사용할 수 있는 공간을 채우기 위해 자식 레이아웃 요소를 강제로 확장할지 여부를 결정합니다.

 

버튼을 모아줄 panel을 만들고 위아래로 버튼이 쌓이도록 vertical layout을 추가해준다.

필요에 맞게 수치를 조정하고 옵션을 선택해준다.

3.Text Mesh pro

기획자가 넘겨준 폰트를 이용해 한글을 사용하니 폰트가 깨지는 현상이 발생했다.
이에 대한 문제는 다음 블로그를 참고해 해결했다.
https://blockdmask.tistory.com/590

[유니티] 텍스트 메시 프로 한글이 네모로 나올때 (Text Mesh Pro 한글 세팅)

---

마무리

우선 기본적인 틀은 완성했다. 

다음으로는 버튼을 클릭했을때, 마우스를 올려뒀을때 등등 상황에 맞게 스프라이트를 스왑하고,

기능을 연결할 예정이다.