아이폰 Cocos2d는 아이폰, 아이폰 터치, 아이패드에서 게임을 만들기위한 Cocoa 기반의 라이브러리 입니다.  이 문서는 가능한 이전의 지식이 거의 없는것으로 가정하며 cocos2d를 설치하고 시작하는 법을 알려드립니다.

애플에서 제공하는 iPhone Software Development Kit (SDK)가 없다면 먼저 먼저 아이폰 개발 센터에서 다운받아야합니다. 이 SDK는 프로그램을 작성하고 컴파일할 애플의 통합 개발 환경(IDE)인 Xcode를 포함합니다. 또한 코드 라이브러리, 문서와 일반적인 아이폰 개발에 필요한것들을 포함합니다. 

SDK를 다운로드 하기 위해 애플 개발자 프로그램을 가입해야합니다.(앱을 앱스토어에 올리기위해서 나중에는 99달러짜리 멤버쉽으로 업그레이드 해야합니다.)  

(이이팟 터치 및 아이패드를 생각하고 있더라도 "아이폰 개발자"텀을 사용하는게 일반적입니다. 3가지 모두 아이폰 OS를 사용하며 개발자 관점에서는 매우 비슷합니다.) 

아이폰 SDK는 용량이크고 설치 시간이 오래걸리므로 이번스텝은 가능한 빨리 시작하고 끝나기를 기다리는 동안 다른한것을 찾아보록 합니다.

다운로드 페이지에서 안정버전을 받습니다. 파인더에서 더블클릭해 압축을 풀면 아래와 같은 파일 들이 나타납니다.
 

이게 먼 파일인지? 대부분 순수 텍스트 파일입니다만 파인더는 인식하지 못합니다. 왜냐면 일반적인 확장자가 아니기 때문이죠. AUTHORS, CHANGELOG, LICENSE.box2d같은 대문자 파일들은 즐겨쓰는 텍스트 에디터에다가 드래그 가능합니다. 

특히 각종 파일들이 무엇인지 정의하고있고 시작하기위한 약간의 팁을 포함하는 README 파일은 읽어보도록합니다.

아마도 README에서 언급되지 않은 대부분의 중요한 파일은이 Xcode(cocos2d-iphone.xcodeproj) 프로젝트에 있을것입니다. Xcode에서 열어봅니다.

이 거대한 프로젝트는 많은 양의 간단한 테스트/데모 프로젝트와 같은 cocos2d를 위한 모든 소스를 포함하고 있습니다.  이것들을 실행해보는것이 cocos2d의 능력을 탐구할 수 있는 좋은 방법입니다. 또한 이 소스를 읽어보는것이 cocos2d전문가들이 만든것을 배울 수 있는 좋은 방법입니다.

테스트 실행을 위해 "Active Target"과 "Active Executable"을 세팅해야합니다. 이것을 세팅하기 위한 두가지 방법이 있습니다. 첫번째는 프로젝트 메뉴 하위 메뉴를 사용하는 방법입니다. 두번째 방법은 메인 툴바안의 옵션을 눌르는 것입니다. 뷰 메뉴 아래 "Customize Toolbar"를 누르고  "Active Target”과 “Active Executable” 아이템을 윈도의 상위에 있는 툴바안으로 드래그 합니다. 그리고 나서 Taget과 Executable을 선택할 수 있습니다. 

어느 방법이던 실행은 원하는 (ex “SpriteTest” 또는 “ParticleTest”)Active Target을 선택하여 시작합니다. 자동으로 알맞은 Active Executable 변경하는것을 찾아야합니다. 하지만 어떤이유로 그렇게 하는거이 실패해다면 수동으로 해당하는 Active Executable을 선택합니다.

그 다음   “Build and Run” (or “Build and Debug”)를 클릭합니다. 프로젝트가 컴파일되고 아이폰/아이패드 시뮬레이터가 켜지면서 데모가 실행될것입니다. 에러가 나오는 경우 Projects→ Edit Project Settings → Build로 가서  C/C+ 컴파일러 버전이 LLVM GCC 4.2나 다른것이 아닌  “GCC 4.2”인지를 확인합니다.

시작해야합니다. 윈도우의 왼쪽 “Groups & Files” 패널 안의 "tests" 폴더 안에서 자신의 앱을 만들때 사용해야할 비슷한 모든 테스트 코드들을 찾아보세요. 파일 이름은 일반적으로 타겟이름과 연관됩니다. 예를들어 ParticleTest를 위한 소스코드는 ParticleTest.h(헤더 파일)과 articleTest.m(소스파일,대부분의 중요한 것들이 들어있음)안에 있습니다. 

