[유니티]나도코딩 - 기억력 테스트 게임 클론코딩(3) : 카드 뒤집기 전반전

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

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

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

 

오늘은 카드 스크립트를 작성하여 뒷면의 카드 이미지를 앞면의 카드 이미지로 바꾸는 기능을 구현해보도록 하겠습니다.

1. 카드 앞면 준비

(1) Sprite Editor

① Project 창에서 편집하고자 하는 이미지 클릭 

② Inspector 창에서 Sprite Mode를 Single에서 Multiple로 변경

③ Sprite Editor 클릭

Sprite Editor

 

(2) Sprite Editor를 이용한 카드 자르기

우리가 사용할 동물카드 2개를 모두 똑같은 방식으로 카드를 잘라줍니다.

① Slice 탭에서 Type을 Grid By Cell Size로 변경하기

② Pixel Size는 X = 450, Y= 620 / Offset은 X = 174, Y = 275 / Padding은 X = 151, Y = 200로 설정

③ Slice 버튼 클릭

④ Apply 버튼 클릭

⑤ 설정 적용된 이미지 확인

Sprite Editor 화면

동물 카드를 모두 슬라이스 완료

 

(3) 카드 크기 조절하기

① 사용할 카드를 Hierarchy 창에 드래그 앤 드롭한 후 이름을 Card로 변경

② 사용할 카드의 Pixels Per Unit값을 400으로 변경

사용할 카드의 Sprite를 클릭 후  Pixels Per Unit값을 400으로 변경

 

2. 카드 뒤집는 기능 만들기

(1) Card 스크립트 작성

① 카드에 적용되어있는 Card 스크립트를 연다.

② Card 스크립트를 아래와 같이 변경한다.

③ Card 스크립트에 있는 오브젝트를 변경한다.

- Card Renderer에 Sprite Renderer 컴포넌트를 드래그 앤 드롭하여 적용

- Animal Sprite에는 바꾸고자 하는 이미지를 드래그 앤 드롭하여 적용

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

public class Card2 : MonoBehaviour {
    [SerializeField]
    private SpriteRenderer cardRenderer; // 카드 오브젝트 중 SpriteRenderer 컴포넌트 가져오기

    [SerializeField] // 유니티에서 값 설정 가능하도록 적용
    private Sprite animalSprite; // 카드의 앞면

    void Start() {
        
    }


    void Update() {
        
    }

    public void FlipCard() { // 카드 뒤집는 메서드
        cardRenderer.sprite = animalSprite; // 뒷면의 카드를 앞면의 동물카드로 변경
    }

    void OnMouseDown() {
        FlipCard();
    }
}

Card Script 작성

Card 스크립트 변수에 해당 오브젝트 적용시키기

 

코드를 한 번 리뷰해보도록 하겠습니다.

[SerializeField]
private SpriteRenderer cardRenderer;

[SerializeField]
private Sprite animalSprite;

1. [SerializeField] : 유니티에서 값을 변경할 수 있도록 적용시킵니다.

2. private SpriteRenderer cardRenderer : Card 오브젝트에 있는 Sprite Renderer 객체를 생성합니다. 즉, 현재 뒷면으로 설정되어 있는 Sprite 객체를 가져옵니다.
3. private Sprite animalSprite : 앞면 이미지를 저장할 객체를 생성합니다.

 

public void FlipCard() {
    cardRenderer.sprite = animalSprite;
}

void OnMouseDown() {
    FlipCard();
}

1. public void FlipCard() :  카드를 뒤집는 메서드를 생성합니다.

2. cardRenderer.sprite = animalSprite : 현재 적용되어 있는 뒷면 이미지를 앞면 이미지로 변경합니다.

 

(2) 카드 뒤집는 기능 테스트

① 플레이 버튼을 눌러 게임을 실행한다.

② Game 창에서 카드를 눌러 카드가 바뀌는지 확인한다. 

카드 클릭시 정상적으로 이미지로 변경

 

하지만 현재 문제점들이 남아있습니다.

1. 뒤집는 모션이 자연스럽지 않다.

2. 뒤집힌 앞면 이미지에서 다시 뒷면으로 돌아오지 않는다.

 

위의 문제점들은 다음 실습을 통해 해결해보도록 하겠습니다.