동국대 앱창작터 2일차:cocos2d-x 기본기능

Post on 23-Jan-2018

2.148 Views

Category:

Technology

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

top related