[유니티] UI컴포넌트

개발

Qmais 2024. 10. 29. 01:17

게임에는 UI가 필수적입니다. 오늘은 유니티 UI에 대한 꿀팁을 조금 적어보도록 하겠습니다.

UI를 만들다 보면 인벤토리창, 스킬 UI 등 UI가 정렬되어 있는 형태로 많이 필요한 경우가 있습니다.

이러한 경우, 가로 방향은 동일하지만 가로 방향은 다른 경우와 그 반대의 경우가 있을 것입니다.

그때 UI이미지의 포지션을 일일이 같은 값만큼 더한 값(혹은 뺀값)을 적는 것은 불편합니다.

그럴 때 유니티의 Horizontal(Vertical) Layout Group 또는 Grid Layout Group을 사용할 수 있습니다.

Spacing은 오브젝트끼리의 최소 거리를 의미하고

아래의 Child Alignment는 자식끼리 정렬이 되는 기준점을 의미합니다. (사진에서는 Middle Center이니 중앙정렬이 기준이 된다는 것이죠).

아래의 Reverse Arrangement는 말 그대로 반대로 정렬을 합니다. 원래 위쪽의 오브젝트가 왼쪽으로 밀리는데 이게 반대가 된다는 것이죠.

아래의 것들은 거의 사용하지 않습니다.

예시는 Horizontal이었지만 Vertical도 사용방법은 같으니 생략하고

Grid Layout Group은 사용방법이 다르니 간단히 설명하겠습니다.

Cell Size는 자식으로 들어가는 UI의 사이즈가 저 사이즈로 들어간다는 의미입니다.

이 말은 즉 Grid Layout Group의 자식으로 들어간 UI의 사이즈는 별도로 사이즈를 조절할 수 없습니다.(물론 조절하는 방법이 있습니다. 조금 있다 설명합니다.)

Spacing은 UI끼리의 거리입니다. X로 몇만큼 Y로 몇만큼 떨어지게 할지 조절하는 것이죠.

제일 아래쪽의 Constraint를 펼쳐보면 Fixed Column Count와 Fixed Row Count가 있습니다.

Fixed Column Count를 먼저 설명하면

위의 그림처럼 값을 3으로 설정하면 3칸으로 맞춰서 정렬을 해준다는 의미입니다.

예를 들어 15개의 이미지가 있다면 3개씩 5줄로 들어간다는 의미입니다.

다음은 Fixed Row Count입니다. Column의 반대라고 생각하시면 편합니다.

위의 그림처럼 값을 3으로 설정하면 3줄로 맞춰서 정렬을 해준다는 의미입니다.

예를 들어 15개의 이미지가 있다면 5개씩 3줄로 들어간다는 의미입니다.

우선 위에서 설명 안 하고 넘어간 Grid Layout Group의 자식으로 들어간 UI의 사이즈를 별도로 조절하는 방법을 설명하겠습니다.

위의 그림과 같이 Parent의 자식 UI인 Image의 Width, Height를 조절할 수 없는 모습입니다.

하지만 사이즈를 조절하고 싶을 수 있습니다. 그럴 때는 사이즈를 조절하고자 하는 UI에 Layout Element컴포넌트를 추가해 줍니다.

여기서 가장 위쪽의 Ignore Layout을 체크해 주면

위의 그림처럼 사이즈를 조절할 수 있게 되고 실제로 적용도 되는 모습을 볼 수 있습니다.

이번에는 Text관련 팁입니다.

유니티에서 Text를 입력하다 보면

위의 GIF처럼 줄이 마음대로 바뀌어서 불편했던 경험이 있을 것입니다.

이럴 때 입력되는 텍스트에 맞춰서 텍스트 입력 칸이 넓어지게 할 수 있습니다.

설정을 할 텍스트 UI에 Content Size Fitter컴포넌트를 추가해서 간단한 설정만 해주면 됩니다.

Horizontal Fit과 Vertical Fit의 설정을 Unconstrained에서 Preferred Size로 변경해 주면 됩니다.

설정을 완료했다면

위의 GIF처럼 텍스트입력에 따라 텍스트 입력 범위가 넓어지는 모습을 볼 수 있습니다.

이번글은 여기까지입니다.