Xcode debugging techniques 를 배우기 위한 요점을 원할것입니다. 그래서 변수를 살펴보고 코드를 실행하면서 컴퓨터 로그 값을 가지고 코드에서 특정 지점에서 프로그램을 멈추는 방법을 알것입니다. 이 모든것들이 모두 새로운것들입니다만 지금 너무 걱정하지는 마세요. 단지 이것들이 모두 가능하고 준비가되었을때 링크를 방문하는것만 기억하세요.

Cocos2d를 사용하기위해서 인스톨해야만 하는건 실제 아무것도 없습니다. 그건 소스 라이브러리입니다. 적절한 소스를 적당히 설정된 프로젝트 안에 포함시키면 잘 돌아갈 것입니다.

하지만 이런 설정을 좀더 쉽게 만들기 위해서 cocos2d v0.99는  Xcode 프로젝트 템플릿이 들어있습니다. 이 템플릿은 부가적인 컴포넌트들과 함께 cocos2d를 위한 프로젝트를 쉽게 만들게 해줍니다.

• a cocos2d stand alone template
• a cocos2d + box2d template
• a cocos2d + chipmunk template

템플릿을 인스톨하기 위해 터미널 어플리케이션을 실행해 다음과 같이 입력합니다. : 

cd cocos2d-iphone
./install-templates.sh -u

(하지만 처번째 라인의 "cocos2d-iphone"은 실제 아이폰 폴더의 cocos2d가 있는 경로로 대체합니다.  경로를 쉽게 입력할 수 있는 방법은 "cd"를 입력한 후 파인더에서 폴더를 터미널 윈도우로 드래그하면 됩니다.) 

0.99.2에서는 카피하려는 디렉토리에 이미 템플릿이 있다면 설치 스크립트는 카피동작은 넘어갑니다.  아래와같이 강제로 설치 할 수도 있습니다.

./install-templates.sh -f -u

템플릿을 설치한 후 Xcode에서 새 프로젝트를 시작할 수 있습니다. 

1. Xcode실행
2. File → New Project
3. cocos2d 템플릿 선택

이때 프로젝트를 실행 할수 있고(실행해야 하고!) 아이폰 시뮬레이터에 간단히 "Hello World"가 나타나는것을 볼 수 있습니다.   

여러분은 지금 가야할 길을 잘 가고있습니다! 이미 완료한것을 확인해보면 감사하겠습니다.

• Xcode와 iPhone SDK 설치됨
• cocos2d-iPhone 라이브러리 다운로드 및 압축 풀었음
• cocos2d 테스트 실행 및 소스코드 시행 
• 새 프로젝트 템플릿 설치죔
• 첫번째 “Hello World” 프로젝트 생성 및 실행

굉장히 많이 진행되었네요! 이젠 cocos2d어떻게 동작하는지 그리고 진짜 데모와 게임을 만드는것에 필요한것을 배울 준비가 되었습니다.

cocos2d API가 어떻게 동작하는지의 큰 그림을 제공하고 대부분의 중요한 용어의 뜻이 무없인지지 알 수 있는 basic concepts 페이지를 주의깊게 읽어봅니다. 그 후에  Lesson 2. Your First Game에서 단계적으로 튜토리어를 진행합니다.

Effects는 특별한 종류의 action이다. opacity, position, rotation,  scale 같은 일반적인 프로퍼티를 변경하는 대신 새로운 프로퍼티(gridproperty)를 변경한다.

그리드 프로퍼티는 행렬과 같다. 여러개의 정사각형 또는 직사각형  형태를 서로 교차하는 선들의 네트웍이다.

이 특별한 action은 그리드로 어떤 CCNode object(CCLayer, CCScene, CCSprite, 등)도 렌더링하며 그리드의 꼭지점을 움직여 그리드를 변형할 수 있다.

다음 2종류의 그리가 있다 : tiled 그리도 와 non-tiled 그리드. 차이점은 tiled 그리드는 개별 타일의 집합이며 non-tiled 그리드는 꼭지점의 집합이다.

* 그리드가 2차원(행, 열)이라도 각각의 꼭지점은 3차원이다(x,y,z) 

그리드는 2차원이다 : 행과 열 하지만 각 꼭지점은 3차원이다 : x,y,z. 그리고 tiled-grid-3D의 변형을 통해 2d 또는 3d를 만들 수 있다. 

그리드의 크기를 늘리면 효과의 질은 높아진다. 하지만 효과의 시간은 줄어든다.
 
그리드의 크기(16,12)는 대부분의 단말기에서 빠르게 동작한다. 하지만 별로 좋아보이지 않는다. 그리드(32,24)는 매우 좋지만 1세대 아이폰에서는 빨리동작하지 않는다. 

