동국대 앱창작터 2일차:Cocos2d-X 기본기능

2일차:기본기능 동국대학교 앱창작터 모바일게임과정II:Cocos2d-X

목차

레이블 사용하기

스프라이트 사용하기

메뉴 사용하기

액션 사용하기

트랜지션 사용하기

애니메이션 사용하기

사운드 사용하기

터치 사용하기

스케줄 사용하기

모바일게임과정II:Cocos2d-X 2

HelloWorld

폴더/파일 구성

Box2D, chipmunk: 물리엔진 관련

Classes: 게임 관련 파일

CocosDenshion: 사운드 엔진 관련

extensions: 확장기능

Frameworks: iOS 프레임워크

iOS: iOS 관련 파일들

Products: 관련 설정

Resources: 이미지 등


HelloWorld

노드 생성

노드 속성 변경

장면(Scene), 레이어(Layer)


AppDelegate.h


AppDelegate.cpp


AppDelegate.cpp


HellWorldScene.h


HellWorldScene.cpp


HellWorldScene.cpp


도움말/참고자료

도움말 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/


http://www.cocos2d-x.org/reference/native-cpp/index.html






http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Reference_Count_and_AutoReleasePool_in_Cocos2d-x








http://www.libsora.so/posts/2013/01/25/cocos2dx-memory-management/





















http://www.raywenderlich.com/

레이블 사용하기


CCLabelTTF 기본형






트루 타입 폰트 파일 사용하기

$COCOS2DX_ROOT/samples/TestCpp/Resources/fonts 디렉토리 사용

디렉토리를 프로젝트의 Resources 디렉토리로 복사

Xcode 프로젝트

Resources/Info.plist





비트맵 폰트 파일과 캐릭터맵을 이용한 텍스트 출력

비트맵 폰트 파일 폰트이름.fnt: 폰트의 각 글자에 대한 이미지 정보

폰트이름.png: 이미지 파일

비트맵 폰트 도구 Hiero: slick.cokeandcode.com

fonteditor

Glyph Designeer

bmGlyph

LabelAtlasCreator

AngelCode의 BMFont: www.angelcode.com


캐릭터맵

너비와 높이가 서로 같은 크기의 이미지로 구성된 이미지 이용

CCLabelAtlas 클래스 create() 메소드의 인자

출력할 문자열

스프라이트 배치노드 이미지

너비

높이

첫번째 이미지에 해당하는 ASCII 값




실습

화면 상에 임의의 5개의 문자열을 표시

각 문자열은 서로 다른 글꼴 사용

1개 이상의 비트맵 글꼴 사용

1개 이상의 캐릭터맵 사용





$COCOS2DX_ROOT/samples/TestCpp/Resources/Images 디렉토리 사용

주요 개념

앵커포인트

Z-Order


주석 처리된 앵커포인트 코드 확인



두 번째 스프라이트 추가 후, Z-Order 확인



부모 스프라이트 & 자식 스프라이트


480, 320

480,0

0, 320

0, 0

480, 320

480, 0

0, 320

0, 0




실습

Cocos2d-Sprite

“grossini.png” 이미지 표시

“grossini.png” 이미지 위에 “gauge.png” 이미지 표시

“gauge.png” 이미지의 폭은 “grossini.png” 이미지의 2/3

gauge 스프라이트는 grossini 스프라이트의 자식 노드로 추가

스프라이트 37

메뉴 사용하기


메뉴와 메뉴아이템의 기본 사용법

메뉴 생성 CCMenu *pMenu = CCMenu:create(NULL); // 빈 메뉴

메뉴 아이템 종류 CCMenuItemLabel CCMenuItemAtlasFont CCMenuItemFont CCMenuItemSprite CCMenuItemImage CCMenuItemToggle

공통 사항 타겟: 메뉴가 터치되었을때 동작을 수행할 객체를 지정 (주로 장면) 셀렉터: 메뉴가 터치되었을때 동작을 수행할 메소드를 지정


메뉴 초기화

