Mathf.Lerp( )를 사용해 부드럽게 충전되는 로딩 게이지 만들기

---

 

 

1. Mathf.Lerp( )

Mathf 라이브러리에서 제공하는 Learp( ) 메서드는 선형 보간을 구현할 수 있게 해주는 메서드입니다.

흔히 말하는 '부드럽게 이동하기' 기능을 구현하기 위해서 종종 마주하게 되는 메서드입니다.

선형 보간은 쉽게 말해서 두 값이 주어졌을 때, 두 값 사이를 직선으로 이은 뒤, 선형적으로 그 사이의 값을 추정해 내는 기법입니다.

이해를 쉽게 하기 위해 덧붙이자면, AMD에서 개발해 제공하는 Fluid Motion Video 기술을 설명할 때도 '보간'이라는 단어가 등장합니다.

Fluid Motion Video 기술은 영상의 두 프레임 사이의 이미지를 추정해 그려낸 뒤, 이를 삽입하여 기존의 영상보다 더 많은 프레임을 지닌(더 부드러운) 영상을 만들어내는 기술입니다.

Unity 엔진에서 제공하는 Mathf.Lerp( ) 메서드는 아래와 같이 구성되어 있습니다.

Mathf.Lerp(a, b, t);

- a: 시작 값

- b: 끝 값

- t: a와 b 사이의 보간 값 (0 ~ 1 사이의 실수)

여기서 t의 값을 적절하게 조절하면 자신이 원하는 대로 두 값 사이를 얼마나 '촘촘하게' 보간할 것인지 조절할 수 있습니다.

Mathf.Lerp(0, 1, 0.5f);

만약 위와 같이 코드를 작성하면 메서드는 0.5를 반환합니다.

즉, 0과 1 사이의 중간 값을 반환하는 것입니다.

Mathf.Lerp(0, 1, 0.1f);

 만약 위와 같이 코드를 작성하면 메서드는 0.1을 반환합니다.

즉, 위의 코드와 다르게 a에서 b 사이를 이어주는 직선을 1/10로 나누었을 때 나오는 '한 칸의 값'을 반환합니다.

이처럼 t의 값을 조절하면 자신이 원하는 만큼 부드럽게 값을 조절할 수 있습니다.

 

---

 

2. Update( )

Unity 엔진을 다루기 위해서는 필수적으로 알아야 하는 메서드 중에 하나가 바로 Update( ) 메서드입니다.

Update( ) 메서드는 매 프레임마다 호출되는 메서드입니다.

코드를 통해 부드럽게 충전되는 로딩 게이지를 만들기 위해서는 무엇보다 Mathf.Lerp( ) 메서드를 반복적으로 호출해주어야 합니다.

물론 while( )과 같은 반복문을 사용하는 방법도 있겠지만, 예제 코드에서는 간단하게 설명할 수 있도록 Update( ) 메서드를 활용합니다.

private void Update() {
    if (Input.anyKey) {
        this.indicator.value = Mathf.Lerp(0, 1, this.indicator.value + Time.deltaTime);
    }
}

indicator는 Slider 타입의 오브젝트입니다.

indicator 오브젝트에 포함되어 있는 Slider 컴포넌트에는 value라는 이름의 변수가 존재하며, 0 ~ 1 사이의 실수를 사용해 슬라이더가 얼마나 채워졌는지를 표현합니다.

아무 키를 입력하고 있으면, Update( ) 메서드를 통해 지속적으로 if 문을 통과하게 됩니다.

if 문에 진입하면 indicator의 value 변수에 (현재 indicator의 value + Time.deltaTime)의 값을 t로 사용한 선형 보간 계산 결과가 반환됩니다.

즉, if 문을 한 번 통과하면 0 ~ 1 사이의 값을 현재 indicator의 value에 Time.deltaTime을 더한 값을 t로 사용하여 계산된 값이 indicator의 value에 다시 저장됩니다.

그 이후 다시 if 문을 통과하면 이전보다 더 커진 t를 사용하여 indicator의 value 변수 값을 변경합니다.

이처럼 서서히 커지는 t를 사용해 반복적으로 Mathf.Lerp( ) 메서드를 호출할 수 있게 만들면 간단하게 부드러운 애니메이션을 적용한 충전되는 로딩 게이지를 구현할 수 있습니다. 

 

---

 

---

수고하셨습니다!

---