20240318 Unity - UI

Rect Transform은 Transform을 상속받은 것

Rect Trasnform을 수정하든 Transform을 수정하든

위치가 변경되기는 함

 

Canvas

Render Mode

Screen Space - Overlay

그리는 순서대로 그려짐

Screen Space - Camera

카메라 기준으로 그려짐

World Space

world의 깊이 기준으로 그려짐

(데드스페이스의 3D UI,  VR용 UI)

 

Pixel Perfect

도트 그래픽일 때 픽셀에 맞춰 이동하도록 만들어줌

그래픽이나 움직임이 뭉개지지 않도록 함.

 

Sort Order 화면에 그려지는 순서

(z-Index)

 

Canvas Scaler

화면 크기가 변경되었을 때 UI의 비율 관리

 

UI Scale Mode

Constant Pixel Size

단위면적당 픽셀 개수

Scale With Screen Size

스크린 크기 비례

스크린의 폭에 우선으로 맞출지

높이를 우선으로 맞출지 설정해줘야함

Constant Physical Size

실제 장비의 해상도 비례

 

Graphic Raycaster

해당 UI Raycast 관리

기본으로 들어가있음

사용자가 클릭하지 않는 UI에는 빼놓아야함

Button

Position

앵커에서부터 얼마나 떨어져있는지를 나타냄

Anchors

캔버스 기준 설정해둔 좌표가 기준 좌표가 됨. (0,0,0)

stretch

해상도가 변경되었을 때 버튼이

어느방향으로 늘어날지 설정

해상도에 따라 UI 크기가 변경될지는 기획 단계에서 결정

 

Pivot

로컬 좌표계의 기준 좌표를 바꿈

스케일이나 로케이션을 변경할 때 기준점

 

Canvas Renderer

해당 컴포넌트가 있어야 화면에 그려짐

Cull Transparent Mesh

투명한 Mesh가 있을 때 cull 할지

 

Image

UI 이미지로 사용하려면 Sprite로 설정해둬야함

Color, Material 이미지의 색과 머티리얼 변경

Raycast Target, Padding

Raycast 사용여부, 범위

Maskable

위에 그려진 UI에 우선순위가 생김

위의 버튼이 아래 버튼을 가리면 버튼이 안눌림

Image Type

Sliced

9-Sliced.

이미지를 9조각으로 나누어 중간 부분을 늘림.

이미지 모양은 유지하고 이미지를 늘릴 수 있음

Tiled 반복, Filed 채우기

 

Interactable

버튼 활성화/비활성화

Transition

버튼 상태에 따른 색상

 

On Click()

버튼이 클릭되었을 때 실행됨

 

9-Sliced. 이미지를 Sprite로 설정하고 Sprite Editor를 누른 뒤 초록 선을 이동시켜 이미지 슬라이스.

 

인스펙터 상에서 버튼 이벤트를 설정하는 방법.

빈 오브젝트에 ButtonExample 스크립트를 넣고 OnClick() 안에 해당 '오브젝트'를 넣고 클릭되었을 때 실행될 함수를 넣어줌

 

코드 상에서 버튼 이벤트를 설정하는 방법.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class ButtonExample : MonoBehaviour
{
    [SerializeField] private Button btnAnother = null;

    private void Awake()
    {
        btnAnother.onClick.AddListener(AnotherButtonListener);
        //AddListener(PrintDebugLog("test")) X. PrintDebugLog("test")를 호출하고 있는 것
        //델리게이트에는 함수 포인터를 넣어야함.
        //이거때문에 AnotherButtonPress같은 함수를 만드는 게 낭비라서 람다식을 사용함. C#에서는 ArrowFunction.
        btnAnother.onClick.AddListener(
            () =>
            {
                PrintDebugLog("This is lambda");
            });
    }

    public void AnotherButtonPress() {
        PrintDebugLog("Another button Pressed");
    }

    private void AnotherButtonListener() {
        PrintDebugLog("Another Button Listener");
    }

    private void PrintDebugLog(string _msg) {
        Debug.Log(_msg);
    }

}

버튼 클릭되었을 때.