시작하세요! cocos2d 아이폰 게임 프로그래밍

cocos2d아이폰 게임 프로그래밍

어렸을 때 사촌형의 초록색 애플 모니터를 보던 기억이 나는데, 이제는 아이폰 프로그래밍을 하고 있는

제 모습을 보면 애플하고도 어지간히 인연이 있구나 라는 생각이 듭니다.

사실 게임 프로그램은 필자에게는 너무나 오랫동안 다가서지 못하던 영역이었습니다. 이 세계에서 오랫

동안 개발을 해왔지만 하던 일이 SI인지라 항상 게임을 만들어 봐야지 하는 생각을 아련하게 했다가도 그

어려운 공정에 매번 돌아서야 했습니다. 그래서 아이폰 앱을 개발하면서도 마찬가지일 거라고 생각했습

니다.

아이폰 개발 초기에 입사 동기였던 한 친구를 만난 적이 있습니다. 그 친구가 “이번에도 그냥 업무용 프

로그램을 만들거면 이 나이에 이젠 더 이상 다른 프로그래밍 언어는 배우기 싫어...” 했던 기억이 납니다.

아마도 그 친구도 아이폰 개발을 공부하게 되면 게임을 만들고 싶었나 봅니다. 저와 비슷한 심정으로 말

이죠.

그런데 아이폰 개발을 하던 중 OpenGL을 바탕으로 하는 2D 프레임워크인 cocos2d for iPhone을 알게

됐고 cocos2d for iPhone을 이용하면 게임을 개발하기가 정말 쉽다는 사실을 알게 됐습니다. 공부를 하면

할수록 정말 쉽다는 것을 체감할 수 있었습니다.

하지만 지금까지도 cocos2d for iPhone 관련 교재나 책이 거의 없고 대부분의 개발자들이 인터넷에서 검

색하는 식으로 공부를 하는 것을 보고 큰 용기를 내서 책을 쓰게 되었습니다. 이 책을 집필하는 동안 예제

를 만들기 위해 코딩을 하고 디버깅을 하는 과정은 정말로 즐거웠습니다. 그리고 최대한 내용을 이해하는

데 도움이 되는 예제를 만들고자 노력했습니다.

‘무엇을 만들 것인가’를 여러분이 생각했다면 이 책은 ‘어떻게 만들 것인가’에 대한 어느 정도의 방법을 제

시해 줄 것이라고 봅니다. 제가 최선을 다했다고는 하지만 부족한 면이 있을 테고 누구에게나 만족할 만

한 책이 될 수는 없을 것입니다. 그래도 이 책이 아이폰으로 게임 개발을 하는 데 많은 도움을 줄 수 있기

를 바랍니다.

아이폰의 앱 스토어가 폐쇄적으로 운영한다고 불평하는 사람도 많지만 제가 개발을 시작한 이래로 개발

자에게 이렇게 유리한 곳은 없었습니다. 애플은 개발자에게 약간의 연간 수수료를 요구하면서, 엄청나게

큰 시장을 선물로 주었습니다. 이곳에서는 대기업이든 중소기업이든 개인이든 똑같이 경쟁합니다. 앱스

토어에서는 기존의 대기업이나 큰 업체가 가진 프리미엄이 통하지 않습니다. 누구에게나 기회가 공평하

게 주어집니다.

그러기에 여러분들도 이 책에서 배운 내용으로 게임을 만들어 앱스토어에서 당당히 그들과 경쟁할 수 있

습니다. 여러분들이 만들어낼 혁신적인 성과와 실험의 산물들이 계속 쏟아져 나오길 기대해 봅니다. 또한

그 경쟁에서 여러분들이 이기기를 기대합니다.

모든 것을 알아야 프로그램을 만들수 있다고 생각하지 않습니다. 이 책을 통해 어느 정도 자신이 생겼다

면 먼저 도전하시기 바랍니다. 도전했기에 자신의 부족한 부분을 알게 되고 나중에라도 채울수 있게 되는

것입니다.

짧은 집필 기간과 지면상의 제약으로 책에 싣지 못한 내용들이 아직은 많은 듯해서 아쉬움이 있지만

언젠가 이 내용을 가지고 다시 한 번 찾아 뵐 수 있기를 기대해 봅니다.

- 이재환 -

01cocos2d for iPhone 게임 엔진

1.1 cocos2d의 장점 ……………………………………………………………………………… 14

1.2 cocos2d가 제공하는 기능 …………………………………………………………………… 14

1.3 cocods2d 설치 ……………………………………………………………………………… 15

1.4 예제 실행 ………………………………………………………………………………………… 25

02cocos2d 기본 구조

2.1 CocosNode …………………………………………………………………………………… 27

2.2 Director ……………………………………………………………………………………… 28

2.3 Scene & Layer ……………………………………………………………………………… 28

2.4 Sprite …………………………………………………………………………………………… 31

2.5 Action ………………………………………………………………………………………… 32

03Hello, World! 살펴보기

3.1 HelloWorld 프로젝트 생성과 실행 ………………………………………………………… 33

3.2 기본형 만들기 ………………………………………………………………………………… 41

04좌표계와 앵커포인트

4.1 좌표계 …………………………………………………………………………………………… 43

4.2 앵커포인트(AnchorPoint) ………………………………………………………………… 44

05Label 다루기

5.1 CCLabelTTF 기본형 ………………………………………………………………………… 49

5.2 트루 타입 폰트 파일 사용하기 ……………………………………………………………… 53

5.3 비트맵 폰트 파일과 캐릭터맵을 이용한 텍스트 출력 ……………………………………… 57

06Sprite 다루기

6.1 Sprite 사용하기 ……………………………………………………………………………… 63

