[ Unity ] 롤링되는 숫자 만들기

글 제목을 어떤 것으로 해야 될지 어렵네요...

이번 Unity3D 튜토리얼 에서는 일정 시간 동안 숫자가 롤링되며 원하는 값으로 변하는 것을 만들어 보겠습니다.

예를 들면 '0 이란 숫자에서 100 이라는 숫자로 변하는데 5초의 시간이 걸렸으면 좋겠다.' 한다면 1초당 20씩 증가하게 될 테고 0.1초당 2씩 증가하게 되겠습니다.

글로 설명하는 것 보다는 눈으로 확인하는 것이 더 좋을듯한데 차후에 샘플을 제작하여 올려보겠습니다.

그럼, 소스 코드 공개로 시작하겠습니다.
//--------------------------------------------------- // // Copyright © 2014 berabue@gmail.com // //--------------------------------------------------- using UnityEngine; using System.Collections; public class QbRollingNumbers : MonoBehaviour { public GUIText[] m_Label; public float m_During = 1.0f; private float[] m_fValue; void Awake() { int len = m_Label.Length; if ( len != 0 ) { m_fValue = new float[len]; } } /// <summary> /// 롤링을 사용하지 않고 값 초기화. /// </summary> public void InitValue(int _pos, int _value) { m_Label[_pos].text = _value.ToString(); } /// <summary> /// During(시간)을 사용하여 갱신 요청. /// </summary> public void MoveToTime(int _pos, int _value) { m_fValue[_pos] = _value; StartCoroutine("UpdateMoveToTime", _pos); } private IEnumerator UpdateMoveToTime(int _pos) { float value = m_fValue[_pos]; // 최종 값 float prevValue = float.Parse(m_Label[_pos].text); // 현재 표시 값(변경 이전 값) float distance = Abs(prevValue - value); // 두 값 사이의 거리 float limitTime = m_During; // 해당 시간 동안 롤링 while(true) { yield return null; // deltaTime동안 이동 해야 할 거리를 계산 float dis = distance * (Time.deltaTime / m_During); // 라벨에 쓰여진 숫자(prevValue)에서 목표 값(value)까지 dis 만큼 이동한 값을 얻는다 prevValue = GetMovedValue(prevValue, value, dis); // 얻은 값을 라벨에 입력 m_Label[_pos].text = ((int)prevValue).ToString(); // 지정 된 시간이 지나면 롤링 종료 if ( limitTime < 0.0f ) break; limitTime -= Time.deltaTime; } // 예외처리 // 값이 잘못 입력되었을 때를 대비한다 m_Label[_pos].text = value.ToString(); } // 절대값. private float Abs(float _value) { return ( _value > 0 ) ? _value : -(_value); } // _distance 만큼 이동 된 결과를 return. private float GetMovedValue(float _start, float _end, float _distance) { // 값이 동일하면 목표값을 return if ( _start == _end ) return _end; // 시작점과 도착점의 거리 차이를 구함 float value = Abs(_start - _end); // 두 지점 차이의 거리가 이동 해야 할 거리보다 적으면 목표 값 return if ( value < _distance ) return _end; // 시작 값이 목표 값보다 작을 경우 시작값에 이동거리를 더하여 return if ( _start < _end ) return _start + _distance; // 시작 값이 목표 값보다 클 경우 시작값에 이동거리를 빼고 return return _start - _distance; } }
주석을 보시면 어떻게 동작되는지 어느정도 감이 오실겁니다.

코드에 대한 설명을 조금하자면...
public GUIText[] m_Label; public float m_During = 1.0f; private float[] m_fValue;
Unity 하이라이키 탭에서 GameObject를 생성하시고 해당 소스를 컴포넌트로 추가하면 GUIText와 float 타입의 시간을 입력 할 수 있는 칸이 인스펙터상에서 출력이 됩니다.
원하는 라벨만큼 GUIText와 연결을 해주시고 숫자가 롤링 될 시간을 입력하시면 됩니다.
float[] m_fValue의 경우에는 현재 값을 저장하는 용도로 인스펙터에는 출력되지 않습니다.
NGUI를 사용하신다면 GUIText를 UILabel로 변경해 주시기만하면 사용이 가능합니다.


void Awake() { int len = m_Label.Length; if ( len != 0 ) { m_fValue = new float[len]; } }
초기화 부분 입니다. 인스펙터에서 연결한 라벨만큼 저장공간을 생성하는 단순한 부분입니다.

public void InitValue(int _pos, int _value) { m_Label[_pos].text = _value.ToString(); }
값을 초기화 하는 부분으로 외부 스크립트에서 접근이 가능하도록 public으로 선언되어 있습니다.
_pos의 경우에는 라벨 index번호와 일치하게 전달이 되어야 합니다.
해당 함수로 값을 입력시 롤링이 되지 않고 값이 바로 적용 됩니다.

public void MoveToTime(int _pos, int _value) { m_fValue[_pos] = _value; StartCoroutine("UpdateMoveToTime", _pos); }
외부 스크립트에서 롤링 시키며 값을 변경할 라벨 index와 값을 전달받아 해당 값을 저장 및 코루틴을 실행하여 롤링을 시작시킵니다.

private IEnumerator UpdateMoveToTime(int _pos) { float value = m_fValue[_pos]; // 최종 값 float prevValue = float.Parse(m_Label[_pos].text); // 현재 표시 값(변경 이전 값) float distance = Abs(prevValue - value); // 두 값 사이의 거리 float limitTime = m_During; // 해당 시간 동안 롤링 while(true) { yield return null; // deltaTime동안 이동 해야 할 거리를 계산 float dis = distance * (Time.deltaTime / m_During); // 라벨에 쓰여진 숫자(prevValue)에서 목표 값(value)까지 dis 만큼 이동한 값을 얻는다 prevValue = GetMovedValue(prevValue, value, dis); // 얻은 값을 라벨에 입력 m_Label[_pos].text = ((int)prevValue).ToString(); // 지정 된 시간이 지나면 롤링 종료 if ( limitTime < 0.0f ) break; limitTime -= Time.deltaTime; } // 예외처리 // 값이 잘못 입력되었을 때를 대비한다 m_Label[_pos].text = value.ToString(); }
가장 핵심적인 코루틴 입니다.
현재 값, 최종 값, 이동 할 거리등을 알아내어 입력 된 시간(m_During)동안 롤링을 시키면서 값을 자연스럽게 변화시킵니다.

private float GetMovedValue(float _start, float _end, float _distance) { // 값이 동일하면 목표값을 return if ( _start == _end ) return _end; // 시작점과 도착점의 거리 차이를 구함 float value = Abs(_start - _end); // 두 지점 차이의 거리가 이동 해야 할 거리보다 적으면 목표 값 return if ( value < _distance ) return _end; // 시작 값이 목표 값보다 작을 경우 시작값에 이동거리를 더하여 return if ( _start < _end ) return _start + _distance; // 시작 값이 목표 값보다 클 경우 시작값에 이동거리를 빼고 return return _start - _distance; }
위 코루틴에서 시작 값, 최종 값, 이동할 거리를 전달받아 각종 예외처리를 거처 이동시킨 값을 리턴하는 부분입니다.



원본 소스에는 시간으로 이동시키는 코드 이외에 프레임을 기준으로 이동시키는 코드가 있었지만 정리가 제대로 되지 않은 관계로 시간으로 동작하는 부분만을 공개합니다.

동작 테스트는 여러번 해보았지만 잘못되거나 비효율적인 부분이 있을 수 있습니다.
그런 부분이 보이시면 말씀부탁드리겠습니다!