이번에는 UI를 다루는 글을 써보려고 한다. UI는 게임에서 굉장히 중요한 역할을 하기에 자세히 알아줄 필요가 있다.

우선 용어들을 정리하고 넘어가보자.

Sprite

유니티 엔진에서 사용되는 이미지 리소스를 텍스쳐(Texture)라고 부른다. 이 텍스쳐 중에서 Image 컴포넌트나 2D게임의 오브젝트로 드려지는 스프라이트 렌더러에서 사용되는 리소스들을 스프라이트(Sprite)라고 한다.

보통 위와 같이 프로젝트에 임토트되는 텍스쳐들은 자동으로 texture Type이 Default로 되어 있는데 이는 3D 모델 오브젝트의 텍스쳐로 사용되는 타입이다.

UI에 사용하기 위해서는 이 Texture Type을 위와 같이 Sprite로 바꿔줘야 한다.

이제 이 스프라이트를 사용하기 위해서 이미지 게임 오브젝트를 생성해보자.

생성하는 방법은 하이어라키 뷰에 우클릭->UI->Image를 선택하면 된다.

Image 컴포넌트

유니티 엔진에서 화면에 그림을 표현하기 위해 사용되는 것이 바로 이 Image 컴포넌트이다. 기본 Image 컴포넌트는 화면에 그림을 보여주기만 하고 클릭을 한다던가 하는 상호작용이 불가하다. 클릭을해서 상호작용을 하려 한다면 Button 게임 오브젝트를 사용해야 한다.(이에 대해서는 나중에 글을 쓰겠음)

Image 컴포넌트의 프로퍼티

Image 컴포넌트를 제대로 사용하려면 그 안에 있는 프로퍼티에 대해서도 자세히 알아 둘 필요가 있다.

우선,

Source Image

Source Image는 이 Image컴포넌트가 화면에 보여줄 그림을 설정하는 프로퍼티이다. 기본 None으로 되어 있으면

이 처럼 기본 하얀색이 그려진다. Source Image 프로퍼티에 원하는 스프라이트를 놓으면 그 스프라이트가 그려진다.

위와 같이 말이다.

스크립트 상에서도 스프라이트를 바꿔주는게 가능하다 코드를 봐보자.

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

public class DontDestroy : MonoBehaviour
{
    Image image;

    [SerializeField]
    Sprite sprite;
    private void Start()
    {
        image.sprite = sprite;
    }
}

여기서 중요한 점은 UI를 스크립트에서 다루려면 4번째 줄과 같이 using UnityEngine.UI;를 꼭 선언해 주어야 한다. 위 코드를 보면 image.sprite를 통해 다른 스프라이트로 바꿔주는게 가능함을 알 수 있다.

Color

Color 프로퍼티는 말 그대로 Image의 색상을 바꿔준다.

빨강으로 바꿔보았다.

Material

material 프로퍼티는 Image에 Material을 넣어서 흐리게 보이게 만든다거나 왜곡되어 보이게 하는 것처럼 특별한 효과를 넣고자 할 때 사용된다.

Raycast Target

Raycast Target 프로퍼티는 이 이미지가 Raycast의 대상으로 삼을 것인가를 결정하게 한다. 즉, Raycast의 타깃으로 삼는다는것은 이 오브젝트를 클릭했을 때 Raycast에 검출되게 한다는 뜻이다.

Image Type

Image Type에는 4가지의 탑이 있다. Simple, Sliced, Tiled, Filled와 같이 말이다. 이제 하나씩 살펴보자

Simple

Simple은 뜻 그대로 보여지는 이미지를 그대로 보여준다는 의미이다.

Use Sprite Mesh

Use Sprite Mesh는 이미지를 그리는 영역을 지정할 때 그냥 사각형 영역으로 그릴지 아니면 이미지의 영역을 무시하고 최대한 그림의 형태에 맞는 영역으로 그릴지를 결정한다.

위 사진을 보면 파란색 부분을 제외하고 빈 공간이 많이 보인다.

여기서 씬 뷰의 왼쪽 상단에 Shaded라고 표시된 곳을 클릭하여 Overdraw를 선택하면

