2024 09 02 TIL

4강 카드 뒤집기

 

사전작업: 기본 설정 (windows-> 2by3,모바일환경 구축,신 이름 바꾸기,패키지 업로드)

 

가장 첫번째로 한 것은 시간을 구현할 텍스트다.

UI -  Text를 하나만들고 

pos x 0 y 400 width 200  height 200    폰트 배민주아체  가운데정렬  폰트사이즈 70

폰트 색상 하얀색  

 

Board 빈 오브젝트 생성

Board 안에 빈 오브젝트 Card를 추가 생성

Card 안에 2d sprite square 두 개체 생성

 

이름은 Front ,Back 으로 지어주고

 

Front에는 rtan0 이미지파일을 넣어주고

만약 이미지 파일이 너무 크다면 이미지파일의

pixel per unit을 500으로 설정 (네모한칸당 들어가는 픽셀 수를 의미하며 값이 작을수록 이미지가 커짐)

 

Back에는 ? 표시를 한 뒷면을 표현하기 위해 텍스트 오브젝트를 추가적으로 생성

캔버스의 렉트 트랜스폼을 리셋하고 width 100 height 100 scale x y 0.01

Render Mode : world space   Order in layer 1 

텍스트 오브젝트의 렉트 트랜스폼의 strentch를 shift alt 오른쪽 대각선 아래 기능으로

캔버스와 동일하게 사이즈를 맞춰주고

폰트 배민주아체 사이즈 50 가운데정렬 텍스트에 ?를 입력해준다.

 

다음은 타이머 기능을 만들기위해 GameManager 오브젝트와 스크립트를 만듬

스크립트에

using.UnityEngine.UI //유니티의 UI기능 불러오기

 float time = 0.0f;   public Text timeTxt; //시간 변수 생성 ,텍스트 변수 생성

UPDATE 문안에 time += Time.delataTime;  //시간 받아오기

timeTxt.text = time.ToString("N2"); //변수 timeTxt 에 변수 time의 값을 나타내도록 함

N2는 소수 둘째 자리까지 표시)

 

gamemanager 스크립트를 오브젝트에 붙이고 time 텍스트 붙이면 타이머 기능 완성

 

카드를 정확히 16개 생성하도록 구현하기 위해 Board 스크립트를 만들고 Board 오브젝트에 붙여놓기

 

for문 (반복문) 을 start 안에 입력 

public GameObject card; // start 밖에 카드 오브젝트를 받을 변수 생성

 

for(int i = 0; i<16; i++)  // 0부터 15까지 반복

{

  Instantiate(card);   //카드 생성

}

Board 스크립트에  프리팹 카드를 넣어주어 실행되는지 확인

 

//생성되는 오브젝트를 Board안에 넣어주기 위해 카드 생성하는 로직을 수정

 

Instantiate(card, this.transform);   //보드 자기자신의 위치에서 생성 

 

카드 16개가 따로 띄어져서 생성되게 하기위해

먼저 카드 사이의 거리를 0.1로 두기위해선 카드 크기가 1.3이므로 1.4의 간격으로 카드를 배치해야한다는 것으로 결론을 지었다.  또한 카드가 반복적으로 생성되게 하려면 아래서부터 위로 16개의 카드가 4x4로 배치되어야하는데 그래서 i값이 0부터 시작하는 것을 근거로 i값에 4를 나누어 몫과 나머지를 가지고 x y 값을 정하자고 한다.

예시로 1%4 (나머지) == 1

            5%4 ==1 로   

나머지값은 x값으로 이용하고

몫 값을 y값으로 이용한다

해서 코드를 작성하면

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

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


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

//카드를 생성하고 위치를 i값을 4로 나눈 몫과 나머지를 이용해 조정하고 거기에 1.4를 곱한 값이 카드가

생성되는 위치가 된다.

 

이대로 실행하면 오른쪽 상단쪽으로 카드가 몰려있는데 이것은 0,0 인 위치에서 시작되서 그런 것이므로

// 따로 x와 y 값이 화면 맞게 -2.1  -3.0 을 하며 화면에 맞춘다.

 

다음은 카드들에 랜덤한 이미지를 부여해야한다.

 

c#으로는 처음 리스트를 활용해보는데

(자료형)[] (이름) = {내용}; 이런 구성인것 같다. 크기는 지금 초기에 설정한 안에 들어간 값 만큼만 사용할 수 있는 듯하다.

00 11 22 이런식으로 해준 이유는 이 게임이 뒤집어서 나온 그림의 짝을 맞추는 게임이라 두개씩 넣었다.

이런식으로 4번 값을 불러오면 0부터 시작해서 4를 해서  5번째 값인 2가 해당하게 된다.

 

 

 

이 배열이 랜덤성을 띄기 위해선 먼저 using System.Linq; 라는 기능을 먼저 추가해준다.

 

arr = arr.OrderBy(x => Random.Range(0f, 7f)).ToArray();

 

