최고의 UI 강의를 듣다!!!

오늘의 키워드 : UI 활명수

오늘 수준별 수업에서 튜터님이 유니티에서 UI를 다루는 법을 알려주셨다. 내가 지금 맡은 부분이 UI라서 주의깊게 들었는데 매우 유익했다! 잊기 전에 기억나는대로 세세하게 기록해보겠다. 실습은 3D환경에서 진행되었다.(하지만 ui니까 2D에서도 적용 가능!)

숫자 2 단축키

숫자 2를 누르면 2D와 3D를 왔다갔다 할 수 있다. 평소엔 3D로 작업하다가 UI작업할 땐 2D로 바꿔서 작업하면 편할듯 하다.

• Placeholder : 아무것도 입력되지 않았을 때 보여지는 텍스트
• Character Limit : 입력 가능한 글자 수 제한 설정이 가능하다.
• Content Type : 숫자만, 비밀번호 형식 등 입력 형식을 제어할 수 있다.

InputField

유저로부터 문자열(텍스트)을 입력받을 수 있는 UI 컴포넌트이다. 키보드 입력이 필요한 게임 기능에 사용될 수 있어보인다.

RenderMode

• Screen Space - Camera : UI가 특정 카메라를 기준으로 렌더링된다. 카메라 깊이 순서에 영향을 주고 싶을 때 사용할 수 있다. Render Camera 설정이 필요하다.
• Screen Space - Overlay : 기본값이며 UI가 항상 화면 제일 앞에 표시된다. 어떤 오브젝트도 UI를 가릴 수 없다.
• World Space : UI요소를 3D 월드에 배치할 수 있다. NPC 체력 바 처럼 UI를 배치하고 싶을 때 유용하다.

Graphic Raycaster

• Inore Reversed Graphics : 뒤집힌 UI 요소에 대한 클릭을 무시한다. 기본적으로 체크되어 있다.
• Blocking Objects : UI 이외의 물체가 클릭을 가로막을 수 있는지 설정한다.
• Blocking Mask : 어떤 레이어에 속한 오브젝트가 클릭을 막을 수 있는지 레이어 단위로 설정 할 수 있다.

버튼 Sprite Swap

기존 버튼 ui를 받아서 쓸 때 뭐 하이라이트라던가 눌렀을때라던가 색을 좀 변경하고 싶을 때가 있을 것이다. 그럴 때 이미지의 색을 조절하면 이상하게 변하게 되는데 Sprite Swap을 사용하면 해결할 수 있다! 아예 다른 sprite를 집어넣는 것이다. 이러면 이상한 색이 아닌 내가 원하는 색이 있는 버튼이 될 것이다.

버튼 애니메이션

버튼에 마우스를 올렸을 때 버튼이 커지거나 색이 바뀌거나 하는걸 애니메이션으로도 조절할 수 있다. 지금은 애니메이션을 추가해서 안보이지만 처음 버튼을 만들었을 땐 Disabled Trigger 밑에 Auto Generate Animation을 클릭하면 자동으로 애니메이터가 만들어진다. 애니메이션을 잘 사용해서 원하는 기능을 구현할 수 있다! 나도 이거 배우자마자 지금 만들고 있는 게임에 바로 적용해보았다. 밋밋했는데 확실히 효과를 넣으니까 좀 더 생동감이 생긴 느낌.

Sprite Slice 조절하기

아래 사진과 같은 Sprite를 받았을 때 내용을 많이 쓰거나 적게 써서 크기를 조절하고 싶은데 그러면 이미지가 막 뭉개지고 늘어나는 현상 무조건 있을 것이다(난 아까도 그랬다) 해결방법은 아래와 같다.

Sprite Editor에서 초록색 선을 가져와 이렇게 배치하고 Apply해주자.


윗 부분이 뭉개지지 않고 잘 유지되면서 크기 조절이 되는 것을 확인할 수 있다! 이걸 진작에 알았으면 좋았을텐데... 긍정적으로 생각하자면 이번 프로젝트 제출하기 전에라도 알아서 다행이다. 오늘 하루의 최대 수확이라고 생각한다.

마무리하며

이 외에도 많은 정보를 얻었다. 예를 들어 UI씬은 따로 만들어서 하이어라키에 두 개의 씬을 둔다던가 앵커 포인트를 드래그 하면 나오는 효과라던가... 다시보기 업로드 되면 한 번 더 보면서 복습해볼까한다. 일단 기억나는대로 다 적어봤는데 다음에 또 이런 시간이 있었으면 좋겠다.

내일 할 일

내일은 발표 하루 전날이다. 발표 PPT에 내 몫을 작성하고, 개인적으로 아직 부족하다고 생각하는 부분을 보충해볼까 한다. 여유가 있어서 시간이 남는다면 개인 공부를 하고싶다. 타임라인이라던가 쉐이더라던가 시네머신이라던가..