cc.tween

1. 유니티 Dotween

 

 

유니티에서 범용적으로 사용되는 에셋 중에 Dotween 이라는 에셋이 있다. 거의 필수 에셋으로 취급받고 있다.

 

(UI를 포함하는) 어떤 오브젝트에 관한 컨트롤을 스크립트로 할 때 정말 편하게 사용할 수 있는 API다. 기능도 매우 다양하다.

 

트윈 간의 결합이나 콜백도 간단해서, 직관적이고 읽기 편한 코드를 추구하는 사람에게는 최고의 에셋인것 같다.

 

 

 

 

2. 코코스 크리에이터 cc.tween

 

그리고 코코스 크리에이터 v2.0.9 버전부터 dotween을 벤치마킹한 cc.tween이 업데이트됐다.

 

참고할 수 있는 레퍼런스 페이지는 두 개가 있다.

 

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

 

https://docs.cocos.com/creator/api/en/classes/Tween.html

 

 

 

기존에는 여러가지 action들을 묶어서 실행하는 방법은 cc.sequence 뿐이었는데

 

묶인 action들 사이에 딜레이를 넣거나, 타겟 노드를 중도에 변경하거나, 그 외의 작업들을 추가할수록 코드가 한없이 길어졌다.

 

cc.tween의 핵심은 기존의 action과 sequence를 사용한 코드를 간단하게 압축할 수 있다는 것이다.

 

 

cc.tween(this.wheel)
    .delay(0.8)
    .to(2.2, { angle:targetAngle }, { easing:"cubicOut"} )
    .call(() => { this.resultHighlight.active = true; callback(); })
    .start();

 

프로젝트에서는 이런 식으로 사용하고 있다. 코드에 대한 해석을 써보자면

 

0.8초 동안 delay(대기)하고서, 2.2초동안 this.wheel 노드의 rotation을 targetAngle 값으로 변화시킨다.

 

변화 폭은 easing 함수 중 하나를 적용할 수 있다. (Easing 함수는 시간 흐름에 따른 매개변수의 변화율을 의미하는 2차원 그래프)

 

그리고 2.2초 동안의 작업이 끝나면 콜백 함수를 호출할 수 있다. call()은 실행할 콜백 함수에 대한 정의.

 

가장 마지막에는 start()를 붙여서 조건들을 설정한 tween을 실행한다.

 

 

 

cc.tween(this.node)
    .delay(10.0)    // 10초 안에 터치가 없으면
    .call(() => { CountDown.Instance.Start(); })
    .delay(5)       // 5초 동안 카운트다운 나옴
    .call(() => { CountDown.Instance.Stop(); })
    .start();

 

꼭 노드의 이동, 회전 뿐만 아니라 함수를 지연호출 할 때도 schedule 대신에 cc.tween을 사용할 수 있다.

 

여기서의 delay는 유니티로 치면 yield return new WaitForSeconds(10.0f)와 비슷하다고 볼 수 있다.

 

 

 

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.

공식 레퍼런스를 보면 cc.tween에는 위와 같은 함수들이 존재한다.

 

모든 기능을 써보지는 못 했지만 기본적인 기능들은 존재하는 듯하다.

 

 

 

 

3. 현재까지 cc.tween 쓰면서 겪은 문제점들

 

새로운 문제가 생길 때마다 이 부분을 업데이트할 예정

 

 

(1) rotation

 

cc.tween(this.node)
    .to(1, { position: cc.v2(100, 100), rotation: 360 })
    .to(1, { scale: 2 })
    .start()

 

2.4 버전을 기준으로 하는 공식 레퍼런스를 보면 노드의 회전은 rotation:360과 같이 쓰라고 적혀있다.

 

 

하지만 rotation 프로퍼티는 v2.1.0 이후로 추천하지 않고, angle 프로퍼티를 대신 쓰도록 권장한다는 로그가 나온다.

 

중요한 건 기능도 제대로 동작하지 않는다는 것이다.

 

스크립트에서 rotation:360 이라고 작성해도 실제로 360도 회전하지 않는 결과가 나온다.

 

rotation:360 대신에 angle:360 을 사용하면 원하는 결과가 나온다.

 

 

 

(2) easing

https://easings.net/

https://docs.cocos.com/creator/2.4/api/en/classes/Easing.html

 

공식 레퍼런스 페이지에 easing 커브 그래프들과 각 easing 커브에 대한 설명이 있다.

 

 

cc.ease~~ 함수들은 action에 붙일 때 사용할 수 있다. 예를 들어 action.easing(cc.easeBounceOut()) 처럼.

 

하지만 cc.tween의 easing 프로퍼티에는 easing 커브 그래프의 string 키 값이 들어가야하는데,

 

그 key값과 위의 함수 이름이 다르다. key 값을 유추하는 방법이 있는데,

 

함수 이름이 easeInBack이면 key 값은 backIn, 함수 이름이 easeOutElastic이면 key 값은 elasticOut 이다.

 

 

 

(3) to와 by

 

몇 개의 기능은 to 대신에 by를 써야만 제대로 동작한다.

 

 

to를 쓰는지 by를 쓰는지에 따라 절대값 계산을 하거나 상대값 계산을 한다.

 

내가 겪었던 예시는 to(1, {angle:360})는 현재 노드의 eulerAngles에 관계없이 rotation이 360이 되도록 회전한다.

 

by(1, {angle:360})는 현재 노드의 eulerAngles에 360만큼 더해주는 계산을 한다.

 

만약 (0,0,0)에 맞춰져있지 않은 상태에서 to를 쓰면, 0에서부터 회전이 시작하기 때문에 부자연스러운 모습을 볼 수 있다.

 

 

 

tween을 반복시키는 repeat 기능을 쓰려면 by를 써야만 한다. to 에서는 작동이 안된다.