OrderBy()는 괄호안의 기준으로 배열을 정렬한다.

괄호 안에서는 0부터 7까지의 랜덤한 값으로 값을 정한다 그리고 ToArray로 그 값들을 배열로 다시 만들고

왼쪽에 arr에 그 값이 다시 들어감으로서 arr이 랜덤하게 재 배열되는 원리다. 

 

이제 카드들에 랜덤하게 이미지를 넣어주는 로직을 작성한다. 먼저 Card라는 스크립트를 만들고 그 스크립트를 Card 프리팹에 넣어준다.

index의 약자인 idx 라는 정수형 변수를 선언하고  Setting 이라는 함수와 ()안에는 number라는 매개변수를 적는다.

함수안에 idx = number; 라 적으면 idx는 매개변수를 통해 값이 변하게 된다.

Board로 돌아가서  go.GetComponent<Card>().Setting(arr[i]); 를적어준다. 카드 컴포넌트를 불러오고 Setting 함수의 매개변수에 arr[i] arr배열의 i번째를 넣어준다.  이러면 idx에는 arr[i] 의 값이 넣어질 것이다.

 

유니티로 돌아가서 실행을 해보고 카드를 하나 선택해 클릭해서 inspector에 우클릭을 하여 debug를 눌러보면

idx값이 보인다. 카드마다 다른 idx값을 한쌍씩 가지고 있으면 성공이다.

 

여기에 idx값에 따라 이미지파일을 불러오게 하려면 Resources 폴더라는 유니티 기능을 사용한다.

(폴더 명칭 정확히)

 

images 폴더의 이미지들을 Resources 폴더에 잘라붙여놓고 images폴더를 삭제해주도록한다.

Setting 함수에 Resources.Load<>   //<>안에는 자료형이 들어감 

Texture Type이 Sprite 이므로 <>안에 Sprite를 넣어주고

 

뒤에 ()에는 자료이름을 넣어준다 여기서 "rtan"까지는 이미지파일 이름이 같지면 번호가 다른데 idx를 적으면 그냥 문자열이 된다.  그래서 $를 ""앞에 적고  {}중괄호를 넣어 안에다 변수를 넣어주면 숫자가 입력된다.

 

이미지파일을 불러와야하기에 SpriteRenderer 를 써준다.

Card Script에 front가 나오지 않으니

앞에 public을 써준다. 그리고 front의 스프라이트에 리소스에 있는 rtan(idx)의 값을 넣는 로직을 해주면

 

그러면 front가 따로 생기게 된다. Card 프리팹을 더블클릭해서 꺼져 있는 front를 안에 넣고 실행하서 확인한다.

 

idx가 5인 카드에 rtan5가 들어가 있으면 성공이다.

 

이제 카드 애니메이션을 만들차례다.

 

animations 폴더를 만들고 안에cardidle 애니메이션 파일을 만들어준다. card 프리팹을 hirerachy 창에 붙여놓고 애니메이션을 파일 붙여 준뒤 프리팹에 바로 적용시켜준다. 애니메이션을 만들땐 애니메이션을 열고 오브젝트를 클릭한 후 녹화를 한다. 이번에는 카드가 약간 돌아가는 애니메이션을 만들어줘야 해서 20부분에 z값을 3으로 하고 40부분에 다시 0으로 한후 녹화를 껏다. 그리고 cardflip이라는 애니메이션을 만들고 10초대에 xy scale 값을 1.2로 만들고 녹화버튼 끈다

(flip은 looptime해제) 이제 조건에 따라 애니메이션이 실행되는 것을 정해야하기 때문에 card 애니메이션 컨트롤러로 들어가본다.

 

처음 상태인데 먼저 parameter를 새로 isOpen을 만들어준다. 그리고 cardidle과 cardflip을 서로 make transition으로 연결해주고

트랜지션들에 has exit time은 꺼주고 transition duratior은 0   그리고 cardidle에서 cardflip으로 가는 트랜지션은 conditions를 isOpen true   반대는 false로 해준다.

 

카드의 뒷면을 클릭했을때 뒤집어져야 하므로 card 의 back 부분의 text에 버튼을 달아준다. 그리고 프리팹 전체에 적용시켜주고 card 오브젝트는 삭제

 

card 스크립트에서 opencard 함수를 만들어주고 

 

front 와 back 오브젝트를 받아와야하기 때문에 기존에 front는 frontimage로 명칭을 바꿔줍니다. 그리고 애니메이터 anim 도 선언

opencard 안에  

 anim.SetBool("isOpen", true);  // isOpen의 불값이 true 일때 실행
 front.SetActive(true);    //front는 보이게 되고

 back.SetActive(false);   // back은 안보이게 됨 
        

 

 

card 프리팹에 script 안에 적절하게 넣어주고 

 

버튼 컴포넌트의 onclick에 card 오브젝트를 넣고 opencard함수를 실행하도록 해주면 카드가 뒤집히는 것 까지는 구현이 되었다.