[ 내일배움캠프 ] TIL.02 - Dotween을 이용한 카드 뒤집기

 

[스파르타부트캠프] 사전 캠프_Unity_4번째 강의_르탄이 카드 뒤집기 제작

 

1일차에 각자의 파트를 나눠 스파르타 4번째 강의 카드 뒤집기 게임을 좀 더 디테일하게 만드는 시간을 가졌다.

그 중 카드 뒤집는 애니메이션과 최고 점수와 현재 점수를 띄어주는 부분을 담당하게 되었다.

 

그 중 해당 포스팅에는 2일차에 작업한 카드 뒤집는 애니메이션에 대해 작성해보려고 한다.

 

생각한 방법 

 

1. Front과 Back의 Sprite의 이미지를 연결 시킨 후 Scale의 Back의 X의 크기가 0일 때 SpriteRenderer의 이미지를 변경

2. transform의 Rotate으 부분을 체크하여 각도가 90일 경우 Sprite 이미지 변경 시키기

 

카드를 뒤집는 방법 여러가지 방법이 있는데 2번의 방법과 Dotween을 이용해서 애니메이션 효과를 나타내고 싶어 선택하게 되었다.

Dotween Asset Link

DOTween (HOTween v2) | 애니메이션 도구 | Unity Asset Store

Dotween Document

DOTween - Documentation

 

팀원들과의 최소한의 충돌을 위해 기존의 Prefab의 구조는 지키고 변경하는 방법을 생각하는 중 원하는 애니메이션 효과를 제작한 블로그를 찾게 되고 참고하게 되었다.

 

public SpriteRenderer front;
public SpriteRenderer back;

public SpriteRenderer frontImg;

public void Rotate()
{
        var seq = DOTween.Sequence();
        seq.Append(this.transform.DORotate(this.transform.eulerAngles + new Vector3(0, 90, 0), 0.4f)).SetEase(ease);
        seq.AppendCallback(() => {
            frontImg.sprite = (this.transform.eulerAngles.y < 180) ? front.sprite : back.sprite;
        });
        seq.Append(this.transform.DORotate(this.transform.eulerAngles + new Vector3(0, 180, 0), 0.4f)).SetEase(ease);
    }

 

 

카드 앞면 뒷면의 Sprite를 준비한 후 카드가 90도가 되었을 때 이미지를 변경하도록 작성해보았다.

 

하지만 원하는대로 작동은 되었지만 생각한 것과 다르게 앞면의 이미지가 뒤집혀 나타나는 현상을 발견하게 되었다.

 

문제가 무엇일까? 고민한 결과

 

 

현재 부모의 Sprite에 앞면과 뒷면을 변경하는 구조를 가지고 있다.

 

 

부모 Sprite의 Rotation이 180도로 뒤집혀서 있는 상황에서 앞면의 Sprite을 넣으니 Sprite의 이미지가 뒤집혀서 보여지는 것이었다.

 

그럼 이미지를 변경하는 시점에서 이전에 알게되었던 Sprite의 flipx.x를 사용하면 좋겠다..! 라는 생각이 들어 해당 코드를 추가하여 해결 할 수 있었다.

public SpriteRenderer front;
public SpriteRenderer back;

public SpriteRenderer frontImg;

public void Rotate()
{
        var seq = DOTween.Sequence();
        seq.Append(this.transform.DORotate(this.transform.eulerAngles + new Vector3(0, 90, 0), 0.4f)).SetEase(ease);
        seq.AppendCallback(() => {
            frontImg.sprite = (this.transform.eulerAngles.y < 180) ? front.sprite : back.sprite;
            frontImg.flipX = (this.transform.eulerAngles.y < 180) ? true : false;
        });
        seq.Append(this.transform.DORotate(this.transform.eulerAngles + new Vector3(0, 180, 0), 0.4f)).SetEase(ease);
    }

 

 

◾ Sequence : 값을 제어하는 대신 다른 트윈을 제어하고 그룹으로 애니메이션화, 순서에 맞춰 Tween들을 배열하여 연속된 애니메이션 제어

 

◾ Append(Tween 트윈) : 주어진 Tween을 시퀀스의 끝에 추가

◾ AppendCallback(TweenCallback 콜백) : 주어진 콜백을 시퀀스의 끝에 추가

 

◾ DoRotation( Vector, during) : 현재 회전 값에서 during초 동안 회전값을 Vector의 값을 바꾼다.

 

❓ 콜백 (Callback)

다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 이야기함 

 

참고 사이트

[Asset] Unity3D 'DOTween' 2 : Sequence와 팁

[유니티] UGUI 카드 회전 시키기