오늘은 게임에서 많이 쓰이는 UI ImageType을 대해서 알아보겠다.

ImageType

Simple

설명: Simple 타입은 원본 스프라이트를 그대로 표시합니다. 크기를 조절하면 이미지가 그대로 늘어나거나 줄어듭니다.

사용 예제:

• 아이콘: 게임 내에서 작은 아이콘을 표시할 때, 예를 들어, 미니맵 아이콘, 능력 아이콘, 아이템 아이콘 등.
• 로고: 게임의 로고나 타이틀 화면에서 사용.
• 단순 버튼: 단순한 형태의 버튼이나 메뉴 항목.

예시:

• 플레이어 상태: 인벤토리에서 아이템 아이콘으로 사용.
• HUD: 게임 상단의 점수 표시 등.

Sliced

2. Sliced
   설명: Sliced 타입은 스프라이트를 9개의 부분으로 나누어 렌더링합니다. 가장자리 부분은 크기를 유지하고, 중앙 부분만 늘어나거나 줄어듭니다.

사용 예제:

• 패널 및 창: 다양한 크기의 UI 패널, 대화 상자, 정보 창 등.
• 버튼: 크기가 동적으로 변하는 버튼.
• 프레임: 이미지의 테두리나 프레임을 구현할 때.

예시:

• 메뉴 패널: 설정 메뉴나 인벤토리 창.
• 팝업 창: 게임 내 알림 팝업 창.

Tiled

3. Tiled
   설명: Tiled 타입은 스프라이트를 반복하여 렌더링합니다. 설정된 크기에 따라 타일 패턴으로 이미지가 채워집니다.

사용 예제:

• 배경: 게임 화면의 배경 이미지.
• 패턴: 반복적인 패턴이 필요한 경우, 예를 들어, 체크무늬 패턴.
• 바닥 텍스처: 타일 형식의 바닥 텍스처.

예시:

• 스크롤 배경: 무한 스크롤 배경 이미지.
• 타일 맵: 게임 맵의 바닥이나 벽 텍스처.

Filled

4. Filled
   설명: Filled 타입은 이미지의 일부분만 채우거나 잘라내어 렌더링합니다. 다양한 채우기 방식(fill method)을 제공합니다.

사용 예제:

• 진행 바: 체력 바, 마나 바, 경험치 바 등.
• 타이머: 시간 경과에 따라 채워지는 원형 타이머.
• 로드 바: 로딩 화면의 진행 표시 바.

예시:

• 체력/마나 바: 플레이어 또는 적의 체력/마나 상태를 표시.
• 퀘스트 진행도: 퀘스트 완료 진행도를 시각적으로 표시.
• 쿨다운 타이머: 스킬 쿨다운을 시각적으로 표시.

using UnityEngine;
using UnityEngine.UI;

public class GameUI : MonoBehaviour
{
    public Image iconImage;
    public Image panelImage;
    public Image backgroundTileImage;
    public Image healthBarImage;

    void Start()
    {
        // Simple 타입을 아이콘에 사용
        iconImage.type = Image.Type.Simple;

        // Sliced 타입을 패널에 사용
        panelImage.type = Image.Type.Sliced;

        // Tiled 타입을 배경에 사용
        backgroundTileImage.type = Image.Type.Tiled;

        // Filled 타입을 체력 바에 사용
        healthBarImage.type = Image.Type.Filled;
        healthBarImage.fillMethod = Image.FillMethod.Horizontal;
    }
}

위 예제 코드에서는 Image 컴포넌트를 사용하여 각기 다른 UI 요소에 적합한 이미지 타입을 설정하고 있습니다. 이러한 설정을 통해 게임의 다양한 UI 요소를 효율적으로 구현할 수 있습니다.

결론 : 오늘 어제 만들어본 3DSurvival을 다시 복습하면서 UI를 만들고 있었는데 Health, Hunger, Stamina 를 만들고 Script 작성후 드래그앤 드롭으로 다 넣고 나서 시험을 해보고 있는데 데미지를 입거나 Hunger의 게이지를 줄어들게 만들었는데 불구하고 숫자는 줄어 들고있는데 UI가 줄어들지를 않아서 몇시간째 머리 싸매고 있다가 Image타입을 Filled로 바꾸지 않아 이렇게 된것을 확인하여 이 ImageType이란것을 화나서 정리해 보았다.

어제 한건데 기억이 안나네.. 아이고..