6.2 Parent & Child ……………………………………………………………………………… 71

07Menu 다루기

7.1 메뉴와 메뉴아이템의 기본 사용법 …………………………………………………………… 81

7.2 메뉴 & 메뉴아이템의 AnchorPoint & Default Position …………………………… 87

7.3 메뉴아이템에서 Tag 사용하기 ……………………………………………………………… 90

7.4 Tag 기능 좀 더 살펴보기 …………………………………………………………………… 94

08Action 사용하기

8.1 기본 액션 ………………………………………………………………………………………… 97

8.2 Composition Actions …………………………………………………………………… 109

8.2.1 Sequence .......................................................................................................................................................................................................109

8.2.2 Spawn ...............................................................................................................................................................................................................110

8.2.3 Reverse ............................................................................................................................................................................................................111

8.2.4 DelayTime .......................................................................................................................................................................................................111

8.2.5 Repeat, RepeatForever ...................................................................................................................................................................112

8.3 Ease Actions ……………………………………………………………………………… 113

8.3.1 Ease Actions...............................................................................................................................................................................................113

8.3.2 EaseExponential Actions ..............................................................................................................................................................119

8.3.3 EaseSine Actions .................................................................................................................................................................................120

8.3.4 EaseElastic Actions ...........................................................................................................................................................................120

8.3.5 EaseBounce Actions .......................................................................................................................................................................122

8.3.6 EaseBack Actions ..............................................................................................................................................................................123

8.3.7 Speed Action ............................................................................................................................................................................................124

8.4 Special Actions …………………………………………………………………………… 125

CONTENTS

09Transitions 사용하기

9.1 Scene의 추가, 삭제, 교체 …………………………………………………………………… 127

9.2 Scene의 Transitions ……………………………………………………………………… 135

10Animation 사용하기

10.1 Animation 기초 …………………………………………………………………………… 140

10.2 SpriteBatchNode ………………………………………………………………………… 143

10.3 SpriteBatchNode 응용 ………………………………………………………………… 146

10.4 SpriteBatchNode를 이용한 애니메이션 ……………………………………………… 151

10.5 Animation 종합 …………………………………………………………………………… 154

10.6 Zwoptex로 SpriteBatchNode 만들기 ……………………………………………… 156

10.7 Sprite 관련 Deprecated ………………………………………………………………… 161

11Sound 사용하기

11.1 CocosDenshion의 세 가지 형태 ………………………………………………………… 164

11.2 SimpleAudioEngine 기본 사용법 ……………………………………………………… 165

11.3 SimpleAudioEngine 사용예 …………………………………………………………… 166

12Touch 사용하기

12.1 Standard Touch Delegate …………………………………………………………… 172

12.2 Targeted Touch Delegate …………………………………………………………… 173

12.3 CCStandardTouchDelegate 예 ……………………………………………………… 174

12.4 CCTargetedTouchDelegate 예 ……………………………………………………… 176

13Schedule 사용하기

13.1 Schedule 기초 ……………………………………………………………………………… 181

13.2 NSTimer 기초 ……………………………………………………………………………… 183

13.3 Schedule에 Pause/Resume 추가하기 ……………………………………………… 184

13.4 NSTimer에 Pause/Resume 추가하기 ……………………………………………… 187

14ParallaxNode 사용하기

14.1 디바이스보다 큰 배경 스크롤하기 ………………………………………………………… 191

14.2 디바이스보다 큰 배경 스크롤하기 2 ……………………………………………………… 201

14.3 배경과 스프라이트 동시에 움직이기 ……………………………………………………… 205

14.4 이동 버튼으로 배경 움직이기 ……………………………………………………………… 209

14.5 배경과 캐릭터 스프라이트를 함께 이동시키기 …………………………………………… 220

14.6 캐릭터 배경 끝까지 이동시키기 …………………………………………………………… 227

CONTENTS15TileMap 사용하기

15.1 타일맵이란? …………………………………………………………………………………… 231

15.2 타일맵 만들기 ………………………………………………………………………………… 234

15.3 타일맵 출력 …………………………………………………………………………………… 240

15.4 타일맵에 레이어 추가하기 …………………………………………………………………… 245

15.5 드래곤 이동 만들기 …………………………………………………………………………… 251

15.6 드래곤 이동 시 장애물 만들기 ……………………………………………………………… 258

15.7 드래곤이 먹을 아이템 만들기 ……………………………………………………………… 272

16파티클 사용하기

16.1 파티클 시스템이란? ………………………………………………………………………… 275

16.2 Point vs. Quad …………………………………………………………………………… 276

16.3 파티클 시스템 생성 …………………………………………………………………………… 277

16.4 파티클 시스템 활용 …………………………………………………………………………… 277

16.5 파티클 디자이너 ……………………………………………………………………………… 286

17충돌 검사

충돌 검사 …………………………………………………………………………………………… 289

18실전! 프로젝트

실전! 프로젝트 ……………………………………………………………………………………… 313

19Game Center 사용하기

19.1 iTunes Connect 작업 …………………………………………………………………… 345

19.2 GameCenter 적용 ………………………………………………………………………… 350

20iAD 사용하기

iAD 사용하기 ………………………………………………………………………………………… 375

1301 장 _ cocos2d for iPhone 게임 엔진

아이폰은 모든 개발자들에게 열려 있는 인기 있는 게임 플랫폼이다. 그렇다면 아이폰에서 게임

프로그래밍을 하는 방법은 무엇이 있을까? 다음과 같은 방법이 있다.

• UIKit을 이용한 방법

• Quartz 2D를 이용한 방법

• OpenGL ES를 이용한 방법

