[Unity3D] NGUI – Popup 애니메이션 효과주기

2014-03-18 글쓴이 TED HONG

[Unity3D] NGUI – Popup 애니메이션 효과주기

NGUI 에서 제공하는 TweenScale 을 이용한 Popup 만들기

보통 NGUI를 이용해 팝업창을 만드는 때는

팝업을 만들고 GameObject 의 active 속성을 이용해 on/off 하는 방법을 사용합니다.

 

오늘은 여기에 간단한 애니메이션을 넣어서

이런 팝업창을 만들어 보겠습니다.

 

START! 

1. 우선 NGUI 를 이용해 팝업으로 사용할 오브젝트를 만듭니다.
저는 게임오버 팝업창을 만들었습니다.

2. 팝업 오브젝트에  UIScaleAnimation 이라는 스크립트를 연결해줍니다.

이 스크립트가 없다고요?

당연히 없습니다. 아직 안만들었으니까요 ㅋㅋㅋㅋ

그냥 cs 파일만 생성 해서 연결해줍시다.

 

3. 제가 만든  UIScaleAnimation.cs 파일은 이렇습니다.

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class UIScaleAnimation : MonoBehaviour {

	void Awake () {
        setDisable();
	}

//SetActive(true) 호출 시 실행됩니다.
    void OnEnable()
    {
        open();
    }
//SetActive(false) 호출 시 실행됩니다.
void OnDisable ()
 {
 close();
 }

 // 팝업 열기
 void open()
 {
 init();

 }

 float duration = 0.2f; // 애니메이션의 길이입니다.(시간)
 float startDelay = 0.2f; // 애니메이션 시작 전 딜레이입니다.
 Vector3 scaleTo = new Vector3(1f, 1f, 1f); // 오브젝트의 최종 Scale 입니다.

 // 부풀었다가 줄어드는 효과를 위한 AnimationCurve 입니다.
 AnimationCurve animationCurve = new AnimationCurve(
 new Keyframe(0f, 0f, 0f, 1f), // 0%일때 0의 값에서 시작해서 
 new Keyframe(0.7f, 1.2f, 1f, 1f), // 애니메이션 시작후 70% 지점에서 1.2의 사이즈까지 커졌다가 
 new Keyframe(1f, 1f, 1f, 0f)); // 100%로 애니메이션이 끝날때는 1.0의 사이즈가 됩니다.

 // 초기화
 void init()
 {
 TweenScale tween = TweenScale.Begin(gameObject, duration, scaleTo);
 tween.duration = duration;
 tween.delay = startDelay;
 //tween.method = UITweener.Method.BounceIn; // AnimationCurve 대신 이것도 한번 써보세요.
 tween.animationCurve = animationCurve;

 }

 // 팝업 닫기
 public void close()
 {
   setDisable();
 }

 // 오브젝트 Disable
 void setDisable()
 {
 gameObject.transform.localScale = new Vector3(0, 0, 0);
 gameObject.SetActive(false);
 }
}

 

다른 강좌를 보니

tween.method = UITweener.Method.BounceIn

을 이용해서 팝업을 만들더군요~

그래서 써봤는데
제가 원하는 느낌이랑은 좀 맞지 않아서 AnimationCurve 를 조정해서 쓰기로 했습니다.
어떤 느낌인지는 직접 테스트해보세요~

그리고 이 스크립트를 이용하면 팝업 오브젝트에 TweenScale 컴포넌트를 따로 추가할 필요 없습니다.
그냥 이 스크립트만 쓰면 애니메이션이 실행 될 때 자동으로 추가됩니다.

그리고

void Awake ()
{
     setDisable();
}

을 하는 이유는 처음부터 팝업 윈도우가 보이지 않게 하고
Scale을 0,0,0 으로 만들어 주기 위함입니다.

3. 이제 테스트 해봅시다.

프로젝트를 플레이 시키고 팝업 오브젝트 선택 후 Inspector 창에서
오브젝트 이름 왼쪽에있는 체크박스를 선택/해제 해봅시다.

4. 잘 된다면 닫기 버튼에

using UnityEngine;
using System.Collections;

public class UIButtonClose : MonoBehaviour {

    public UIScaleAnimation anim;

    void OnClick () 
    {
        anim.close();
    }

}

스크립트를 달아서 버튼 클릭으로 팝업을 닫아봅시다.

 

잘 되시나요?

 

크게 어려운 것이 없으니 잘 되시겠죠? ^^:;;

 

 

NGUI 에서는 Scale 외에도 간단히 사용할 수 있는 여러가지 애니메이션을 제공합니다.

자세한 것은 http://www.tasharen.com/ngui/docs/class_u_i_tweener.html

를 참고하시기 바랍니다.

깊이 알아보지 않아 모르겠지만 사용방법은 대부분 비슷한 것 같네요~

 

이상입니다~

 

고맙습니다 :)

 

 

by Ted, 20140318