위와 같이 UI가 있는 곳은 갈색으로 겹쳐지는 구간은 옅은 갈색으로 표시가 되는데 이렇게 겹쳐진 부분의 픽셀을 화면이 갱신됭 때마다 겹쳐진 횟수만큼 다시 그리기 떄문에 반드시 필요한 경우가 아니라면 이미지가 겹쳐지는 것을 피해야 한다. 그런 의미에서 이런 쓸데 없이 비어있는 부분을 제외하고 그림의 형태에 가깝게 다시 그리도록 하는게 Use Sprite Mesh이다. Use Sprite Mesh를 선택하면

위와 같이 그림의 형태와 비슷하게 다시 그려서 겹쳐지는 부분을 없애는 것이 가능하다.

Preserve Aspect

Preserve Aspect는 Sourece Image의 원본 비율을 지켜서 그릴 것인지를 정하는 프로퍼티이다. 원래는 Image 컴포넌트의 너비와 높이에 따라 그림의 비율이 변하는데 Preserve Aspectf를 활성화하면 원래 스프라이트의 비율을 지킨 상태로 화면에 그려진다.

Sliced

Sliced타입은 좀 중요하다. Sliced타입은 9슬라이싱이라는 기능을 사용하기 위한 것으로 작은 크기의 이미지를 모서리 부분의 해상도를 유지하고 가운데 부분을 늘어뜨려서 채워주는 방식으로 UI의 크기를 자유자재로 사용할 수 있게 도와주는 타입이다. 사용하는 방법은 우선

원하는 스프라이트를 눌러서 인스펙터창에서 Sprite Editor를 눌러서 편집창으로 넘어간다.

그 다음 위와 같이 초록색 선을 움직여 모서리와 반복될 가운 부분을 나워준다. 그리고 Apply를 누르면 9슬라이싱이 적용된다.

그럼 위와 같이 Image를 아무리 키워도 어색함이 없다.

Fill Center

Fill Center는 뜻 그대로 가운데를 채울 것이냐를 묻는 것이다.활성화 되어 있으면 가운데가 채워지고 비활성화 되어 있으면

위와 같이 가운데가 비워진다.

Pixel Per Unit

Pixel Per Unit은 이미지의 1픽셀을 유니티에서 어떤 크기로 화면에 그릴 것인가를 결정한다.

Tiled

Tiled타입은 뜻 그대로 이미지를 반복으로 그려주는 것을 결정한다.

Pixel Per Unit Multiplier가 커질수록 반복되는 횟수가 많아진다.

Filled

정말 유용한 기능이다.

Filled는 차오르는 게이지 같은 연출을 할 때 사용된다.

하위 프로퍼티로는 Fill Method, Fill Origin, Fill Amount가 있다

Fill Method는 Radial 360, Radial 180, Radial 90, Vertical, Horizontal이 있다.

Fill Origin은 채우기 시작하는 지점을 정하는 프로퍼티인데 Fill Method마다 조금씩 다른 값을 가지고 있다.

Fill Amount는 채움의 정도를 나타내는게 0에 가까우면 거의 채워지지 않은 것이고 1에 가까우면 거의 다 채워진 것이다.

Clockwise는 시계 반대방향으로 채울 거냐, 반시계 방향으로 채울 것인지를 결정한다. 활성화 되어 있으면 시계방향 비활성화 되어 있으면 반시계 방향으로 채워진다.

예시

1)Fill Method는 Radial360, Fill Origin은 Top, Fill Amount는 0부터 조금씩 1로 증가하게 하면 쿨타임을 연출 할 수 있다.

2)Fill Method는 Horizontal, Fill origin은 Left, Fill Amount는 0부터 조금씩 1로 증가하게하면 로딩 바, 경험치 바를 연출 할 수 있다.

스크립트 상에서 image.fillAmount를 통해 image컴포넌트의 Fill Amount값을 조절할 수 있다.

Set Native Size

Set Native Size버튼은 Image 컴포넌트가 부착된 UI 게임 오브젝트의 너비와 높이를 Source Image로 넣은 스프라이트의 해상도와 같게 만들어주는 버튼이다.

예를들어 Source Image에 512 * 512 해상도의 스프라이트를 넣고 Set Native Size버튼을 누르면 이미지 게임 오브젝트의 너비와 높이가 512 * 512로 변하는 것을 볼 수 있다.