이 중에서도 OpenGL ES는 특히 강력한 그래픽 렌더링을 제공한다. 여러분의 게임이 2차원

공간이든 3차원 공간이든 그래픽 렌더링을 하려면 OpenGL ES를 사용하는 것이 최선의 방

법이다.

cocos2d for iPhone(이하 cocos2d)은 모바일 환경에서의 그래픽 출력을 위한 OpenGL

ES와 사운드 출력을 위한 OpenAL 라이브러리를 손쉽게 게임 개발에 사용할 수 있게 래핑

(wrapping)한 2D용 프레임워크다.

cocos2d for iPhone 게임 엔진

01

14 시작하세요! cocos2d 아이폰 게임 프로그래밍

cocos2d는 OpenGL ES 1.1 버전을 바탕으로 iPhone SDK의 특별한 UIView인 이글뷰

(EAGLView) 위에서 OpenGL ES의 기능을 활용해 2D 그래픽을 구현하며, 그외에 게임 개발

에 필요한 다양한 부가 기능을 제공한다.

1.1 cocos2d의 장점

지금도 전 세계의 수많은 개발자가 cocos2d 프레임워크를 이용해 애플리케이션을 개발하고

있다. 이것은 단지 cocos2d가 무료라기보다는 그만큼 장점이 많은 게임엔진이기 때문일 것이

다. 지금부터 cocos2d의 장점을 간단히 살펴보자.

• API를 배우고 사용하기가 쉽고 간단하다.

• 적은 용량으로 게임 개발에 필요한 거의 모든 기능을 제공한다.

• 오픈소스이며, 무료다.

• OpenGL ES에 최적화돼 있어 동작 속도가 빠르다.

1.2 cocos2d가 제공하는 기능

그렇다면 cocos2d에서 어떤 기능을 제공하는지 알아보자. 여기서는 간단하게 제목 정도만 봐

두자. 이후 3장에서부터 각 기능에 대해 예제를 토대로 실제로 직접 다뤄보겠다.

• 장면(Scene) 관리

• 장면전환(Scene Transition)

• 메뉴(Menu) 및 버튼 시스템

• 스프라이트(Sprite) 및 스프라이트 배치노드(SpriteBatchNode)

• 다양한 액션(Action)

• 애니메이션(Animation)

• 정지/플레이 및 사용법이 더욱 정교하고 간단한 타이머

• 텍스트 렌더링(Text Rendering)

• 사운드(Sound)

• 파티클 시스템(Particle System)

• 타일맵(TileMap)


• cocoslive를 이용한 하이스코어 서버(High Score Server)

• 물리 엔진(Physics Engines) – Box2d & Chipmunk

보다시피 게임 개발에 필요한 거의 모든 기능을 제공한다는 사실을 알 수 있다.

cocos2d는 배우거나 사용하기가 매우 쉬워서 훌륭한 아이디어가 있다면 아이디어를 구체화한

게임을 바로 개발할 수 있다.

cocos2d의 특징 중 하나는 OpenGL ES를 기반으로 한다는 점이다. OpenGL ES는 OpenGL의

Embeded System용 3D API로서 OpenGL과 인터페이스가 유사하다. 처음부터 임베딩 시스템을

염두에 두고 개발됐기 때문에 스마트폰과 같은 휴대용 기기에 맞게 가벼운 것이 특징이다. 단,

이런 특징 때문에 기존의 OpenGL과 비교할 때 여러 가지 제약 사항이 있다는 점에 유의해야 한

다. 즉, OpenGL에서 제공하는 것을 OpenGL ES에서도 모두 제공하지는 않는다는 의미다.

OpenGL ES 1.1기반

1.3 cocods2d 설치

cocos2d for iPhone은 http://www.cocos2d-iphone.org에서 무료로 내려 받을 수

있다. 사이트에서 상단 메뉴 가운데에 있는 Download를 선택하면 현재 내려 받을 수 있는

Stable Version이 있다.

cocos2d for iPhone의 정식 버전은 현재 2011년 7월 28일자로 발표된 v1.0.1이다.

[그림 1-1] cocos2d 다운로드 사이트

01.


파일을 내려 받아 압축을 풀고 나면 다음과 같은 디렉터리와 디렉터리 안의 파일을 확인할 수 있다.

디렉터리는 본인이 관리하는 스타일에 맞게 원하는 위치로 옮기면 되고, 그림에서 보는 바와 같이 cocos2d-

ios.xcodeproj를 선택해서 실행하면 아이폰용 예제를 바로 실행해 볼 수 있다.

[그림 1-2] cocos2d 설치 디렉터리 & 예제 프로젝트

처음 cocos2d를 설치했다면 Xcode를 실행해도 다음과 같이 cocos2d를 만들 수 있는 템플릿이 아

무 데도 보이지 않을 것이다.

[그림 1-3] cocos2d를 설치하기 전 프로젝트 템플릿 선택 윈도우

02.

03.


cocos2d로 게임을 개발하려면 Xcode에서 사용하는 cocos2d용 프로젝트 템플릿 파일을 설치해야

한다. 참고로 이 파일들은 터미널 프로그램에서 설치해야 한다. 맥의 Dock에서 응용 프로그램을 선택한 후

유틸리티에서 찾아서 실행해도 되고, 다음 그림과 같이 Finder로 접근해서 실행해도 된다.

[그림 1-4] 터미널 실행

터미널이 실행되면 cocos2d가 설치된 경로로 이동해야 한다. 다음 그림과 같이 cd를 입력하고

Finder에서 해당 디렉터리를 드래그해서 터미널에 떨어뜨린다.

[그림 1-5] 터미널 - 디렉터리 이동

05.

04.


