[cocos2d-x] 간단한 게임 만들기 (1)

---

지난번에 코코스를 사용해 game of life인가 뭐시긴가를 만들었는데.. 도통 게임이 무슨 게임인지를 모르니 만들고 나서도 뭔가 느낌이 찜찜하더라구요..?! 그래서 이번에는 처음 하는 사람도 딱 보면 알 수 있는 그런 게임을 만들어보려고 합니다. 일단 소스는 역시 Make school 이구욤 간단히 소개하면 다음과 같은 게임입니다.

https://www.makeschool.com/tutorials/build-a-clone-of-timberman-in-c-with-cocos2d-x-and-cocos-studio/getting-started

위 링크에서 동영상을 보시면 어떤게임인지 확 알 수 있어요.

제목은 스시네코인데... 한글로 하면 초밥고양이..? 라고 할 수 있습니다. 초밥이라고 하기엔 뭔가 김밥이긴 하지만... 초밥 사이에 꽂혀있는 젓가락과 와사비를 피하면서 초밥을 날리는.... 그런 게임입니다. 고양이는 와사비를 싫어하나 보네요.

일단.. 프로젝트를 만들어 보도록 하죠.

COCOS를 실행해서 프로젝트를 만들어줍니다. 언어는 당연히 C++!! 항상 터미널에서 만들었는데 코코스 스튜디오로 만들려고 하니 역시 생소하네요 ^^.. 편하긴 편한데 ㅎ

프로젝트가 제대로 만들어 졌는지 패키지로 만들어 봅시당.

XCODE로 퍼블리슁!!! 

움~ 실행도 잘 되는군요~!! 본격적으로 만들어 볼까요?

이미지 소스 다운로드~!!

Assets (1).zip

일단 화면부터 만들어 보겠습니다. 위의 첨부파일을 다운받으신다음 코코스 스튜디오로 고고~!

먼저 기존에 있던 코코스 기본 배경화면을 날려버립니다. 클릭하고 Delete를 누르면 삭제됩니다. 왼쪽에 리소스 탐색창에서도 삭제해주세요~! 그 다음 오른쪽 클릭 후 아까 다운받으신 이미지 폴더를 가져옵니다!!

새로운 캐릭터를 만들기 위해 New File을 누릅니다. 단축키는 Command + N

새로운 캐릭터를 만들고 있습니다. Type 은 노드.

새로운 csd파일이 생성되고 더블클릭하면 아무것도 없는 화면이 나옵니다. 아까 받은 이미지 파일에서 resources-2X 폴더에 있는 character1을 드래그로 꺼냅니다. 여기서 1x~4x 가 의미하는것은 해상도인데요. 디폴트로 설정되어 있는 해상도인 iPhone 4/4s(640 * 960) 에 최적화된 그림이 2x에 있는 그림들이기 때문에 2x에 있는 이미지를 사용하고 있습니다. 아마 나중에 xcode로 코딩할때 화면 해상도에 맞게 1x~4x에서 알맞은 그림을 꺼낼 것 같군요. 일단 지금은 코코스 스튜디오의 해상도 설정이 iPhone 4/4S이기 때문에 2x의 이미지를 사용해 줍니다. 코코스 해상도 설정은 왼쪽 상단에서 확인 할 수 있습니다.

잘 따라오셨다면 화면에 냥이가 보일 겁니다. 이 냥이를 선택하고 초기 위치를 선정해야하는데요, 아시다시피 그림의 초기 위치는 Position과 Anchor가 있습니다. 이전 포스팅에서 설명을 했기 때문에 설명은 생략! 다음과 같이 설정해줍니다.

위와 같이 설정하면 냥이가 중앙을 기준으로 왼쪽 위에 위치하게 됩니다. 바꾸는 김에 Name도 디폴트 이름이 아닌 cat으로 바꿔줍니다. 이렇게 오브젝트 마다 이름을 넣어주는 것은 나중에 xcode상에서 사용할 때 아주~~ 편합니다. 내가 지었으니까 이름 찾기가 쉽겠죵~?

냥이를 다 만들었으면 이제 초밥을 만듭시다. Piece라는 노드를 새로 만듭니다.

이번 파일에는 초밥과 젓가락 두개를 셋팅합니다. 초밥의 이름은 roll, 젓가락 두개는 각각 leftChopstick, rightChopstick으로 지정합니다. 같은 그림파일을 사용하지만 다른 오브젝트로 설정할 수 있습니다. 물론 둘다 같은 방향이기 때문에 하나는 반전시켜주는 작업을 해야되죵~!

