이 자료는 멀티플랫폼 게임개발도구인 Cocos2d를 소개하는 자료입니다. Cocos2d는 장면그래프 구조라는 구조를 가지며 강력하고 다양한 라이브러리를 이용한 게임개발으 지원하고 있습니다. 그리고 간단하게 cocos3d에 관한 내용도 다루고 있습니다.

1. Cocos2D 기초
창원대학교 박동규 ( @dongupak )
2013년 3월
창원대학교
13년 2월 7일 목

2. 발표자 소개
창원대학교 정보통신공학과 교수 박동규
(YES, I’m a developer!!)
13년 2월 7일 목

3. iOS game engines
Sparrow cocos2d
oolong Galaxy
13년 2월 7일 목

4. iOS game engines
Corona Game salad
Unity
iTorque
13년 2월 7일 목

5. and much more
• Unreal Engine : Unreal Development Kit for
iOS
• https://www.youtube.com/watch?
v=J9hAHv-Lhzc
• Marmalade, Stonetrip S3D
13년 2월 7일 목

6. cocos2d games
Tap Pet Hotel: #1 Free Zombie Farm: #6 Free
Tap Zoo: #2 Free iStunt 2: #6 Free
13년 2월 7일 목

7. cocos2d games
Air Penguin: #1 Paid ZombieSmash: #1 Paid
Fishing Frenzy: #7 Paid Trainyard: #2 Paid
13년 2월 7일 목

8. Cocos2d for Mac App
13년 2월 7일 목

9. Cocos2D
• 오픈 소스 2D 프레임워크
• 2D 게임, 데모, 그래픽, 대화식 응용프로그램
• 2008년 9월 0.3.0 발표
• 수백개 이상의 앱이 Cocos2D로 개발되어 앱
스토어에 등록됨
13년 2월 7일 목

10. 특징
• Flow Control
• 서로 다른 Scene간의 흐름제어
• Sprite
• 손쉽고 빠른 스프라이트 활용
• Action
• move, rotate, scale등의 액션 수행
13년 2월 7일 목

11. 특징
• Effect
• Wave, twirl, lens등의 다양한 2D 효과
• Tiled Maps, Transition, Menus, Text
Rendering
• 물리엔진제공 : Chipmunk, Box2d, Particle
System
13년 2월 7일 목

12. 특징
• Parallax scrolling
• High Score server(Cocos live)
• OpenGL ES 1.1 기반 - iOS
• OpenGL 1.5 기반 - Mac
13년 2월 7일 목

13. 장점
• 예제코드가 많이 포함되어 있다
• OpenGL ES의 Wrapping이다.
• OpenGL에 관한 지식이 있다면 매우 쉽게
배울 수 있다
• 용량이 적은 게임개발이 가능하며 풍부한 API
가 제공된다
13년 2월 7일 목

14. Cocos3D
• 2012.11. - cocos3d 0.7.2
• Objective-C 언어로 작성됨
13년 2월 7일 목

15. 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일 목

16. Cocos2d 설치
13년 2월 7일 목

17. 설치
13년 2월 7일 목

18. 설치(super easy)
13년 2월 7일 목

19. 설치(super easy)
13년 2월 7일 목

20. 설치(super easy)
13년 2월 7일 목

21. 설치(super easy)
13년 2월 7일 목

22. 설치(super easy)
13년 2월 7일 목

23. 설치(super easy)
13년 2월 7일 목

24. 샘플 구동하기
좋은 예제들이 너무나 많습니다.
13년 2월 7일 목

25. Cocos2D구성
풍부한 예제와 소소코드 - 공부하기 좋다.
13년 2월 7일 목

26. 예제
13년 2월 7일 목

27. Cocos3d 설치
13년 2월 7일 목

28. 설치
13년 2월 7일 목

29. cocos3d 템플릿
13년 2월 7일 목

30. Hello world 샘플
13년 2월 7일 목

31. Demo
Cocos2D for iPhone, demo 1,2,3
13년 2월 7일 목

32. and More
13년 2월 7일 목

