동국대 앱창작터 1일차:cocos2d-x 소개, 환경설정, 주요개념

1일차:소개, 환경설정, 주요개념 동국대학교 앱창작터 모바일게임과정II:Cocos2d-X

목차

강좌개요

Cocos2d-X 소개

Cocos2d-X 설치

Cocos2d-X의 기본 구조

좌표계와 앵커포인트

프로젝트 기본형 만들기

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

강좌 개요


강좌 개요

모바일 게임 프로그래밍 과정 II

Cocos2d-X

기간: 2013년 7월 8일 – 12일

교재: 시작하세요! Cocos2d-x 프로그래밍

이재환 지음, 위키북스, 2013년 02월 28일


강좌 일정


일차 주요 내용 세부 내용

1일차 소개, 환경설정, 주요개념

0.개요 1.Cocos2d-x 설치 2.Cocos2d-x의 기본 구조 3.좌표계와 앵커포인트 4.프로젝트 기본형 만들기

2일차 기본 기능 5.레이블 사용하기 6.스프라이트 사용하기 7.메뉴 사용하기 8.액션 사용하기 9.트랜지션 사용하기 10.애니메이션 사용하기 11.사운드 사용하기 12.터치 사용하기 13.스케줄 사용하기

강좌 일정


일차 주요 내용 세부 내용

3일차 CocosBuilder CocosBuilder 소개/설치 CocosBuilder 사용방법 Cocos2d-X에서 CocosBuilder 결과물 사용하는 방법

4일차 고급 기능 14.패럴렉스노드 사용하기 15.타일맵 사용하기 16.파티클 사용하기

5일차 확장 기능 17.데이터 저장하기 18.사용자 입력 사용하기 19.HTTP 통신 사용하기 20.XML 사용하기 21.JSON 사용하기 22.스크롤뷰 사용하기 23.중력 가속도계 사용하기

COCOS2D-X 소개


Cocos2d-x 엔진

Cocos2d-x

2D 게임엔진 라이브러리

C++ / LUA / Javascript 지원

OpenGL-ES 기반의 게임 엔진

다양한 플랫폼 지원

www.cocos2d-x.org


Cocos2d Family


cocos2d (python)

cocos2d-iphone

cocos2d-x

cocos2d-javascript

cocos2d-android

cocos2d-android-1

cocos2d-html5 cocos2d-xna

(from Cocos2d-X.org )

주요 프로젝트

Cocos2d-X

Cocos2d-HTML5

Cocos2d-iPhone

CocosBuilder


Global Contributors


Cocos2d Javascript API

Cocos2d-x API exported, compatible with Cocos2d-html5

OpenGL ES 2.0 exported, compatible with WebGL

Chipmunk API

libWebsocket API

XMLHttpRequest API


Plugin-X:Integrate 3rd SDK easily


Cocos2d 3.0

Entity-Component architecture

A whole new GUI framework

New rendering pipeline

C++ 11 support

BMFont in runtime from TTF

multi-threading support

WYSIWYG editors


Tools

CocosBuilder Version 3.0 alpha5 www.cocosbuilder.com Mac only Cocos2d’s Javascript bindings, which means that your code,

animations, and interfaces

CocoStudio Version 0.1.3 studio.cocos2d-x.org Windows Only UI Editor, Animation Editor, Data Cruncher, Scene editor,

CocoStudio Framework, etc.


COCOS2D-X 설치


Cocos2d-x의 장점

API가 배우고 사용하기 쉽고 간단함

적은 용량으로 게임 개발에 필요한 거의 모든 기능 제공

오픈소스 프로젝트이므로 무료로 이용

OpenGL ES 1.1/2.0에 최적화돼 있어 빠름

멀티 플랫폼을 지원

iOS, Android, BlackBerry, Bada, Marmalade, Windows, Linux 등


Cocos2d에서 제공하는 기능

장면(Scene) 관리 기능 장면전환(Scene Transition) 기능 메뉴 및 버튼 시스템 지원 스프라이트(Sprite) 및 스프라이트 배치노드(SpriteBatchNode) 지원

다양한 액션(Action) 지원 애니메이션(Animation) 지원 정지/플레이 및 좀 더 정교한 사용법이 간단한 타이머 기능 지원 텍스트 렌더링(Text Rendering) 지원 사운드(Sound) 지원 파티클 시스템(Particle System) 지원 타일맵(TileMap) 지원 물리 엔진(Physics Engine) 지원: Box2D & Chipmunk


Cocos2d-x의 개발환경

Windows Microsoft의 Visual Studio 또는 Visual Studio Express

Mac Apple의 Xcode

