[ndc2014] 직접 만들어서 즐겨보자 - cocos2d-x3.0으로 한 시간만에 횡스크롤...

66
직접 만들어서 즐겨보자! Cocos2d-x 3.0으로 한 시간 만에 횡스크롤 슈팅 게임 만들기 넥슨코리아 라이브개발본부 함동기

Upload: donggi-hahm

Post on 14-Apr-2017

8.074 views

Category:

Software


2 download

TRANSCRIPT

Page 1: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

직접 만들어서 즐겨보자!

Cocos2d-x 3.0으로 한 시간 만에횡스크롤 슈팅 게임 만들기

넥슨코리아 라이브개발본부

함동기

Page 2: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

강연자 소개

Page 3: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

자체엔진

Cocos2d-iPhone,Cocos2d-x

Unity

Page 4: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

발표를 시작하기 전에..

Page 5: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

직접 만들어서 즐겨보자! –Cocos2d-x 3.0으로 한 시간 만에 횡스크롤 슈팅 게임 만들기

구할 수 없다면 직접 만들자! –Cocos2d-x 3.0으로 30분 만에 Flappy Bird 만들기

Page 6: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 7: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 8: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 9: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

Cocos2d-x 소개

Page 10: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

Cross Platform Open Source Light weight & Fast running Simple Easy to Learn APIs

출처: http://cocos2d-x.org/product

Page 11: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• Highlights of v3.0

• Replaced Objective-C patterns with C++ (C++11) patterns and best practices

• Improved Labels

• Improved renderer (much faster than in v2.2!!)

• New Event Dispatcher

Page 12: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• Highlights of v3.0

• Physics integration

• New UI objects

• JavaScript remote debugger

• Remote Console support

• Use cocos console to create and run project

Page 13: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• Highlights of v3.0

• Refactor Image - release memory in time and uniform the api of supported file format

• Automatically generated Lua bindings, add LuaJavaBridge and LuaObjcBridge

• Templated containers• CCDictionary is replaced by cocos2d::Map<>• CCArray is replaced by cocos2d::Vector<>• CCBool, CCFLoat, CCDouble are replaced with

cocos2d::Value

Page 14: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

Zhe Wang is the founder of cocos2d-x(cocos2d-x를만드신분).

Page 15: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• 발표 방향

• 기존 Cocos2d-x 2.x버전의 프로젝트를 3.0으로 포팅

• 게임 제작 단계에 따라 소스 분석

• 자연스럽게 Cocos2d-x 2.x vs 3.0 차이점 소개

Page 16: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

기존 Cocos2d-x 2.x 프로젝트

Page 17: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

출처: github.com/lizhi5753186/MyFlappyBird

Page 18: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

Cocos2d-x 3.0 프로젝트 생성

Page 19: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 20: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 21: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 22: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 23: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 24: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

리소스 (이미지 및 데이터)

Page 25: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

flappy_packer.png(flappy_packer.plist)

Page 26: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

bg.png

ground.png

Page 27: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

flappy_Frame.plist

Page 28: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

리소스 로딩

Page 29: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

[Cocos2d-x 2.x 버전]

Page 30: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

배경 생성

Page 31: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 32: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 33: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

장애물 생성

Page 34: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 35: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

장애물을 미리 여러 개 만들어 두는 방식.

Page 36: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 37: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 38: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

배경 스크롤

Page 39: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 40: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 41: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

유저 캐릭터 생성

Page 42: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 43: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 44: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

캐릭터 애니메이션

Page 45: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 46: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 47: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

동영상

Page 48: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

캐릭터 비행 및 이동

Page 49: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 50: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 51: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

충돌 체크

Page 52: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 53: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 54: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

기록(점수) 시스템 구현

Page 55: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 56: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 57: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

터치 이벤트 처리

Page 58: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 59: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• Event distribution mechanism (이벤트 분산 메커니즘)

• EventDispatcher: 터치, 키보드, 중력센서 등의 모든 이벤트 처리

• 기존 TouchDispatcher, KeypadDispatcher, KeyboardDispatcher, AccelerometerDispatcher 모두 삭제됨.

• 콜백 함수로 lamda(람다) 사용 가능 (C++11 지원)

Page 60: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• 터치 이벤트를 위해 구현해야 하는 메서드 (2.x)

• virtual void registerWithTouchDispatcher (void);• virtual void ccTouchesBegan (cocos2d :: CCSet * pTouches,

cocos2d :: CCEvent * pEvent);• virtual void ccTouchesMoved (cocos2d :: CCSet * pTouches,

cocos2d :: CCEvent * pEvent);• virtual void ccTouchesEnded (cocos2d :: CCSet * pTouches,

cocos2d :: CCEvent * pEvent);• virtual void ccTouchesCancelled (cocos2d :: CCSet * pTouches,

cocos2d :: CCEvent * pEvent);

Page 61: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• 터치 이벤트를 위해 구현해야 하는 메서드 (3.0)

• bool onTouchBegan(Touch *touch, Event *event);• void onTouchMoved(Touch *touch, Event *event);• void onTouchEnded(Touch *touch, Event *event);

Page 62: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)
Page 63: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

동영상

Page 64: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

그 외 개발 팁

Page 65: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)

• 크로스 플랫폼 개발 시 주의사항

• super 키워드 대신 부모 클래스 이름 사용.

• 폴더 구분자는 “/”로 통일.

• standard C 라이브러리 및 STL 사용.

super 키워드는 MS VC++에서만사용가능.

특히 Win32 API와표준 C 라이브러리를잘구분해야함.

Page 66: [NDC2014] 직접 만들어서 즐겨보자 - Cocos2d-x3.0으로 한 시간만에 횡스크롤 슈팅게임 만들기 (함동기)