[펌] NGUI 쉽게 말풍선 만들기

다루는 내용

- Sprite Slice

- Anchor

- UI Tweener

- TypeWriter Effect

말풍선은 게임의 많은 곳에서 사용된다. 튜토리얼을 진해할 때, NPC와 대화 할 때 등.. 이러한 말 풍선을 NGUI를 사용하면 쉽게 만들 수 있다. 아래와 같이 말풍선이 커지는 트위닝과 글씨가 자동으로 써지는 타이핑 효과 그리고 말풍선 배경이 문구의 크기와 위치에 맞게 변하도록 하는 앵커의 개념을 이해한다.

준비물

NGUI, 캐릭터 이미지, 말풍선 이미지, 폰트 (NGUI는 상용 플러그인이므로 예제를 첨부할 수 없음.) 

NGUI 아틀라스 만들기

먼저 위의 그림들을 NGUI를 활용하여 아틀라스를 만든다. 메뉴의 NGUI - Open - Atlas Manker 를 차례로 클릭하여 아틀라스 메이커를 실행한다. 그리고 사용할 이미지들을 선택 하면 아래 그림처럼 Add가되고 선택 완료 후 끝으로 Create 버튼을 클릭하면 아틀라스를 저장할 곳을 묻는다. 적당한 곳에 저장하면 끝난다.

나인패치(9Patch)

추가한 말풍선 스프라이트는 작은 크기인데 어떻게 글자 수에 맞워서 늘어날 수 있을까? 그리고 늘어난 이미지는 왜 꺠져보이지 않을까? 말풍선을 9개 조각으로 나누어 활용하였기 때문이다. 나인패치 개념은 스프라이트 하나를 9족가으로 나무어 각 모서리 4부분은 고정으로 사용하고 나머지 5부분은 늘어나는 데 사용된다. 말풍선 뿐아니라 게임에서 사용하는 버튼도 9패치를 사용할 수있다. 여러 상황마다 버튼의 크기가 달라질 수 있는데 그때마다 새로운 버튼을 만들어 추가하는 것은 비효율적이다. 나인 패치를 이용하면 하나의 버튼 스프라이트로 다양한 크기의 버튼을 만들어낼 수있다. 

스프라이트를 9조각으로 나누는 방법은 간단하다. 생성한 스프라이트를 선택하고 Edit 버튼을 누른다. 그럼 UI Atlas 인스펙터가 보인다. 중간에 Border 값 들을 조절하면 점선으로 나눌 부분을 지정할 수 있게된다. 9개로 나눌 부분을 지정이 끝났다면 다시 스프라이트로 돌아와 스프라이트의 Type를 Sliced로 변경한다. 그리고 아래의 Size 에서 크기를 조절하면 9개의 영역을 나눈데로 크기가 변하는 것을 확인할 수 있다.

앵커(Anchor)

텍스트가 말풍선 스프라이트 밖으로 삐져나가면 안된다. 말풍선은 말풍선안의 텍스트 포함해야한다. 이것을 해결하기 위해 2가지 방법이 있다. 먼저 말풍선의 크기를 고정하고 메세지 라벨의 크기도 그 안에서만 보이도록 하는 것이다. 하지만 고정된 말풍선 영역 안에서 텍스트의 양이 많다면 자연적으로 텍스트가 작아지는 단점이있다. 이 방법을 사용하려면 라벨의 Overflow를 shrink로 설정하고 Size를 말풍선에 맞게 수정해야 한다. shrink로 설정하였기 때문에 텍스트는 설정 영역 밖으로 나가지 않는다. 또 한가지 방법은 텍스트는 글자 수에 따라 자유롭게 늘어날 수있고 이것에 대응하여 말풍선 배경의 사이즈가 조절되는 방식이다. 첫 번째 방법은 텍스트가 많을 경우 글씨 크기가 작아지는 단점이있다. 그래서 보통 두 번째 방법을 사용한다. 크기가 자유로은 텍스트의 크기를 말풍선이 따라가기 위해서 필요한 것이 앵커이다. 말풍선은 이미 9패치로 자유롭게 크기 조절이 가능한 상태이다. 그러므로 말풍선 스프라이터의 앵커를 텍스트에 맞추면 된다. 라벨의 Overflow는 Resize freely로 설정한다. 

앵커를 설정하는 것은 어렵지 않다. 위 그림처럼 말풍선 스프라이트의 인스펙터에서 간단히 설정한다. 타입은 None, Unified, Advenced 가 있다. None는 앵커를 사용하지 않는 것이다. Unfied는 단일 타겟을 4방향에서 지정한 수치만큼 앵커를 잡는 것이다. 마지막으로 Advenced는 4방향을 각각 원하는 타겟을 잡고 수치를 지정하는 방식이다. 타겟을 서로 다르게 지정할 수도있고 지정하지 않을 수도있다. Excute 는 앵커가 동작하는 시점을 말한다. OnEnable 은 해당 오브젝트가 꺼진상태에서 활성화 될 때 호출, OnUpdate는 매 프래임마다, OnStart는 씬이 시작할 때 한 번 호출된다. 이번 예제에서는 텍스트의 크기가 시간이 따라 변화하면서 그에 맞추어 말 풍선 스프라이트의 앵커도 따라가야하기 때문에 OnUpdate로 설정하였다.

Tween Scale

NGUI의 라벨이나 스프라이트를 애니메이션할 수있게 돕는 컴포넌트이다. 크기에대한 애니메이션을 Tween Scale로 처리하고 그 밖에 Tween Position으로 위치 애니메이션, Tween Alpha로 투명도 애니메이션을 할 수 있다. 이번 예제에서 사용하는 Tween Scale은 말풍선이 캐릭터 위에서 커지는 애니메이션을 한다.

