[유니티]나도코딩 - 기억력 테스트 게임 클론코딩(7) : 카드 세트 만들기(전반전)

지난시간에 이어 유튜브의 나도코딩 채널에 있는 기억력 테스트 게임을 따라 실습해보도록 하겠습니다.

이미 한 번 실습을 마치고 완성되어있는 상태라 제 스스로 복습하고 기록을 남기고자 블로그를 작성하고 있습니다.

따라서 영상과 다른 사진들이 있으니 유튜브 영상을 보고 따라 만드시길 추천드립니다.

 

오늘은 게임에 필요한 카드 세트를 만들어보도록 하겠습니다.

 

현재는 악어 이미지만 적용해서 악어 이미지만 보드에 셋팅됩니다. 이제 모든 동물 카드를 1쌍씩 짝 지어서 카드를 배치하도록 해보겠습니다.

1. Board 스크립트 수정하기

(1) Card를 저장하기 위한 Sprite 배열 생성

현재 한 장의 카드만 들어가도록 작성되어 있는 Board 스크립트를 수정하여 10쌍의 카드 총 20장의 카드를 배치시키도록 해보겠습니다.

 

① Board 스크립트에서 카드의 리스트를 입력받기 위한 Sprite 배열을 생성합니다.

② Hierarchy 창에서 Board 오브젝트를 클릭합니다.

③ Inspector 창의 오른쪽 위에있는 자물쇠 버튼을 눌러 Board 오브젝트가 나오도록 유지시킵니다.

④ 원하는 카드 10장을 Ctrl + 마우스 왼쪽 버튼 클릭하여 선택합니다.

⑤ 선택한 카드들을 Board2 스크립트의 Card Sprites에 드래그 앤 드롭하여 적용시킵니다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Board2 : MonoBehaviour {

    [SerializeField]
    private GameObject cardPrefab;

    [SerializeField]
    private Sprite[] cardSprites; // 카드 리스트를 받기 위한 배열 생성

	...
}

cardSprites에 동물 이미지 적용

 

(2) Card 스크립트 수정하기

cardSprites에는 10마리의 동물이 들어가있다. cardPrefab으로 부터 만들어진 Card 오브젝트로부터 Card 클래스의 객체를 가져와 animalSprite로 설정한다. Instantiate로 만들어진 게임 오브젝트는 return 값이 게임 오브젝트이기 때문에 GameObject gameObject로 반환받아 참조할 수 있다. GetComponent를 통해 cardObject에 있는 Card컴포넌트를 card변수에 저장한다. 이를 통해 card 변수를 통해 Card 컴포넌트를 참조할 수 있다.

 

하지만 현재 Card 스크림트에서 animalSprite가 private이기 때문에 현재 접근할 수 없기 때문에 Card 스크립트에서 animalSprite를 설정할 수 있는 새로운 메서드를 만든다.

 

① Card 스크립트를 Visual Studio로 연다.

② SetAnimalSprite(Sprite sprite) 함수를 작성한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class Card2 : MonoBehaviour {
    [SerializeField]
    private SpriteRenderer cardRenderer;

    [SerializeField]
    private Sprite animalSprite;

    [SerializeField]
    private Sprite backSprite;

    private bool isFlipped = false; 
    private bool isFlipping = false;

    public void SetAnimalSprite(Sprite sprite) { // 변경된 부분
        animalSprite = sprite;
    }

    public void FlipCard() {

        isFlipping = true;

        Vector3 originalScale = transform.localScale;
        Vector3 targetScale = new Vector3(0f, originalScale.y, originalScale.z);

        transform.DOScale(targetScale, 0.2f).OnComplete(() => 
        { 
            isFlipped = !isFlipped;

            if (isFlipped) {
                cardRenderer.sprite = animalSprite;
            }
            else {
                cardRenderer.sprite = backSprite;
            }

            transform.DOScale(originalScale, 0.2f).OnComplete(() => {
                isFlipping = false;
            });
        });
    }

    void OnMouseDown() {
        if (!isFlipping) {
            FlipCard();
        }
    }
}

