유니티 강좌 10 - 알키우기1. 2D 스프라이트의 레이어

 

1. 게임 내용 설계

한동안 정말 흔했던 게임 클리커를 만들어 본다.

게임 시스템은 보기보다 단순한데, "화면을 마구 터치하면 화면 가운데 있던 알이 조금씩 깨져 병아리가 태어나고, 계속 마구 터치하면 병아리가 점점 자라 닭이된다. 다큰 닭은 새로운 알을 낳고 사라진다. 이렇게 태어난 닭이 점점 늘어날 수록 게임의 재미를 더할 닭 업그레이드 자원으로 사용되고, 업그레이드된 닭이 태어나면 더 많은 자원을 생산한다."

중요한 몇 가지 요소만 따온 본격 닭키우기 클리커게임으로, 이 시스템을 보자마자 어떻게 만들지 감이 왔다면 이 강좌가 수준이 낮을 수 있으니 좀더 고급진 강좌를 찾아 떠나도록 하자.

이 내용은 완전히 유니티나 C#프로그래밍을 모르는 분들이 따라해보며 친숙해지는 과정 2번째 코너로, 매우 단순하게 어쩔 수 없이 알아야만 할것들 위주로 작성될 것이며, 첫 예제였던 총알 피하기에서 그대로 이어지는 과정으로 앞서 등장했던 요소들은 모두 설명을 생략하고 진행됩니다. 따라서 완전 처음이시라면 1편부터 살펴보시길 권장합니다.

유니티 강좌 1 - 총알 피하기 1/9. 준비

 

 

2. 2D 프로젝트 생성

2D 프로젝트를 생성하고, 빌드셋팅에서 안드로이드 플랫폼으로 변경한다.

프로젝트 생성 및 Assets 폴더 : boxwitch.tistory.com/175
빌드셋팅 플랫폼 변경 : boxwitch.tistory.com/178

편의상 Scene파일의 이름은 scene 으로 변경하고, Assets 에 Texture 폴더를 만들고, 게임에 필요한 일부 스프라이트 파일을 넣는다. 필요한 파일은 아래에서 다운받을 수 있다. 추가된 스프라이트의 Texture Type은 처음 프로젝트 생성시 2D를 선택하였으므로 자동으로 Sprite(2D and UI)로 변경되어 있을 것인데, 만일 다르다면 똑같이 바꾸어준다.

bg_line.png

0.01MB

egg0-0.png

0.02MB

egg0-1.png

0.03MB

egg0-2.png

0.03MB

egg0-3.png

0.03MB

16x16.png

0.00MB

shadow.png

0.01MB

 

3. 스프라이트의 깊이

먼저 게임창의 사이즈를 2560x1440 Portrait 으로 선택한다, 
프로젝트창에서 16x16 과 bg_line 스프라이트를 드래그하여 Hierarchy에 던져 넣는다. 게임화면에 가득차게 보이도록 씬에 등록된 16x16 오브젝트의 Transform에서 Scale의 X, Y 값을 60, 70으로 변경하고 Position의 X, Y, Z는 모두 0으로 화면 가운데 놓이게 한다. 씬에 등록된 bg_line은 Scale의 X, Y 값을 0.5, 0.5로 변경하고, Position의 X, Y값을 0, -2.5로 한다.

앞서 설명했듯이 유니티 에디터와 게임창은 실제로 3D 공간이지만 정면으로 바라보아 측면이 보이지 않을 뿐이다. 따라서 스프라이트를 담고 있는 게임오브젝트들은 엄연히 Z축도 사용하고 있으며, 두 스프라이트의 Z축 값에 따라 카메라에 가까운 스프라이트가 카메라에 먼 스프라이트를 가리게 된다. 위에서 두 스프라이트의 값이 0으로 동일하면 동시에 둘다 보이는 것은 불가능 하고, CPU가 화면을 그리는 순서에 따라 불규칙하게 가려지는 스프라이트가 달라질 수 있다. 따라서 위 구성에서는 bg_line의 Z 값을 -1로 변경하여 16x16보다 항상 위에 있어보이도록 한다.