33. Cocos2D의 구조
• Cocos2D 클래스들은 CCxxx라는 네임스페
이스를 가진다.
• Director(CCDirector)
• 싱글턴 객체, 게임의 흐름을 Scene을 통하여
관리
• OpenGL ES 환경 설정
13년 2월 7일 목

34. Cocos2D의 구조
• Scene
• 게임의 스크린에 해당함
• 하나의 배경을 구성함
• 여러개의 Scene을 이용하여 게임을 구성
13년 2월 7일 목

35. Cocos2D의 구조
• Layer
• Scene에 포함되는 객체
• 사용자의 이벤트를 입력받을 수 있다
• Sprite
• 실제로 움직이는 캐릭터나 무기
• 보통은 이미지임
13년 2월 7일 목

36. CCLayer
13년 2월 7일 목

37. CCLayer
13년 2월 7일 목

38. CCLayer
• 터치, 시간, 가속도 이벤트 처리
• isTouchEnabled_
• isAccelerometerEnabled_
• 게임 컨트롤러
• 게임 엔티티의 관리 - CCNode
13년 2월 7일 목

39. CCSprite
Texture
Texture
13년 2월 7일 목

40. CCSprite
Sprites
Texture
Texture
13년 2월 7일 목

41. Cocos2D의 구조
• Action
• Cocos2D 노드의 속성을 시간에 따라 변경
시기는 클래스
• 스프라이트, Scene에 애니메이션을 줄 수 있
다
13년 2월 7일 목

42. CCNode: Coordinate
13년 2월 7일 목

43. CCNode: Coordinate
contentSize.width
contentSize.height
13년 2월 7일 목

44. CCNode: Coordinate
13년 2월 7일 목

45. CCNode: Coordinate
13년 2월 7일 목

46. CCNode: Coordinate
anchorPoint
rotation
ion
sit
po
13년 2월 7일 목

47. CCNode: Coordinate
13년 2월 7일 목

48. CCNode: Coordinate
13년 2월 7일 목

49. CCNode:
Transformation
- (CGAffineTransform)nodeToParentTransform;
- (CGAffineTransform)parentToNodeTransform;
- (CGAffineTransform)nodeToWorldTransform;
- (CGAffineTransform)worldToNodeTransform;
- (CGPoint)convertToNodeSpace:(CGPoint)worldPoint;
- (CGPoint)convertToWorldSpace:(CGPoint)nodePoint;
13년 2월 7일 목

50. CCNode: Actions
• Modify node’s attributes by time
• position/rotation/scale/opacity/grid
• Interval actions and Instant actions
13년 2월 7일 목

51. Scene Graph 구조
• 하나의 Scene이나 Layer에 객체들을 자식으로
추가(addChild)하여 이 객체들이 상호작용하
도록 프로그래밍함
• 객체들은 계층적으로 추가되거나 삭제될 수
있다
• 모든 객체들은 visible 속성을 가진다
13년 2월 7일 목

52. Scene Graph
CCScene
CCLayer CCLayer CCLayer
CCSprite CCMenu CCSprite
13년 2월 7일 목

53. Scene Graph 구조
• 벡터기반 그래픽스 시스템
에서 일반적으로 사용
• Acrobat 3D, Java 3D,
AutoCAD,VRML, Open
Inventor등에서 사용
• 트리형태의 노드를 이용하
여 장면을 구성
13년 2월 7일 목

54. CCNode 클래스
• Cocos2D의 가장 중요한 클래스
• CCScene, CCLayer, CCSprite, CCMenu가
가장 자주 사용되는 Cocos2D 클래스이며 이
들은 모두 CCNode의 자식이다
• CCNode를 포함할 수 있다. schedule 메소드
를 주기적으로 callback할 수 있다
• 액션을 수행할 수 있다
13년 2월 7일 목

55. CCNode 클래스
• 속성값
• rotation, scaleX_, scaleY_,position,
visible_, anchorPointInPixels_,
anchorPoint_, isRelativeAnchorPoint_,
contentSize_, transform_, inverse_,
vertexZ_, camera_, grid, zOrder_,
children_
13년 2월 7일 목

56. CCNode 클래스
• 속성값
• tag_, userData, isRunning_,
isTransformDirty_, isInverseDirty_,
isTransformGLDirty_, ...
13년 2월 7일 목