그러면 다음과 같이 자동으로 디렉터리 경로가 입력되는 것을 볼 수 있다.

[그림 1-6] 터미널 - 경로 자동 입력

입력이 끝나면 엔터키를 쳐서 명령을 실행한다. 터미널 입력창에서 pwd를 입력해서 현재 디렉터리를

확인한다. 또한 다음과 같이 ls를 입력하면 현재 디렉터리에 들어 있는 내용을 확인할 수 있다.

[그림 1-7] 터미널

06.

07.


이미 Xcode4 버전에 cocos2d for iPhone v1.0.0 등이 설치돼 있다면 Finder를 이용해 아래

경로로 가서 설치된 템플릿들을 삭제한다. 기존 버전을 설치할 때 -f 옵션을 지정했다면 시스

템 라이브러리에서, -u 옵션을 지정해서 설치했다면 사용자 라이브러리에서 다음의 디렉터리

로 이동해서 삭제한다.

• [Macintosh HD ▶ 라이브러리 ▶ Application Support ▶ Developer ▶ Shared > Xcode ▶

File Templates ▶ cocos2d 1.0.0]

• [Macintosh HD ▶ 라이브러리 ▶ Application Support ▶ Developer ▶ Shared > Xcode ▶

Project Templates ▶ cocos2d 1.0.0]

• [Macintosh HD ▶ 사용자 ▶ <계정명> ▶ 라이브러리 ▶ Application Support ▶ Developer ▶

Shared > Xcode ▶ File Templates ▶ cocos2d 1.0.0]

• [Macintosh HD ▶ 사용자 ▶ <계정명> ▶ 라이브러리 ▶ Application Support ▶ Developer ▶

Shared > Xcode ▶ Project Templates ▶ cocos2d 1.0.]

설치 스크립트가 기존 버전이 설치돼 있는지 확인할 때 디렉터리 유무를 기준으로 판단하므로

디렉터리까지 지워야 하지만 혹시 모르니 파일만 지운다. cocos2d for iPhone을 재설치할 때

-f 옵션으로 설치하면 된다.

Mac OS X Lion을 사용 중이라면 개인 디렉터리의 라이브러리가 안 보일 것이다. 그러면 터미

널에서 다음과 같이 입력하고 파인더를 다시 실행해 보면 안 보이던 사용자 라이브러리 디렉터

리가 보일 것이다.

$ cd

$ chflags nohidden Library


Xcode4를 사용하고 있다면 사용자 디렉터리의 또 다른 곳에도 설치돼 있다. 이것도 함께 지우자.

[그림 1-8] Xcode4에 설치된 템플릿

그럼 이제부터 본격으로 cocos2d for iPhone을 설치해보자.

아래의 파란색 부분은 모두 설치시 입력한 명령어다. cocos2d for iPhone 설치 명령어는 노

란색 바탕에 파란색으로 적힌 부분이다. sudo를 이용해 관리자 권한으로 설치하며, 이때 -f

옵션으로 기존 버전의 설치 여부와 상관없이 설치할 때 강제로 덮어쓰게 한다.

[ 설치 로그 ]

Last login: Thu Aug 4 09:48:13 on console

GikimiMacBook:~ gikimirane$ cd /Users/gikimirane/cocos2d-iphone-1.0.1

GikimiMacBook:cocos2d-iphone-1.0.1 gikimirane$ ls

AUTHORS Resources-iPad

CHANGELOG cocos2d

CocosDenshion cocos2d-ios.xcodeproj

DONORS cocos2d-mac.xcodeproj

LICENSE_Box2D.txt cocos2d.xcworkspace

LICENSE_Chipmunk.txt cocoslive

08.


LICENSE_FontLabel.txt doxygen.config

LICENSE_TouchJSON.txt doxygen.footer

LICENSE_artwork.txt experimental

LICENSE_cocos2d.txt external

LICENSE_cocosdenshion.txt extras

LICENSE_libpng.txt install-templates.sh

README.mdown templates

RELEASE_NOTES tests

Resources tools

Resources-Mac

GikimiMacBook:cocos2d-iphone-1.0.1 gikimirane$

GikimiMacBook:cocos2d-iphone-1.0.1 gikimirane$ sudo ./install-templates.sh -f

Password:

cocos2d-iphone template installer

다음의 설치 로그를 보면 설치되는 디렉터리를 알 수 있다.

[ 설치 로그 ]

Installing Xcode 4 cocos2d iOS template

----------------------------------------------------

removing old libraries: /Users/gikimirane/Library/Developer/Xcode/Templates/cocos2d/

...creating destination directory: /Users/gikimirane/Library/Developer/Xcode/Templates

/cocos2d/

...copying cocos2d files

...copying cocoslive files

...copying TouchJSON files

...copying CocosDenshion files

...copying CocosDenshionExtras files

...copying FontLabel files

...copying template files

done!


Installing Xcode 4 Chipmunk iOS template

----------------------------------------------------

...copying Chipmunk files

done!

Installing Xcode 4 Box2d iOS template

----------------------------------------------------

...copying Box2d files

done!

Installing Xcode 4 CCNode file templates...

----------------------------------------------------

removing old libraries: /Users/gikimirane/Library/Developer/Xcode/Templates/File Tem-

plates/ cocos2d/

...creating destination directory: /Users/gikimirane/Library/Developer/Xcode/Templates/

File Templates/cocos2d/

done!

...creating cocos2d template directory

Installing Xcode 3 cocos2d iOS template

----------------------------------------------------

...creating destination directory: /Library/Application Support/Developer/Shared/Xcode/

Project Templates/cocos2d 1.0.1/cocos2d Application/



...copying cocos2d dependency files



...copying cocoslive dependency files