(3) Board 스크립트 수정하기

cardSprite가 지금 배열로 되어있기 때문에 배열에 접근할 수 있게 Index 변수를 선언한다.
하지만 지금 이렇게 수행하면 카드는 10장이 있는데 반복문은 20번 수행하기 때문에 오류가 발생할 것이다. 일단은 카드가 제대로 들어가는지 확인하기 위해 임시 코드를 작성하여 10장의 동물 카드가 잘 들어가는지 확인한다.

 

① Board 스크립트를 Visual Studio로 연다.

② Sprite[] 배열에 접근할 수 있게 Index값을 변수로 만든다.

③ GetComponent를 통해 cardObject에 있는 Card컴포넌트를 card변수에 저장한다.

④ SetAnimalSprite 메서드를 호출하여 동물 스프라이트를 설정한다.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Board2 : MonoBehaviour {
    [SerializeField]
    private GameObject cardPrefab;

    [SerializeField]
    private Sprite[] cardSprites;

    void Start() {
        InitBoard();
    }

    void InitBoard() {
        float spaceY = 1.8f;
        float spaceX = 1.3f;

        int rowCount = 5;
        int colCount = 4;

        int cardIndex = 0; // 변경된 부분 - 1

        for(int row = 0; row < rowCount; row++) {
            for(int col = 0; col < colCount; col++) {
                float posX = (col - (colCount / 2)) * spaceX + (spaceX / 2);
                float posY = (row - (int)(rowCount / 2)) * spaceY;
                Vector3 pos = new Vector3(posX, posY, 0f);
                GameObject cardObject = Instantiate(cardPrefab, pos, Quaternion.identity);
                Card card = cardObject.GetComponent<Card>(); // 변경된 부분 - 2
                card.SetAnimalSprite(cardSprites[cardIndex++]); // 변경된 부분 - 3
            }
        }
    }

}

 

위에 대한 코드를 하나씩 해석해보겠습니다.

 

1. Card card = cardObject.GetComponent<Card>();

- 생성된 게임 오브젝트에서 Card 컴포넌트를 가져와 card 변수에 할당합니다. GetComponent<Card>()는 cardObject에 연결된 Card 컴포넌트를 찾아 가져오는 역할을 합니다.

 

2. card.SetAnimalSprite(cardSprites[cardIndex++]);

- card 객체의 SetAnimalSprite 메서드를 호출하여 동물 스프라이트를 설정합니다. 이 때, cardSprites 배열에서 cardIndex에 해당하는 인덱스의 스프라이트를 가져와 설정합니다. cardIndex++는 cardIndex를 사용한 후에 1을 증가시키는 의미입니다.

 

즉, 이 코드는 Unity에서 cardPrefab을 복제하여 게임 오브젝트를 생성하고, 해당 게임 오브젝트의 Card 컴포넌트를 가져와 animalSprite를 설정하는 역할을 합니다. 이 과정을 통해 게임에서 카드를 생성하고, 해당 카드의 동물 스프라이트를 설정할 수 있습니다.

 

(4) 테스트를 위한 임시코드 추가

하지만 현재 이렇게 실행하면 오류가 발생합니다. 현재 for문이 20번을 반복하지만 카드는 10장밖에 안들어가 있어 정상적인 작동을 하지 않을겁니다. 임시코드를 작성하여 현재 작성한 코드가 정상적으로 작동하는지 확인합니다.

 

① Board 스크립트 마지막 줄에 조건문을 추가한다.

② 게임을 실행하여 정상적으로 10장이 들어갔는지 테스트 한다.

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Board2 : MonoBehaviour {
	
    ...
    for(int row = 0; row < rowCount; row++) {
    	for(int col = 0; col < colCount; col++) {
        
        	...
            
            if(cardIndex >= cardSprites.Length) {
            	return;
            }
        }
    }
}

10장의 카드가 배친된 것을 확인할 수 있다.

 

다음시간에는 2장씩 10종류의 카드 총 20장의 카드를 배치시키게 완성시켜 보도록 하겠습니다.