각각의 화면 프레임은 텍스처(FBO)로 렌더링 된다. 이 텍스처는 꼭지점 배열로 바뀌고 이 꼭지점 배열(grid)는 그리드 효과에 의해 변형된다. 마지막으로 꼭지점 배열은 화면에 렌더링된다. 

내부에 관한 더 자세한 정보는 다음을 참조:

• CCTiledGrid3D and CCTiledGrid3DAction for tiled grids
• CCGrid3D and CCGrid3DAction for non-tiled grids

예를 들어 다음 이미지를 렌더링한 scene이나 layer가 있다면

...CCRipple3D action을 사용하여 이 이미지를 변형할 수 있다. 와이어 이미지가 보여주는 바와같이 32x24정사각형의 그리드를 사용였고 이 그리드는 non-tiled이다(모든 사각형은 연결되어있다).

...또한 CCFadeOutTRTiles action을 사용하여 변형할 수 있다. 다음 와이어 이미지에 보이는것처럼 이 그리드는 16x12 사각형을 사용하였고 이 그리드는 tiled이다(모든 사각형/타일은 분리되어있다).

이름에 '3D'접미사가 분은 action은 그리드의 z좌표를 수정하여 3D 비주얼 효과를 제공한다.

만일 어떠한  '3D' action을 사용한다면 아마도 깊이 버퍼를 사용하길 원할것이다. 간단한 호출을 통해 그렇게 할 수 있다. 

// IMPORTANT: Call this function at the very beginning, before running your 1st scene// Create a depth buffer of 24 bits// These means that openGL z-order will be taken into account[[CCDirector sharedDirector] setDepthBufferFormat:kDepthBuffer16];

그리고  어떤상황에서는 RGBA8888 픽셀 포멧을 사용해야 되는 경우가 있다. 이는 투명효과를 가지게 해준다. 

// IMPORTANT: Call this function at the very beginning, before running your 1st scene// Use this pixel format to have transparent buffers[[CCDirector sharedDirector] setPixelFormat:kPixelFormatRGBA8888];

Available CCGrid3DAction actions:

• CCFlipX3D
• CCFlipY3D
• CCLens3D
• CCLiquid
• CCRipple3D
• CCShaky3D
• CCTwirl
• CCWaves
• CCWaves3D

Available CCTiledGrid3DAction actions:

• CCFadeOutBLTiles
• CCFadeOutTRTiles
• CCFadeOutUpTiles
• CCFadeOutDownTiles
• CCJumpTiles3D
• CCShakyTiles3D
• CCShatteredTiles3D
• CCShuffleTiles
• CCSplitCols
• CCSplitRows
• CCTurnOffTiles
• CCWavesTiles3D

Some examples:

// execute a Waves action on sprite 1id waves = [CCWaves actionWithWaves:5 amplitude:20 horizontal:YES vertical:NO grid:ccg(15,10) duration:5];[sprite1 runAction: [CCRepeatForever actionWithAction: waves]]; // and execute a Shaky3D action on sprite 2id shaky = [CCShaky3D actionWithRange:4 shakeZ:NO grid:ccg(15,10) duration:5];[sprite2 runAction: [CCRepeatForever actionWithAction: shaky]];

Ease action은 내부 action의 시간을 바구는 특별한 구성 action이다. Flash에서는 Tweening 또는 Easingaction 이라고른다.  

이 Action들은 내부 action의 속도를 수정하지만 전체 시간은 바뀌지 않는다. 예를들어 내부적으로 5초간 행동하면 전체 5초동안 진행된다.

Ease actions 시간을 선형적으로 바꾼다.

예를들어 이 Action들은 내부 action을 가속하거나 감속한다.  

이 Action은 3가지 타입으로 나뉜다. 

• In actions: 시작부분에서 가속
• Out actions: 끝부분에서 가속
• InOut actions: 시작과 끝부분에서 가속

easing와 tweening action에 대해 더 자세한 정보를 얻고싶다면 다음페이지를 살펴보자.

• http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html
• http://www.robertpenner.com/easing/easing_demo.html

다음 공식을 사용하여 내부 action을 가속한다 :

-(void) update:(ccTime) t
{
   [inner update: powf(t,rate)];
}

변이:

• CCEaseIn: 시작부분 가속
• CCEaseOut: 끝부분 가속
• CCEaseInOut: 시작과 끝부분 가속

rate인자는 가속도를 나타낸다. 

예제:

// 시작 부분 가속
id action = [CCMoveTo actionWithDuration:2 position:ccp(100,100)];
id ease = [CCEaseIn actionWithAction:action rate:2];
[sprite runAction: ease];
 