done!


Installing Xcode 3 cocos2d iOS + box2d template

----------------------------------------------------


Project Templates/cocos2d 1.0.1/cocos2d Box2d Application/







...copying Box2D files

done!

Installing Xcode 3 cocos2d iOS + chipmunk template

----------------------------------------------------


Proj ect Templates/cocos2d 1.0.1/cocos2d Chipmunk Application/







...copying Chipmunk files

done!

Installing Xcode 3 cocos2d Mac template

----------------------------------------------------


Project Templates/cocos2d 1.0.1/cocos2d Application - Mac/





done!

...copying file templates


File Templates/cocos2d 1.0.1/

Installing Xcode 3 CCNode file templates...

----------------------------------------------------

done!

GikimiMacBook:cocos2d-iphone-1.0.1 gikimirane$

여기까지 이상없이 잘 따라왔다면 설치가 완료된 것이다.

설치가 끝나고 Xcode를 실행해 보면 앞 부분의 [그림 1-3]과는 다르게 cocos2d로 개발할 수 있는

프로젝트 템플릿이 추가됐음을 확인할 수 있다.

[그림 1-9] cocos2d 템플릿이 설치된 모습

09.


1.4 예제 실행

cocos2d를 설치하고 나면 다양한 예제를 실행해 볼 수 있다. 그러나 모든 예제가 하나의 프로

젝트에 여러 개의 타겟으로 구성돼 있어 처음 실행하는 사람은 당황할 수 있다. 다음 그림과 같

이 천천히 따라해 보자.

[그림 1-10] cocos2d 예제 실행

실행 후 화면 좌측 상단에서 다음의 빨간색으로 표시한 부분을 눈여겨보자.

[그림 1-11] Target 선택

여기서는 두 가지 옵션을 선택할 수 있다. 위 그림에서는 SchedulerTest라는 타겟을 iPhone

4.3 Simulator에서 실행하는 옵션이 선택돼 있다. 타겟이 여러 개이면 [그림 1-11]의 타겟 부

분을 선택해서 원하는 타겟을 선택할 수 있다.

[그림 1-11]에서 타겟을 선택하면 다음 그림처럼 타겟을 선택하고 그 옆에 실행할 디바이스를 선택

하는 메뉴가 나온다. 여기서 원하는 타겟을 선택한다.

01.

02.


[그림 1-12] 실행할 타겟 선택

[그림 1-12]는 cocos2d 예제에서 선택할 수 있는 타겟이다.

원하는 타겟만 선택했다면 [그림 1-13]처럼 예제를 실행할 디바이스를 [그림 1-12]의 오른쪽 부분

을 클릭해서 선택할 수 있다.

[그림 1-13] 디바이스 선택

03.

2702 장 _ cocos2d 기본 구조

이번 장에서는 cocos2d의 전체적인 모습과 클래스 구성을 살펴본다.

cocos2d는 CCNode를 기준으로 다음과 같이 CCDirector, CCScene, CCLayer, CCSprite

로 구성된 계층적인 포함 관계를 가지고 CCAction 클래스를 통해 애니메이션을 구현한다.

CCNode ▶ CCDirector ▶ CCScene ▶ CCLayer ▶ CCSprite

2.1 CocosNode

CCNode는 iPhone SDK의 NSObject와 같이 cocos2d의 최상위 클래스로서, cocos2d의 모

든 클래스는 이 CCNode를 상속받는다. 물론 CCNode는 NSObject를 상속받는다.

CCNode 클래스에는 다양한 프로퍼티가 있는데 대표적으로 위치, 색상, 투명도, 크기, 회전,

가시성 여부, 카메라, 그리드(grid) 등이 있으며 이러한 프로퍼티는 필요에 따라 변경할 수

있다.

cocos2d 기본 구조

02


CCNode의 다른 중요한 특징은 자식 노드를 가질 수 있다는 점이다. CCNode는 다른 노드에

대해 컨테이너처럼 사용하는 것이 가능한데, 이는 객체의 계층 구조를 만들 필요가 있을 때 유

용하다. 즉, 게임을 개발할 때 객체의 계층 구조가 필요할 때가 있는데, 계층 구조로 만들면 부

모 객체의 위치나 투명도 같은 속성이 바뀔 때 자식 노드도 함께 손쉽게 변경할 수 있어 유용할

때가 많다.

또한 게임 루프를 만들 때 사용하는 스케줄러도 자체적으로 제공한다. 스케줄러의 default 값

은 1/60 프레임이며, NSTimer에서 제공하지 않는 pause나 resume 기능도 제공한다.

스프라이트, 레이블, 메뉴, 레이어, 장면(scene)과 같은 중요한 cocos2d의 클래스 역시 모두

CCNode 클래스를 상속하므로 위와 같은 프로퍼티와 기능을 사용할 수 있다.

2.2 Director

CCDirector 클래스는 싱글톤(singleton) 클래스이며, 따라서 한 애플리케이션에 단 하나의 인

스턴스만이 존재한다. cocos2d는 게임의 화면을 장면(Scene) 단위로 구성해서 처리하는 기능

을 제공하는데, CCDirector 클래스는 여러 장면들을 뒤로 가게 하거나 앞으로 가게 하는 등의

역할을 한다.

2.3 Scene & Layer

CCScene과 CCLayer는 UIKit의 UIView에 해당하는 클래스다. 그래서 CCScene과

CCLayer는 Sprite, Label, Menu 등과 같은 클래스 객체들을 자식(child)으로 가질 수 있다.

차이점은 CCScene은 사용자의 터치 이벤트를 받아서 처리할 수 없고 Accelerometer 입력

