내일배움캠프 5일차 TIL + 4 르탄이 카드 뒤집기

오늘의 키워드!! 

• Retry Button 
• Instantiate
• for
• animation

 

---

 

 

유니티 켜자마자 세팅할 것

 

(1) 레이아웃

윈도우 - 레이아웃 - 2by3 

 

(2) 프로젝트 뷰

프로젝트 뷰 우클릭 - One Column Layout

 

(3) 게임창 변경

Phone (760*1280) - 근데 매번 쓰니까 보통 저장되어있음, 근데 가끔 날라감

 

(4) SampleScene 이름 MainScene으로 변경

에셋 창에서 SampleScene 누르고 f2 하면 이름변경

 

(5) 해당 수업 유니티 패키지 다운로드&적용

다운받은 패키지 파일 : 프로젝트 창 에셋 폴더에 드래그&드롭 - 임포트

 

 

UI

 

게임 시간처럼 계속 사용되고, 뭔가 기능이 있는 글자는 UI로 넣어주는 것 같다.

하이어라키 창 - UI - Regacy - Text

Retry 버튼처럼 버튼작용이 필요한건 Button 

근데 Image로 사용하는 경우는 무엇인지 아직 잘 모르겠다.

>> EndPanel 같은 경우 Image로 많이 사용하던데 뭐가 다른걸까??

 

 

카드 만들기 - 한장

 

카드가 반복적으로 움직일 것이기 때문에 프리펩으로 만든다.

카드에 들어갈 그림 크기 조정하기

이미지의 인스펙터 창에서 Pixel Per Unit을 조정해주면 된다.

>> 조정 후 Ctrl+s 만 누르는게 아니라 아래의 Apply 버튼을 눌러줘야 저장이 된다.

 

카드를 만들 때 캔버스의 렌더모드를 월드스페이스로 바꿔준다.

게임 월드 내에서 보일 것이기 때문인듯

 

그리고 카드에 글씨를 캔버스 사이즈에 항상 맞춰줘야 하기 때문에 Anchor Pressets 를 사용해준다.

 

 

시간 작동시키

 

일단 하이어라키창과 C#Script를  GameManager 로 각각 생성해준다.

    public Text timeTxt;

    float time = 0.0f;

텍스트와 시간을 지정해주고

 

 

time += Time.deltaTime;

시간을 계속 더해주는 코드를 사용해서 시간이 계속 더해지게 한다

 

timeTxt.text = time.ToString("N2"); 

그리고 타임텍스트를 나오게 - 소수점두자리까지! 로 해준다,

 

그리고 public으로 timeTxt를 만들어 주었으므로 유니티에서 게임매니저에 있는 timeTxt에 timeTxt를 이어줘야한다!

 

카드 반복 생성하기 (16개)

 

Instantiate - 반복 생성하는 로직

 

 for (int i = 0; i<16; i++)
 {
     Instantiate(card);
 }

int i = 0;                             - 초기화값 *초기값 

i < 16;                               - i가 16보다 작으면 계속해서 실행

i++                                    - i의 값을 하나씩 증가시켜주기

 

>> i 의 초기값은 0이고, 16보다 작은 수일때 계속 1씩 더해준다

>> (1) i 가 0 / 16보다 작다 / 1 더해줌 == 1

     (2) i가 1 / 16보다 작다 / 1더해줌 ==2

.

.

     (17) i가 16 / 16보다 작지 않음 / {} 를 실행하지 않고 반복이 끝남.

 

>> for 문 이해가 아직 너무 힘들다!!!!! 이렇게 하나하나 뜯어보면서 계속 연습해야할듯

 

public으로 카드 먼저 선언해주고 - Instantiate 쓰고 플레이를 하면 카드가 16장이 나온다.

이 16장 카드를 하이어라키 창 board에 넣어줘야함!

 

Instantiate(card, this.transform);   이렇게 해주면 다시 만들어도 보드 밑으로 생성된다.

 

나머지를 구하는건 %
몫을 구하는건 / 

 

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

        // x는 4로 나눈 나머지 y는 몫인데 카드 사이의 거리가 1.4f라서 곱해줌
        float x = (i % 4) * 1.4f; // 나머지를 구하는건 %
        float y = (i / 4) * 1.4f; // 몫을 구하는건 / 

        go.transform.position = new Vector2(x,y);
    }
}

이렇게 16개의 카드 위치까지 맞춰주면

이렇게 16개가 각자 자리에 나오긴 하는데 위치가 이상하다! 

 

float x = (i % 4) * 1.4f - 2.1f; 
float y = (i / 4) * 1.4f - 3.0f;

이렇게 X,Y 좌표를 조금씩 빼줘서 중앙으로 위치 조절 해주기.

 

 

랜덤으로 배치해주기

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();

arr. : 배열에서 쓸 수 있는 기능

OrderBy : 정열를 한다 

>> 어떻게 정열을 할건지가 () 안에 들어간거임

