유니티 이미지 컴포넌트 Filled 활용한 초단위 표현

안녕하세요 유니티 비기너입니다.

이번 시간에는 이미지 컴포넌트 Filled를 활용하는 방법에 대해 알아보겠습니다.

 

결과 화면

Filled는 한글로 가득 찬 이라는 뜻을 가지고 있으며 이미지가 그려진 정도라고 생각하시면 됩니다.

범위는 0~1까지 존재하며 1은 완전한 이미지가 그려진 상태, 0은 이미지가 전혀 그려지지 않은 상태를 나타냅니다.

위의 결과는 스크립트를 활용하여 특정 시간(초) 만큼 점차적으로 FillAmount를 감소시켜 보이는 화면입니다.

 

Image Type - Filled

Fille Method 이미지가 그려지는 방식을 선택합니다.

- Horizontal, Vertical, Radial

FillOrigin 이미지가 그려지는 방향을 선택합니다.

- Top Bottom

FillAmount 이미지가 그려지는 정도를 나타냅니다.

- 0 ~ 1

 

한 번에 보기

1. 바탕색 이미지 1개,  FillAmount를 감소시킬 이미지 1개 총 2개의 이미지를 준비합니다.

2. 오브젝트를 생성하고 이미지를 할당합니다.

3. 스크립트를 작성하고 적용시킵니다.

 

1. 바탕색 이미지 1개,  FillAmount를 감소시킬 이미지 1개 총 2개의 이미지를 준비합니다.

 

바탕 이미지

FillAmount를 감소시킬 이미지

 

2개의 이미지를 겹쳐놓고 분홍색 이미지의 FillAmount를 제어하여

점점 감소되는 느낌을 부여합니다.

 

2. 오브젝트를 생성하고 이미지를 할당합니다.

오브젝트도 동일하게 바탕이 될 오브젝트와 감소시킬 오브젝트 2개를 기본적으로 생성합니다.

 

 

3. 스크립트를 작성하고 적용시킵니다.

public class fillAmountController : MonoBehaviour
{
    public float totalTime;
    private float fillAmount = 1;
    private Image myImage;

    private void Awake() {
        myImage = GetComponent<Image>();
    }

    void Update()
    {
        if(fillAmount > 0) {
            fillAmount = fillAmount - (Time.deltaTime / (totalTime - 1));
            myImage.fillAmount = fillAmount;
        }
    }
}

 

 

totalTime은 설정된 시간만큼 감소를 시키는 변수이며 fillAmount는 0~1까지 범위만 가능하기 때문에 

DeltaTime을 totalTime만큼 나누어 초단위로 흐르게 표현했습니다.

 

스크립트를 작성했다면 Filled Sprite 오브젝트에 추가합니다.

 

이 방식은 시간, 체력, 스태미나 등등 다양한 방식으로 활용되고 있습니다.

소개한 방법을 잘 응용하셔서 다양한 방법으로 표현하셨으면 좋겠습니다.