CCMenu *pMenu = CCMenu:create(item1, item2, item3, NULL);

메뉴 레이아웃

pMenu->alignItemsVertically()

pMenu->alignItemsHorizontally()







메뉴 및 메뉴 아이템의 앵커포인트와 위치




메뉴 아이템에서 태그 사용하기

태그(tag)

메뉴 아이템의 구별을 위해서 사용

CCNode 클래스

int getTag();

void setTag(int tag);

CCNode* getChildByTag(int tag);





실습: 메뉴

다음과 같은 프로그램을 작성하시오.

Menu 화면 게임 화면

도움말

설정

각 메뉴 항목을 선택하면 CCLog()를 사용하여 문자열 출력

액션 사용하기


기본 액션

위치(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) 메소드가 구현되어 있음









복합 액션

CCSequence

CCSpawn

Reverse() 메소드

CCDelayTime

CCRepeat, CCRepeatForever








이즈 액션(Ease Action)

선형(Linear)

이즈 액션


EaseExponential actions

EaseSine actions


EaseElastic actions

탄성 시뮬레이션

두번째 인자: 탄력적인가를 지정

기본값: 0.3

권고값: 0.3 – 0.45

EaseBounce actions


EaseBack actions

CCSpeed

액션 진행 속도 변경






콜백 액션

지정한 메소드를 호출

CCCallFunc

CCCallFuncN: 인자로 노드를 사용

CCCallFuncND: 인자로 노드와 포인터형 데이터를 사용







실습:액션

다음과 같이 동작하는 프로그램을 작성하시오.

Menu 화면 Sequence: Move, Jump, Move (각 액션 사이에 0.5 지연 추가)

Spawn: Move & Rotate

RepeatForever: 좌우 왕복 이동

위의 내용을 가진 메뉴 화면을 화면에 표시

메뉴에서 지정된 액션을 수행

액션 84

트랜지션 사용하기


장면의 추가, 삭제, 교체












장면 트랜지션

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

씬 전환, 메뉴와 레이블

장면의 생성 및 소멸 순서








실습: 트랜지션

다음과 같은 장면과 장면 전환을 하는 프로그램을 작성하시오. Menu 화면

게임 화면

도움말

설정

첫 화면은 메뉴 화면

메뉴 화면 게임 화면, 도움말 화면, 설정 화면으로 이동

각 화면으로 전환될 때는 서로 다른 전환 효과를 사용

게임 화면, 도움말 화면, 설정 화면 각 화면을 설명하는 문자열을 화면에 표시

메뉴화면으로 이동

애니메이션 사용하기


애니메이션 기초



스프라이트배치노드





스프라이트배치노드를 이용한 애니메이션


스프라이트배치노드의 응용



애니메이션 종합


Zwoptex로 스프라이트배치노드 만들기

118

Zwoptex

http://zwopple.com/zwoptex/

Download flash version

스프라이트 시트





실습

다음과 같이 동작하는 프로그램을 작성하시오. 주어진 이미지로 스프라이트 시트를 작성

만들어진 스프라이트 시트를 사용하여 캐릭터 애니메이션 구현: 프레임 간격 0.5 초

스프라이트 시트 119

사운드 사용하기


심플오디오엔진의 기본 사용법





터치 사용하기


스탠다드 터치 델리게이트






타겟 지정 터치 델리게이트






멀티터치






실습

다음과 같이 동작하는 프로그램을 작성하시오. 다음 이미지로 캐릭터 애니메이션 구현: 프레임 간격 0.5 초

화면상의 위치를 터치하면

터치한 곳으로 캐릭터 이동

효과음 재생

스케줄 사용하기


스케줄 기초

Cocos2d-X의 스케줄러의 이점

정지(pause)/재시작(resume) 기능 사용

레이어가 스테이지에 들어가면 자동으로 타이머가 활성화, 그리고 스테이지를 떠나면 자동으로 비활성화






스케줄의 정지/재시작






Technology

동국대 앱창작터 2일차:Cocos2d-X 기본기능