// 끝부분 가속
id action = [CCMoveTo actionWithDuration:2 position:ccp(100,100)];
id ease = [CCEaseOut actionWithAction:action rate:2];
[sprite runAction: ease];
 
// 시작과 끝부분 가속
id action = [CCMoveTo actionWithDuration:2 position:ccp(100,100)];
id ease = [CCEaseInOut actionWithAction:action rate:2];
[sprite runAction: ease];

지수 action:

• CCEaseExponentialIn
• CCEaseExponentialOut
• CCEaseExponentialInOut

예제:

id scaleAction = [CCScaleTo actionWithDuration:2.5 scale:.8];
id easeAction = [CCEaseExponentialIn actionWithAction:scaleAction];
[label runAction: easeAction];

사인 actions :

• CCEaseSineIn
• CCEaseSineOut
• CCEaseSineInOut

예제:

// 시작부분 사인
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseSineIn actionWithAction:move];
[sprite runAction:action];
 
// 끝부분 사인
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseSineOut actionWithAction:move];
[sprite runAction:action];
 
// 시작과 끝부분 사인
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseSineInOut actionWithAction:move];
[sprite runAction:action];

이 action은 고무줄같은 시간 시뮬레이션으로 바꾼다. 고무줄 action 1보다 크고 0보다 작은 시간값을 사용하므로 내부 actions은 이 특이값을 다룰수 있는 준비가 되어있어야한다. 

어떤 시간 값은 한번 이상(이 함수는 전단사-1:1대응 함수가 아니다) 동작되므로 내부 action은 이값을 다룰준비가 되어있어야한다. CCMoveBy, CCScaleBy, CCRotateBy 같은 간단한 actions은 EaseElastic action 들과 잘 동작하지만 CCSequence 또는CCSpawn action 은 예상치 못한 결과가 나올 수 있다.  

Elastic action:

• CCEaseElasticIn
• CCEaseElasticOut
• CCEaseElasticInOut

예제:

// 'period' is how elastic is the action.
// recommended values: between 0.3 and 0.45
 
// Elastic at the beginning
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseElasticIn actionWithAction:move period:0.3f];
[sprite runAction: action];
 
// Elastic at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseElasticOut actionWithAction:move period:0.3f];
[sprite runAction: action];
 
// Elastic at the beginning and at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseElasticInOut actionWithAction:move period:0.3f];
[sprite runAction: action];

EaseBounce action은 바운딩(바닥에 팅기는)효과를 시뮬레이션한다.

어떤 시간 값은 한번 이상(이 함수는 전단사-1:1대응 함수가 아니다) 동작되므로 내부 action은 이값을 다룰준비가 되어있어야한다. CCMoveBy, CCScaleBy, CCRotateBy 같은 간단한 actions은 EaseBounce action 들과 잘 동작하지만 CCSequence 또는CCSpawn action 은 예상치 못한 결과가 나올 수 있다.   

Available bounce actions:

• CCEaseBounceIn
• CCEaseBounceOut
• CCEaseBounceInOut

Examples:

// 시작부분 튕김
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBounceIn actionWithAction:move];
[sprite runAction: action];
 
// 끝부분이 튕김
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBounceOut actionWithAction:move];
[sprite runAction: action];
 
// 시작과 끝부분이 튕김
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBounceInOut actionWithAction:move];
[sprite runAction: action];

어떤 시간 값은 한번 이상(이 함수는 전단사-1:1대응 함수가 아니다) 동작되므로 내부 action은 이값을 다룰준비가 되어있어야한다. CCMoveBy, CCScaleBy, CCRotateBy 같은 간단한 actions은 EaseBack action 들과 잘 동작하지만 CCSequence 또는CCSpawn action 은 예상치 못한 결과가 나올 수 있다.    

Back action:

• CCEaseBackIn
• CCEaseBackOut
• CCEaseBackInOut

Examples:

// Back at the beginning
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBackIn actionWithAction:move];
[sprite runAction: action];
 
// Back at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBackOut actionWithAction:move];
[sprite runAction: action];
 
// Back at the beginning and at the end
id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCEaseBackInOut actionWithAction:move];
[sprite runAction: action];

CCSpeed action은 내부 action의 기간을 바꾼다.

id move = [CCMoveBy actionWithDuration:3 position:ccp(350,0)];
id action = [CCSpeed actionWithAction: move speed:1.0f];   // no speed modification
 
// but you can modify the speed later
[action setSpeed: 2.5f]; // speed is 2.5 faster
 
[action setSpeed: 0.5f]; // speed is 0.5 faster (it means 2 times slower)