developer.apple.com

Eclipse Mac OS X, Windows, Linux 지원

CDT 사용

www.eclipse.org


Cocos2d-x 다운로드

다운로드

http://www.cocos2d-x.org

Version: cocos2d-x-2.1.4


윈도우에서 Cocos2d-X 설치

Cocos2d-X 파일 다운로드

다운로드 받은 압축파일 풀기

Visual Studio Template 설치

install-template-msvc.bat 실행

Visual Studio에서 솔루션 파일 열기

cocos2d-win32.vc2008.sln



솔루션 전체 빌드 실행


윈도우에서 cocos2d-x 프로젝트 생성하기

Visual Studio에서 “새 프로젝트” 선택

“새 프로젝트 추가” 대화상자에서 Cocos2d-X 선택

프로젝트 이름 입력

프로젝트 마법사 대화상자에서 옵션 선택 물리엔진 사용여부: Box2D, Chipmunk

사운드 엔진

Lua 사용여부

프로젝트 종속성 설정 libcocos2d, libCocosDenshion(사운드 엔진),

libBox2D/libchipmunk (물리엔진) 등

프로젝트 실행


맥에서 cocos2d-x 설치

Cocos2d-X 파일 다운로드

다운로드 받은 압축파일 풀기

터미널에서 install-templates-xcode.sh 실행

Xcode 실행 후, 새 프로젝트 선택

Xcode 프로젝트 대화상자의 왼편에서 cocos2d-x 선택 대화상자의 오른편에서 cocos2dx, cocos2dx_box2d,

cocos2dx_chipmunk, cocos2dx_js, cocos2dx_lua 중 선택

프로젝트 이름 입력

프로젝트 실행


윈도우용 프로젝트를 iOS용 프로젝트로 포팅하기

윈도우에서 생성한 프로젝트 폴더로 이동

Classes와 Resources 폴더를 Xcode 프로젝트 디렉토리로 이동


iOS 프로젝트를 안드로이드 프로젝트로 포팅하기

Xcode에서 생성한 프로젝트 폴더로 이동

Classes와 Resources 폴더를 이클립스 프로젝트 디렉토리로 이동


Android NDK 설치

developer.android.com에서 NDK 다운로드

다운로드 받은 NDK를 압축해제

환경변수 설정 (.bashrc)

create-android-project.sh 파일 수정 NDK_ROOT_LOCAL과 ANDROID_SDK_ROOT_LOCAL 내용 수정


export ANDROID_SDK_ROOT=<안드로이드 SDK 경로> export ANDROID_NDK_ROOT=<안드로이드 NDK 경로> export COCOS2DX_ROOT=<cocos2d-x 경로> export NDK_ROOT=<NDK 경로> export PATH=$PATH:$NDK_ROOT

Android 프로젝트 생성하기

create-android-project.sh를 실행하여 안드로이드 프로젝트 생성

Cocos2d-X 설치된 곳에서 안드로이드 관련 파일을 프로젝트 폴더로 복사 $COCOS2D_ROOT/cocos2dx/platform/android/java/src/or

g/cocos2dx에서 lib 디렉토리를 proj.android/src/org/cocos2dx 로 복사

안드로이드 프로젝트 폴더에 있는 build_native.sh 실행

이클립스에서 안드로이드 생성된 프로젝트 import


iOS 프로젝트와 안드로이드 프로젝트 통합

iOS 프로젝트와 안드로이드 프로젝트 생성 안드로이드 프로젝트 디렉토리에서 proj.android 디렉토리를 iOS 프로젝트 디렉토리로 복사

$COCOS2DX_ROOT/cocos2dx에서 android.mk 파일을 iOS 프로젝트 디렉토리의 libs/cocos2dx로 복사

$COCOS2DX_ROOT/CocosDenshion에서 android 디렉토리를 libs/CocosDenshion으로 복사

$COCOS2DX_ROOT/cocos2dx에서 platform 디렉토리를 libs/cocos2dx로 복사 (iOS 프로젝트에 이미 있는 내용은 삭제 후 복사)

$COCOS2DX_ROOT/extensions에 있는 android.mk 파일을 libs/extensions로 복사

$COCOS2DX_ROOT/extensions/GUI/CCEditBox에 있는 CCEditBoxImplAndroid.cpp, CCEditBoxImplAndroid.h 파일을 libs/extensions/GUI/CCEditBox에 복사

$COCOS2DX_ROOT/cocos2dx/platform/android/java/src/org/cocos2dx에서 lib 디렉토리를 proj.android/src/org/cocos2dx로 복사

