비동기 함수 실행 방법들

유니티에서 Update를 쓰지 않고 코루틴만을 사용해 비동기식 프로그래밍을 주로 하다보니

 

코코스 크리에이터에서도 그러한 스타일을 유지하고 싶었다. 그리고 현재까지는 세 가지의 방법을 사용해봤다.

 

개념 설명까지 하기에는 많이 복잡해서 더 공부해야되서 사용법만 간단하게 정리해본다.

 

아래 방법들은 주로 어떤 노드의 상태 변화나 연출 등에 사용해봤고 큰 문제를 겪진 않았다.

 

파일 입출력이나 서버로부터 패킷 대기와 같은 상황들에서는 좀 더 까다롭게 접근할 필요가 있다.

 

 

1. async, await

 

async Test(){
    await this.Sleep(2000);
    console.log("2초 지났음");
}
Sleep(ms : number){
    return new Promise(resolve => setTimeout(resolve, ms));
}

 

asnyc, await는 자바스크립트의 비동기 처리 패턴이다. 보통은 서버쪽에서 많이 다루는것 같다.

 

어떤 함수를 비동기로 실행하려면 그 앞에 await 키워드를 붙이고, 이러한 비동기 실행이 포함된 함수는 앞에 async 키워드를 붙인다.

 

그리고 await가 붙은 함수는 반드시 Promise라는 비동기 작업의 단위를 리턴해야한다.

 

resolove는 작업의 결과물, 작업의 성공 여부라고 생각하면 된다. 

 

현재 resolve에 대한 정의는 없기 때문에 await this.Sleep(2000) 코드는

 

유니니 코루틴에서 yield return new WaitForSecond(2f)와 동일한 기능을 한다고 볼 수 있다.

 

 

async Test(){
    await this.Sleep(2000, 0)
    .then(() => { console.log("RESOLVE") })
    .catch(() => { console.log("REJECT") });
}
Sleep(ms : number, temp:any){
    return new Promise((resolve, reject) => {
        if (temp > 0) setTimeout(resolve, ms);
        else reject();
    });
}

 

좀 더 응용하면 Promise의 반환 값을 성공 여부인 resolve와 reject로 나눌 수 있고, 이에 대응하는 then과 catch 를 정의할 수 있다.

 

반환 값을 성공과 실패. 두 가지 케이스밖에 처리할 수 없다보니

 

서버 로직이 아닌 클라이언트의 노드 연출같은 로직에 사용하기에는 적합하지 않은것 같다.

 

 

 

2. schedule

 

https://docs.cocos.com/creator/manual/en/scripting/scheduler.html

 

코코스 크리에이터에서 제공하는 타이머 API. cc.Component를 상속받은 클래스에서만 사용이 가능하다.

 

 

this.winEffect.active = true;
this.scheduleOnce(() => { this.winEffect.active = false; }, 1.0);

 

이런 식으로 간단하게 함수 실행에 딜레이를 줄 수 있다.

 

 

let array = [1,2,3,4,5];
let index = -1;

let counter = function() {
    if (++index > array.length - 1)
        this.unschedule(counter);
    else
        console.log("counter " + array[index]);
}

this.schedule(counter, 0.5);

 

반복 실행은 scheduleOnce가 아닌 schedule을 사용하면 된다.

 

파라미터에 첫 번째는 실행할 콜백함수가 들어가고

 

뒤에는 순서대로 interval(실행간 간격), repeat(반복 횟수), delay(첫 실행의 딜레이)가 들어간다.

 

코드에서 counter는 자신을 실행하고 있는 스케쥴러를 unschedule로 취소할 수도 있다.

 

 

schedule을 사용할 때 가장 주의해야할 점은, 해당 스케쥴을 어떤 클래스가 컨트롤하는지 신경써야한다.

 

만약 스케쥴러에 들어갈 함수를 구현하는 클래스와 스케쥴러를 컨트롤하는 클래스가 다르다면 문제가 생길 수 있다.

 

이럴때는 함수를 구현하는 클래스에게 (또는 함수 파라미터로) 스케쥴러를 컨트롤하는 클래스의 this를 전달해야한다.

 

 

 

3. cc.Action과 cc.Sequence

 

The action system is deprecated, and will be gradually removed in the future. It is recommended to use the cc.tween instead.

 

코코스 크리에이터 공식 레퍼런스를 보면 cc.tween을 사용할 것을 추천하고 있다.

 

 

 

4. cc.tween

 

OpenGiftBox(open:CallableFunction, collect:CallableFunction, next_level:CallableFunction) : cc.Tween{
    return cc.tween(this.selectedBox)
        .delay(1.0)
        .call(() => {
            open();
        })
        .delay(1.5)
        .call(() => {
            collect();
        })
        .delay(1.0)
        .call(() => {
            next_level();
        })
        .start();
}

 

세 번째 방법은 cc.tween 이다.

 

delay와 call 만을 이용해서 시간의 흐름에 따른 코드 실행을 매우 간편하고 가독성 있는 형태로 작성할 수 있다.

 

그리고 노드의 이동, 회전, 컬러 변경과 같은 기본적인 트윈 효과와 결합해서 쓸 수도 있다.

 

이 외에도 아래와 같은 추가 기능들이 있다.

 

 

Methods

• constructor
• stopAll Stop all tweens
• stopAllByTag Stop all tweens by tag
• stopAllByTarget Stop all tweens by target
• then Insert an action or tween to this sequence
• target Set tween target
• start Start this tween
• stop Stop this tween
• tag Sets tween tag
• clone Clone a tween
• union Integrate all previous actions to an action.
• bezierTo Sets target's position property according to the bezier curve.
• bezierBy Sets target's position property according to the bezier curve.
• flipX Flips target's scaleX
• flipY Flips target's scaleY
• blink Blinks target by set target's opacity property
• to Add an action which calculate with absolute value
• by Add an action which calculate with relative value
• set Directly set target properties
• delay Add an delay action
• call Add an callback action
• hide Add an hide action
• show Add an show action
• removeSelf Add an removeSelf action
• sequence Add an sequence action
• parallel Add an parallel action
• repeat Add an repeat action.
• repeatForever Add an repeat forever action.
• reverseTime Add an reverse time action.