Scene창의 왼쪽 상단에 있는 2D 버튼을 눌러 2D 모드를 해제하고 씬을 둘러보면 카메라와 bg_line과 16x16의 공간감을 확인해볼 수 있다. 16x16스프라이트가 있는 위치가 모든 좌표의 중심이고, 카메라의 Z 위치값은 -10 으로 되어있다. 그리고, Z 위치값이 -1인 bg_line은 그 둘 사이에 있다. 따라서, 우리가 2D 모드의 씬 창에서 보는 모습은 위의 카메라가 바라보는 모습이므로 bg_line이 16x16보다 앞에 보이게 된다. 반대로 16x16의 Z축 위치값이 -1이고 bg_line이 0이라면 16x16스프라이트가 더 앞에 나와있게 되어 bg_line이 가려 안보일 것이다.

2D 좌표를 사용하는 파워포인트나 포토샵에서 Layer로 깊이를 정하는 것을 유니티에서는 위와 같이 Z축의 값으로 정할 수 있고, 다른 방법으로 레이어 순서를 정하는 방법도 있지만, 그 부분은 따로 다루도록 하자.

shadow 와 egg0-0 스프라이트도 같은 방법으로 드래그하여 Hierarchy 에 등록하고, egg0-0의 이름은 egg로 변경한다, shadow와 egg 게임오브젝트의 위치는 와와 같이 지정하여 배경 > 라인 > 그림자 > 알의 순으로 스프라이트가 겹치도록 한다.

 

4. 화면 터치 입력

버튼 오브젝트를 하나 생성하고, 크기를 가로, 세로 모두 stretch로 하여 여백 없이 캔버스에 꽉 채운다. 버튼에 사용되는 스프라이트는 16x16으로 지정하고, 버튼 오브젝트 하위에 있던 Text는 삭제한다.

버튼에 있는 Image 콤포넌트에서 Color항목에 있는 색상을 누르면 색상을 변경할 수 있는 창이 나타난다. RGB의 아래 A는 Alpha채널이며 이 스프라이트의 투명도이다. A의 값을 0으로 만들면 이 스프라이트는 완전히 투명해져서 게임화면에 보이지 않게 된다.

게임화면의 터치를 입력받는 방법은 여러가지가 있을텐데, 여기에서는 기존에 사용했던 이벤트 트리거를 사용하여 입력을 받아 사용하려 한다. 

Hierarchy의 내부 공간 아무곳에 마우스 오른쪽 클릭을 해서 나타나는 메뉴 중에 Create Empty를 선택한다. 우리가 지금까지는 특정 게임오브젝트를 생성하기 위해 화면 상단에 있는 GameObject 메뉴를 사용했었지만, 그 곳의 모든 메뉴는 Hierarchy에서 마우스 오른쪽 버튼으로 띄울 수도 있다는 점을 알아두자.

새로 만든 빈 게임오브젝트의 이름을 gameController로 변경하고 Assets폴더에 script폴더를 새로 만들고 GameController 스크립트파일을 생성한 다음, Hierarchy의 gameController 오브젝트에 첨부한다.

GameController.cs 에 위와 같이 버튼을 누르면 텍스트를 출력하는 함수를 하나 만든다.

화면을 가득 채운 btnScreen에 Event Trigger 콤포넌트를 추가하고 위에서 작성한 Press_btnScreen( ) 에 연결해준다.

실행하여 게임화면을 클릭해보자. 이벤트 트리거에 함수가 잘 연결되어 있다면 화면을 클릭할 때마다 콘솔창에 메세지가 등장할 것이다.

 

5. 미리해보기

1. 화면을 터치할 때마다 egg를 약간씩 움직여 흔들린다거나 충격을 받는 듯 한 동작을 만들어보자.

 

내용이 마음에 드시면 구독 & 공감 부탁드립니다. 

---

* 유니티 2D 라이팅
* 유니티 2D 애니메이션
* 자주 사용하는 유니티 플러그인, 가이드, 사용방법 모음