스케일 애니메이션을 할 말풍선 스프라이트에 Tween Sacle 컴포넌트를 추가한다. From 에서 시작할 크기를 지정하고 To에 끝나는 크기를 지정한다. 시작 크기를 0.5 끝 크기를 1로 설정하였다. 이렇게히면 0.5에서 1까지 말풍선의 크기가 변하게 된다. Plya Style 은 애니메이션을 반복할지 여부를 설정하는 옵션이다. 기본적으로 Once로 설정이 되어있어서 애니메이션은 한 번만 실행된다. Loop는 애니메이션을 계속 반복하는 것이고 PingPong은 From -> To ->From ->To 반복적으로 From 에서 To 그리고 To 에서 From 으로 왕복한다. Animation Curve에서는 애니메이션 이징 그래프가 등장한다. 시간에 따른 변화량을 그래프로 표현한 것이다. 클릭해면 편집창이 뜨고 초록색 선위에 오른쪽버튼을 클릭하여 Add key를 선택한다. 그리고 선을 자유자제로 조절할 수있다. Duration은 실행 시간이다. 기본적으로 1초가 세팅되어있다. Start delay는 지연시간을 의미한다. Start delay 시간 만큼 지난 후 애니메이션을 실행 시킬 수 있다. Ignore TimeScale 옵션을 체크하면 타임스케일의 영향을 받지 않고 애니메이션을 한다. 예를 들어, 게임 중 볼륨이나 진동 옵션을 변경하기 위해 설정 대화상자를 띄었을 때 게임은 일시 정지되고 설정 대화상자 안의 스프라이트나 라벨들은 시간에 따른 스케일이나 위치등의 애니메이션을 하기위해서는 해당 옵션이 체크되어있어야 한다. 마지막으로 On Finished 는 애니메이션이 종료된 후 호출할 메서드를 선택할 수 있다. 매서드가 포함된 스크립트가 붙은 오브젝트를 드래그하여 넣고 매서드를 선택하면 된다.

원하는 상황에서 Tween 실행

위 그림에서 컴포넌트의 체크가 꺼져있다. 그러므로 실행되지 않는다. 게임중에 켜는 시점을 코드로 제어하여 컴포넌트를 켤 수 있다. 그러면 원하는 상황에 애니메이션이 가능하다. 그런데 애니메이션이 끝나고 다시 켠다고해서 애니메이션이 동작하지는 않는다. 이유는 컴포넌트가 켜지는 순간 인스펙터의 옵션들의 정보를 바탕으로 애니메이션이 시작되는데 애니메이션이 끝나고 나중에 다시 켜더라도 옵션들은 이전의 정보이기 때문이다.

해결책

컴포넌트를 켜고 끄는 방식으로 애니메이션을 제어하지 말고 ResetToBeginning 과 PlayForward를 사용하여 제어한다. 위처럼 인스펙터에서 옵션들을 설정한 뒤 컴포넌트를 끈 상태로 놔두고 게임을 실행한다. 코드에서는 해당 애니메이션을 할 상황이 됐을 때, PlayForward 를 호출 해 애니메이션을 실행한다.

?

1 2	tweenScale.ResetToBeginning(); tweenScale.PlayForward();

다시 사작하고 싶다면 ResetToBeginning 으로 초기화 후 PlayForward로 실행할 수 있다. 오래된 NGUI 버전에서는 Play로 실행했지만 현재는 PlayForward 와 PlayReverse 로 분리되었다. 반대로도 애니메이션을 실행할 수 있는 것이다. PlayReverse 를 사용해 애니메이션을 반대로 실행했다면 이 상황에서 PlayForward를 하고싶을 떄에는 굳이 ResetToBeginning 를 할 필요 없이 바로 PlayForward해도 동작한다.

타이핑 효과

Typewriter Effect 컴포넌트를 추가하여 텍스트에 타이핑 효과를 적용할 수 있다. charsPerSecond 옵션은 초당 표시할 글자 수이다. 수치가 높을 수록 빠른 타이핑 효과가 나타난다. fadeInTime 옵션은 글자가 알파가 적용되어 나타나는 시간이다. 딱딱한 타이핑효과가 아니라 부르럽게 텍스트가 나타난다. delayOnPeriod 옵션은 . ! ? 로 문장이 끝났을 때 지연되는 시간이다. 설정된 시간이 지난 후 다은 타이핑 효과가 계속 된다. delayOnNewLine 옵션은 텍스트가 다음 행으로 넘어갈 때 지연되는 시간이다. 그리고 타이핑 효과에도 scrollView 옵셥으로 NGUI 스크롤을 적용할 수 있다. 

타이핑 효과의 역설

텍스트에 타이핑 효과를 적용하는 이유는 한 글자씩 보이게 하기 위해서인데, 그러기 위해선 텍스트를 할당해야 한다. 하지만 할당하는 순간 UI에 텍스트는 이미 모두 보여지는 상태이다. 잠깐이지만 텍스트들이 모두 보이고 없어진다 그리고 타이핑 효과가 진행된다. 이것 때문에 말풍선 전체가 잠깐 깜빡이는 것처럼 보인다. 이것을 해결하기 위해 순서를 바꿔서 실행한다. 기존에는 스케일 커지기 -> 텍스트 할당 -> 타이핑 효과의 순서로 진행 했다. 이것을 텍스트 할당 -> 타이핑 효과 -> 스케일 애니메이션의 순서로 변경하였다. 물론 이것은 편법이다. 

출처: http://teddy.tistory.com/entry/NGUI-쉽게-말풍선-만들기 [Teddy Games]