[SCC] TIL (17)

Date : 2024.09.09

Project

오늘부로 새로운 팀원들과 미니 프로젝트 FindRtan을 진행하기로 했다. 새롭게 알게 된 내용 + 개발 로그도 TIL을 작성할 겸 병행해서 작성했다. 해당 프로젝트는 주제가 이미 정해져있는데 기존에 제작했었던 카드 뒤집기 게임을 좀 업그레이드 시키는 것이 목적이다.

Wire Frame

일단 진행하기에 앞서 개발할 기능들을 쭉 명시해두고 Wire Frame으로 어떤 형태로 구현할 것인지 대강 대강 틀을 잡아봤다.

일단 대충 틀만 잡고 진행 과정에서 아마 계속 수정이 될 예정일 것 같다. (디자이너의 중요성을 다시 한 번 깨달았다.)

Update

Card Position

기존에 카드 위치를 하드 코딩으로 업데이트 해줬는데 그러지 말고 카드 위치가 알아서 들어가도록 구현했다.

Grid Layout Group 쓰면 바로 해결된다.

Card Size

기존에는 사이즈가 정해져있는 스프라이트 이미지를 가져다 썼는데 이번엔 전달받은 사진의 사이즈가 균일하지 않아서 사이즈 조절이 필요했다. sprite.bounds.size를 사용해서 sprite 사이즈를 가져오고 오브젝트의 localScale을 가져와서 적절한 사이즈로 오브젝트의 localScale이 조절되도록 수정했다.

public void Setting(int number) {
    idx = number;
    frontImage.sprite = Resources.Load<Sprite>($"CardImage{idx}");

    Vector2 spriteSize = frontImage.sprite.bounds.size;
    Vector3 frontImgObjectSize = frontImage.transform.localScale;

    float scaleX = frontImgObjectSize.x / spriteSize.x;
    float scaleY = frontImgObjectSize.y / spriteSize.y;

    frontImage.transform.localScale = new Vector3(scaleX, scaleY, 1);
}

Card Flip Animation

Open, Close에서 별도로 진행될 애니메이션 Flip Card 애니메이션을 구현했다.

public void OpenCard() {
    Debug.Log("[Card.cs] OpenCard");
    CheckFirstSecondCard(); 
    FlipCard();
    audioSource.PlayOneShot(clip);
}

private void FlipCard() {
    GetComponent<RectTransform>().DORotate(new Vector3(0f, 90f, 0f), 0.3f, RotateMode.FastBeyond360)
        .SetEase(Ease.InOutQuad) 
        .OnComplete(() => {
            if(front.activeSelf) {
                front.SetActive(false);
                back.SetActive(true);
            }
            else {
                front.SetActive(true);
                back.SetActive(false);
            }
            transform.DORotate(new Vector3(0f, 0f, 0f), 0.3f, RotateMode.FastBeyond360)
                .SetEase(Ease.InOutQuad);
        });
}

Bug Fix

Grid Layout을 쓰면서 문제가 하나 생겼는데 기존 방식 그대로 카드를 Destroy하면 오브젝트 개수가 줄어들면서 자동으로 Grid Layout Group 컴포넌트가 위치를 정렬 시켜버린다. 그래서 앞으로 당겨지게 되는데 이를 막기위해 Card 오브젝트를 Destroy 하는 것이 아니라 Sprite Renderer을 가지고 있는 front, back 자식 오브젝트들만 비활성화 시켜서 눈에만 안 보이게 하도록 구현하였다.