📕학습 개요

오늘은 이재현 튜터님께서 예전에 스탠다드 분반에서 진행하셨던 UI 강의의 녹화본을 들어보았다. 재현 튜터님의 강의는 언제 들어도 명강의 인 것 같다. 나름 유니티 UI에 대해 많이 안다고 생각했는데 많이 배웠고, 유용한 팁을 많이 얻을 수 있었다.

📖학습 내용

Canvas - Render Mode

image_1

  1. Screen Space - Overlay

    • 캔버스가 게임씬 전체를 덮는 형식으로 렌더링 된다.
    • UI의 위치가 화면 상에 고정되며, 캔버스의 왼쪽 아래 꼭짓점이 월드 좌표 (0,0,0) 에 위치한다.
    • 캔버스에 자식으로 들어있는 UI들은 계층 구조에 따라(자식 오브젝트 순서에 따라) 배치된다는 점을 잊지 말자. 후순위에 배치될 수록 앞으로 배치된다(하이어라키 오더를 Transform Sorting 으로 해야 하는 이유).

  2. Screen Space - Camera

    • 화면 위치에 고정되는 것이 아닌, Render Camera 에 할당된 카메라를 따라간다.
    • UI와 카메라 사이에 오브젝트가 존재할 경우, UI가 가려진다.
    • 협업 시 UI를 담당하는 개발자가 렌더링 모드를 Camera로 설정 하여, 멀티씬을 통해 다른 개발자의 Scene과의 병합 테스트를 간단하게 진행할 수 있다.

  3. World Space

    • UI가 씬 안에 있는 평면 오브젝트 처럼 렌더링 된다.
    • 적을 따라다니는 체력바 등을 만들 시 유용
    • 다른 렌더링 모드와 다르게 UI가 알아사 카메라를 바라보지 않는다.

Graphic Raycaster

image_2

  • 게임 중 화면 클릭/터치 시 카메라에서 발사되는 레이캐스팅을 받을지, 혹은 무시할지 결정하는 컴포넌트다.
  • Ignore Reversed Graphics : 캔버스, UI의 후면에서도 레이캐스트 처리를 할지 결정
  • Blocking Objects : 그래픽 레이캐스팅을 막을 오브젝트 타입 지정 가능
  • Blocking Mask : 그래픽 레이캐스팅을 막을 레이어 타입 지정 가능

Rect Transform

  • alt 누르고 프리셋 클릭 -> anchor의 pivot 변경과 동시에 이동
  • shift 누르고 프리셋 클릭 -> UI의 pivot 변경
  • 앵커 세팅을 세밀하게 해주는 것이 중요

Button Transition

image_3

  • 버튼의 상태에 따라 다양한 효과를 적용할 수 있는 옵션 기능
  • Color Tint : 상태에 따라 버튼 이미지의 컬러를 변화시킴
  • Sprite Swap : 상태에 따라 다른 스프라이트를 표시할 수 있음
  • Animation : 상태에 따라 애니메이션 실행

UI 최적화 기법

  • Raw Image : UI 중 Sprite가 아닌 일반 텍스쳐를 넣을 수 있는 유일한 요소.
  • Sprite Packer , Sprite Atlus 를 사용

UI 관련 팁

  • Rect Tool -> 드래그 시 alt를 누르면 pivot을 기준으로 양방향이 일정하게 바뀜.
  • UI는 pivot의 위치를 마음대로 바꿀 수 있음
  • 이미지의 특정 부분만 늘리고 싶을 때
    1. 이미지의 Sprite Mode를 Single로 설정
    2. Sprite Editor에서 늘리고 싶은 부분만 Slice
    3. Image Type : 알아서 Sliced로 설정됨
    4. Image 컴포넌트에서 Pixels Per Unit Multiplier 값을 알맞게 설정(or 이미지의 Pixels per Unit 값을 변경) image_4
  • Image 의 Preserve Aspect 체크해서 이미지의 원본 비율 맞추기
  • Set Native Size 클릭 -> 이미지 원본 크기로 변경

🏁오늘 배운 핵심 내용 정리

  1. 캔버스의 Scale 설정은 처음에 바로 설정해주기
  2. UI는 anchor 설정이 제일 중요
  3. Button Transition에 애니메이션을 통해 더욱 다양한 효과를 넣어줄 수 있음
  4. 이미지의 특정 부분만 늘리고 싶다 -> Slice

댓글남기기

참고