Cocos2d 기초 - [Download PDF]

Cocos2D 기초

창원대학교 박동규 ( @dongupak )2013년 3월

창원대학교

13년 2월 7일 목

발표자 소개

창원대학교 정보통신공학과 교수 박동규(YES, I’m a developer!!)

13년 2월 7일 목

iOS game enginesSparrow

Galaxyoolong

cocos2d

13년 2월 7일 목

iOS game engines

Corona

iTorque

Game salad

Unity

13년 2월 7일 목

and much more

• Unreal Engine : Unreal Development Kit for iOS

• https://www.youtube.com/watch?v=J9hAHv-Lhzc

• Marmalade, Stonetrip S3D

13년 2월 7일 목

https://www.youtube.com/watch?v=J9hAHv-Lhzc

cocos2d games

Tap Pet Hotel: #1 Free

Tap Zoo: #2 Free

Zombie Farm: #6 Free

iStunt 2: #6 Free

13년 2월 7일 목

cocos2d games

Trainyard: #2 Paid

ZombieSmash: #1 PaidAir Penguin: #1 Paid

Fishing Frenzy: #7 Paid13년 2월 7일 목

Cocos2d for Mac App

13년 2월 7일 목

Cocos2D

• 오픈 소스 2D 프레임워크

• 2D 게임, 데모, 그래픽, 대화식 응용프로그램

• 2008년 9월 0.3.0 발표

• 수백개 이상의 앱이 Cocos2D로 개발되어 앱스토어에 등록됨

13년 2월 7일 목

특징• Flow Control

• 서로 다른 Scene간의 흐름제어

• Sprite

• 손쉽고 빠른 스프라이트 활용

• Action

• move, rotate, scale등의 액션 수행

13년 2월 7일 목

특징

• Effect

• Wave, twirl, lens등의 다양한 2D 효과

• Tiled Maps, Transition, Menus, Text Rendering

• 물리엔진제공 : Chipmunk, Box2d, Particle System

13년 2월 7일 목

특징

• Parallax scrolling

• High Score server(Cocos live)

• OpenGL ES 1.1 기반 - iOS

• OpenGL 1.5 기반 - Mac

13년 2월 7일 목

장점

• 예제코드가 많이 포함되어 있다

• OpenGL ES의 Wrapping이다.

• OpenGL에 관한 지식이 있다면 매우 쉽게 배울 수 있다

• 용량이 적은 게임개발이 가능하며 풍부한 API가 제공된다

13년 2월 7일 목

Cocos3D

• 2012.11. - cocos3d 0.7.2

• Objective-C 언어로 작성됨

13년 2월 7일 목

Cocos3D Features

• Seamless integration with cocos2d

• pluggable loading framework for 3d models

• 3d 모델 선택가능, 터치가능

• 3d 애니메이션 지원

• scene graph 구조를 통한 3d manipulation

• ......

http://brenwill.com/cocos3d/

13년 2월 7일 목

http://brenwill.com/cocos3d/

Cocos2d 설치

13년 2월 7일 목

설치

13년 2월 7일 목

설치(super easy)

13년 2월 7일 목

설치(super easy)

13년 2월 7일 목

설치(super easy)

13년 2월 7일 목

설치(super easy)

13년 2월 7일 목

설치(super easy)

13년 2월 7일 목

설치(super easy)

13년 2월 7일 목

샘플 구동하기

좋은 예제들이 너무나 많습니다.13년 2월 7일 목

Cocos2D구성

풍부한 예제와 소소코드 - 공부하기 좋다.

13년 2월 7일 목

예제

13년 2월 7일 목

Cocos3d 설치

13년 2월 7일 목

설치

13년 2월 7일 목

cocos3d 템플릿

13년 2월 7일 목

Hello world 샘플

13년 2월 7일 목

Demo

Cocos2D for iPhone, demo 1,2,3

13년 2월 7일 목

and More

13년 2월 7일 목

Cocos2D의 구조