또한 수신해서 처리할 수 없지만 CCLayer는 사용자의 터치 이벤트를 받아서 처리할 수 있고

Accelerometer 입력 역시 수신해서 처리할 수 있다.

보통 하나의 게임 애플리케이션은 여러 개의 Scene으로 구성된다.


일반 게임에서 접할 수 있는 인트로 화면, 메뉴 화면, 게임 화면, 헬프 화면 등을 생각하면 된

다. 물론 이런 Scene 사이의 전환은 앞에서 본 Director가 담당한다.

인트로 화면 게임 화면메뉴 화면 헬프 화면

Scene Scene Scene

Director

Scene

[그림 2-1] Scene과 Director

그렇다면 CCScene과 CCLayer는 어떻게 구분해서 사용해야 할까?

Scene 사이의 전환은 앞에서 본 Director가 담당하고, Scene은 터치 이벤트나 Accelerometer

입력을 받지 못하므로 Scene에 Layer를 포함해서 사용하면 될 것이다. 그러므로 하나의

Scene에 하나 또는 여러 개의 Layer를 포함한 다음과 같은 구조가 만들어진다.

게임 애플리케이션 CCLabel

CCSprite

CCLayer

CCLayer

CCScene

CCScene

CCScene

CCMenu

CCLabel

CCSprite

CCLayer

CCLayer

CCMenu

CCLabel

CCSprite

[그림 2-2] 클래스 구조도


cocos2d 버전 0.99 이후로는 Sprite가 또 다른 Sprite를 포함하는 것을 지원하는데, 이는 여

러 개의 이미지로 하나의 스프라이트를 만들 때 아주 유용하게 활용할 수 있다. 예를 들면, 다

음 그림과 같이 각 캐릭터 위에 에너지바를 넣어 함께 움직이게 할 때 아주 유용하다.

[그림 2-3] 국산 게임인 팔라독의 한 장면

또한 Layer는 비슷한 종류의 클래스 객체를 구분해서 담을 때 효과적이다.

한 Scene을 세 개의 Layer가 구성하고 있는 다음 그림을 보면서 이해해 보자.

• 메뉴 또는 HUD (Head Up Display) Layer

• 캐릭터 Layer

• 배경 Layer


[그림 2-4] Scene & Layer

앞에서 본 팔라독 게임의 화면에서도 두 개의 Layer가 하나의 Scene을 구성하고 있다고 가정

하고 보면 하나의 Scene에서 주인공 캐릭터가 좌우로 이동하고 있을 때 적 캐릭터도 따라서

이동하거나 배경 그림이 변하지만, 게임 조작을 위한 메뉴와 전체적인 에너지바와 점수를 나타

내는 부분 등은 변하지 않는다. 이처럼 하나의 Scene에서 기능별로 Layer를 분리해서 사용하

면 프로그램을 작성하기가 간편해진다.

2.4 Sprite

앞의 Director, Scene 그리고 Layer 클래스가 추상적인 개념의 클래스였다면 Sprite 클래스

는 실제로 화면에 출력되어 보이는 구체적인 개념의 클래스다.

Sprite는 화면을 구성하는 정적인 이미지나 애니메이션이 되는 일련의 이미지를 가리키는 표

현으로, 보통 게임에서 사용되는 이미지를 말하는데, 이러한 Sprite는 이미지 파일을 화면에

출력하는 역할을 하므로 이미지 파일의 로딩과 화면 출력과 관련한 다양한 메서드를 제공한다.


2.5 Action

cocos2d에서는 Sprite의 애니메이션 처리를 위해 Action 클래스를 제공한다.

Action 클래스는 CocosNode 클래스를 상속한 클래스의 애니메이션 처리를 위한 클래스로

서, 대부분 Sprite 클래스의 애니메이션 처리에 사용된다.

// 스프라이트를 2초 동안 50픽셀 오른쪽으로 이동, 위쪽으로 10픽셀 이동.

[somesprite runAction: [CCMoveBy actionWithDuration:2 position: ccp(50,10)]];

cocos2d는 다양한 액션을 제공하는데, 이동, 회전, 점프, 크기 변환 등의 기본 액션과 기본 액

션을 결합하거나 반복하는 액션을 제공한다.

또한 많은 액션이 By와 To라는 두 가지 종류로 나뉘는데, By는 현재 값에서 지정한 값만큼 변

하는 액션을 수행하고, To는 지정한 값으로 변하는 액션을 수행한다.

또한 거의 모든 액션에는 reverse 메서드가 구현돼 있다. reverse 메서드는 기본적으로 반대

로 동작하는 새 액션을 수행한다.

// move_reverse 액션은 2초 동안 ccp(-80,-80) 값 만큼의 CCMoveBy 액션이 될 것이다.

id move = [CCMoveBy actionWithDuration:2 position: ccp(80,80)];

id move_reverse = [move reverse];

3303 장 _ Hello, World! 살펴보기

이번 장에서는 cocos2d 프로젝트를 생성하면 기본적으로 생성되는 HelloWorld에 대해 살펴

본다.

3.1 HelloWorld 프로젝트 생성과 실행

Xcode를 실행하고 새로운 프로젝트를 생성하기 위해 File → New → New Project 메뉴를 차례로

클릭하고 좌측 메뉴에서 iOS의 cocos2d를 선택하면 다음과 같은 화면이 표시된다.

Hello, World! 살펴보기

03

01.


[그림 3-1] cocos2d 프로젝트 템플릿

앞 그림에서 Next 버튼을 클릭하면 아래와 같은 윈도우가 나타난다. 프로젝트 이름으로 HelloWorld

라고 입력한다.

[그림 3-2] 프로젝트 생성

02.


