일정시간 동안 숫자 증가시키는 UI

 

보통 이러한 기능은 타겟으로 하는 라벨만 다를 뿐, 여러 클래스에서 사용할 가능성이 높다.

 

 

/**
 * @param subject 스케쥴러를 실행할 주체
 * @param start 시작 값
 * @param add 시작 값에 추가할 변화 값
 * @param duration 지속시간
 * @param label 타겟 라벨
 * @returns 스케쥴러
 */
public static MoneyCounter(subject:any, start:number, add:number, duration:number, label:cc.Label){
    let time = 0;       // 누적 시간
    let current = 0;    // 누적 시간에 따른 현재 값
    
    let counter = function() {
        time += cc.director.getDeltaTime();
        if (time >= duration){
            label.string = StringUtil.ToCommaString(start + add);
            subject.unschedule(counter);
        }
        else {
            current = Math.floor(start + add * time / duration);
            label.string = StringUtil.ToCommaString(current);
        }
    }
    
    subject.schedule(counter, cc.director.getDeltaTime());
    return counter;
}

보통 이러한 함수는 전역에서 접근할 수 있는 클래스에 static 함수로 구현해놓고 쓴다.

 

cc.tween을 쓰는 방법도 있지만, schedule을 사용하는 방식으로 구현했기 때문에

 

스케쥴을 실행하는 주체를 매개변수로 받아서 해당 주체가 실행하도록 한다.

 

중간에 ToCommaString은 number 250을 string 250.00 으로 변환해주는, 마찬가지로 커스텀 함수다.

 

 

for (let i = 0; i < this.labels.length; ++i){
    if (this.counters[i] != null)
        this.unschedule(this.counters[i]);
        
    let start = StringUtil.ToNumber(this.labels.string);
    let add = stepValues[idx++] - start;
    this.counters[i] = Util.MoneyCounter(this, start, add, 0.5, this.labels[i]);
}

그리고 위와 같이 사용하면 된다.

 

MoneyCounter를 실행할 때 시작된 스케쥴을 받아놨다가

 

다음 스케쥴이 시작되면 직전의 스케쥴을 중단시키고 그 값을 이어받아서 새롭게 스케쥴을 시작한다.

 

이렇게해야 숫자가 끝까지 올라가지 않았을 때, 버튼을 클릭해서 스케쥴을 새로 시작해도 부드럽게 이어나갈 수 있다.

 

중간의 ToNumber 함수는 ToCommaString으로 변환돼었던 string 250.00을 다시 number 250으로 변환해주는 함수다.