Download - 동국대 앱창작터 2일차:Cocos2d-X 기본기능
2일차:기본기능 동국대학교 앱창작터 모바일게임과정II:Cocos2d-X
목차
레이블 사용하기
스프라이트 사용하기
메뉴 사용하기
액션 사용하기
트랜지션 사용하기
애니메이션 사용하기
사운드 사용하기
터치 사용하기
스케줄 사용하기
모바일게임과정II:Cocos2d-X 2
HelloWorld
폴더/파일 구성
Box2D, chipmunk: 물리엔진 관련
Classes: 게임 관련 파일
CocosDenshion: 사운드 엔진 관련
extensions: 확장기능
Frameworks: iOS 프레임워크
iOS: iOS 관련 파일들
Products: 관련 설정
Resources: 이미지 등
모바일게임과정II:Cocos2d-X 3
HelloWorld
노드 생성
노드 속성 변경
장면(Scene), 레이어(Layer)
모바일게임과정II:Cocos2d-X 4
AppDelegate.h
모바일게임과정II:Cocos2d-X 5
AppDelegate.cpp
모바일게임과정II:Cocos2d-X 6
AppDelegate.cpp
모바일게임과정II:Cocos2d-X 7
HellWorldScene.h
모바일게임과정II:Cocos2d-X 8
HellWorldScene.cpp
모바일게임과정II:Cocos2d-X 9
HellWorldScene.cpp
모바일게임과정II:Cocos2d-X 10
도움말/참고자료
도움말 API 참조문서: http://www.cocos2d-x.org/reference/native-cpp/index.html
메모리 관리 Reference Count and AutoReleasePool in Cocos2d-x: http://www.cocos2d-
x.org/projects/cocos2d-x/wiki/Reference_Count_and_AutoReleasePool_in_Cocos2d-x
cocos2d-x 메모리 관리에 대한 간단한 정리 #1: http://www.libsora.so/posts/2013/01/25/cocos2dx-memory-management/
교재 저자: 네이버 카페 http://cafe.naver.com/cocos2dxusers.cafe
참고자료 튜토리얼: http://www.raywenderlich.com/
모바일게임과정II:Cocos2d-X 11
레이블 사용하기
모바일게임과정II:Cocos2d-X 12
CCLabelTTF 기본형
모바일게임과정II:Cocos2d-X 13
모바일게임과정II:Cocos2d-X 14
모바일게임과정II:Cocos2d-X 15
모바일게임과정II:Cocos2d-X 16
모바일게임과정II:Cocos2d-X 17
트루 타입 폰트 파일 사용하기
$COCOS2DX_ROOT/samples/TestCpp/Resources/fonts 디렉토리 사용
디렉토리를 프로젝트의 Resources 디렉토리로 복사
Xcode 프로젝트
Resources/Info.plist
모바일게임과정II:Cocos2d-X 18
모바일게임과정II:Cocos2d-X 19
모바일게임과정II:Cocos2d-X 20
모바일게임과정II:Cocos2d-X 21
비트맵 폰트 파일과 캐릭터맵을 이용한 텍스트 출력
비트맵 폰트 파일 폰트이름.fnt: 폰트의 각 글자에 대한 이미지 정보
폰트이름.png: 이미지 파일
비트맵 폰트 도구 Hiero: slick.cokeandcode.com
fonteditor
Glyph Designeer
bmGlyph
LabelAtlasCreator
AngelCode의 BMFont: www.angelcode.com
모바일게임과정II:Cocos2d-X 22
캐릭터맵
너비와 높이가 서로 같은 크기의 이미지로 구성된 이미지 이용
CCLabelAtlas 클래스 create() 메소드의 인자
출력할 문자열
스프라이트 배치노드 이미지
너비
높이
첫번째 이미지에 해당하는 ASCII 값
모바일게임과정II:Cocos2d-X 23
모바일게임과정II:Cocos2d-X 24
모바일게임과정II:Cocos2d-X 25
실습
화면 상에 임의의 5개의 문자열을 표시
각 문자열은 서로 다른 글꼴 사용
1개 이상의 비트맵 글꼴 사용
1개 이상의 캐릭터맵 사용
모바일게임과정II:Cocos2d-X 26
스프라이트 사용하기
모바일게임과정II:Cocos2d-X 27
스프라이트 사용하기
$COCOS2DX_ROOT/samples/TestCpp/Resources/Images 디렉토리 사용
주요 개념
앵커포인트
Z-Order
모바일게임과정II:Cocos2d-X 28
주석 처리된 앵커포인트 코드 확인
모바일게임과정II:Cocos2d-X 29
모바일게임과정II:Cocos2d-X 30
두 번째 스프라이트 추가 후, Z-Order 확인
모바일게임과정II:Cocos2d-X 31
모바일게임과정II:Cocos2d-X 32
부모 스프라이트 & 자식 스프라이트
모바일게임과정II:Cocos2d-X 33
480, 320
480,0
0, 320
0, 0
480, 320
480, 0
0, 320
0, 0
모바일게임과정II:Cocos2d-X 34
모바일게임과정II:Cocos2d-X 35
모바일게임과정II:Cocos2d-X 36
실습
Cocos2d-Sprite
“grossini.png” 이미지 표시
“grossini.png” 이미지 위에 “gauge.png” 이미지 표시
“gauge.png” 이미지의 폭은 “grossini.png” 이미지의 2/3
gauge 스프라이트는 grossini 스프라이트의 자식 노드로 추가
스프라이트 37
메뉴 사용하기
모바일게임과정II:Cocos2d-X 38
메뉴와 메뉴아이템의 기본 사용법
메뉴 생성 CCMenu *pMenu = CCMenu:create(NULL); // 빈 메뉴
메뉴 아이템 종류 CCMenuItemLabel CCMenuItemAtlasFont CCMenuItemFont CCMenuItemSprite CCMenuItemImage CCMenuItemToggle
공통 사항 타겟: 메뉴가 터치되었을때 동작을 수행할 객체를 지정 (주로 장면) 셀렉터: 메뉴가 터치되었을때 동작을 수행할 메소드를 지정
모바일게임과정II:Cocos2d-X 39
메뉴 초기화
CCMenu *pMenu = CCMenu:create(item1, item2, item3, NULL);
메뉴 레이아웃
pMenu->alignItemsVertically()
pMenu->alignItemsHorizontally()
모바일게임과정II:Cocos2d-X 40
모바일게임과정II:Cocos2d-X 41
모바일게임과정II:Cocos2d-X 42
모바일게임과정II:Cocos2d-X 43
모바일게임과정II:Cocos2d-X 44
모바일게임과정II:Cocos2d-X 45
메뉴 및 메뉴 아이템의 앵커포인트와 위치
모바일게임과정II:Cocos2d-X 46
모바일게임과정II:Cocos2d-X 47
모바일게임과정II:Cocos2d-X 48
메뉴 아이템에서 태그 사용하기
태그(tag)
메뉴 아이템의 구별을 위해서 사용
CCNode 클래스
int getTag();
void setTag(int tag);
CCNode* getChildByTag(int tag);
모바일게임과정II:Cocos2d-X 49
모바일게임과정II:Cocos2d-X 50
모바일게임과정II:Cocos2d-X 51
모바일게임과정II:Cocos2d-X 52
실습: 메뉴
다음과 같은 프로그램을 작성하시오.
Menu 화면 게임 화면
도움말
설정
각 메뉴 항목을 선택하면 CCLog()를 사용하여 문자열 출력
액션 사용하기
모바일게임과정II:Cocos2d-X 54
기본 액션
위치(Position) CCMoveBy, CCMoveTo CCJumpBy, CCJumpTo CCBezierBy, CCBezierTo CCPlace
크기(Scale) CCScaleBy, CCScaleTo
회전(Rotation) CCRotationBy, CCRotationTo
가시성(Visible) CCShow, CCHide, CCBlink, CCToggleVisibility
투명도(Opacity) CCFadeIn, CCFadeOut, CCFadeTo
색(R,G,B) CCTintBy, CCTintTo
거의 모든 액션에는 리버스(Reverse) 메소드가 구현되어 있음
모바일게임과정II:Cocos2d-X 55
모바일게임과정II:Cocos2d-X 56
모바일게임과정II:Cocos2d-X 57
모바일게임과정II:Cocos2d-X 58
모바일게임과정II:Cocos2d-X 59
모바일게임과정II:Cocos2d-X 60
모바일게임과정II:Cocos2d-X 61
모바일게임과정II:Cocos2d-X 62
복합 액션
CCSequence
CCSpawn
Reverse() 메소드
CCDelayTime
CCRepeat, CCRepeatForever
모바일게임과정II:Cocos2d-X 63
모바일게임과정II:Cocos2d-X 64
모바일게임과정II:Cocos2d-X 65
모바일게임과정II:Cocos2d-X 66
모바일게임과정II:Cocos2d-X 67
모바일게임과정II:Cocos2d-X 68
모바일게임과정II:Cocos2d-X 69
이즈 액션(Ease Action)
선형(Linear)
이즈 액션
모바일게임과정II:Cocos2d-X 70
EaseExponential actions
EaseSine actions
모바일게임과정II:Cocos2d-X 71
EaseElastic actions
탄성 시뮬레이션
두번째 인자: 탄력적인가를 지정
기본값: 0.3
권고값: 0.3 – 0.45
EaseBounce actions
모바일게임과정II:Cocos2d-X 72
EaseBack actions
CCSpeed
액션 진행 속도 변경
모바일게임과정II:Cocos2d-X 73
모바일게임과정II:Cocos2d-X 74
모바일게임과정II:Cocos2d-X 75
모바일게임과정II:Cocos2d-X 76
모바일게임과정II:Cocos2d-X 77
콜백 액션
지정한 메소드를 호출
CCCallFunc
CCCallFuncN: 인자로 노드를 사용
CCCallFuncND: 인자로 노드와 포인터형 데이터를 사용
모바일게임과정II:Cocos2d-X 78
모바일게임과정II:Cocos2d-X 79
모바일게임과정II:Cocos2d-X 80
모바일게임과정II:Cocos2d-X 81
모바일게임과정II:Cocos2d-X 82
모바일게임과정II:Cocos2d-X 83
실습:액션
다음과 같이 동작하는 프로그램을 작성하시오.
Menu 화면 Sequence: Move, Jump, Move (각 액션 사이에 0.5 지연 추가)
Spawn: Move & Rotate
RepeatForever: 좌우 왕복 이동
위의 내용을 가진 메뉴 화면을 화면에 표시
메뉴에서 지정된 액션을 수행
액션 84
트랜지션 사용하기
모바일게임과정II:Cocos2d-X 85
장면의 추가, 삭제, 교체
모바일게임과정II:Cocos2d-X 86
모바일게임과정II:Cocos2d-X 87
모바일게임과정II:Cocos2d-X 88
모바일게임과정II:Cocos2d-X 89
모바일게임과정II:Cocos2d-X 90
모바일게임과정II:Cocos2d-X 91
모바일게임과정II:Cocos2d-X 92
모바일게임과정II:Cocos2d-X 93
모바일게임과정II:Cocos2d-X 94
모바일게임과정II:Cocos2d-X 95
모바일게임과정II:Cocos2d-X 96
장면 트랜지션
97
CCTransitionFade
CCTransitionFadeBL
CCTransitionFadeDown
CCTransitionFadeTR
CCTransitionFadeUp
CCTransitionFlipAngular
CCTransitionFlipX
CCTransitionFlipY
CCTransitionJumpZoom
CCTransitionMoveInB
CCTransitionMoveInL
CCTransitionMoveInR
CCTransitionMoveInT
CCTransitionPageTurn
CCTransitionProgressHorizontal
CCTransitionProgressRadialCCW
CCTransitionProgressRadialCW
CCTransitionRotoZoom
CCTransitionSceneOriented
CCTransitionShrinkGrow
CCTransitionSlideInB
CCTransitionSlideInL
CCTransitionSlideInR
CCTransitionSlideInT
CCTransitionSplitCols
CCTransitionSplitRows
CCTransitionTurnOffTiles
CCTransitionZoomFlipAngular
CCTransitionZoomFlipX
CCTransitionZoomFlipY
씬 전환, 메뉴와 레이블
장면 트랜지션
98
씬 전환, 메뉴와 레이블
장면의 생성 및 소멸 순서
모바일게임과정II:Cocos2d-X 99
모바일게임과정II:Cocos2d-X 100
모바일게임과정II:Cocos2d-X 101
모바일게임과정II:Cocos2d-X 102
모바일게임과정II:Cocos2d-X 103
모바일게임과정II:Cocos2d-X 104
모바일게임과정II:Cocos2d-X 105
실습: 트랜지션
다음과 같은 장면과 장면 전환을 하는 프로그램을 작성하시오. Menu 화면
게임 화면
도움말
설정
첫 화면은 메뉴 화면
메뉴 화면 게임 화면, 도움말 화면, 설정 화면으로 이동
각 화면으로 전환될 때는 서로 다른 전환 효과를 사용
게임 화면, 도움말 화면, 설정 화면 각 화면을 설명하는 문자열을 화면에 표시
메뉴화면으로 이동
애니메이션 사용하기
모바일게임과정II:Cocos2d-X 107
애니메이션 기초
모바일게임과정II:Cocos2d-X 108
모바일게임과정II:Cocos2d-X 109
스프라이트배치노드
모바일게임과정II:Cocos2d-X 110
모바일게임과정II:Cocos2d-X 111
모바일게임과정II:Cocos2d-X 112
모바일게임과정II:Cocos2d-X 113
스프라이트배치노드를 이용한 애니메이션
모바일게임과정II:Cocos2d-X 114
스프라이트배치노드의 응용
모바일게임과정II:Cocos2d-X 115
모바일게임과정II:Cocos2d-X 116
애니메이션 종합
모바일게임과정II:Cocos2d-X 117
Zwoptex로 스프라이트배치노드 만들기
118
Zwoptex
http://zwopple.com/zwoptex/
Download flash version
스프라이트 시트
실습
다음과 같이 동작하는 프로그램을 작성하시오. 주어진 이미지로 스프라이트 시트를 작성
만들어진 스프라이트 시트를 사용하여 캐릭터 애니메이션 구현: 프레임 간격 0.5 초
스프라이트 시트 119
사운드 사용하기
모바일게임과정II:Cocos2d-X 120
심플오디오엔진의 기본 사용법
모바일게임과정II:Cocos2d-X 121
모바일게임과정II:Cocos2d-X 122
모바일게임과정II:Cocos2d-X 123
모바일게임과정II:Cocos2d-X 124
터치 사용하기
모바일게임과정II:Cocos2d-X 125
스탠다드 터치 델리게이트
모바일게임과정II:Cocos2d-X 126
모바일게임과정II:Cocos2d-X 127
모바일게임과정II:Cocos2d-X 128
모바일게임과정II:Cocos2d-X 129
모바일게임과정II:Cocos2d-X 130
타겟 지정 터치 델리게이트
모바일게임과정II:Cocos2d-X 131
모바일게임과정II:Cocos2d-X 132
모바일게임과정II:Cocos2d-X 133
모바일게임과정II:Cocos2d-X 134
모바일게임과정II:Cocos2d-X 135
멀티터치
모바일게임과정II:Cocos2d-X 136
모바일게임과정II:Cocos2d-X 137
모바일게임과정II:Cocos2d-X 138
모바일게임과정II:Cocos2d-X 139
모바일게임과정II:Cocos2d-X 140
실습
다음과 같이 동작하는 프로그램을 작성하시오. 다음 이미지로 캐릭터 애니메이션 구현: 프레임 간격 0.5 초
화면상의 위치를 터치하면
터치한 곳으로 캐릭터 이동
효과음 재생
스케줄 사용하기
모바일게임과정II:Cocos2d-X 142
스케줄 기초
Cocos2d-X의 스케줄러의 이점
정지(pause)/재시작(resume) 기능 사용
레이어가 스테이지에 들어가면 자동으로 타이머가 활성화, 그리고 스테이지를 떠나면 자동으로 비활성화
모바일게임과정II:Cocos2d-X 143
모바일게임과정II:Cocos2d-X 144
모바일게임과정II:Cocos2d-X 145
모바일게임과정II:Cocos2d-X 146
모바일게임과정II:Cocos2d-X 147
스케줄의 정지/재시작
모바일게임과정II:Cocos2d-X 148
모바일게임과정II:Cocos2d-X 149
모바일게임과정II:Cocos2d-X 150
모바일게임과정II:Cocos2d-X 151
모바일게임과정II:Cocos2d-X 152