스파르타 내배캠 Unity 3기 3일차

연휴... 연휴... 어디갔어... 피곤해...

 

 

이번 주말엔 전에 썻던 TIL들을 좀 봤다.

 

솔직히 난해하다는 느낌을 많이 받았다.

그래서 오늘은 좀 깔끔하게 잡설을 줄여보고자 한다.

 

오늘의 구현

카드 등장 효과 연출하기

 

먼저 카드 등장을 어떤식으로 연출할지 정하자.

 

1. 카드가 카메라 밖에서 순차적으로 생성된다.

2. 생선된 카드는 자신이 있어야 할 위치로 이동한다.

3. 이동하면서 회전한다. (표창처럼)

 

 

1. 카드가 카메라 밖에서 순차적으로 생성

이 부분은 코루틴으로 제어가 가능할 것 같다.

카드 생성, 위치지정, 셋업 부분을 코루틴 함수로 바꿔주자.

public bool hasplayed { get; private set; } = false;

    private void SpawnCards()
    {
        List<int> rtans = new List<int>();

        // 중략
        
        //코루틴으로 변경
        StartCoroutine(Spawn(rtans));        
    }

    private IEnumerator Spawn(List<int> rtans)
    {
        int raw = (int)Mathf.Sqrt(cardCnt);
        for (int y = 0; y < raw; y++)
        {
            for (int x = 0; x < raw; x++)
            {
                card newCard = Instantiate(card).GetComponent<card>();
                newCard.transform.parent = cards.transform;                

                // 각 카드 위치 지정

                newCard.transform.position = new Vector3(posX, posY, 0);
                newCard.Setup(rtans[y * raw + x]);
                
                // 0.05초 대기 후 루프 반복
                yield return new WaitForSeconds(0.05f);
            }
        }
        // 마지막 카드의 연출 끝나는 시간동안 대기
        yield return new WaitForSeconds(1f);
        // 게임을 시작
        hasplayed = true;
    }

 

- 각 카드를 생성하는 코드를 코루틴 함수로 바꿔준다. 코루틴의 매개변수에 List<int> rtans를 넘겨주자.

- 각 카드를 생성 후 1. 카드의 위치를 지정한 후, 2.Setup() 함수를 통해 날아가는 연출을 하자.

- 각 카드가 Setup() 호출이 된 후 yield return new WaitForSeconds() 를 이용해 0.05 초 대기 후 다시 for문을 돌며

생성, 셋업, 0.05초 대기를 반복한다.

 

for문을 빠져나온 뒤 다시 1초를 대기한다. 이는 마지막 카드가 자신의 위치까지 날아오는 시간을 기다리는 것.

이후 hasplayed = true 로 바꿔 게임을 시작하도록 하자.

 

 

 

2. 생선된 카드는 자신이 있어야 할 위치로 이동한다

위에서 카드의 생성 및 자신이 있어야 할 위치를 미리 지정해놓았다.

이제 Card 클래스에서 카메라 밖으로 이동시켜 날아오는 연출을 적용하자.

    [SerializeField] Vector3 landingPosition;
    [SerializeField] float appearTime;
    [SerializeField] float appearOffsetX;
    [SerializeField] float appearRotateSpeed;
    
    public void Setup(int index)
    {
        // 날아와야 할 위치.
        landingPosition = transform.position;
        // 자신의 위치를 화면 밖으로 이동.
        transform.position += Vector3.right * appearOffsetX;
        // 코루틴으로 날아오는 연출
        StartCoroutine(AppearRoutine());

        // Sprite 할당
        // switch문
    }
    
    private IEnumerator AppearRoutine()
    {
        float current = 0;
        float percent = 0;
        Vector3 startPos = transfom.position;
        
        while (percent < 1)
        {
            current += Time.deltaTime;
            percent = current / appearTime;

            transform.position = Vector3.Lerp(startPos, landingPosition, percent);
            transform.Rotate(Vector3.forward * appearRotateSpeed * Time.deltaTime);

            yield return null;
        }        
        anim.enabled = true;
    }

 

- Vector3 landingPosition 은 카드가 날아와야 하는 위치이다.

날아와야할 위치는 카드 생성 시 지정된 위치이다. 그러니 자신의 위치를 landingPosition에 담자.

- float appearTime 은 날아올 시간이다. 1초로 해보자.

- float appearOffsetX 는 화면 밖으로 자신의 위치에서 X좌표 얼마만큼 더 나가있을 지 정하는 변수이다.

자신의 위치 = 자신의 위치 + (appearOffsetX, 0, 0) 만큼 더 이동시켜놓도록 하자.

- float appearRotateSpeed 는 날아오는 동안 표창같은 느낌을 주기위해 카드가 회전하는 속도이다.

 

이제 코루틴 함수를 살펴보자.

 

- float current 는 현재 흐른 시간이다.

- float percent 는 이동에 쓰일 비율이다. 0~1 까지의 값을 갖는다. current가 증가함에 따라 0~1까지 상승한다.

- Vector3 startPos 는 현재 화면밖의 자신의 위치이다.

 

while문을 통해 percent가 1이 될 때 까지 반복한다

 

Vector3.Lerp() 함수를 통해 자신의 위치(현재 위치는 화면 밖이다.)를 

현재 자신의 위치를 0, 도착지점을 1 이라고 했을 때 percent 만큼 이동시켜 주도록하자.

 

transform.Rotate() 함수를 통해 rotaton.z 값을 속도에 맞춰 계속 회전 시켜주도록 한다.

 

yield return null 을 사용해 1 프레임을 대기함으로써 while 문을 루프하는것을 Update() 함수에서 실행하듯 만들어준다.

 

실행하기전 Card 프리팹에서 Animator 컴포넌트를 비활성화 시키자. Card가 생성되자마자 Idle 애니메이션이 실행되는것을 방지 하기 위함이다.

먼저 Animator를 꺼두자

while문이 끝나 자신의 landingPosition에 도착하면 anim.enabled = true 를 통해 Animator를 활성화 시켜

Idle 과 Flip 애니메이션이 작동할 수 있게 해준다.

 

01

화면 밖에서 순차적으로 날아온다.

 

사진과 같이 화면 밖에서 자신의 위치로 날아온 뒤 애니메이션이 정상 실행된다.