카드 뒤집기 - 1

Unity 사전캠프 4주 차 목표

1. 보드 게임 만들기

2. 로직 경험

---

목차

1. 기본 씬 구성하기

2. 씬 추가 구성 - 카드 한 장과 시간 시스템

3. 카드 만들기 - 배치

4. 카드 만들기 - 이미지 랜덤 로직

---

 

1. 기본 씬 구성하기

 

1-1 MainCamera

R G B : 90, 90, 225

 

 

1-2 타이머 제작

Font Size : 70, Pos Y = 400, Width = 200, Height = 200, Color = 255,255,255,255

 

2. 씬 추가 구성 - 카드 한 장과 시간 시스템

 

2-1 카드

Hierarchy → Create Empty → Board 이름 변경 → Board 아래에 Create Empty → Card 이름 변경

※) Transform 모두 Reset

 

2-2 Front

Pixels per Unit = 500 

 

Front Inactive

 

2-3 Back 아래에 UI → Legacy → Text → " ? "

 

2-4 속성 설정

      1. Canvas의 Render-Mode 를 World Space로 변경

      2. Transform Reset

      3. Order in layer = 1

      4. Canvas Rect Transform Width = 100, Height = 100, Scale X = 0.01, Y = 0.01, Z = 1

      5. Text Font Size = 50

 

Card Transform Scale = 1.3

 

2-5 GameManager

 

Assets → Scripts Folder 생성 → GameManager 생성

Hierarchy → Create Empty → GameManager 이름 변경

 

2-6 Time

//GameManager.cs
using UnityEngine.UI;

public Text timeTxt;
float time = 0.0f;

void Update()
{
    time += Time.deltaTime;
    timeTxt.text = time.ToString("N2");
}

 

3. 카드 만들기 - 배치하기

 

3-1 Prefab

 

Assets → Prefabs Folder 생성 → Card Prefab에 옮기고, Hierarchy에 있는 Card 삭제

Assets → Scripts → Board.cs 생성 후 Board(Game Object)에 붙이기

 

3-2 카드 배치

 

카드 한 개의 Scale 값이 X = 1.3, Y = 1.3이므로, 카드 사이의 공간을 0.1로 생각하면

 

카드를 열(가로) 값 마지막 값으로 나누면 

행(세로) 값은 몫, 열(가로)값은 나머지가 되고 , 이 값에 1.4씩 곱해주면

카드를 배치 할 수 있게 되는 것이다.

이를 코드로 작성하면

//Board.cs
void Start()
{
    for (int i = 0; i < 16; i++)
    {
        GameObject go = Instantiate(card);
        go.transform.parent = cards;

        float x = (i % 4) * 1.4f;
        float y = (i / 4) * 1.4f;
        go.transform.position = new Vector2(x, y);
    }
}

이런 구문으로 작성 가능하다.

 

그리고 카드를 화면에 맞추기 위해 X = -2.1f, Y = -3.0 을 빼서 조절하면

void Start()
{
    for (int i = 0; i < 16; i++)
    {
        GameObject go = Instantiate(card);
        go.transform.parent = cards;

        float x = (i % 4) * 1.4f - 2.1f;
        float y = (i / 4) * 1.4f - 3.0f;
        go.transform.position = new Vector2(x, y);
    }
}

이렇게 카드를 배치 할 수 있다.

 

4. 카드 만들기 - 이미지 랜덤 로직

 

4-1 랜덤 카드 생성

Board에서 랜덤하게 주는 arr 값을 Card.cs에서 idx로 받아 각 카드에 idx 값을 배정하는 코드 작성

//Card.cs
public class Card : MonoBehaviour
{
    public int idx = 0;

    public void Setting(int number)
    {
        idx = number;
    }
}

 

//Board.cs
void Start()
{
    int[] arr = { 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6 ,7, 7 };
    arr = arr.OrderBy(x => Random.Range(0f, 7f)).ToArray();

    for (int i = 0; i < 16; i++)
    {
        GameObject go = Instantiate(card, this.transform);

        float x = (i % 4) * 1.4f - 2.1f;
        float y = (i / 4) * 1.4f - 3.0f;
        
        go.transform.position = new Vector2(x, y);
        go.GetComponent<Card>().Setting(arr[i]);
    }
}

 

4-2 Image

카드에 arr 배열의 랜덤 값을 idx로 보냈다면, 이미지도 함께 입혀봅시다!

우선 Assets → Create Folder → Resources 이름 변경 후 다운 받았던 이미지들을 모두 넣기

그리고 Load를 사용해서 Resources에 있는 이미지들을 Sprite에 넣어주기!

public class Card : MonoBehaviour
{
    public int index = 0;

    public SpriteRenderer frontImage;

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

---

이어서

5. 카드 만들기 - 애니메이션과 뒤집기

6. 카드 만들기 - 판정 시스템

7. 게임 끝내기

8. 과제

9. 마무리 및 느낀점

은 다음 시간에 계속 작성하겠습니다 :)