57. 주요속성
• 위치, 스케일(x,y),회전(degree,시계방
향),CCCamera(gluLookAt 함수의
interface), 앵커포인트, 크기, visible, z-order,
OpenGL의 z 위치
• tag 속성
• Scene Graph내의 노드를 구분하는 정수 값
13년 2월 7일 목

58. CCArray
• Scene Graph의 객체를 편리하게 다루기 위한
NSArray 클래스의 대용 클래스
• NSFastEnumeration, NSCoding 프로토콜을
준수
• count, capacity, indexOfObject, addObject,
insertObject, removeObject,
removeAllObjects등의 메소드를 가짐
13년 2월 7일 목

59. 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일 목

60. 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일 목

61. CCNode Scene관리
SceneGraph 트리내의 자식 객체를 traverse하여
액션을 수행
-(void) onEnter
{
! [children_ makeObjectsPerformSelector:@selector(onEnter)];
!
! [self resumeSchedulerAndActions];
!
! isRunning_ = YES;
}
-(void) onEnterTransitionDidFinish
{
! [children_
makeObjectsPerformSelector:@selector(onEnterTransitionDidFinish)];
}
13년 2월 7일 목

62. CCNode의 액션수행
runAction 메소드가 액션 객체에서 지정
된 시간간격(duration)에 주어진 액션을
수행
13년 2월 7일 목

63. OpenGL
Transformation
• OpenGL은 Graphics Pipeline을 제공
• 변환행렬(Current Transform:CT) 사용
13년 2월 7일 목

64. Transform wrapping
void 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일 목

65. CGAffineTransform
CT를 항등행렬로 초기화
Translation, Rotation, Scale 행렬을 곱하여
변환행렬을 만든다
13년 2월 7일 목

66. CCNode Scene관리
-(void) onExit
{
! [self pauseSchedulerAndActions];
!
! isRunning_ = NO;!
!
! [children_ makeObjectsPerformSelector:@selector(onExit)];
}
13년 2월 7일 목

67. CCDirector 살펴보기
• 픽셀 포맷 지정
• Depth Buffer 포맷
• OpenGL Projection방법
• Device Orientation
• EAGLView 위에 객체를 표현(EAGLView 는
UIView 클래스의 하위 클래스)
13년 2월 7일 목

68. CCDirector
• 유용한 메소드
• convertToGL
• UIKit 좌표를
OpenGL좌표로 변
환하는 기능을 한다
13년 2월 7일 목

69. CCDirector
• 유용한 메소드
• convertToGL
• UIKit 좌표를
OpenGL좌표로 변
환하는 기능을 한다
13년 2월 7일 목

70. CCDirector
• 유용한 메소드
• convertToGL
• UIKit 좌표를
OpenGL좌표로 변
환하는 기능을 한다
• OpenGL 좌표
13년 2월 7일 목

71. CCDirector
• 유용한 메소드
• convertToGL
• UIKit 좌표를
OpenGL좌표로 변
환하는 기능을 한다
• OpenGL 좌표
13년 2월 7일 목

72. CCDirector
• 유용한 메소드
• convertToGL
• UIKit 좌표를
OpenGL좌표로 변
환하는 기능을 한다
• UIKit 좌표
• OpenGL 좌표
13년 2월 7일 목

73. CCDirector
• -(void) pushScene:(CCScene*)scene
• 수행중인 Scene을 중지시키고 scene을
push한다
• -(void)popScene
• -(void)runWithScene:(CCScene*)scene
• Director의 메인루프에 주어진 Scene을 넣
는다
13년 2월 7일 목

74. CCDirector
• runWithScene으로 Scene을 렌더링
13년 2월 7일 목

75. runWithScene
• runWithScene이 하는 일
13년 2월 7일 목

76. runWithScene
• runWithScene이 하는 일
13년 2월 7일 목

77. runWithScene
• runWithScene이 하는 일
13년 2월 7일 목

78. runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
13년 2월 7일 목

79. runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
13년 2월 7일 목

80. runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
역시 NSTimer를 통해 특정 루프를 호출
13년 2월 7일 목