원하는 디렉터리를 선택한 후 Create를 클릭하면 HelloWorld 프로젝트가 최종적으로 만들어진다.

[그림 3-3] 프로젝트 생성

생성된 프로젝트에서 Xcode의 내비게이터 영역을 보면 [그

림 3-4]와 같이 구성돼 있을 것이다.

[그림 3-4]를 보면 Frameworks 그룹에 cocos2d 개발에

필요한 프레임워크가 자동으로 포함된다.

l ibs 그룹을 보면 cocos2d 정적 라이브러리가 있다.

cocos2d 템플릿으로 새 프로젝트를 빌드하면 먼저

cocos2d 라이브러리가 만들어지고, 애플리케이션 내에서

사용하는 cocos2d API는 바로 이 cocos2d 정적 라이브러

리를 이용해 링크가 이뤄진다.

03.

[그림 3-4] 내비게이터 영역


앞의 프로젝트 구성을 확인했다면 다음과 같은 이유로 cocos2d 사용은 무료라는 사실을 알 수

있다.

cocos2d 엔진의 라이선스는 GNU LGPL v3 라이선스를 사용하고 있는데, 이 라이선스는 특별한 사용료나

제약 없이 해당 소스 코드를 사용해 상업용 프로젝트를 개발할 수 있지만 개발한 프로젝트의 코드를 공개해야

한다는 조건이 있다. 그러나 자신의 프로젝트에 cocos2d 라이브러리를 정적 라이브러리 형태로 포함해서 사

용하거나 cocos2d 라이브러리 소스의 전체 혹은 부분을 포함해서 사용하는 경우라면 코드를 공개하지 않아

도 된다.

생성된 프로젝트에서 우리가 실제로 살펴볼 부분은 다음과 같다. 지금부터 차례대로 살펴보자.

1. AppDelegate.h

2. AppDelegate.m

3. RootViewController.h

4. RootViewController.m

5. HelloWorldLayer.h

6. HelloWorldLayer.m

7. GameConfig.h

먼저 AppDelegate.m을 살펴보자.

[ 예제 3-1 _ AppDelegate.m ]

- (void) applicationDidFinishLaunching:(UIApplication*)application

{

// Init the window

window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

// Try to use CADisplayLink director

// if it fails (SDK < 3.1) use the default director

if( ! [CCDirector setDirectorType:kCCDirectorTypeDisplayLink] )

[CCDirector setDirectorType:kCCDirectorTypeDefault];


① CCDirector *director = [CCDirector sharedDirector];

// Init the View Controller

viewController = [[RootViewController alloc] initWithNibName:nil bundle:nil];

viewController.wantsFullScreenLayout = YES;

//

// Create the EAGLView manually

// 1. Create a RGB565 format. Alternative: RGBA8

// 2. depth format of 0 bit. Use 16 or 24 bit for 3d effects, like

// CCPageTurnTransition

//

② EAGLView *glView = [EAGLView viewWithFrame:[window bounds]

pixelFormat:kEAGLColorFormatRGB565

depthFormat:0 // GL_DEPTH_COMPONENT16_OES

];

// attach the openglView to the director

③ [director setOpenGLView:glView];

// // Enables High Res mode (Retina Display) on iPhone 4 and maintains low res

// // on all other devices

// if( ! [director enableRetinaDisplay:YES] )

// CCLOG(@"Retina Display Not supported");

//

// VERY IMPORTANT:

// If the rotation is going to be controlled by a UIViewController

// then the device orientation should be "Portrait".

//

// IMPORTANT:

// By default, this template only supports Landscape orientations.

// Edit the RootViewController.m file to edit the supported orientations.

//

#if GAME_AUTOROTATION == kGameAutorotationUIViewController

[director setDeviceOrientation:kCCDeviceOrientationPortrait];


#else

[director setDeviceOrientation:kCCDeviceOrientationLandscapeLeft];

#endif

④ [director setAnimationInterval:1.0/60];

⑤ [director setDisplayFPS:YES];

// make the OpenGLView a child of the view controller

⑥ [viewController setView:glView];

// make the View Controller a child of the main window

[window addSubview: viewController.view];

[window makeKeyAndVisible];

// Default texture format for PNG/BMP/TIFF/JPEG/GIF images

// It can be RGBA8888, RGBA4444, RGB5_A1, RGB565

// You can change anytime.

[CCTexture2D setDefaultAlphaPixelFormat:kCCTexture2DPixelFormat_RGBA8888];

// Removes the startup flicker

[self removeStartupFlicker];

// Run the intro Scene

⑦ [[CCDirector sharedDirector] runWithScene: [HelloWorldLayer scene]];

}

cocos2d도 기본적으로 Cocoa 프레임워크의 UIView 기반 위에서 작동하기 때문에 하나의

UIView와 UIViewController를 AppDelegate에 연결해서 사용한다. cocos2d와 관련해서

봐둬야 할 코드는 다음과 같다.


① 애플리케이션에서 cocos2d를 사용하려면 가장 먼저 Director를 생성할 필요가 있다.

Director는 싱글톤 인스턴스이므로 따로 생성하지 않고 sharedDirector로 바로 접근해서 사

용할 수 있다.

② 기본적으로 cocos2d의 모든 그래픽 관련 렌더링은 OpenGL ES API를 사용해서 이글뷰

(EAGLView)상에서 구현된다.

③ Director의 OpenGL View에 생성한 이글뷰(EAGLView)를 할당한다.

④ Director의 화면 리프레쉬율을 초당 60프레임을 출력할 수 있게 설정한다. 1.0/30으로 설정했

다면 초당 30프레임을 출력할 수 있게 설정한 것이다.

