cocos2d-x 게임 개발 플래쉬처럼 쉽게? 만들어보자. CocosBuilder

 cocos2d-x로 게임 개발하시면서 살림살이 좀 나아지셨습니까? 아니라구요? 일일이 CCMove하고 CCSize 등등... 액션 처리 매번 코딩으로 하기 귀찮으셨다구요? lua로 처리할 수 있지만 아직 lua를 모르거나 작업할 환경은 아니라구요? 그런 분들을 위해 멋진 툴 하나 소개시켜 드립니다.

 주구장창 글로 설명하는 것 보다는 먼저 영상부터 하나 보시겠습니다.

 cocos2d-x와 cocosbuilder를 사용해서 만들어진 강남스타일 패러디 App입니다. 이걸 다 일일이 코딩으로 짠다고 생각해 보세요. 어떤가요? 아찔까지는 아니더라도 답답함과 한숨이 밀려오실 수 있습니다.

 이걸보시면 생각이 바뀌실겁니다. 플래쉬 같이 생긴 툴에서 작업을 하고 있죠? 이게 바로 코코스빌더입니다. 또 다른 영상을 보겠습니다.

 버전업이 되면서 본 에니와 키 프레임 에니를 지원합니다. 역시나 제작 과정을 살펴보겠습니다.

 위 캐릭터 나오기 전 메인 메뉴 부분 제작 과정입니다. 역시나 플래쉬처럼 키 프레임 찍고 재생하고 그러네요. 바로바로 플레이 시켜가며 확인도 되구요. 여기서 잠깐, 위에서 말한 본 에니와 키 프레임 에니 지원 이건 뭘 뜻할까요? 아래 이미지를 봅시다.

 cocos2d-x 샘플 2장의 이미지를 임의로 합쳤습니다. 윗 부분은 기존 CCSprite에 애니 처리 샘플용 리소스고 오른쪽 밑에는 위 영상에서 사용한 본, 키 프레임용 리소스입니다. 어떤가요? 리소스 사용양은 줄어드는 이점에다가 Idle, Wave, Jump, Funky라는 다양한 애니를 처리하고 있습니다.

 참고로 위 영상을 직접 체험하시려면 링크에서 Extensions Test -> CocosBuilderTest를 선택하시면 됩니다.

 근데, 뭐야? 겨우 이정도야? 라고 느끼시는 분은 아무래도 위에껀 샘플이다보니 아래영상을 참고하세요.

 이건 유니티3D용 본 에니 지원 플러그인 찾다가 발견한 영상입니다. 일본에서 95% 이상이 사용한다는 SpriteStudio 툴입니다. 코코스빌더로 이것과 100% 같게 작업은 안 되더라도 비슷하게 작업은 가능합니다.

 최근에는 버전업을 하더니 유니티 3D의 유니티 플레이어 같은 CocosPlayer라는 것을 지원합니다. Xcode도 필요없고 CocosBuilder만 가지고 게임을 만들어 디바이스나 에뮬레이터에서 테스트 및 디버깅까지 할 수 있는거죠. java script와 html5를 좀 알아야 할 듯 하네요. 위 영상의 게임은 링크에서 플레이 해볼수 있습니다.

 결론은, 일반 애니 연출이든 캐릭터 애니메이션이든 코딩으로 해야할 것을 프론트 앤드 툴인 코코스 빌더를 통해서 작업하는 것이죠. 마치 플래쉬 같은 작업 환경을 생각하시면 됩니다. 빠르게 툴로 처리하고 부족하겠다 싶으면 Action Script로 추가 작업해주는 것 처럼요.

 프로그래머들에겐 기존 CCAction 객체를 상속받은 무수히 많은 액션들을 코딩없이 처리할 수 있게 된 것이죠. 또한 Action은 쓰기 싫다면 일반적인 UI 레이아웃 구성하는데 사용해도 상관없습니다. 저도 Framework 테스트 게임 만들때 UI 관련 레이아웃을 코코스 빌더로 했었습니다. 심지어는 UI를 떠나 게임 오브젝트 배치용 더미 Layer등도 두어서 더 쉽게 작업할 수 있었죠.

코코스 빌더로 만든 게임들

Watermelon with Me - 코코스빌더 10% 자바 스크립트 90%
CocosDragon - 코코스빌더 90% 자바 스크립트 10%


코코스 빌더 튜토리얼 링크들

 한국분이 CocosBuilder 문서를 번역과 CocosBuilder로 게임 만들기 튜토리얼을 직접 정리하신 분이 있네요. 영어와 중국어가 더 땡기시는 분은 아래 것들을...

http://www.raywenderlich.com/23996/introduction-to-cocosbuilder
https://code.zynga.com/2012/10/creating-a-game-with-cocosbuilder/