[📜일지] UI 코드 구축

[로코복실한(dovecreative)]

반년간 유니티를 배우면서 UI(캔버스, 스프라이트)에 대해선 한번도 알아보지 않았다가, 슬슬 게임이 UI를 요구하는 단계까지 개발되어서 UI를 손대봤어.

처음 UI라는 걸 봐서 그런지 하면서 헷갈리는 게 많았어. 특히 RectTransform의 Anchor라든가 Pivot이 뭐하는 건지 이해하는 데 시간이 많이 걸렸어(...)

(그리고 아직도 Anchor에 Min Max가 왜 있는지 몰라 ㅎㅅㅎ;;)

쨋든 내 얘긴 여기까지 하고, 만든걸 보여주께.

게임이 시작되면 UI를 만드를 함수야.

내 게임에서 UI를 만들려면 크게 2가지가 필요한데, 위에 보이는 spot이랑 sourceList야.

spot은 위치 정보인데 크게 [캔버스 위치(Anchor), 이미지 내에서 자신을 나타내는 위치(Pivot), Anchor 기준 Pivot의 위치] 이렇게 3가지 인자로 이루어져.

sourceList는 말 그대로 이미지 리스트야. 이미지(Sprite)랑 대략적인 모양(Box, Circle...), 그리고 보정값으로 이루어져.

대략적인 모양이 있는 이유는, 저걸 기반으로 RayCast2D용 콜라이더를 만들기 때문이야.

참, 여기서 보정값이 뭐냐면

이렇게 사각형의 절반에 빨간 칠이 되어 있는, 그림자를 포함한 스프라이트가 있다고 할 때

그림자 때문에 이 이미지의 의도된 중심은 sprite.rect/2 가 아니게 되어버려.

이걸 보정하지 않고 그대로 넣으면

중앙에 이미지를 맞추면 그림자 때문에 실제로 보여지는 모습은 왼쪽으로 치우쳐지지.

이때 의도하지 않은 이미지의 상, 하, 좌, 우의 픽셀 크기를 순서대로 float[4]에 넣으면 간단한 계산으로 이미지의 Pivot을 맞춰 줘.

여기서 많은 시간이 걸렸는데, 이미지의 피벗을 옮기고, 콜라이더도 의도한 모양으로 옮기고, 자식 오브젝트까지 보정해주는 식을 짜는데 고생을 좀 했어.

(스파게티 코드)

이런 보정을 거치면, 우리가 원하는 대로 스프라이트를 배치할 수 있어.

사진은 아쉽게도 구현한 UI는 아니고, 구현'할' UI를 포토샵으로 만들어둔 거야.

내가 디자인 전공은 아니라서 그리 이쁜 것 같진 않지만 나중에 펀딩받아서 외주로 때울거니 상관 없어 ㅎㅎㅎㅎㅎ

앞으로 파일 탐색기, 스크롤 같은 자잘한 기능들을 구현하는 데 시간을 쓰게 될 것 같아.

뭔가 한 게 있으면 또 돌아올께. 안녕!

[익명(223.38)]

서강대 다니노? - dc App