x => 이 배열을 순서대로 한번씩 순회한다

Random.Range (0f,7f) :  0~7 사이의 값을 순서대로 비교해서 우선순위를 갖고 정열한다

To.Array() : 배열로 만들어준다

 

int idx = 0;  

idx 는 인덱스, 초기값 0

 

go.GetComponent<Card>().Setting(arr[i]);

겟컴포넌트 - Card라는 컴포넌트에서 Setting이란 함수를 불러오겠다 - 함수값은 배열(arr)의 i번째 값을 가져오겠다.

 

카드에서 idx 값을 public으로 한게 아니라 값이 안나오는데, 인스펙터 창 우클릭해서 디버그 해보면 idx값을 볼 수 있다

하지만 수정은 불가능하다.

 

 

카드 이미지를 르탄이로 바꾸기

 

Resources.Load<Sprite>($"rtan{idx}");

리소스 폴더 만들어서 이미지들을 넣고, 이미지 폴더는 삭제

<> 안에는 이미지의 자료형 (르탄이의 Texturetype 은 스프라이트였음) 

($"rtan{idx}");   :  $가 스트링값을 조절한다

rtan 뒤에 { } 를 적으면 중괄호 안에 변수를 쓸 수 있다.

이런 기능을 통해 그때그때 변수를 통해 다양한 문자 형식에 대응할 수 있다.

 

카드 앞면에 르탄이가 들어가야하니 spriterenderer로 프론트를 만들어 주고

아까 리소스 불러오기 했던거 앞에 front.sprite를 붙여준다

 

카드 움직이는 애니메이션

카드 조금씩 흔들리는거는 애니메이션에서 로테이션 z로 만들어주기.

 

 

카드 누르면 살짝 작아지는 인터랙션 (애니메이션)

애니메이션 추가하기! 

왼쪽 위 이름 눌러보면 CreateNewClip 있다. 

저거 눌르면 파일 열리는데 다른이름으로 하나 만들어주면 생김! - 그럼 애니메이션즈 폴더에도 생긴다!

그리고 누르면 작아지는건 한번만 동작하는거니 루프타임을 꺼준다. 

idle > flip

has exit time 꺼주기

duration 0으로 바꾸고

컨디션에 + 눌러서 is open true 해주기

 

flip > idle

똑같이 해주고 is open만 false.

 

public GameObject front;
public GameObject back;

public Animator anim;

를 해서 앞면, 뒷면, 애니메이션을 퍼블릭으로 만들어준다

 

 public void OpenCard()
 {
     front.SetActive(true);
     back.SetActive(false);
     anim.SetBool("isOpen",true);
 }

이걸로 앞면, 뒷면, 애니메이션 넣고

다시 유니티에서 게임매니저 - 저거 다 이어주기 (필수!!!!!)

 

카드 두 장 고르는 거니까 first card, second card 로 나눠서

두장을 고르고, 확인하고, 맞추면 사라지고 다시 덮이게 하기

 

public static Gamemanager instance;

스태틱을 써서 카드들이 게임매니저의 퍼스트 세컨카드에 접근하기 위해서는 싱글톤을 만들어준다.

if (instance == null)
 {
     instance = this;    
 }

인스턴스가 널일때 인스턴스는 나자신이다!! 

 

 public int idx = 0;

 idx 를 퍼블릭 선언 해줘야한다!

 

 

카드 맞추면 사라지고 틀리면 다시 덮기

public void DestroyCard()
{
    Invoke("DestroyCardInvoke" , 1.0f);
}

void DestroyCardInvoke()
{
    Destroy(gameObject);
}

public void CloseCard()
{
    Invoke("CloseCardInvoke", 1.0f);
}
public void CloseCardInvoke()
{
    anim.SetBool("isOpen", false);
    front.SetActive(false);
    back.SetActive(true);

}

Destroy 카드를 해주는데, 너무 빨리 사라지면 확인을 못하므로 Invoke를 사용해 1.0f 의 확인할 시간을 준다.

그럼 두 카드를 뒤집었을 때 확인할 시간 1초와 

틀리면 다시 덮이고, 맞으면 사라지는 카드게임이 되었다.

 

---

 

카드 뒤집기 게임은 뭔가.. 보기에 되게 간단하지만

따라 만드는 입장에서 상당히 힘들었다!! 뭔가 신경쓸 것이 아주 많은 게임이었다.

근데 이정도도 그냥 게임에 비하면 간단한 편인 것이겠지??

 

카드 뒤집기를 만들며 내가 for 을 제대로 이해하지 못하고 있단걸 깨달았다!

역시 직접 만들고 따라하다 보면 내가 뭘 모르고 있는지 알 수 있어서 좋은 것 같다.

난 아직 모르는게 너무 많다..!! 아쉬워!!

 

마침 다음주 부터 C# 강의가 있던데 열심히 듣고 공부해야겠다.