Unity) Find Party Parrot (完)

안녕하세요 뱁새입니다 (۶•<•)۶❗️

오늘은 카드에 애니메이션을 입히는 과정과

카드를 뒤집고 매칭하는 과정에 대해 정리해볼 예정입니다

이전 과정을 보고 싶으시다면 Find Party Parrot (1) / Find Party Parrot (2)을 클릭해주세요❗️

그럼 가봅쉬다❗️

첫 번째, 카드 랜덤 배치

1. 카드들을 랜덤하게 배치해주기 위해 리스트를 만들고 

리스트 아래에 위와 같은 코드를 작성해주었습니다

이 코드는 parrots를 해당 범위 내에서 랜덤하게 정렬해달라는 의미를 가져요!

2. parrot 이미지를 코드로 지정하기 위해 Images 폴더 내 있는 이미지들을 Resources 폴더로 옮겨주었습니다

3. 코드로 지정한 이미지들을 가져오기 위해 위와 같은 코드를 작성해주었는데요

여기서 string parrotName = "parrot" + parrots[i].ToString(); 은 이미지 이름을 만드는 것,

newCard.transform.Find("front").GetComponent<SpriteRenderer>().sprite = 은 새 카드 아래 front를 찾아 sprite를 변경하는 것,

Resources.Load<Sprite>(parrotName); 은 Resources 폴더에 있는 parrotName을 가져오는 것을 의미한답니다

4. Unity로 돌아와 Prefab에서 front는 활성화, back은 비활성화를 해둔 뒤 실행을 해보면

이미지들이 랜덤하게 배치가 된 것을 확인할 수 있습니다

근데 이미지 위치가 중구난방이네 쉬이벌.. ㅋㅋ 

두 번째, 카드 애니메이션 적용

이번 게임에서 카드에 적용해줄 애니메이션은 두 가지인데

하나는 카드가 까딱거리는 애니메이션

또 하나는 카드를 눌렀을 때 카드가 작아지는 애니메이션입니다

한 번 적용시켜볼까요?

1. 카드가 까딱거리는 기본 애니메이션을 만들어준 후 Prefabs 내 폴더에 있는 Card에 붙여넣고 

2. Animation 편집기를 열어 카드의 rotation z좌표를 조정해주었습니다

3. 카드를 눌렀을 때 카드의 크기가 작아지는 flip 애니메이션을 만든 후 Card에 붙여넣고 

4. Scale의 x, y좌표를 조정해주었습니다

5. 두 가지 애니메이션을 어느 조건에서 발동시킬 것인지를 관리하기 위해 컨트롤러에서 쌍방향 transition을 만든 후

각 transition에 대해 has exit time에 체크 해제하고, transition duration을 0으로 변경해주었습니다

6. 이후 각각의 transition에 파라미터 조건을 붙여주었는데요

idle ⇒ flip : bool이 true 가 되면 발동하게

flip ⇒ idle : bool이 false 가 되면 발동하게끔 하였습니다

세 번째, 카드 뒤집기

위에서 만든 애니메이션이 정상적으로 작동하기 위해서는 cs가 필요하므로 card.cs를 만드는 것으로 시작해볼게요

1. Card에 button 요소를 추가해주고

2. card.cs에서 카드를 클릭하면 front가 보이게 코드를 작성해주었습니다

3. Unity로 돌아와 On Click에 openCard 함수를 적용시켜주고

4. public Animator anim;과 anim.SetBool("isOpen", true);를 추가 작성해 애니메이션이 적용되도록 하였습니다

5.  실행해보면 카드가 정상적으로 뒤집어지는 것을 확인할 수 있습니다

네 번째, 카드 매칭하기

카드를 매칭하기 위해서는 gameManager가 첫 번째 카드의 이름을 갖고 있다가 두 번째 카드의 이름과 일치하는지 확인해야 합니다

1. 우선 card.cs에서 gameManager를 불러올 수 있도록 싱글톤 처리를 해주었습니다

2. 이후 매칭 로직 함수를 만들어두었습니다

3. 그리고 card.cs에서 openCard를 했을 때 firstCard가 공란일 경우 I가 firstCard가 되게

firstCard가 공란이 아닐 경우 I가 secondCard가 되도록 코드를 작성해주었습니다

4. gameManager.cs에서 isMatched 함수를 위와 같이 작성해 

첫 번째 카드의 이름이 두 번째 카드의 이름과 같을 경우 "굿" 이 출력되게

같지 않을 경우 "우우" 가 출력되게 하였습니다

그리고 매칭이 끝나면 카드 이름을 비우도록 하였습니다

5. 확인해보니 두 카드가 서로 달라 "우우"가 출력되었군요

6. 그런데 아직 카드 매치 후 다시 뒤집는 로직을 만들지 않았기 때문에 card.cs에 위와 같이 네 가지 함수를 작성해주고

7. gameManager.cs에서 firstCard.GetComponent<card>().destroyCard()를 작성해

firstCard에 붙어있는 card.cs에서 destoryCard를 부를 수 있도록 하였습니다

다섯 번째, 이번 과정에서의 완성본

실행해보면? 카드 애니메이션부터 카드 매칭까지 모든 것이 성공적으로 구현되었네요!

이궈궈던 ㅋㅋ 

이렇게 Find Party Parrot을 만드는 과정이 모두 끝이 났습니다❗

반복문부터 리스트 그리고 이미지 코드화 등등 꽤나 다양한 것들을 배우고 적용해보면서

한 층 더 성장한 것 같아 기쁘네요❗️

근데 요즘 유니티만 달려서 프론트엔드 다 까먹어버린

아아..

그럼 다음 개발 일지에서 뵈어요❗️