Post on 13-Jan-2015
description
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일 목
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일 목
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일 목
CCDirector• 유용한 메소드
• convertToGL
• UIKit 좌표를 OpenGL좌표로 변환하는 기능을 한다
13년 2월 7일 목
CCDirector• 유용한 메소드
• convertToGL
• UIKit 좌표를 OpenGL좌표로 변환하는 기능을 한다
13년 2월 7일 목
CCDirector• 유용한 메소드
• convertToGL
• UIKit 좌표를 OpenGL좌표로 변환하는 기능을 한다
• OpenGL 좌표
13년 2월 7일 목
CCDirector• 유용한 메소드
• convertToGL
• UIKit 좌표를 OpenGL좌표로 변환하는 기능을 한다
• OpenGL 좌표
13년 2월 7일 목
CCDirector• 유용한 메소드
• convertToGL
• UIKit 좌표를 OpenGL좌표로 변환하는 기능을 한다
• UIKit 좌표
• OpenGL 좌표
13년 2월 7일 목
CCDirector
• -(void) pushScene:(CCScene*)scene
• 수행중인 Scene을 중지시키고 scene을 push한다
• -(void)popScene
• -(void)runWithScene:(CCScene*)scene
• Director의 메인루프에 주어진 Scene을 넣는다
13년 2월 7일 목
CCDirector
• runWithScene으로 Scene을 렌더링
13년 2월 7일 목
runWithScene
• runWithScene이 하는 일
13년 2월 7일 목
runWithScene
• runWithScene이 하는 일
13년 2월 7일 목
runWithScene
• runWithScene이 하는 일
13년 2월 7일 목
runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
13년 2월 7일 목
runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
13년 2월 7일 목
runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
역시 NSTimer를 통해 특정 루프를 호출
13년 2월 7일 목
runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
역시 NSTimer를 통해 특정 루프를 호출
13년 2월 7일 목
CCScene
• CCScene은 anchor point를 화면의 중심으로 둔다
• 모든 노드의 부모 노드 역할
13년 2월 7일 목
CCLayer
• UIAccelerometerDelegate, CCStandardTouchDelegate, CCTargetedTouchDelegate 프로토콜을 구현
• 터치 이벤트를 처리하는 방식으로 Targeted Touch Delegate는 1)싱글 터치만을 처리하는 메소드를 제공함, 2) ccTouchBegan 메소드가 필수 메소드임(부울형 YES/NO를 반환함)
• CCStandardTouchDelegate는 멀티터치를 지원함
13년 2월 7일 목
CCLayer
• CCLayer는 Accelerometer, Touch를 처리하는 메소드를 가진다
• 레이어의 색상이나 크기를 지정할 수 있는 메소드를 가진다
• draw 메소드를 통하여 Blending이나 texture를 표현할 수 있다
13년 2월 7일 목
CCMenu
• CCLayer의 자식 클래스(Touch를 받아야 하므로)
• MenuItem을 추가하는 기능(CCMenuItem 클래스의 객체들만 자식으로 추가할 수 있다)
• 수직, 수평 정렬기능
13년 2월 7일 목
CCMenuItem
• CCNode의 자식 클래스
• CCMenuItemImage, CCMenuItemFont, CCMenuItemAtlasFont, CCMenuItemLabel, CCMenuItemSprite등의 하위클래스를 가짐
• NSInvocation 객체를 통해 메뉴선택시 메소드를 invoke시킴
13년 2월 7일 목
CCAction
• originalTarget(id형), target (id형), tag(int 형) 속성을 가짐
• NSObject의 자식 클래스-하위 노드를 가질 수 있음
• CCAction의 하위클래스
• CCIntervalAction, CCFiniteTimeAction, CCSpeed, CCRepeatForever, CCFollow
13년 2월 7일 목
CCMoveTo
13년 2월 7일 목
CCMoveTo
13년 2월 7일 목
CCMoveTo
...
13년 2월 7일 목
CCMoveTo
...
13년 2월 7일 목
기타
• 스프라이트, 타일맵, 그리드, 텍스쳐...
• 매우 많은 클래스들이 있으며 이들 모두 잘 설계된 클래스들이다
13년 2월 7일 목
예제
Texture
Bird on a wire- YR Lee, Peter Yun(TU)https://itunes.apple.com/kr/app/jeonseon-wiui-chamsae/id474403193?mt=8
13년 2월 7일 목
결론
13년 2월 7일 목
결론
• 게임을 만드는 것은 퍼즐 놀이와 같은 지적 유희이다
13년 2월 7일 목
결론
• 게임을 만드는 것은 퍼즐 놀이와 같은 지적 유희이다
• 창조하는 것은 매우 즐거운 과정이다.
13년 2월 7일 목
결론
• 게임을 만드는 것은 퍼즐 놀이와 같은 지적 유희이다
• 창조하는 것은 매우 즐거운 과정이다.
• 소프트웨어 마켓의 패러다임이 바뀌고 있다.
• 오픈마켓의 등장과 활성화
13년 2월 7일 목
결론
13년 2월 7일 목
결론
• cocos2d와 같은 강력하고 사용하기 편리한 라이브러리들이 있다
13년 2월 7일 목
결론
• cocos2d와 같은 강력하고 사용하기 편리한 라이브러리들이 있다
• 기초적인 프로그래밍 실력이 있다면 누구나 오픈마켓이 게임을 만들어 올릴 수 있다
13년 2월 7일 목
결론
• cocos2d와 같은 강력하고 사용하기 편리한 라이브러리들이 있다
• 기초적인 프로그래밍 실력이 있다면 누구나 오픈마켓이 게임을 만들어 올릴 수 있다
• 그 기초는 매우 매우 중요하다
13년 2월 7일 목
기타
• 트위터: @dongupak
13년 2월 7일 목
Q & A
13년 2월 7일 목