스페셜 리스트 - 유니티 UI

[ 구글 드라이브 프로젝트 파일 폴더 ]

[ UI Canvas ]

• Canvas

  • UI엘러먼트그룹의 렌더링을 관리하는 컴포넌트

  • 모든 UI는 Canvas의 자식

  • 한 Scene에 1개 이상의 Canvas를 가질 수 있음

  • UI 엘러먼트를 생성되는데, Canvas가 없다면 Canvas는 자동 생성

  • Render Mode (Screen Space -Overlay / Screen Space -Camera / World Space)

    • Screen Space - Overlay Render Mode

      • 가장 흔한 렌더 모드로 기본 모드 설정임

      • UI는 Scene을 오버레이함 - Scene 내의 모든 것들 위에 표시됨

      • 스크린(해상도) 설정이 변경되면 자동으로 크기가 변경됨

      • Overlay 내의 Rect Transform은 모든 컴포넌트를 드라이브합니다.

      • Pixel Perfect Option

        • UI 엘러먼트가 렌더링될 때 가장 가까운 픽셀로 조정됨(UI모양이 선명해 보일 수 있음)

    • Screen Space - Camera

      • Overlay와 유사하지만 Scene의 특정카메라에서 렌더링됨(원금감 투영을 통한 UI 구현이 가능: Render Camera에 UI용 Camera의 Reference를 대입)

      • UI용 카메라의 Viewport 설정이 변경하면, 자동으로 크기 및 위치가 변경됨

      • Screen Space 내의 Rect Transform은 캔버스에 의해 전체적으로 드라이브됨

        • UI용 Camera의 설정(Clear Flags/Culling Mask 등)을 통해 다양한 형태로 변형 가능

        • Pixel Perfect Option

        • Screen Space -Overlay와 같음

        • Render Camera Option

          • 렌더링되는 카메라 설정

          • 설정이 안되어 있다면 Overlay 형태를 따르게 됨

    • Screen Space - World Space

      • • 씬 속의 정적인 오브젝트 또는 말풍선같은 이동 오브젝트, 게임 오브젝트를 따르는 플레이어 태그 등을 표현

      • Screen Space 내의 Rect Transform은 컴포넌트들을 드라이브하고 있지 않아 월드 스페이스의 어디에서도 캔버스를 설정할 수 있음

        • Event Camera Option

          • 어떤 카메라를 이용해 UI 엘러먼트 클릭같은 이벤트를 감지할 것인지를 결정

          • 일반적으로 스크린 스페이스 월드 카메라를 이용

        • Receives Events Option

          • UI 엘리먼트가 클릭, 호버 등의 이벤트를 수신할 것인지를 체크

        • Sorting Layer / Order in Layer Option

          • 씬의 다른 랜더러와 비교하여 캔버스의 레더 순서를 관리

    • Canvas > Panel 밑에(Child Object) 있는 UI 엘리먼트들은 붙어 있는 순서에 따라 렌더링 됨

      • Canvas Scaler

      • 화면상의 UI 크기와 픽셀 밀도를 지정한다.

      • 다양한 화면 크기를 어떻게 대응할 지 결정한다.

    • Constant Pixel Size (기본값)

      • • 실제 화면의 픽셀 크기를 UI의 가로*세로 크기로 정한다.

        • 이미지 1픽셀이 화면 1픽셀에 대응한다.

    • Scale With Screen Size

      • • 기준값으로 입력한 가로/세로 크기를 UI의 가로*세로 크기로 정한다.

        • 가로 기준 / 세로 기준을 적당히 지정한다.

      • Constant Physical Size

        • 픽셀 단위와 관계없이 물리 장비의 크기와 픽셀 밀도 값(DPI 단위)를 바탕으로 한 크기를 UI의 가로*세로 크기로 정한다.

[ Text ]

• Text

  • 화면에 Text를 표시

• Text 스크립팅

[ Image ]

• Image

  • 화면에 Image를 표시

• • • Image Type

      • 이미지 표시방법에 대한 설정

      • Simple

        • 이미지가 아무 효과 없이 표시됨

      • Sliced

        • 이미지를 아홉분할 하여 표시

        • 가운데 이미지는 제어 사각형의 크기에 맞게 제어되나 외곽의 8개의 이미지의 크기는 변하지 않는다.

        • 외곽선이 있는 이미지의 외곽선의 크기가 변하지 않게 제어하고자 할 때 사용

      • Tiled

        • 제어 사각형 영역을 채워서 표시하는 한 방법

        • 이미지의 크기는 원래의 크기를 유지하나 제어 사각형을 채우기 위해 바둑판 식으로 채워진다.

      • Filled

        • Simple을 사용한 방법과 같이 표시되나 채우는 방식을 설정할 수 있다.

        • Fill Amount를 사용하여 쿨타임 UI를 제작할 수도 있다.

[ Slider ]

• Slider

  • 슬라이터 컨트롤은 사용자가 슬라이더 핸들을 조정하여 소정의 범위에서 숫자 값을 선택 할 수 있다.

  • Tip : 응용하면 간단한 체력바로 사용이 가능하다.

• • • Direction

      • 핸들을 드래그 하는 방향을 설정

      • 왼쪽에서 오른쪽, 오른쪽에서 왼쪽, 위에서 아래, 아래에서 위

    • Min Value

      • 슬라이더의 핸들을 조정하여 슬라이더가 가질 수 있는 최소값

    • Max Value

      • 슬라이더의 핸들을 조정하여 슬라이더가 가질 수 있는 최대값

    • Whole Numbers

      • 슬라이더의 Value를 정수값으로만 제한 할지를 결정

      • 체크하게되면 Value는 정수값만을 가지게 된다.

      • 슬라이더의 단계적 값 변화에 적용하면 좋을 듯

    • Value

      • 현재 슬라이더의 값

      • 런타임시 슬라이더의 핸들의 조정으로 변화 할 수 있음

      • 스크립팅으로 값을 주고 받을 수 있음

• • Slider 스크립팅

[ Button ]

• Button

  • 버튼 컨트롤은 사용자의 클릭에 응답하여 지정된 작업을 실행하게 해준다.

• • • Button은 사용자가 Button을 클릭하고 놓을 때 작동되며 Button을 놓기 전에 마우스 포인터를 움직여 Button의 영역 밖에서 놓게되면 Button은 작동하지 않는다.

    • Button은 마우스 포인터가 올려졌을 때, Button이 눌렸을 때, Button이 사용불가 할 때 등의 상태에 따라 Button에 여러 처리가 가능하다.(Color Tint, Sprite Swap, Animation)

• Button 스크립팅

[ 2018.09.17 ]