[유니티]나도코딩 - 기억력 테스트 게임 클론코딩(4) : 카드 뒤집기 후반전
지난시간에 이어 유튜브의 나도코딩 채널에 있는 기억력 테스트 게임을 따라 실습해보도록 하겠습니다.
이미 한 번 실습을 마치고 완성되어있는 상태라 제 스스로 복습하고 기록을 남기고자 블로그를 작성하고 있습니다.
따라서 영상과 다른 사진들이 있으니 유튜브 영상을 보고 따라 만드시길 추천드립니다.
오늘은 카드 스크립트를 작성하여 마저 구현하지 못한 카드 뒤집기 기능을 구현해보도록 하겠습니다.
1. 카드 다시 뒤집기
먼저 동물이였으면 뒷면으로, 뒷면이면 동물로 바꿔줄 수 있도록 카드를 다시 뒤집을 수 있게 스크립트를 짜보도록 하겠습니다.
(1) Card 스크립트 작성
① 카드에 적용되어있는 Card 스크립트를 연다.
② Card 스크립트를 아래와 같이 변경한다.
③ Card 스크립트에 있는 BackSprite 오브젝트에 뒷면 카드 Spirte를 넣는다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class Card2 : MonoBehaviour {
[SerializeField]
private SpriteRenderer cardRenderer; // 카드 오브젝트 중 SpriteRenderer 컴포넌트 가져오기
[SerializeField] // 유니티에서 값 설정 가능하도록 적용
private Sprite animalSprite; // 카드의 앞면
[SerializeField]
private Sprite backSprite; // 배경 이미지를 넣기 위한 변수
private bool isFlipped = false; // true = 뒤집힌 상태(동물 그림), false = 뒤집히지 않은 상태(뒷면 그림)
void Start() {
}
void Update() {
}
public void FlipCard() { // 카드 뒤집는 메서드
isFlipped = !isFlipped; // 카드의 상태를 변경
if (isFlipped) {
cardRenderer.sprite = animalSprite; // 현재 카드 생태를 앞면의 동물카드로 변경
}
else {
cardRenderer.sprite = backSprite; // 현재 카드 생태를 뒷면의 배경카드로 변경
}
}
void OnMouseDown() {
FlipCard();
}
}
추가된 부분과 변경된 부분을 보겠습니다.
1. private Sprite backSprite;
- 뒷면 배경 이미지를 넣기 위한 변수입니다.
2. private bool isFlipped = false;
- 카드가 뒤집힌 상태인지 안 뒤집힌 상태인지 확인하기 위한 변수입니다. 뒤집혀져서 동물 사진으로 되어있는 상태라면 true, 뒤집히지 않은 상태의 배경 사진이면 false입니다. 맨 처음 상태는 현재 안 뒤집힌 상태이므로 초기값으로 false를 넣어줍니다.
3. isFlipped = !isFlipped;
- FlipCard() 메서드가 실행되면 카드의 뒤집힌 상태를 바꿔줍니다. 현재의 상태를 반전시킵니다.
4. if (isFlipped) {
cardRenderer.sprite = animalSprite;
}
else {
cardRenderer.sprite = backSprite;
}
- 만약 isFlipped가 true라면 동물카드로 변경합니다. 만약 isFlipped가 false라면 뒷면카드로 변경합니다.
제대로 작성했다면 위의 영상처럼 카드를 계속 뒤집을 수 있습니다.
2. 카드 회전시켜 뒤집기
카드 오브젝트의 Transform 컴포넌트의 스케일 값에서 X값에 마우스를 올리고 클릭한 상태로 값을 늘렸다 줄였다 하면 마치 카드가 작아졌다가 커지는 모습이 카드가 뒤집히는 모습처럼 보이게 됩니다. 이걸 이용하여 카드가 뒤집히는 모션을 만들어 보도록 하겠습니다.
(1) Scale 값을 변경하여 카드를 뒤집는 기능 구현
① DOTween 패키지를 불러옵니다.
② FlipCard() 메서드를 변경합니다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
...
...
public void FlipCard() { // 카드 뒤집는 메서드
Vector3 originalScale = transform.localScale; // 맨 처음 가지고 있던 x,y,z 값을 불러와 저장한다.
Vector3 targetScale = new Vector3(0f, originalScale.y, originalScale.z); // x값을 0으로 변경하고자 하는 스케일 값
transform.DOScale(targetScale, 0.2f).OnComplete(() =>
{
isFlipped = !isFlipped; // 카드의 상태를 변경
if (isFlipped) {
cardRenderer.sprite = animalSprite; // 현재 카드 생태를 앞면의 동물카드로 변경
}
else {
cardRenderer.sprite = backSprite; // 현재 카드 생태를 뒷면의 배경카드로 변경
}
transform.DOScale(originalScale, 0.2f);
}); // 현재의 스케일 값을 0.2초동안 targetScale로 값을 변경한다.
}
void OnMouseDown() {
FlipCard();
}
}
추가된 부분과 변경된 부분을 보겠습니다.
1. using DG.Tweening;
- DOTween 패키지를 불러옵니다. 이 패키지의 메서드를 이용하여 자연스럽게 카드가 뒤집어 지는 기능을 구현합니다.
2. Vector3 originalScale = transform.localScale;
- 맨 처음 초기값으로 가지고 있는 카드의 Scale 값을 불러와 Vector3 형태의 originalScale 변수에 저장합니다.
3. Vector3 targetScale = new Vector3(0f, originalScale.y, originalScale.z);
- 변경하고자 하는 Scale 값을 targetScale 변수에 넣습니다. 우리는 X값만 0으로 변경하기 위해 다른 Y, Z 값은 오리지널의 값을 유지합니다.
4. transform.DOScale(targetScale, 0.2f)
- DOTween 패키지에 있는 DOScale 메서드를 이용하여 자연스럽게 카드가 뒤집히는 모션을 구현합니다. DOScale 메서드의 원형은 다음과 같습니다.
4-1. DOScale(Vector3 endValue, float duration)
- 변경하고자 하는 Vector3 형태의 값과 변경하는데 걸리는 시간을 인자로 받습니다. 즉, 4번의 코드는 targetScale로 0.2초에 걸쳐 변경한다는 의미를 가지고 있습니다.
5. transform.DOScale(targetScale, 0.2f).OnComplete(() => { ... });
- C# 문법으로써 0.2초에 걸쳐 targetScale값으로 변경을 완료 했을 시(OnComplete) 중괄호 안에 있는 코드를 실행합니다.
3. 카드를 뒤집는 동안 클릭하지 못하게 기능 구현
하지만 위의 기능을 구현하고 나면 문제점이 하나 있습니다. 자연스러운 모션을 구현하긴 했으나 카드가 다 뒤집히기 전 계속 클릭하게 되면 카드의 크기가 줄어들게 됩니다. 이를 카드가 뒤집히는 동안 클릭할 수 없도록 하여 오류를 수정해보도록 하겠습니다.
(1) Card 스크립트 작성(최종)
① 새로운 isFlipping 변수를 추가합니다.
② FlipCard() 메서드를 변경합니다.
③ OnMouseDown() 메서드에 조건을 추가합니다.
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;
public class Card2 : MonoBehaviour {
[SerializeField]
private SpriteRenderer cardRenderer; // 카드 오브젝트 중 SpriteRenderer 컴포넌트 가져오기
[SerializeField] // 유니티에서 값 설정 가능하도록 적용
private Sprite animalSprite; // 카드의 앞면
[SerializeField]
private Sprite backSprite; // 배경 이미지를 넣기 위한 변수
private bool isFlipped = false; // true = 뒤집힌 상태(동물 그림), false = 뒤집히지 않은 상태(뒷면 그림)
private bool isFlipping = false; // 카드가 뒤집혀지는 상태인지 확인
void Start() {
}
void Update() {
}
public void FlipCard() { // 카드 뒤집는 메서드
isFlipping = true;
Vector3 originalScale = transform.localScale; // 맨 처음 가지고 있던 x,y,z 값을 불러와 저장한다.
Vector3 targetScale = new Vector3(0f, originalScale.y, originalScale.z); // x값을 0으로 변경하고자 하는 스케일 값
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();
}
}
}
추가된 부분과 변경된 부분을 보겠습니다.
1. private bool isFlipping = false;
- 카드가 뒤집혀지는 상태인지 확인합니다. 뒤집히고 있는 중이라면 true, 다 뒤집어진 상태라면 false를 나타냅니다. 현재는 뒤집히고 있는 상태가 아니기 때문에 초기값으로 false를 설정합니다.
2. public void FlipCard() {
isFlipping = true;.
...
}
- FlipCart() 메서드가 실행중인 상태에는 뒤집어지고 있는 상태이므로 isFlipping 상태를 true로 바꿔줍니다.
3. transform.DOScale(originalScale, 0.2f).OnComplete(() => {
isFlipping = false;
});
- 카드가 원래의 크기로 돌아온 상태. 즉, 완전히 뒤집힌 상태라면 isFlipping 변수를 false로 바꿔줍니다.
4. void OnMouseDown() {
if (!isFlipping) {
FlipCard();
}
- 뒤집히고 있지 않은 중에만 마우스 클릭이 동작할 수 있도록 조건문을 추가합니다.
이렇게 기본적인 카드의 기능들을 구현해 봤습니다. 다음시간에는 카드를 배치하는 배경 보드를 구현해보도록 하겠습니다.