iTween, iTween Path, NGUI Tweener

트위닝

트위닝이란 게임에서 사용되는 오브젝트의 시간당 변화를 의미한다. 일정시간동안 크기, 위치, 방향 등의 움직임을 모두 트윈이라한다. 게임에서는 이러한 움직임이 매우 많이 사용된다. 오브젝트 뿐아니라 오디오나 카메라에도 사용된다.

iTween

그 중 인기가 많은 itween에 대해서 살펴본다. 유니티에서 트위닝을 돕는 플러그인은 itween 이외에 다양한 플러그인이 존재한다. 대부분 무료이며 성능의 차이가 있다고하는데 최근 버전이 높아지면서 그 차이는 느끼기 힘들다. 에셋스토어에서 무료로 다운받아 사용할 수있다. itween 홈페이지에서 사용설명과 예제등을 제공한다.

사용법

iTween.MoveBy(gameObject, iTween.Hash("x", 2, "easeType", "easeInOutExpo", "loopType", "pingPong", "delay", 0.1));

위 코드는 iTween의 MoveBy를 사용하여 게임오브젝트를 움직이는 코드이다. 대부분의 함수들은 위 코드처럼 파라미터가 2개이다. 첫 번째 파라미터로 트위닝할 게임오브젝트를 입력하고, 두 번째 파라미터로 해시 테이블을 입력한다. 위 코드를 실행시키면 0.1초간 대기(delay) 후 게임오브젝트를 x 축의 방향으로 2만큼 움직인다. 이것을 왕복(pingPong)하며 반복한다.

트윈 종류

MoveBy 함수는 상대적인 위치로 게임오브젝트를 움직이지만 원하는 좌표로 움지이려면 MoveTo를 사용한다. 회전을 하려면 RotateTo, RotateBy 등을 사용하고 크기를 조절하려면 ScaleTo, ScaleBy 등을 사용한다. 이밖에 많은 함수들이 존재하고 이곳 에서 자세한 설명을 볼 수있다. 많이 사용되는 함수중에는 Move, Rotate, Scale 외에 Shake가 있다. 게임 중 캐릭터가 피해를 입거나 거대한 적군이 몰려오는 상황에서 Shake함수로 카메라를 적절히 흔들거나 오브젝트를 흔들면 쉽게 괜찮은 효과를 표현할 수있다.

해시테이블

해시 테이블에 어떠한 값을 넣을지에 따라 게임오브젝트를 다양하게 트위닝 할 수있다. 해시 테이블에는 키 벨류 형태로 값을 적용하는데 순서는 무관하며 기본 값이 존재한다. 

iTween.MoveBy(gameObject, iTween.Hash("x", 2, "easeType", "easeInOutExpo", "loopType", "pingPong", "delay", .1));

해시테이블 부분을 보면 키 부분은 스트링형태이고 벨류 부분은 관련된 자료형을 값을 입력한다. 대부분 직관적인 키워드로 되어있어 금방 이해할 수있다. 위 코드에서는 시간("time") 값을 지정하지 않았다. 값을 지정하지 않아도 디폴트 벨류로 1이 적용되어 게임오브젝트는 1초 동안 움직인다. 

이징(easing)

위 그림은 시간당 변화량을 그래프로 표현한 이징종류들이다. 해시 테이블의 "easeType"는 위 그림에서 하나를 선택할 수있다. 오브젝트를 트윈할 때 좀더 자연스럽고 다이나믹한 연출을 할 수있다.

정지하기

게임 오브젝트를 iTween으로 트윈하게 되면 iTween 컴포넌트가 해당 오브젝트에 붙는다. 이것은 트윈이 종료될 때 제거된다. 하지만 트윈이 종료되기 전에 멈추고싶다면 iTween.Stop(gameObject) 을 사용하여 게임 오브젝트에 붙은 iTween 컴포넌트를 제거할 수있다. 컴포넌트가 제거되는 순간 게임 오브젝트의 트윈은 멈추게된다. Destroy 함스를 이용해 컴포넌트를 제거해도 같은 효과를 얻을 수있다.

iTween path