⑤ Director의 화면 리프레쉬율을 화면 좌측에 보여준다. 보통은 개발할 때만 사용한다.

⑥ UIViewController의 UIView에 생성한 EAGLView를 연결한다.

⑦ Director의 runWithScene 메서드로 Scene을 실행한다. runWithScene 메서드를 호출하게

되면 cocos2d 프로그램의 메인 루프가 실행된다.

실제로 새로운 프로젝트를 만들게 되면 ⑤번 부분의 변경과, ⑦번의 실행할 Scene의 클래스

이름만 변경하면 될 것이다.

여기서 설명하지 않은 텍스처 포맷 등에 관한 자세한 내용은 OpenGL 관련 참고자료를 참고한다. 여기서는

디폴트 상태로 사용하겠다.

뭐든 다 알아야 프로그램을 만들 수 있는 것은 아니다.

만들다보면 저절로 알게 되는 것도 있고, 만들 줄 알게 되면 쉽게 이해되는 부분도 있다.

열 개를 모를 때 열 개를 다 이해하고 만들려고 하면 시작조차 힘들 수도 있다.

RootViewController.m은 EAGLView를 세팅하기 위한 View로만 사용되므로 주석 부분 등

을 제외하면 화면 회전에 관한 내용밖에 없으므로 여기서 따로 살펴볼 부분은 없다.

HelloWorldLayer.m을 살펴보자. 이 부분이 바로 실제로 화면에 보여지는 것과 관련된 곳이

다. 앞의 AppDelegate.m의 ⑦번에서 부르는 Scene이 정의된 부분이기도 하다.


[ 예제 3-2 _ HelloWorldLayer.m ]

#import "HelloWorldLayer.h"

@implementation HelloWorldLayer

- (void)dealloc

{

[super dealloc];

}

+ (CCScene *)scene

{

① CCScene *scene = [CCScene node];

HelloWorldLayer *layer = [HelloWorldLayer node];

[scene addChild: layer];

return scene;

}

- (id)init

{

if ( (self=[super init]) ) {

// create and initialize a Label

② CCLabelTTF *label = [CCLabelTTF labelWithString:@"Hello World"

fontName:@"Marker Felt"

fontSize: 64];

// ask director the the window size

CGSize size = [[CCDirector sharedDirector] winSize];

// position the label on the center of the screen

label.position = ccp( size.width /2 , size.height/2 );

// add the label as a child to this Layer

③ [self addChild: label];

}

return self;

}

@end


여러분이 생성한 프로젝트에서는 소스의 메서드 순서가 위에서 보여준 것과 다를 수 있다.

필자는 변수를 선언할 때 릴리스를 바로 할 수 있게 습관적으로 dealloc 부분을 맨 위로 올려

둔다.

① Scene 메서드 안에서 먼저 CCScene 객체를 만들고, HelloWorld 객체를 만든다. 그리고 만들어

진 HelloWorld 객체를 CCScene의 자식 (child)으로 넣는다. 이는 앞에서 설명한 대로 Scene이

Layer를 포함하는 경우다. HelloWorld 클래스가 CCLayer 클래스를 상속받으므로 HelloWorld 객

체는 Layer다. 이 부분은 이해만 하면 된다. 나중에라도 고칠 부분은 없다.

② - ③ init 메서드 안에서 CCLabelTTF 객체를 만든 후 Label을 화면 가운데로 위치시킨다. 그리고

Label을 HelloWorld 객체(layer)에 넣는다. Label을 만들 때 출력할 내용과 폰트 종류, 크기를 지정

했다.

Xcode 상단 메뉴에서 Product → Run을 선택하거나 키보드의 Cmd+R을 눌러 실행해보면

다음과 같은 화면을 볼 수 있다. 위 코드를 실행하면 검은 바탕의 화면 위에 “ Hello World”

라는 글자가 화면 한 가운데에 나타난다.

[그림 3-5] HelloWorld 예제를 실행한 모습

3.2 기본형 만들기

[예제 3-2] 소스 부분에서 ②에서 ③번까지의 부분을 삭제한 것을 앞으로는 기본형이라고 부

르겠다. 이후로 나오는 모든 예제는 기본형에서 시작한다. 기본형의 모습을 잘 익혀두기 바란

다. 여러분이 직접 생성한 프로젝트에서 메서드 순서를 약간 바꾸고 주석 부분도 지우면 다음

과 같이 깔끔한 모양의 소스코드를 볼 수 있을 것이다.


[ 예제 3-3 _ 앞으로의 실습 예제의 토대가 되는 기본형 ]

#import "HelloWorldLayer.h"

@implementation HelloWorldLayer

- (void)dealloc

{

[super dealloc];

}

+ (CCScene *)scene

{

CCScene *scene = [CCScene node];

HelloWorldLayer *layer = [HelloWorldLayer node];

[scene addChild: layer];

return scene;

}

- (id)init

{

if ( (self=[super init]) ) {

// 여기서부터 실습용 코드를 입력한다.

// 여기까지 입력한다.

}

return self;

}

@end

실제로 개발을 할 때는 [예제 3-1]의 ⑤번과 ⑦번 부분도 수정해야겠지만 우리가 앞으로 볼 예

제에서는 AppDelegate.m은 수정하지 않고 [예제 3-3]에 나오는 기본형의 init 부분에서 코

딩을 시작해서 새로운 함수를 추가하는 식으로만 구성할 것이다.

3장 앞부분에서 설명한 내용이 이해되지 않더라도 [예제 3-3]의 기본형 만들기만 확실히 이해

하고 기억하면 이후의 예제를 만들면서 공부하는 데 문제가 없을 것이다.

시작하세요! cocos2d 아이폰 게임 프로그래밍

Documents