proj.android./build_native.sh 파일 편집 COCOS2DX_ROOT=“$DIR/../libs＂로 수정


통합 프로젝트 생성기 사용

Cocos2d-x 2.1에서 추가

Cocos2d-x가 설치된 디렉토리의 $COCOS2DX_ROOT/tools/project-creator/create_project.py 실행

여러 플랫폼을 위한 프로젝트 파일을 생성


./create-project.py –project MyGame –package com.MyCompany.AwesomeGame -language cpp

COCOS2D-X의 기본 구조


CCNode

Cocos2d-X의 최상위 클래스

다양한 프로퍼티 제공 위치, 색상, 투명도, 크기, 회전, 가시성 여부, 카메라, 그리도

(grid) 등

자식 노드를 가질 수 있음 다른 노드에 대해서 컨테이너처럼 사용하는 것이 가능

객체들의 계층 구조를 만들 때 사용

자체 스케줄러를 가지고 있음 게임 루프를 만들 때 사용

1/60 프레임

중지(pause)와 재시작(resume) 기능 제공


CCDirector

싱글톤 클래스

하나의 애플리케이션에 하나의 인스턴스만 존재

여러 장면들을 관리하는 클래스


CCScene과 CCLayer

CCScene과 CCLayer

스프라이트, 레이블, 메뉴 등과 같은 클래스 객체를 자식으로 가질 수 있음

차이점 CCScene은 사용자 터치 이벤트를 받아서 처리할 수 없고

Accelerometer 입력 수신과 처리 할 수 없음

CCLayer는 사용자 터치 이벤트를 받아서 처리할 수 있고 Accelerometer 입력 수신과 처리 할 수 있음


CCScene

예

하나의 게임은 여러 장면(Scene)으로 구성


CCLayer: 예

예)


CCLayer: 예

여러 레이어로 구성

배경

캐릭터

HUD

참고

CCNode의 계층구조


CCLayer: 예

메뉴 또는 HUD(Head Up Display) 레이어

캐릭터 레이어

배경 레이어


CCSprite

화면에 출력되어 보이는 클래스

스프라이트

화면을 구성하는 정적 이미지나 애니메이션이 되는 일련의 이미지를 가리키는 말

게임에서 사용되는 이미지

이미지 파일 로딩과 화면 출력에 관련한 다양한 메소드를 제공


CCAction

CCNode 클래스를 상속한 클래스의 애니메이션 처리를 위한 클래스 기본 액션: 이동, 회전, 점프, 크기 변환 등

복합 액션: 기본 액션들을 결합하거나 반복하는 액션

By 액션과 To 액션 By 액션: 현재 값에서 지정한 값만큼 변하는 액션

To 액션: 지정한 값으로 변하는 액션

Reverse 액션 기본적으로 반대로 동작하는 새 액션을 수행


좌표계와 앵커포인트


좌표계

원점

화면의 좌측 하단

OpenGL에서 사용하는 좌표계


좌표계


앵커포인트

앵커포인트(AnchorPoint)

메뉴, 레이블, 스프라이트 등이 레이어나 장면에 포함될때 기준이 되는 부분

범위: (0.0, 0.0) – (1.0, 1.0)


앵커포인트


프로젝트 기본형 만들기


맥에서 프로젝트 기본형 만들기


통합 프로젝트 생성기 사용

터미널 실행

$COCOS2DX_ROOT/tools/project-creator 디렉토리로 이동

create-project.py 실행

$COCOS2DX_ROOT/projects 디렉토리 아래에 프로젝트 생성 iOS: $COCOS2DX_ROOT/projects/<project>/proj.ios 디렉토리에 있는 프로젝트를 Xcode에서 열기

Android: $COCOS2DX_ROOT/projects/<project>/proj.android 디렉토리에 있는 build_native.sh 를 실행


이클립스에서 프로젝트 열기


생성한 Cocos2d-X 프로젝트 Import


Cocos2d-X 안드로이드 라이브러리 프로젝트 임포트

$COCOS2DX_ROOT/cocos2dx/platform/android/java


화면 회전: Ctrl + F12


실습1

Cocos2d-X 다운로드

Cocos2d-X 설치 Xcode 템플릿

./install-templates-xcode.sh -u

Cocos2d-X를 위한 안드로이드 환경 설정 SDK 설치:

NDK 설치

create-project.py를 사용하여 iOS/Android 프로젝트 생성 생성된 프로젝트를 Xcode와 이클립스에서 실행


실습2

교재 P77 – P80

화면 바탕색 변경


동국대 앱창작터 1일차:cocos2d-x 소개, 환경설정, 주요개념

Technology