유니티/나도코딩

[유니티]나도코딩 - 기억력 테스트 게임 클론코딩(2)

HHack 2023. 12. 8. 18:02
반응형

지난시간에 이어 유튜브의 나도코딩 채널에 있는 기억력 테스트 게임을 따라 실습해보도록 하겠습니다.

사실 이미 한 번 실습을 마치고 완성되어있는 상태라 제 스스로 복습하고 기록을 남기고자 블로그를 작성하고 있습니다.

따라서 영상과 다른 사진들이 있으니 유튜브 영상을 보고 따라 만드시길 추천드립니다.

 

오늘은 카드 오브젝트를 만들고 카드 스크립트 틀을 작성해보겠습니다.

1. 카드 만들기

(1) Sprite Editor

① Project 창에서 편집하고자 하는 이미지 클릭 

② Inspector 창에서 Sprite Mode를 Single에서 Multiple로 변경

③ Sprite Editor 클릭

Sprite Editor 활용하기

 

(2) Sprite Editor를 이용한 카드 자르기

① Slice 탭에서 Type을 Grid By Cell Size로 변경하기

② Pixel Size는 X = 450, Y= 620 / Offset은 X = 87, Y = 187 / Padding은 X = 74, Y = 45로 설정

③ Slice 버튼 클릭

④ Apply 버튼 클릭

⑤ 설정 적용된 이미지 확인

Sprite Editor 화면
6개로 잘린 이미지 확인

 

(3) 카드 크기 조절하기

① 사용할 카드를 Hierarchy 창에 드래그 앤 드롭한 후 이름을 Card로 변경

② 사용할 카드의 Pixels Per Unit값을 400으로 변경

카드 이미지를 드래그 앤 드롭
사용할 카드의 Sprite를 클릭 후  Pixels Per Unit값을 400으로 변경

 

(4) 배경 바꾸기

① Hierarchy 창에서 Main Camera 클릭

② Inspector 창에서 Background 색 변경 클릭

③ R값을 245, G값을 245, B값을 245, A값을 0으로 변경

배경 색깔 변경

 

(5) 카드 스크립트 작성

저는 이미 Card Script 및 Card 오브젝트를 완성한 상태라 Card2로 이름을 바꾸어 진행하겠습니다.

 

① Assets 오른쪽 버튼 -> Create -> Folder 클릭하여 이름을 Scripts로 변경한다.

② Scripts 폴더 안에서 오른쪽 버튼 -> Create -> C# Script를 눌러 스크립트 생성

③ 만든 Card 스크립트를 Card 오브젝트에 드래그 앤 드롭

④ Card Script 더블클릭하여 Visual Studio에 들어가 OnMouseDown 메서드를 작성한다.

void OnMouseDown() {
        Debug.Log("Mouse Down");
}

⑤ 게임을 실행하여 Console 창에 "Mouse Down" 로그가 찍히는 지 확인한다.

Scripts 폴더 생성
Card에 적용할 Card 스크립트를 생성
카드 오브젝트에 Card 스크립트 드래그 앤 드롭
Card 스크립트에 OnMouseDown 메서드 작성
콘솔창에 "Mouse Down" 나오는지 확인

 

하지만 현재 게임화면의 카드를 클릭해도 Console창에 아무것도 나오지 않는걸 확인할 수 있다.

그 이유는 OnMouseDown 메서드가 사용자가 Colider 위를 클릭했을 때 인식하기 때문에 Card 오브젝트에 충돌영역을 만들어 줘야한다.

(6) 카드 오브젝트에 충돌 컴포넌트 추가하기

① Hierarchy 창에서 Card 오브젝트 클릭 -> Add Component 클릭 -> Box Colider 2D 추가

② 다시 플레이 하여 Game 창에서 Card를 클릭하여 Console에 로그가 나오는지 확인한다.

Box Colider 2D 컴포넌트 추가
Inspector 창에 Box Colider 2D가 추가된 화면
Console 창에 로그 출력 확인

 

Colider 컴포넌트를 추가하여 성공적으로 OnMouseDown 메서드가 작동되는 것을 확인할 수 있다.

 

오늘은 Card를 만들고 Card에 작동하는 스크립트의 틀을 작성해보았다. 다음 시간은 Card 스크립트에 카드 뒤집기 기능을 작성하여 카드가 뒤집어지는 기능을 구현해보도록 하겠습니다.

반응형