iTween의 MoveTo 함수를 이용하여 게임 오브젝트를 원하는 위치로 움직였지만. 이것은 직선형태의 움직임이다. 곡선 형태의 움직임을 구현하려면 어떻게 해야하나? 예를 들어 탱크가 포탄을 발사하면 포탄은 포물선을 그리며 날아가야한다. iTween path는 게임 오브젝트의 포물선 움직임을 가능하게 한다. 또다른 방법으로는 포탄에 리지드바디(Rigidbody)컴포넌트를 붙여서 중력으로 자연스럽게 포물선 운동을 하게 할 수있다. 하지만 이 방법은 날아가는 포탄의 낙하지점을 정확히 판단하는데 어려움이 있다.  iTween path는 처음부터 낙하지점을 지정하기 때문에 포탄의 움직임을 쉽게 제어할 수있다.

iTween path 다운로드

iTween path 사용하기

먼저 게임 오브젝트에 iTween path 컴포넌트를 추가한다. 보통 빈 오브젝트를 생성하고 Path 들만 관리할 수있도록 한다. 혹은 움직일 해당 포탄 게임 오브젝트에 추가하여도 된다.

추가한 iTween path컴포넌트에서 path visible 이 체크되어있다면 위의 그림처럼 경로를 불 수있다. Path Name은 iTween path를 사용하는 다른 오브젝트와 구분하기위한 이름이다. path color 값으로 경로의 색을 지정할 수있다. 이 선은 Scene 뷰에서만 보이고 Game 뷰에서는 보이지 않는다. Node Count는 기본적으로 2개지만 포물선 움직임을 위해 3개로 설정하였다. 2개만 사용할 경우에는 굳이 iTween path를 사용하지 않고 그냥 iTween 만 사용해도 된다. 각각의 노드위치 값들을 바탕으로 포물선이 만들어지게 된다. 그리고 게임 오브젝트는 이 포물선을 따라 움직이게 된다.

iTween.MoveTo(gameObject, iTween.Hash("path", iTweenPath.GetPath("SpherePath"), "easeType", "easeOutCirc));

위 코드는 gameObject 를 지정한 Path를 따라 움직이게한다. iTween 의 MoveTo할수를 그대로 상요하였지만, 해시 테이블에서 iTween path를 입력하여 지정한 경로대로 게임 오브젝트를 움직이게 할 수있다. GetPath의 파라미터로 앞서 만든 path의 이름을 입력한다. 자연스러운 움직임을 위해 easeType을 easeOutCubic으로 지정하였다. 

ValueTo

게임 오브젝트 뿐아니라 시간당 변화가 필요한 값을 체크할 수있다. 예를 들어, 게임중 골드를 획득하여 UI에 골드수치가 증가하는 연출을 할때

public UILabel goldLabel;

void Start () 
{
    //2초 동안 0~100 수치를 트위닝함
    iTween.ValueTo(gameObject, iTween.Hash("from",0,"to",100,"onUpdate", "Counter", "delay",2,"time", 2));
}

//파라미터로 받은 값을 UI에 표시함, 주기적으로 호출됨
private void Counter(int moneyNum)
{
    goldLabel.text = moneyNum.ToString();
}

iTween의 ValueTo를 활용하면 위처럼 간단한 코드로 숫자가 카운팅되는 연출을 구현할 수있다.

NGUI Twenner

이제, iTween을 활용하여 게임 오브젝트를 위치, 크기, 회전등의 트위닝을 하는 방법을 알았다. UI 스프라이트나 텍스트 라벨도 게임 오브젝트이므로 3D 게임오브젝트와 똑같은 방식으로 트위닝 제어를 할 수 있다. 다만, NGUI를 사용하여 UI를 꾸몄을 경우 NGUI 자체에서 제공하는 트위너를 사용 하는 것이 더 유리한다. 

NGUI 트위너를 사용하면 위와같은 쫀쫀한 UI 연출을 코드로 작성할 필요없이 컴포넌트의 몇가지 옵션만 수정해서 구현할 수있다.

위의 팝업 연출에서 사용한 것은 NGUI Tween Scale 과 Tween Alpha 이다. 각각의 컴포넌트를 추가하고 알앚게 옵션만 조절하면 된다. 특이한점은 iTween 에서는 이징을 정해진 값을 사용했지만, NGUI Tweener 에서는 커텀으로 제어할 수 있다는 점이다. 대화상자 UI가 바운스하는 느낌을 연출하기 위해 이징 그래프를 굴곡이 생기게 만들었다.