• Cocos2D 클래스들은 CCxxx라는 네임스페이스를 가진다.

• Director(CCDirector)

• 싱글턴 객체, 게임의 흐름을 Scene을 통하여 관리

• OpenGL ES 환경 설정

13년 2월 7일 목

Cocos2D의 구조

• Scene

• 게임의 스크린에 해당함

• 하나의 배경을 구성함

• 여러개의 Scene을 이용하여 게임을 구성

13년 2월 7일 목

Cocos2D의 구조

• Layer

• Scene에 포함되는 객체

• 사용자의 이벤트를 입력받을 수 있다

• Sprite

• 실제로 움직이는 캐릭터나 무기

• 보통은 이미지임

13년 2월 7일 목

CCLayer

13년 2월 7일 목

CCLayer

13년 2월 7일 목

CCLayer• 터치, 시간, 가속도 이벤트 처리

• isTouchEnabled_

• isAccelerometerEnabled_

• 게임 컨트롤러

• 게임 엔티티의 관리 - CCNode

13년 2월 7일 목

CCSprite

TextureTexture

13년 2월 7일 목

CCSprite

Sprites

TextureTexture

13년 2월 7일 목

Cocos2D의 구조

• Action

• Cocos2D 노드의 속성을 시간에 따라 변경시기는 클래스

• 스프라이트, Scene에 애니메이션을 줄 수 있다

13년 2월 7일 목

CCNode: Coordinate

13년 2월 7일 목

CCNode: CoordinatecontentSize.width

cont

entS

ize.

heig

ht

13년 2월 7일 목

CCNode: Coordinate

13년 2월 7일 목

CCNode: Coordinate

13년 2월 7일 목

CCNode: Coordinate

rotation

posit

ion

anchorPoint

13년 2월 7일 목

CCNode: Coordinate

13년 2월 7일 목

CCNode: Coordinate

13년 2월 7일 목

CCNode: Transformation- (CGAffineTransform)nodeToParentTransform;

- (CGAffineTransform)parentToNodeTransform;

- (CGAffineTransform)nodeToWorldTransform;

- (CGAffineTransform)worldToNodeTransform;

- (CGPoint)convertToNodeSpace:(CGPoint)worldPoint;

- (CGPoint)convertToWorldSpace:(CGPoint)nodePoint;

13년 2월 7일 목

CCNode: Actions• Modify node’s attributes by time

• position/rotation/scale/opacity/grid

• Interval actions and Instant actions

13년 2월 7일 목

Scene Graph 구조

• 하나의 Scene이나 Layer에 객체들을 자식으로 추가(addChild)하여 이 객체들이 상호작용하도록 프로그래밍함

• 객체들은 계층적으로 추가되거나 삭제될 수 있다

• 모든 객체들은 visible 속성을 가진다

13년 2월 7일 목

Scene GraphCCScene

CCLayer CCLayer CCLayer

CCSprite CCMenu CCSprite

13년 2월 7일 목

Scene Graph 구조• 벡터기반 그래픽스 시스템에서 일반적으로 사용

• Acrobat 3D, Java 3D, AutoCAD, VRML, Open Inventor등에서 사용

• 트리형태의 노드를 이용하여 장면을 구성

13년 2월 7일 목

CCNode 클래스

• Cocos2D의 가장 중요한 클래스

• CCScene, CCLayer, CCSprite, CCMenu가 가장 자주 사용되는 Cocos2D 클래스이며 이들은 모두 CCNode의 자식이다

• CCNode를 포함할 수 있다. schedule 메소드를 주기적으로 callback할 수 있다

• 액션을 수행할 수 있다

13년 2월 7일 목

CCNode 클래스

• 속성값• rotation, scaleX_, scaleY_,position,

visible_, anchorPointInPixels_, anchorPoint_, isRelativeAnchorPoint_, contentSize_, transform_, inverse_, vertexZ_, camera_, grid, zOrder_, children_

13년 2월 7일 목

CCNode 클래스

• 속성값• tag_, userData, isRunning_,