81. runWithScene
• runWithScene이 하는 일
디폴트 디렉터는 CCTimerDirector임
역시 NSTimer를 통해 특정 루프를 호출
13년 2월 7일 목

82. CCScene
• CCScene은 anchor point를 화면의 중심으로
둔다
• 모든 노드의 부모 노드 역할
13년 2월 7일 목

83. CCLayer
• UIAccelerometerDelegate, CCStandardTouchDelegate,
CCTargetedTouchDelegate 프로토콜을 구현
• 터치 이벤트를 처리하는 방식으로 Targeted Touch Delegate는
1)싱글 터치만을 처리하는 메소드를 제공함, 2) ccTouchBegan
메소드가 필수 메소드임(부울형 YES/NO를 반환함)
• CCStandardTouchDelegate는 멀티터치를 지원함
13년 2월 7일 목

84. CCLayer
• CCLayer는 Accelerometer, Touch를 처리하
는 메소드를 가진다
• 레이어의 색상이나 크기를 지정할 수 있는 메
소드를 가진다
• draw 메소드를 통하여 Blending이나 texture
를 표현할 수 있다
13년 2월 7일 목

85. CCMenu
• CCLayer의 자식 클래스(Touch를 받아야 하
므로)
• MenuItem을 추가하는 기능(CCMenuItem 클
래스의 객체들만 자식으로 추가할 수 있다)
• 수직, 수평 정렬기능
13년 2월 7일 목

86. CCMenuItem
• CCNode의 자식 클래스
• CCMenuItemImage, CCMenuItemFont,
CCMenuItemAtlasFont,
CCMenuItemLabel, CCMenuItemSprite등의
하위클래스를 가짐
• NSInvocation 객체를 통해 메뉴선택시 메소
드를 invoke시킴
13년 2월 7일 목

87. CCAction
• originalTarget(id형), target (id형), tag(int 형)
속성을 가짐
• NSObject의 자식 클래스-하위 노드를 가질
수 있음
• CCAction의 하위클래스
• CCIntervalAction, CCFiniteTimeAction,
CCSpeed, CCRepeatForever, CCFollow
13년 2월 7일 목

88. CCMoveTo
13년 2월 7일 목

89. CCMoveTo
13년 2월 7일 목

90. CCMoveTo
...
13년 2월 7일 목

91. CCMoveTo
...
13년 2월 7일 목

92. 기타
• 스프라이트, 타일맵, 그리드, 텍스쳐...
• 매우 많은 클래스들이 있으며 이들 모두 잘 설
계된 클래스들이다
13년 2월 7일 목

93. 예제
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일 목

94. 결론
13년 2월 7일 목

95. 결론
• 게임을 만드는 것은 퍼즐 놀이와 같은 지적 유
희이다
13년 2월 7일 목

96. 결론
• 게임을 만드는 것은 퍼즐 놀이와 같은 지적 유
희이다
• 창조하는 것은 매우 즐거운 과정이다.
13년 2월 7일 목

97. 결론
• 게임을 만드는 것은 퍼즐 놀이와 같은 지적 유
희이다
• 창조하는 것은 매우 즐거운 과정이다.
• 소프트웨어 마켓의 패러다임이 바뀌고 있다.
• 오픈마켓의 등장과 활성화
13년 2월 7일 목

98. 결론
13년 2월 7일 목

99. 결론
• cocos2d와 같은 강력하고 사용하기 편리한 라
이브러리들이 있다
13년 2월 7일 목

100. 결론
• cocos2d와 같은 강력하고 사용하기 편리한 라
이브러리들이 있다
• 기초적인 프로그래밍 실력이 있다면 누구나
오픈마켓이 게임을 만들어 올릴 수 있다
13년 2월 7일 목

101. 결론
• cocos2d와 같은 강력하고 사용하기 편리한 라
이브러리들이 있다
• 기초적인 프로그래밍 실력이 있다면 누구나
오픈마켓이 게임을 만들어 올릴 수 있다
• 그 기초는 매우 매우 중요하다
13년 2월 7일 목

102. 기타
• 트위터: @dongupak
13년 2월 7일 목

103. Q &A
13년 2월 7일 목