[Unity] LeanTween을 활용한 부드러운 전환 효과 만들기

이번 시간에는 LeanTween이라는 아주 유용한 에셋을 소개하도록 하겠다. 소개할 에셋은 무료이므로 걱정하지 말자.

---

게임을 개발하면서 캐릭터가 이동하는 모듈을 개발한다고 가정하자.

즉시 위치 값을 반영해주는 방법도 있겠지만, 그렇게 되면 이동하는 것이 아니라 순간이동을 한다는 느낌이 든다.

그렇다면, 조금씩 이동하는 것은 어떨까?

아까보다는 이동하는 듯하지만, 등속 운동을 하기에 딱딱한 느낌이 든다.

 

이번에는 LeanTween을 활용해보자.

가속과 감속이 부드럽게 처리된다.

더 놀라운 점은 코드 한 줄 밖에 적지 않았다는 것이다.

 

간단히 몇 줄만 더 적으면 아래와 같은 전환 효과들을 줄 수 있다.

---

Asset 설치

Asset Store에 들어가서 LeanTween이라고 검색하면 첫 번째로 나온다.

※ 유명한 에셋이다보니 리뷰 수가 많다.

 

Import Package를 할 때, 다른 거 선택할 필요없이 LeanTween/Framework 폴더만 하면 된다.

※ 아니면, Framework 폴더의 LeanTween.dll.zip를 압축풀어서 Plugins 폴더에 넣어줘도 된다.

 

이렇게 8개의 스크립트가 있으면 모든 준비는 완료된다.

---

기본 사용법

LeanTween의 기본 구조는 다음과 같다.

using UnityEngine;

public class LeanTweenManager : MonoBehaviour
{
    public GameObject cube; //움직일 오브젝트
    public Transform destination; //목표 지점

    private void Start()
    {
        LeanTween.move(cube, destination.position, 2f); //2초에 걸쳐 이동
    }
}

위 코드는 특정 지점으로 이동하는 코드이다.

그러나, 이를 그대로 적용하면 그림과 같은 등속 운동을 한다.

 

따라서, Easing이라는 개념에 대해 알아야 한다.