isTransformDirty_, isInverseDirty_, isTransformGLDirty_, ...

13년 2월 7일 목

주요속성

• 위치, 스케일(x,y),회전(degree,시계방향),CCCamera(gluLookAt 함수의 interface), 앵커포인트, 크기, visible, z-order, OpenGL의 z 위치

• tag 속성

• Scene Graph내의 노드를 구분하는 정수 값

13년 2월 7일 목

CCArray

• Scene Graph의 객체를 편리하게 다루기 위한 NSArray 클래스의 대용 클래스

• NSFastEnumeration, NSCoding 프로토콜을 준수

• count, capacity, indexOfObject, addObject, insertObject, removeObject, removeAllObjects등의 메소드를 가짐

13년 2월 7일 목

addChild in CCNode

-(id) addChild: (CCNode*) child z:(int)z tag:(int) aTag

{!! ...! if( ! children_ )! ! [self childrenAlloc];!! [self insertChild:child z:z];!! child.tag = aTag;!! [child setParent: self];!! if( isRunning_ )! ! [child onEnter];! return self;}

• Node객체에 하위 객체를 추가함

13년 2월 7일 목

removeChild-(void) removeChild: (CCNode*)child cleanup:(BOOL)cleanup{! if (child == nil)! ! return;!! if ( [children_ containsObject:child] )! ! [self detachChild:child cleanup:cleanup];}

• Node객체의 하위 객체를 Scene Graph 구조에서 제거함

• NSMutableArray *children_; 이라는 속성값이 CCNode에 있으며 children_ 배열에 CCNode 객체를 추가하거나 제거하는 것이 addChild, removeChild가 하는 일이다.

13년 2월 7일 목

CCNode Scene관리

-(void) onEnter

{! [children_ makeObjectsPerformSelector:@selector(onEnter)];!! [self resumeSchedulerAndActions];!! isRunning_ = YES;}

-(void) onEnterTransitionDidFinish{! [children_ makeObjectsPerformSelector:@selector(onEnterTransitionDidFinish)];}

SceneGraph 트리내의 자식 객체를 traverse하여 액션을 수행

13년 2월 7일 목

CCNode의 액션수행

runAction 메소드가 액션 객체에서 지정된 시간간격(duration)에 주어진 액션을

수행

13년 2월 7일 목

OpenGL Transformation

• OpenGL은 Graphics Pipeline을 제공

• 변환행렬(Current Transform:CT) 사용

13년 2월 7일 목

Transform wrappingvoid initCT() // initialize the CT (model view matrix){ glMatrixMode(GL_MODELVIEW); // informs OpenGL which matrix we are altering glLoadIdentity(); // set CT to the identity matrix}void rotate2D(double angle){ glMatrixMode(GL_MODELVIEW); glRotated(angle, 0.0, 0.0, 1.0); // set CT to CT * (2D rotation) }void translate2D(double dx, double dy){ glMatrixMode(GL_MODELVIEW); glTranslated(dx, dy, 0.0); // set CT to CT * (2D translation)}void scale2D(double sx, double sy){ glMatrixMode(GL_MODELVIEW); glScaled(sx, sy, 1.0); // set CT to CT * (2D scaling)}

gl 변환함수를 간단한 함수로 포장하여 사용한다13년 2월 7일 목

CGAffineTransformCT를 항등행렬로 초기화

Translation, Rotation, Scale 행렬을 곱하여변환행렬을 만든다

13년 2월 7일 목

CCNode Scene관리

-(void) onExit{! [self pauseSchedulerAndActions];!! isRunning_ = NO;!!! [children_ makeObjectsPerformSelector:@selector(onExit)];}

13년 2월 7일 목

CCDirector 살펴보기

• 픽셀 포맷 지정

• Depth Buffer 포맷

• OpenGL Projection방법

• Device Orientation

• EAGLView 위에 객체를 표현(EAGLView 는 UIView 클래스의 하위 클래스)

13년 2월 7일 목