[cocos2d-x] SpriteBuilder와 Swift이용한 게임 만들기 (preeved penguins 프로젝트)

---

기존까지는 Cocostudio와 x-code 의 오브젝트-C를 이용하여 게임을 개발했는데, 앵그리버드와 비슷한 게임인 Preeved Penguin 프로젝트를 진행하면서 SpriteBuilder와 Swift를 사용하게 되었습니다.

SpriteBuilder는 Cocostudio와 비슷한 Sprite편집 툴이라고 생각하면 됩니다. 게임 개발에서 GUI나 애니메이션 등을 담당하는데, 기존의 Cocostudio와 다른점은, 툴 내에서 커스텀클래스를 명시할 수 있다는 점입니다. Cocostudio의 경우 코드상에서 노드를 받아와 클래스를 일일이 생성해주었지만, SpriteBuilder는 커스텀 클래스를 명시하면 해당 이름으로 코드에서 바로 사용가능합니다. (물론 선언하는 과정은 있음.)

Preeved Penguin프로젝트를 진행하면서 배웠던 SpriteBuilder와 swift 기능들을 하나씩 소개하겠습니다.

- 게임소개

Preeved Penguin이란 make it school에서 온라인 과정을 진행하면서 만들게되는 게임 프로젝트입니다. 기본적인 컨셉은 앵그리버드를 생각하면 됩니다. (앵그리버드 카피본)

https://www.makeschool.com/

게임화면을 보면 한눈에 무슨 게임인지 알 수 있습니다. 투석기 앞에 펭귄을 투석기에 올려서 던지는 게임입니다. 이번 프로젝트에서 배울 수 있는 기능들은 아래와 같습니다.

• 터치, 드래그 이벤트
• 물리엔진 (중력)
• 파티클 효과
• 충돌감지
• 애니메이션
• 액션팔로우(카메라 화면 이동) 

1. To set up resolution 2X in SpriteBuilder. (SB can scale resources automatically!! Cocosbuilder can't do that.

2. Learn how to make Smart Sprite Sheet. Smart sprite sheet is set of many sprites used in game. As use smart sprite sheet, device load resource just one time.  SpriteBuilder support a function is make smart sprite sheet.

3. Learn how to link Sprite from SpriteBuilder to X-code by using custom class. Check the log to make method that didLoadFromCCB().

4. Learn how to link Callback method. Make a button and set callback method. Then we can use this method on X-code.

5. Learn how to apply Physical engine at Sprite.

6. Learn Physics in Cocos2d as watching video lecture.

7. Learn how to make physics pivot joint and spring joint.

8. Learn how to set up collision type

9. Learn how to use particle effect.

- resource autoscailing (이미지 크기 자동 변환)

SpriteBuilder라는 툴을 처음 사용해 보았는데 기존에 Cocostudio도 충분히 훌륭하다고 생각했지만, SpriteBuilder는 더 효과적인 기능들을 많이 가지고 있습니다. 일단 SpriteBuilder(SB)에는 resource들에 대한 autoscale 기능을 지원합니다. 

메뉴에서 Project Settings에 들어가면 프로젝트에 사용되는 resource들에 scale을 설정할 수 있습니다.

2x phonehd 의 경우 레티나 디스플레이를 사용하는 아이폰. 4x는 패드입니다. 이렇게 간단하게 설정하기만 하면 resource들을 설정한 해상도에 맞게 scaling합니다.

- create smart sprite sheet ( smart sprite sheet 만들기)

smart sprite sheet란 여러개의 sprite이미지를 하나에 sheet에 담는 기술입니다. 프로그램에서 특정 이미지를 불러올 때마다 자원이 소모되는데 이렇게 여러개의 이미지를 하나의 sheet로 묶어서 관리하게 되면 프로그램은 한번의 이미지 로드 작업으로 여러개의 이미지를 로드하는 효과를 볼 수 있습니다. 시스템을 최적화하는데 상당히 유리한 기능입니다.

smart sprite sheet 역시  SB자체에서 기능을 제공하기 때문에 간단하게 만들 수 있습니다. 

resource 탐색창에서 이미지가 들어있는 폴더에서 오른쪽 클릭 후 make smart sprite sheet를 누르면 자동으로 smart sprite sheet를 만들어 줍니다. 예전에 안드로이드에서 엔진 없이 게임을 만들때 smart sheet를 만들기 위해 일일이 그림을 하나에 시트에 복사하고, 그림 순서별로 번호를 매기고 크기를 정했던 작업이 생각나네요. SB에서는 정말 쉽게 Smart Sheet를 만들어 줍니다. 

- link custom class from SB  to X-code. ( 커스텀 클래스 생성하기 )

앞서 말씀드린 것처럼 SB의 장점중 하나는 커스텀 클래스를 쉽게 만들 수 있다는 점입니다. SB상에서 커스텀 클래스만 명시하면 코드에서 바로 사용할 수 있습니다.

SB에서 펭귄 sprite에 Penguin이라는 이름으로 커스텀 클래스를 만들었습니다. 코드상에서 이와 같은 이름으로 바로 클래스를 만들어서 사용할 수 있습니다.

음 이건 SB의 장점이면서 Switf의 장점이라고 할 수 있겠네요. OBJ-C와 Cocostudio를 사용했을 때는 상대적으로 더 복잡한 절차로 클래스를 만들었습니다. 

- make callback method. ( Callback 함수 만들기 )

callback method역시 SB에서 매우 편리한 기능 중 하나입니다. 기본적으로 callback method는 이벤트를 처리하는데 주로 사용되는데 특정 버튼이 눌리거나 특정 위치가 터치되었을 때 어떤 메소드를 실행시킬지 정의하는 함수입니다.

SB에서는 객체마다 callback메소드를 직접 지정할 수 있으며, 코드상에서 따로 선언하지 않아도 됩니다.

객체를 선택하고 CCControl의 이름을 play로 설정하면, 이 객체를 선택한 경우(이경우에는 버튼객체이므로 클릭) play 메소드를 자동으로 호출하게 됩니다.

따라서 코드상에는  따로 선언하지 않고 play메소드만 만들면 됩니다. 넘나 좋은것~!