★ 11. [NGUI] iTween

iTween, iTween Path, NGUI Tweener

# 트위닝

트위닝이란 게임에서 사용되는 오브젝트의 시간당 변화를 의미합니다.

일정 시간동안 크기, 위치, 방향 등의 움직임을 모두 트윈이라 하며 게임에서는 이러한 움직임이 매우 많이 사용됩니다. 오브젝트 뿐만 아니라 오디오나 카메라에서도 사용됩니다.

# iTween

유니티에서 트위닝을 돕는 플러그인 중 인기가 많은 iTween에 대해서 살펴보겠습니다. iTween 외에도 다양한 플러그인이 존재합니다. 대부분 무료이고 성능의 차이가 있다고 하지만 최근 버전이 높아지면서 그 차이는 느끼기 힘들어졌습니다. 에셋스토어에서 무료로 다운 받아 사용할 수 있습니다.

http://www.pixelplacement.com/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 등을 사용합니다. 이 외에도 많은 함수들이 존재하고 위에서 언급한 itween 홈페이지에서 자세한 설명을 볼 수 있습니다. 많이 사용되는 함수 중에는 Move, Rotate, Scale 외에 Shake 등이 있습니다. 게임 중 캐릭터가 피해를 입거나 거대한 적군이 몰려오는 상황에서 Shake 함수로 카메라를 적절히 흔들거나 오브젝트를 흔들면 쉽게 느낌 있는 효과를 표현할 수 있습니다.

# 해시 테이블

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

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

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

# 이징(easing)

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

http://superkts.com/jquery/@easingEffects 사이트에 각 이징 타입별로 어떤 효과를 내는지 예제를 통해 바로 확인해보실 수 있습니다.

# 정지하기

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

# iTween path

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

http://www.pixelplacement.com/site/2010/12/03/visual-editor-for-itween-motion-paths/
링크를 참조하시면 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 Tweener

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

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

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

참고한 사이트 URL :

http://teddy.tistory.com/entry/itween-path-%EC%82%AC%EC%9A%A9%EB%B2%95