Easing 함수 치트 시트 (https://easings.net/ko)

Easing은 시간 흐름에 따른 매개변수의 변화율을 의미한다.

대부분의 실제 사물들은 일정한 속도로 이동하지 않고, 즉시 시작하거나 즉시 멈추지도 않는다.

※ Unity에서만 적용되는 개념은 아니다.

LeanTween.move(cube, destination.position, 2f).setEase(LeanTweenType.easeOutBounce); //setEase 추가

Easing을 적용하기 위해서는 뒤에 setEase 함수를 열어, 타입을 지정해주면 된다.

 

Vector3 fromPos = destination.position + new Vector3(0f, 2f, 0f);
LeanTween.move(cube, destination.position, 2f).setEase(LeanTweenType.easeOutBounce)
    .setFrom(fromPos); //setFrom 추가

시작 위치를 지정할 수도 있다.

 

LeanTween.move(cube, destination.position, 2f).setEase(LeanTweenType.easeOutBounce)
    .setDelay(2f); //setDelay 추가

지연 시간을 지정할 수도 있다.

※ 순차적으로 동작하는 애니메이션을 구현하기에 유용하다.

 

LeanTween.move(cube, destination.position, 2f)
    .setEase(LeanTweenType.easeOutBounce) //setEase 추가
    .setDelay(2f) //setDelay 추가
    .setFrom(fromPos); //setFrom 추가

이러한 set으로 시작하는 옵션 함수들은 여러 개를 추가해도 상관없고, 순서가 바뀌어도 상관없다.

 

옵션 함수는 매우 많으니 LTDescr 스크립트에서 찾아서 사용하면 된다.

---

Move

Move는 위에서 간단히 설명했지만, 더 자세히 알아보자.

LeanTween.move(GameObject gameObject, Vector3[] to, float time);
LeanTween.move(RectTransform rectTrans, Vector3 to, float time);
LeanTween.move(GameObject gameObject, Transform to, float time);
LeanTween.move(GameObject gameObject, Vector2 to, float time);
LeanTween.move(GameObject gameObject, Vector3 to, float time);
LeanTween.moveLocal(GameObject gameObject, Vector3[] to, float time);
LeanTween.moveLocal(GameObject gameObject, Vector3 to, float time);
LeanTween.moveLocalX(GameObject gameObject, float to, float time);
LeanTween.moveLocalY(GameObject gameObject, float to, float time);
LeanTween.moveLocalZ(GameObject gameObject, float to, float time);
LeanTween.moveSpline(GameObject gameObject, Vector3[] to, float time);
LeanTween.moveSplineLocal(GameObject gameObject, Vector3[] to, float time);
LeanTween.moveX(GameObject gameObject, float to, float time);
LeanTween.moveX(RectTransform rectTrans, float to, float time);
LeanTween.moveY(GameObject gameObject, float to, float time);
LeanTween.moveY(RectTransform rectTrans, float to, float time);
LeanTween.moveZ(GameObject gameObject, float to, float time);
LeanTween.moveZ(RectTransform rectTrans, float to, float time);

특정 지점으로 이동할 수 있게 하는 함수들이다.

한 축만 움직이게끔 한다던가, RectTransform 형을 받아 Canvas 상의 위치를 조절할 수도 있다.

---

Rotate

LeanTween.rotate(RectTransform rectTrans, Vector3 to, float time);
LeanTween.rotate(RectTransform rectTrans, float to, float time);
LeanTween.rotate(GameObject gameObject, Vector3 to, float time);
LeanTween.rotateAround(RectTransform rectTrans, Vector3 axis, float to, float time);
LeanTween.rotateAround(GameObject gameObject, Vector3 axis, float add, float time);
LeanTween.rotateAroundLocal(RectTransform rectTrans, Vector3 axis, float to, float time);
LeanTween.rotateAroundLocal(GameObject gameObject, Vector3 axis, float add, float time);
LeanTween.rotateLocal(GameObject gameObject, Vector3 to, float time);
LeanTween.rotateX(GameObject gameObject, float to, float time);
LeanTween.rotateY(GameObject gameObject, float to, float time);
LeanTween.rotateZ(GameObject gameObject, float to, float time);

특정 각도로 회전할 수 있게 하는 함수들이다.

한 축만 회전한다던가, 축을 기준으로 주위 회전을 할 수도 있다.

 

LeanTween.rotate(cube, new Vector3(0f, 1080f, 0f), 2f).setEaseInOutQuad();

---

Scale

LeanTween.scale(RectTransform rectTrans, Vector3 to, float time);
LeanTween.scale(GameObject gameObject, Vector3 to, float time);
LeanTween.scaleX(GameObject gameObject, float to, float time);
LeanTween.scaleY(GameObject gameObject, float to, float time);
LeanTween.scaleZ(GameObject gameObject, float to, float time);

특정 크기로 변경하는 함수들이다.

한 축만 조절할 수도 있다.

 

LeanTween.scaleX(cube, 3f, 2f).setEaseInExpo();

---

Color

LeanTween.color(GameObject gameObject, Color to, float time);
LeanTween.color(RectTransform rectTrans, Color to, float time);
LeanTween.colorText(RectTransform rectTransform, Color to, float time);

특정 색상으로 변경하는 함수들이다.

오브젝트 뿐만 아니라, Graphic 컴포넌트(Text, Image, TMP, ...)에도 적용할 수 있다.

※ Material 색상 변경 시 Instance가 생성된다.

 

LeanTween.color(cube, Color.red, 2f).setEaseOutBounce();

---

Pause / Resume/ Cancel

LeanTween.pause(GameObject gameObject);
LeanTween.pauseAll();

LeanTween.resume(GameObject gameObject);
LeanTween.resumeAll();

LeanTween.cancel(GameObject gameObject);
LeanTween.cancelAll();

특정 오브젝트의 전환을 일시정지 / 계속 / 취소 하는 함수들이다.

모든 오브젝트를 한번에 조절할 수도 있다.

 

using UnityEngine;

public class LeanTweenManager : MonoBehaviour
{
    public GameObject cube; //움직일 오브젝트
    public Transform destination; //목표 지점

    private void Start()
    {
        LeanTween.move(cube, destination.position, 2f).setEase(LeanTweenType.easeOutBounce);
        Invoke("pause", 1f); //1초뒤 일시정지
        Invoke("resume", 2f); //2초뒤 계속
    }

    private void pause() => LeanTween.pause(cube);
    private void resume() => LeanTween.resume(cube);
}

---

위에서는 핵심 기능만 설명했지만

LeanTween, LTDescr 스크립트를 열어보면 더 많은 기능들을 확인할 수 있다.