클릭 한번으로 쉽게 반전효과~!

이제 그림들의 초기 위치를 정해볼까요? 롤을 센터로 놓고 젓가락을 양옆에 배치시킵니다. 롤의 앵커는 0.5, 0.5  포지션은 0,0 으로 설정합니다. 왼쪽 젓가락은 앵커 1, 0.5 포지션은 0%, 40% (픽셀이 아니라 퍼센트입니다.) 오른쪽 젓가락은 앵커 0, 0.5 포지션은 100% 40% 로 설정합니다. 

위와 같은 그림이 나오면 성공~! 위치값을 제대로 설정했는데 위와같은 그림대로 위치가 안나온다면 노드창을 한번 보시기 바랍니다. 롤 스트라이프 아래 젓가락 스트라이프가 위치했는지 체크하시기 바랍니다. %로 위치를 사용하면 상위 스트라이프를 기준으로 위치가 정해지기 때문에 젓가락이 롤에 포함되어있어야 합니다~!!

마지막으로 Visible옵션을 체크해제합니다. 기본적으로 젓가락은 하나만 보여야 하기때문에 양쪽다 Visible옵션을 해제하고 코드상에서 랜덤으로 하나씩 체크할 것 같습니다. 이것으로 Piece 스트라이프 끝~!

그 다음은 배경입니다. 배경은 MainScene.csd에 추가합니다. 초기 위치는 앵커 0.5, 0 포지션 50%, 0% 로 설정합니다. 이렇게 설정하면 어느 디바이스에서도 화면 맨 아래를 기준으로 배경이 위치됩니다. 

이제 이 MainScene에다가 우리가 만들었던 냥이와 초밥 노드를 넣고 위치를 설정합니다. 냥이야 뭐 한명이니까 상관없는데 초밥은 현재 초밥위에 수많은 초밥이 쌓여야합니다. 따라서 그 초밥들을 관리 할 수 있도록 지시할 수 있는 무언가가 필요하기 때문에 빈 node를 현재 초밥 위에 만듭니다.

빈 노드의 이름은 pieceNode로 정하고 위치는 (50%, 406px) 입니다.

다음은 스코어를 표시하는 Label을 생성합니다. 라벨의 이름은 scoreLabel이고 폰트는 아까 받은 파일에 있는 Game of Three.ttf로 설정합니다. 초기 텍스트는 0 이고 텍스트 크기는 100으로 설정합니다.

다음은 위젯에서 Button을 드래그해서 가져옵니다. 버튼의 이름은 play이고 사이즈와 위치를 위 그림과 같이 설정합니다. 처음 버튼을 드래그하면 아무것도 없는 투명한 모양이 나오는데, 버튼의 속성을 보면 Normal과 Pressed, Disabled 상태의 이미지를 정할 수 있습니다. 

각각의 상태를 선택해서 기본 버튼 상태와 눌렀을 때의 상태를 정합니다. 이렇게 정해노면 알아서 스프라이트 그림이 바뀝니다. 넘나 편한것~!

그담은 라이프게이지 추가입니다. 이것 따로 노드를 선언하는게 아니라  리소스에서 바로 드래그로 추가합니다. 먼저 백그라운드부터 위치를 잡고..

그 다음은 라이프게이지입니다. 리소스에서 life.png를 추가하고 위와같이 위치를 잡아줍니다. 라이프 게이지를 컨트롤 하는 것은 속성중에 Scale을 제어함으로써 가능합니다. 일단 50%로 해놓으면 전체에서 반만 차있는 것처럼 보입니다.

자 마지막으로 play버튼의 visible을 체크해제하면 모든 준비는 완료입니다.

이제 리소스를 xcode에서 사용할 수 있게 복사하는 작업이 남았습니다. 물론 우리가 코코스스튜디오에서 사용한 그림은 패키지를 퍼블리싱하면서 자동으로 복사되지만, 1x,3x, 4x 폴더의 그림들은 복사가 되지 않습니다. 해상도에 맞게 자동으로 그림을 찾아 뿌릴 수 있게 하기 위해서 이 그림들도 필요하니 폴더를 통채로 복사하는 것이 좋습니다.

코코스스튜디오에 있는 Assets폴더를 복사해서  Resources에 res폴더 안으로 붙여넣기!! 하면 모든 준비는 끝났습니다.

코딩은 다음 포스팅에서~!!