동국대 앱창작터 5일차:cocos2d-x 확장기능

81
5일차:확장기능 모바일게임과정II:Cocos2d-X

Upload: changhwan-yi

Post on 23-Jan-2018

2.228 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

5일차:확장기능 모바일게임과정II:Cocos2d-X

Page 2: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

목차

데이터 저장하기

사용자 입력 사용하기

HTTP 통신 사용하기

XML 사용하기

JSON 사용하기

스크롤뷰 사용하기

중력 가속도계 사용하기

CocosBuilder 사용하기

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

Page 3: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

데이터 저장하기

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

Page 4: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

데이터 저장하기

CCUserDefault Class

iOS: NSUserDefault

Android: SharedPreferences

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

Page 5: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 6: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 7: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 8: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 9: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 10: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

사용자 입력 사용하기

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

Page 11: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

사용자 입력 사용하기

CCEditBox

setText (const char *pText)

const char * getText (void)

Cocos2d-X의 Extension

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

Page 12: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 13: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 14: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 15: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 16: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 17: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 18: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 19: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

HTTP 통신 사용하기

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

Page 20: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

HTTP 통신 사용하기

CCHttpRequest Class

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

Page 21: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 22: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 23: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 24: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 25: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 26: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 27: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 28: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 29: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 30: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 31: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

XML 사용하기

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

Page 32: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

XML 사용하기

Cocos2d-X에서 제공하는 기능은 없음

Pugixml을 사용

http://pugixml.org

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

Page 33: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 34: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 35: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 36: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 37: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

JSON 사용하기

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

Page 38: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

JSON 사용하기

Cocos2d-X에서 제공하는 기능은 없음

rapidjson을 사용

http://code.google.com/p/rapidjson

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

Page 39: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 40: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 41: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 42: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 43: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 44: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

스크롤뷰 사용하기

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

Page 45: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

스크롤뷰 사용하기

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

Page 46: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 47: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 48: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 49: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 50: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 51: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

중력 가속도계 사용하기

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

Page 52: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

중력 가속도계 사용하기

CCAcceleration 클래스

중력 센서, 가속도 센서, 자이로스코프를 포함

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

Page 53: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 54: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 55: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 56: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

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

Page 57: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

COCOSBUILDER 사용하기

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

Page 58: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

UI, 애니메이션 등 게임 화면 구성을 간편하게 구현할 수 있는 오픈소스 툴(MIT 라이센스)

Cocos2d 엔진에서 사용

Cocos2d-x

Cocos2d-iPhone

Cocos2d-HTML5

JavaScript Editor + cocosPlayer

Mac OS X에서만 사용가능

CocosBuilder 소개

Page 59: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

Cocosbuilder 다운로드

http://cocosbuilder.com/?page_id=11

Stable version : 2.1

Latest version : 3.0 alpha5

Github

https://github.com/cocos2d/CocosBuilder

다운로드 및 사용방법

Page 60: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

새 프로젝트 생성하기

File->New->Project 선택 경로와 프로젝트명을 작성후 ‘save’

다운로드 및 사용방법

Page 61: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

화면 구성

다운로드 및 사용방법

리소스 뷰

프로젝트 리소스 리스트

편집 화면

타임라인

속성창

상단 메뉴

Page 62: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

프로젝트 설정

File->Project Settings

다운로드 및 사용방법

리소스 경로 추가/삭제

JavaScript 프로젝트 설정

Page 63: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

퍼블리싱 설정

File->Publish Settings

다운로드 및 사용방법

iOS 리소스 설정

안드로이드 리소스 설정

HTML5 리소스 설정

기타 설정

Page 64: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

새 화면 추가

File->New->Interface File 선택

다운로드 및 사용방법

오브젝트 타입 설정, 풀스크린 여부

지원 해상도 리스트

Page 65: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

미리 보기(브라우저)

File->Run in Browser->(해당 브라우저) 선택

다운로드 및 사용방법

Page 66: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

노드 추가하기

상단 메뉴에서 노드 선택->좌측하단(0, 0) 지점에 노드 생성

CCB파일 작업하기

Page 67: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

속성값(프로퍼티) 수정

편집 화면에서 해당 노드 선택하면 오른쪽에 선택된 노드의 각종 프로퍼티가 나타남

CCB파일 작업하기

Page 68: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

노드의 순서(Z-Order) 변경

타임라인에서 드래그하여 변경

타임라인에서 상단으로 갈수록 뒤에 위치(Z-Order값 감소)

CCB파일 작업하기

Page 69: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

애니메이션: 키프레임 추가

타임라인에서 아래 화살표 클릭->원하는 프로퍼티의 시간 영역에 ‘option키’ + 클릭

CCB파일 작업하기

Page 70: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

애니메이션: 키프레임 편집

타임라인에서 키프레임 더블클릭

CCB파일 작업하기

Page 71: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

애니메이션: 키프레임 삭제

타임라인에서 키프레임 선택->‘delete키’

CCB파일 작업하기

Page 72: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

애니메이션: 연속적인 이미지 사용

리소스 리스트에서 프레임 선택 후 Animation->’Create Frames from Selected Resources’

CCB파일 작업하기

Page 73: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

애니메이션: 이징 액션(Easing Action) 적용

연결된 두 키프레임 사이에서 오른 클릭

CCB파일 작업하기

Page 74: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

애니메이션: 다중 타임라인

타임라인 제목 클릭->Edit Timelines->’+’ 클릭

CCB파일 작업하기

Page 75: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

애니메이션: 타임라인 연계(chain)

타임라인 하단 ‘No chained timeline’ 클릭->연계할 타임라인 선택

CCB파일 작업하기

Page 76: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

프로젝트 퍼블리싱

File->Publish : *.ccbi및 리소스 출력

Cocos2d-x에서 사용하기

Page 77: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

Cocos2d-x 프로젝트에 *.ccbi 및 리소스 포함

Cocos2d-x에서 사용하기

Page 78: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

Cocos2d-x 프로젝트에서 *.ccbi 불러오기

Cocos2d-x에서 사용하기

AppDelegate.cpp

헤더 추가, 네임스페이스 명시

수정

Page 79: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

실행화면

Cocos2d-x에서 사용하기

Page 80: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

CCBAnimationManager

특정 타임라인 재생

타임라인 재생 후 콜백

CCBAnimationManagerDelegate

애니메이션 제어

Page 81: 동국대 앱창작터 5일차:Cocos2d-X 확장기능

CocosBuilder User Guide

Help->CocosBuilder User Guide

Cocos2d-x 사용자 모임(저자 카페)

http://cafe.naver.com/cocos2dxusers

코코스 빌더 강좌(정회원 이상 읽기 가능)

참고자료