Cocos2D-X 를 이용하여 게임을 개발하기 위한 기초적인 프로젝트 생성방법에 대하여 설명드리겠습니다.


설치는 기본적으로 맥 베이스로 설명드리겠습니다.


 일단 Cocos2D-X 2.2 와 2.1.5 의 차이로 XCode 에 템플릿을 등록하는 install-templates-xcode.sh 이 없어졌습니다. 그래서 프로젝트 생성방법이 조금 다릅니다.


1. Cocos2D-X 다운받기



 일단 Cocos2D-X 를 다운받도록합니다. Cocos2D는 오픈소스로 무료로 다운받을수 있습니다.


다운받으러 가기 : 링크 



2. 프로젝트 생성하기



 다음은 프로젝트 생성하기 입니다. 다운받은 파일의 압축을 푸시고 터미널에서 ( 윈도우즈는 Command ) $COCOS2D_ROOT/tools/project-creator/ 로 이동하여 create_project.py 를 실행하여 보도록합니다. ( 맥에서는 기본적으로 Python 이 설치되어 있기 때문에 상관없지만 Windows 에서는 Python을 설치하셔야 합니다. )



실행을 해보셨다면 위와 같은 설명을 보실수 있습니다. 이는 프로잭트 생성방법에 관한것인대요. 


설명드리자면


./create_project.py -project 프로젝트_이름 -package 프로젝트_패키지( Identifier ) -language 프로그래밍 언어


로 보시면 될것입니다. 언어는 Cpp( C++ ) , Lua , javascript 를 지원합니다.


 만약 제가 fortune 라는 프로젝트를 생성한다고 한다면


./create_project.py -project fortune -package com.appgd.fortune -language cpp


라고 생성할 것입니다.


3. 플렛폼별 실행하여 보기 ( XCode, MAC )




프로젝트 생성시 아래와 같이 프로젝트 파일이 생성된것을 볼수 있습니다.


프로젝트 생성시 위와 같이 플렛폼별로 생성된 파일들을 볼수 있다.


IOS 나 MAC 의 경우 아래와 같이 xcodeproj 파일을 실행하여 바로 시뮬레이터를 실행하여 보시면됩니다.



 시뮬레이터 실행시 아래와 같이 cocos2dx 프로젝트가 디폴트로 설정되어서 실행이 되지 않될수도 있습니다. 아래와 같이 프로젝트를 어플리케이션으로 변경후 타겟 디바이스를 지정하여 주시기 바랍니다. ( IOS,  MAC 공통 )



 야래와 같이 컴파일링을 시작합니다. 조금 기다리셔야 합니다.



IOS 기본 프로젝트가 실행된 모습



MAC 기본 프로젝트가 실행된 모습




3-1. 플렛폼별 실행하여 보기 ( Android )



Android 의 경우가 조금 복잡한대요.


일단 Android 개발환경이 모두 설치된 상황에서 ( 참고 : http://kr.tutorialboat.com/35 ) NDK 를 추가적으로 다운받습니다.

( NDK를 사용하는 이유는 위에서 제가 cpp로 코드를 짜겠다고 설정하였기 때문입니다.  ) - ps . Windows의 NDK 설치 방법은 다릅니다. C++ 빌더를 추가적으로 설정해 주셔야 합니다.


NDK 링크 : http://developer.android.com/tools/sdk/ndk/index.html


이제 다운받은 NDK 의 압축을 풀어 주시고 eclipse 를 켜주도록합니다.


Eclipse -> 환경설정으로 이동하여


아래와 같이 이전에 받았던 NDK를 NDK_ROOT 로 지정하여 value 에는 폴더의 경로를 지정하시고 확인을 하여 주시기 바랍니다.



이제 프로젝트를 불러올 차례 인대요.


생성한 프로젝트를 바로 불러왔으면 좋겠지만 먼저 cocos2dx 의 java lib 를 import 시켜주셔야 합니다.


아래와 같이 File -> Import 로 이동하여



Existing Android Code Into Workspace 를 선택하여 줍니다.



좀 길긴하지만 cocos2dx > platform > android > java 를 선택하여 불러 오도록합니다.



Finish 를 눌러서 완료 합니다.



이제 위에서 생성한 프로젝트를 불러올 차례 입니다.


File > New > Project ... 을 선택



아래와 같이 Android Project from Existing Code 를 선택합니다.



그리고 아래와 같이 Cocos2d 폴더 안의 projects 폴더에서 생성한 프로젝트안의 proj.android 를 지정하여 불러 오도록합니다.



이제 모두 불러 오셨다면 libcocos2dx 라는 프로젝트와 함께 설정했던 프로젝트가 같이 있게 될것입니다.



이제 불러온 프로젝트를 클릭하시고 VM 혹은 장비로 실행하여 보시기 바랍니다.


아래는 제 장비인 Optimus LET 에서 실행한 모습입니다.



즐거운 개발 되시기 바랍니다. ^^



출처 : http://kr.tutorialboat.com/42


CCSprite 복사하기.

setDisplayFrame()을 이용하여 동일한 내용을 갖도록 복사.


ex)

CCSprite *sprite1 = CCSprite::create(“sprite.png”);

CCSprite *sprite2 = CCSprite::create();

sprite2->setDisplayFrame(sprite1->displayFrame()):




이클립스에서 Cocos2dxActivity cannot be resolved to a type라는 오류메세지가 떴을때.



혹시 proj.android/src 폴더에 들어가 보시면 org/cocos2dx 폴더가 있을겁니다 이 내부가 비어 있는건 아닌지 확인해 보세요. 원래 create-android-project.sh를 실행했을때 이부분이 자동으로 채워져야 하는데 왠일인지 생성이 되지 않는 경우가 있습니다. 이런경우엔 수동으로 복사해 주면 되는데요. cocos2d-2.0-x-2.0.4/cocos2dx/platform/android/java/src/에 들어가보시면 같은 구조의 디렉토리가 존재합니다. 이안에 있는 org 폴더를 통채로 복사해서 proj.android/src/ 에 그대로 복사해 붙여 넣은후 eclipse 에서 f5버튼으로 reflash 한후에 다시 빌드해 보시기 바랍니다. ^^




출처 : http://blog.daum.net/synsy/7664321




개발환경 할 때마다 찾아보게 되어 정리해둡니다. (update 2013.08.12)



1. 이클립스 다운로드



2. 안드로이드 sdk 다운로드



Get the SDK 로 이동



이클립스IDE는 받았으므로, SDK만.



3. 안드로이드 sdk 경로를 이동

[터미널] (다운로드 폴더에 받은 경우)
$ : cd downloads 
$ : mv android-sdk-macosx /Users/coz/library


[파인더에서 이동하기]

android-sdk-macosx 폴더 복사 후

상단 바의 이동을 누르고, 키보드의 [옵션]버튼을 누르면 [라이브러리] 항목이 생김.
클릭 및 폴더 복사




4. 경로 설정


[터미널]
$ : cd
$ : vi .bash_profile
$ : i (입력모드)

vi 편집기로 bash_profile이 열립니다. i를 누르면 편집모드가 됩니다.

아래의 경로를 입력 후

export ANDROID_SDK_ROOT="/Users/유저네임/library/android-sdk-macosx"
export PATH="$PATH:$ANDROID_SDK_ROOT/tools"


esc 누르고
:wq ( 저장 후 종료 타이핑 후 엔터)

$ : source ~/.bash_profile (적용)




5. 이클립스 실행 (자바 런타임 없으면 설치 팝업을 통해 설치)



Help -> install new software

Work with 에 다음 경로 입력 후 엔터

http://dl-ssl.google.com/android/eclipse/

기다리면 항목에 Developer Tools 생기는데 체크 후 Next





Android SDK Manager 실행 후 SDK설치 내역을 확인.
필요한 버전 다운로드


설치 후 Help->check for updates로 업데이트



6. 안드로이드 타겟 확인

정상적으로 설치됐는지 테스트
[터미널]
$ : android list target

성공



참고)

이클립스에서 File->New->Android Project 가 바로 보이도록 설정하기

이클립스의 Window-> Customize Perspective-> Shortcuts-> android체크







프로젝트 생성 후 실행















AVD 생성







테스트 프로젝트 실행









완성공





현재 최신 버전은 3.0 @ 이지만, 
[저는 2.1.4 버전 프로젝트 진행중이므로 본 포스팅은 2.1.4로 진행하겠습니다.]



압축 해제 후 개발 폴더로 이동

[저는 /Users/cozdebrainpower/Desktop/ 으로 복사하였습니다.]









현재 맥 최신 버전 : android-ndk-r9-darwin-x86_64.tar.bz2 클릭

2.1.4에서 android-ndk-r9 으로 컴파일하면 에러가 많이 뜨네요.
android-ndk-r8e로 진행하겠습니다.
update: 13.08.18 ndk-r9으로 진행하겠습니다.

압축 해제 후 Library폴더로 이동
(터미널 사용 시 :  $mv android-ndk-r8e /Users/cozdebrainpower/library )

현재 설치 구조
Desktop에는 eclipsecocos2d-x-2.1.4 폴더가 존재 
Library에는 android-sdk-macosx, android-ndk-r9 가 존재


3. 환경변수 입력


[터미널]
$ vi .bash_profile 편집기를 열어서

i 누르고, 다음 경로를 입력 후 저장

1번 포스팅 단계에서 이미 다음과 같이 저장해둔 상태일 것이다.
export ANDROID_SDK_ROOT="/Users/coz/library/android-sdk-macosx"
export PATH="$PATH:$ANDROID_SDK_ROOT/tools"

추가.
export ANDROID_NDK_ROOT="/Users/cozdebrainpower/library/android-ndk-r9"
export COCOS2DX_ROOT="/Users/cozdebrainpower/Desktop/cocos2d-x-2.1.4"
export NDK_ROOT="/Users/cozdebrainpower/library/android-ndk-r9"
export PATH=$PATH:$ANDROID_NDK_ROOT
export PATH=/opt/local/bin:/opt/local/sbin:$PATH

esc누르고 :wq입력 (저장 후 종료)

$ source ~/.bash_profile






4. xcode에 cocos2d-x 템플릿 설치


cocos2d-x가 설치된 폴더로 이동 (Desktop/cocos2d-x-2.1.4/)

template 설치
$ sudo ./install-templates-xcode.sh

WARNING: Improper use of the sudo command could lead to data loss
or the deletion of important system files. Please double-check your
typing when using sudo. Type "man sudo" for more information.

To proceed, enter your password, or type Ctrl-C to abort.

Password: 맥북 비밀번호 입력
cocos2d-x template installer





xcode 에서 템플릿 확인


완성공


5. 멀티플랫폼 프로젝트 생성

기존의 프로젝트를 만들고, 폴더를 병합하던 노가다 방식에서 벗어나, 파이썬을 활용한 멀티플랫폼 프로젝트 생성입니다.

[터미널]
cocos2d-x-2.1.4/tools/project-creator/ 폴더로 이동.
./create_project.py 을 입력해봅니다.



3가지를 입력해야 하는데, 
-project  생성할 프로젝트명
-package  생성할 프로젝트의 패키지명
-language 사용할 개발 언어

개발언어는 뒤에 cpp | lua | javascript 중 선택하게 되어있습니다.


저는 c++로 개발할 것이기 때문에 다음과 같이 입력했습니다.

./create_project.py  -project MyGame -package com.company.mygame -language cpp




cocos2d-x-2.1.4 폴더 안에 projects 폴더가 생성되고, 입력한 프로젝트가 다양한 플랫폼으로 생성됩니다.



6. iOS 프로젝트 실행




완성공


7. 안드로이드 프로젝트 실행

[터미널]
cocos2d-x-2.1.4/projects/MyGame/proj.android/ 로 이동

./build_native.sh  실행
하면 에러가 뜰 텐데요 (현재는.)
라이브러리를 수정해서 저 에러를 수정해도 다른 에러는 계속 발생합니다.

다음을 수정합니다.
proj.android/jni/Application.mk 파일을 오픈합니다.

그리고 다음과 같이 한 줄 추가해주세요.
APP_CFLAGS += -Wno-error=format-security



다시 ./build_native.sh  실행


완성공.



이클립스 실행



프로젝트 불러오기










cocos2d-x 라이브러리 임포트



2.0.3부터는 이클립스에서 프로젝트 만들어도 바로 실행되지 않습니다.
cocos2d-x lib가 외부 프로젝트로 되어있어서 임포트를 해야하는데요.
이클립스 File->Import에서 General-Existing Projects into Workspace로 다음의 프로젝트 경로를 임포트합니다.
cocos2d-x-2.1.4/cocos2dx/platform/android/java 폴더를 임포트 합니다.
임포트 후 이클립스 workspace에는 libcocos2dx 프로젝트가 생성되고, 정상적으로 실행이 가능합니다.




--------------------- 이전 버전 안내 포스트--------------------- 

4. android 프로젝트 생성

Xcode에서는 cocos2dx 프로젝트를 만들수 있는 템플릿을 설치했고, 
안드로이드의 경우 cocos2dx가 설치된 폴더에서 직접 프로젝트를 생성해줘야 합니다.
(우리의 경우에는 desktop/cocos2d-x 폴더안에 있겠죠)

프로젝트 생성
Kwon-ui-MacBook-Pro:cocos2d-x coz$ ./create-android-project.sh  엔터  (create-android-project.bat 는 윈도우용 배치파일)

정의된 sdk, ndk 경로가 표시됩니다.
use global definition of NDK_ROOT: /Users/coz/library/android-ndk-r8d
use global definition of ANDROID_SDK_ROOT: /Users/coz/library/android-sdk-macosx
Input package path. For example: org.cocos2dx.example <= 만들 안드로이드 프로젝트 패키지명을 요구
com.ohjung.cocos2dxtest


안드로이드 빌드타겟을 설정합니다.
본인이 세팅한 안드로이드 개발환경에 따라서 다릅니다.
원하는 android 타겟의 아이디값을 입력

Now cocos2d-x supports Android 2.2 or upper version
Available Android targets:
----------
id: 1 or "android-7"
     Name: Android 2.1
     Type: Platform
     API level: 7
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WVGA800 (default), WVGA854
     ABIs : armeabi
----------
id: 2 or "Google Inc.:Google APIs:7"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 1
     Description: Android + Google APIs
     Based on Android 2.1 (API level 7)
     Libraries:
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WVGA854, WQVGA400, HVGA, WQVGA432, WVGA800 (default), QVGA
     ABIs : armeabi
----------
id: 3 or "android-8"
     Name: Android 2.2
     Type: Platform
     API level: 8
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WVGA800 (default), WVGA854
     ABIs : armeabi
----------
id: 4 or "Google Inc.:Google APIs:8"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 2
     Description: Android + Google APIs
     Based on Android 2.2 (API level 8)
     Libraries:
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WVGA854, WQVGA400, HVGA, WQVGA432, WVGA800 (default), QVGA
     ABIs : armeabi
----------
id: 5 or "android-10"
     Name: Android 2.3.3
     Type: Platform
     API level: 10
     Revision: 2
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WVGA800 (default), WVGA854
     ABIs : armeabi
----------
id: 6 or "Google Inc.:Google APIs:10"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 2
     Description: Android + Google APIs
     Based on Android 2.3.3 (API level 10)
     Libraries:
      * com.android.future.usb.accessory (usb.jar)
          API for USB Accessories
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WVGA854, WQVGA400, HVGA, WQVGA432, WVGA800 (default), QVGA
     ABIs : armeabi
----------
id: 7 or "Intel Corporation:Intel Atom x86 System Image:10"
     Name: Intel Atom x86 System Image
     Type: Add-On
     Vendor: Intel Corporation
     Revision: 1
     Description: Intel Atom x86 System Image
     Based on Android 2.3.3 (API level 10)
     Skins: WVGA854, WQVGA400, HVGA, WQVGA432, WVGA800 (default), QVGA
     ABIs : x86
----------
id: 8 or "android-11"
     Name: Android 3.0
     Type: Platform
     API level: 11
     Revision: 2
     Skins: WXGA (default)
     ABIs : armeabi
----------
id: 9 or "Google Inc.:Google APIs:11"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 1
     Description: Android + Google APIs
     Based on Android 3.0 (API level 11)
     Libraries:
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WXGA (default)
     ABIs : armeabi
----------
id: 10 or "android-12"
     Name: Android 3.1
     Type: Platform
     API level: 12
     Revision: 3
     Skins: WXGA (default)
     ABIs : armeabi
----------
id: 11 or "Google Inc.:Google APIs:12"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 1
     Description: Android + Google APIs
     Based on Android 3.1 (API level 12)
     Libraries:
      * com.android.future.usb.accessory (usb.jar)
          API for USB Accessories
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WXGA (default)
     ABIs : armeabi
----------
id: 12 or "android-13"
     Name: Android 3.2
     Type: Platform
     API level: 13
     Revision: 1
     Skins: WXGA (default)
     ABIs : armeabi
----------
id: 13 or "Google Inc.:Google APIs:13"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 1
     Description: Android + Google APIs
     Based on Android 3.2 (API level 13)
     Libraries:
      * com.android.future.usb.accessory (usb.jar)
          API for USB Accessories
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WXGA (default)
     ABIs : armeabi
----------
id: 14 or "Google Inc.:Google TV Addon:13"
     Name: Google TV Addon
     Type: Add-On
     Vendor: Google Inc.
     Revision: 1
     Based on Android 3.2 (API level 13)
     Skins: WXGA, 1080p-overscan, 1080p, 720p-overscan, 720p (default)
     ABIs : x86
----------
id: 15 or "android-14"
     Name: Android 4.0
     Type: Platform
     API level: 14
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800
     ABIs : armeabi-v7a
----------
id: 16 or "Google Inc.:Google APIs:14"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 2
     Description: Android + Google APIs
     Based on Android 4.0 (API level 14)
     Libraries:
      * com.android.future.usb.accessory (usb.jar)
          API for USB Accessories
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WVGA854, WQVGA400, WSVGA, WXGA720, HVGA, WQVGA432, WVGA800 (default), QVGA, WXGA800
     ABIs : armeabi-v7a
----------
id: 17 or "android-15"
     Name: Android 4.0.3
     Type: Platform
     API level: 15
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800
     ABIs : armeabi-v7a, mips, x86
----------
id: 18 or "Google Inc.:Google APIs:15"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 2
     Description: Android + Google APIs
     Based on Android 4.0.3 (API level 15)
     Libraries:
      * com.google.android.media.effects (effects.jar)
          Collection of video effects
      * com.android.future.usb.accessory (usb.jar)
          API for USB Accessories
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WVGA854, WQVGA400, WSVGA, WXGA720, HVGA, WQVGA432, WVGA800 (default), QVGA, WXGA800
     ABIs : armeabi-v7a
----------
id: 19 or "android-16"
     Name: Android 4.1.2
     Type: Platform
     API level: 16
     Revision: 4
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
     ABIs : armeabi-v7a, mips, x86
----------
id: 20 or "Google Inc.:Google APIs:16"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 3
     Description: Android + Google APIs
     Based on Android 4.1.2 (API level 16)
     Libraries:
      * com.google.android.media.effects (effects.jar)
          Collection of video effects
      * com.android.future.usb.accessory (usb.jar)
          API for USB Accessories
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WVGA854, WQVGA400, WSVGA, WXGA800-7in, WXGA720, HVGA, WQVGA432, WVGA800 (default), QVGA, WXGA800
     ABIs : armeabi-v7a
----------
id: 21 or "android-17"
     Name: Android 4.2
     Type: Platform
     API level: 17
     Revision: 1
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
     ABIs : armeabi-v7a, mips, x86
----------
id: 22 or "Google Inc.:Google APIs:17"
     Name: Google APIs
     Type: Add-On
     Vendor: Google Inc.
     Revision: 1
     Description: Android + Google APIs
     Based on Android 4.2 (API level 17)
     Libraries:
      * com.google.android.media.effects (effects.jar)
          Collection of video effects
      * com.android.future.usb.accessory (usb.jar)
          API for USB Accessories
      * com.google.android.maps (maps.jar)
          API for Google Maps
     Skins: WVGA854, WQVGA400, WSVGA, WXGA800-7in, WXGA720, HVGA, WQVGA432, WVGA800 (default), QVGA, WXGA800
     ABIs : armeabi-v7a
input target id:
3


마지막으로 프로젝트명을 입력하면 프로젝트가 생성됩니다.

input your project name:
cocos2dxTest
Created project directory: /users/coz/desktop/cocos2d-x/cocos2dxTest/proj.android
Created directory /Users/coz/Desktop/cocos2d-x/cocos2dTest/proj.android/src/com/ohjung/cocos2dxtest
Added file /users/coz/desktop/cocos2d-x/cocos2dTest/proj.android/src/com/ohjung/cocos2dxtest/cocos2dTest.java
Created directory /Users/coz/Desktop/cocos2d-x/cocos2dxTest/proj.android/res
Created directory /Users/coz/Desktop/cocos2d-x/cocos2dxTest/proj.android/bin
Created directory /Users/coz/Desktop/cocos2d-x/cocos2dxTest/proj.android/libs
Created directory /Users/coz/Desktop/cocos2d-x/cocos2dxTest/proj.android/res/values
Added file /users/coz/desktop/cocos2d-x/cocos2dxTest/proj.android/res/values/strings.xml
Created directory /Users/coz/Desktop/cocos2d-x/cocos2dxTest/proj.android/res/layout
Added file /users/coz/desktop/cocos2d-x/cocos2dxTest/proj.android/res/layout/main.xml
Added file /users/coz/desktop/cocos2d-x/cocos2dxTest/proj.android/AndroidManifest.xml
Added file /users/coz/desktop/cocos2d-x/cocos2dxTest/proj.android/build.xml
Added file /users/coz/desktop/cocos2d-x/cocos2dxTest/proj.android/proguard-project.txt
Resolved location of library project to: /Users/coz/Desktop/cocos2d-x/cocos2dx/platform/android/java
Updated project.properties
Updated local.properties
Updated file /users/coz/desktop/cocos2d-x/cocos2dxTest/proj.android/proguard-project.txt


(만들어진 폴더모습. android폴더는 cocos2d-x 버전 2.0부터 proj.android로 바뀌었습니다. 스샷은 예전 것으로 그냥 쓰겠습니다)



cocos2dx 설치폴더에 proj.android, Classes, Resources 세개의 폴더를 가지는 프로젝트폴더가 만들어졌습니다.
프로젝트를 만들고 소스코드들은 Classes폴더에 위치하도록 하고, 이미지등의 리소스들은 Resources폴더에.
마지막으로 프로젝트를 빌드하려면 android 폴더의 build_native.sh 를 실행합니다.



5. 안드로이드 프로젝트 빌드 및 실행

터미널로 안드로이드 프로젝트 proj.android 폴더에서 (스샷의 android 폴더)

Kwon-ui-MacBook-Pro:proj.android coz$ ./build_native.sh  <= 빌드 쉘스크립트 실행

//이전 버전 로그입니다.
Using prebuilt externals
make: Entering directory `/Users/coz/Desktop/cocos2d-2/cocos2dxTest/android'
Compile++ thumb  : game_shared <= main.cpp
Compile++ thumb  : game_shared <= AppDelegate.cpp
Compile++ thumb  : game_shared <= HelloWorldScene.cpp
Prebuilt       : libgnustl_static.a <= <NDK>/sources/cxx-stl/gnu-libstdc++/libs/armeabi/
.
.
.
SharedLibrary  : libgame.so
Install        : libgame.so => libs/armeabi/libgame.so
make: Leaving directory `/Users/coz/Desktop/cocos2d-2/cocos2dxTest/android'
//이전 버전 로그입니다.
쭉 컴파일이 되고, 완료가 되면 이클립스에서 프로젝트를 생성합니다.


6. 이클립스에서 프로젝트 생성

(이전 버전 스샷입니다. )


File - New - AndroidProject에서 exist project로 cocos2dx 설치경로에 만들어뒀던 프로젝트의 android폴더를 지정합니다.
우리는 desktop/cocos2d-x/cocos2dxTest/proj.android 폴더를 열면 되겠죠.
(이클립스 JUNO에서는 File-New-Android Project From Existing Code가 있네요)

(저는 이미 만들어서 error메시지가 뜬 상황입니다.)

빌드해서 실행해보시면 정상적으로 되실겁니다.

12.10.31 : 2.0.3부터는 이클립스에서 프로젝트 만들어도 바로 실행되지 않습니다.
cocos2d-x lib가 외부 프로젝트로 되어있어서 임포트를 해야하는데요.
이클립스 File->Import에서 General-Existing Projects into Workspace로 다음의 프로젝트 경로를 임포트합니다.
cocos2d-x(cocos2d-x설치폴더) / cocos2dx / platform / android / java
임포트 후 이클립스 workspace에는 libcocos2dx 프로젝트가 생성되고, 정상적으로 실행이 가능합니다.


완성공!

주의 : R.java파일이 만들어지지 않거나 기타 에러들이 뜨는 상황.
res->drawable에 아이콘 이미지가 icon.png 가 아닌 다른 이름으로 되있는지 확인 (실제로 다른이름으로 생성됨)
Project -> Property -> java build path의 Order and Export 에서 Android 4.0.3등의 해당되는 라이브러리를 가장 위로 올림.
같은 프로퍼티의 java compiler -> compiler level이 1.6 인지 확인.
문제가 없는 것 같은데 계속 에러가 사라지지 않으면, 프로젝트 삭제 후 다시 생성.

12.7.19 : 2.0에서의 문제로 보이며, 2.0.1 버전에서 해결됨




7. xcode 프로젝트 생성

위에서 만든 cocos2dx프로젝트를 생성합니다.

이 때, android 와 iOS개발을 동시에 같은 프로젝트 폴더에서 진행하려면, 
아까 안드로이드 프로젝트 만들 때 지정했던 것과 같은 이름으로 작성합니다. 
cocos2dxTest였지요. (패키지명이 아니고 프로젝트 이름)
대신, desktop/cocos2d-x/안에 생성하려하면 안되겠죠. 이미 안드로이드용 프로젝트 폴더가 있을테니까요.

적당히 임시로 폴더를 지정하시고 Create !

완성공 !

8. android, iOS 같은 프로젝트 폴더에서 작업하기  (2012.09.05 수정되었습니다.)

8-1.  7번에서 만든 아이폰 프로젝트 폴더의 하위폴더들을 (cocos2dxTest의 하위폴더) 
        5번에서 만든 안드로이드 프로젝트 폴더(cocos2dxTest폴더) 아래로 복사합니다. (cocos2dxTest/android 가 아닙니다)
아이폰 프로젝트의 ios, libs 폴더를 복사해서 안드로이드 프로젝트로 넣으면 되겠죠
(Resources 폴더안에 있는 이미지들도 복사해주세요.)

8-2 . 7번에서 만든 아이폰 프로젝트의 프로젝트 파일(cocos2dxTest.xcodeproj)을 cocos2dx 설치 폴더로 복사합니다.
        (cocos2d 2.0부터 xcodeproj파일을 프로젝트 폴더에 넣습니다. cocos2dx-2/cocos2dxTest/cocos2dxTest.xcodeproj )
cocos2dxTest.xcodeproj 파일을 안드로이드 동일한 폴더로 복사.


젤 윗 스샷이 이번에 만든 iOS 프로젝트 폴더
두번째 스샷이 하위폴더들과 프로젝트 파일을 복사해서 cocos2d 설치폴더에 복사한 후
세번째는 프로젝트 폴더 최종 모습.

안드로이드와 아이폰 개발을 하나의 폴더에서 진행할 수 있게되었습니다.


9. 멀티플랫폼 개발 테스트.

xcode 프로젝트에서 간단하게 Hello World라는 텍스트를 수정하여 테스트.



아이폰 시뮬레이터 실행
이제 터미널에서 안드로이드 프로젝트 컴파일.
OhJung-Kwon-ui-MacBook:android coz$ ./build_native.sh
Using prebuilt externals
make: Entering directory `/Users/coz/Desktop/cocos2d-2/cocos2dxTest/android'
Compile++ thumb  : game_shared <= main.cpp

컴파일 완료 후
이클립스 프로젝트 Refresh 한번 해주고 실행!

완성공!!!

[2012.09.12 수정]
본 게시글은 cocos2d-1.0.1x-0.13버전에서 정리된 것입니다.
2.0으로 업데이트 되면서, 수정된 부분이 보이면 고치고 있는데요.

2.0에서 부터 안드로이드 시뮬레이터에서는 스샷의 저런 화면이 보이지 않고
액티비티만 출력됐다 내려가는 것으로 확인됐는데,
cocos2d-x 2.0부터 opengl es 2.0 이상만 지원하도록 되어 그런것으로 추정 하고 있습니다.

안드로이드 폰에 올려 확인해보시면 정상구동 보실 수 있습니다.






즐코딩하시기바랍니다


Fade, 이미지(CCSprite)를 점점 흐려지게 혹은 점점 진해지게 만들어 주는 액션이다.

 

※ 미리 선행되어야 할 작업 : setOpacity( 0~255가능 ) 메소드를 통해 Opacity값을 지정해주어야 함


■ FadeIn   : 현재의 opacity부터 최대opacity 255까지 지정한 duration 시간동안 점점 어두워짐 

                   ex) CCFadeIn*     in = CCFadeIn::actionWithDuration(1);

■ FadeOut : 현재의 opacity부터 최저 opacity 0까지 지정한 duration 시간동안 점점 밝아짐

                   ex) CCFadeOut* out = CCFadeOut::actionWithDuration(2);

■ FadeTo   : 현재의 opacity부터 내가 지정한 opacity까지 밝거나 혹은 어두워짐
                   ex) CCFadeTo* fadeto = CCFadeTo::actionWithDuration(3150);

 

   나는 메뉴가 선택되었을 때 팝업이 뜨면서 그 뒷 배경들은 점점 어두워지는 느낌을 표현하고 싶었다. 

   즉, 팝업은 FadeOut으로 밝아지고- 배경은 FadeIn으로 어두워지는것!

   그런데 내 생각과 다르게 FadeIn 메소드는 점점 어두워지면서 아예 까만색으로 아랫 노드를 완전히 가려버리는 문제가 있었다. 나는 뒤에 있는 배경을 반투명하게 가리고 싶은 건데 말이지. 알고보니 특정 Opacity까지만 내려가도록 설정해주는 FadeTo 라는 기특한 메소드가 있다. 현재의 opcity값과 메소드에 파라매터로 주어지는 Opacity값 중 어느 쪽이 크고 작냐에 따라 혼자서 FadeIn/Out 양쪽을 다 소화해낸다. 0 → 150 으로 Opacity를 주니 뒷 배경을 적절하게 가려주어서 만족.

 

   아래는 소스코드.

   쇼 팝업/ 하이드 팝업 메소드를 만들어 주고, 터치이벤트에서 해당 함수들을 호출하도록 한다. 배경을 반쯤 어둡게 덮는 레이어(alphaLayer)는 어두워지고, 팝업(popupbox)은 밝아진다. 랄까 팝업은 최초 Opacitiy가 0이라 더 밝아질 것도 없어서 '점점 밝아지는' 느낌은 안 나는데, 그런게 필요하다면 Opacity값을 수정하면 되겠다.

 

[팝업 컨트롤]

void XXX::showPopupBox(int menu) 
{

    alphaLayer->setIsVisible(true);

    popupBox->setIsVisible(true);

    
     // init에서 0값을 주었다고 여기에서 opacity셋팅을 빼먹으면

     // 처음 한 번만 페이드효과가 먹고, 그 이후부터는 페이드없이 바로 나타나는 불상사 발생 

    alphaLayer->setOpacity(0);

    popupBox ->setOpacity(0);

      

    CCFadeTo*  fadeto = CCFadeTo::actionWithDuration(2150);

    CCFadeIn*   fadein = CCFadeIn::actionWithDuration(2);   

  

    alphaLayer->runAction(fadeto);

    popupBox ->runAction(fadein);

}


void XXX::hidePopupBox() 
{

    popupBox->setIsVisible(false);

    alphaLayer->setIsVisible(false);

    // 이론적으로 opacty를 여기에서 0으로 주면 감춰져서 보이지 않을 것으로 생각했는데 그렇게 안 된다.

    // 왜일까- 잘 모르겠지만 우선 show와 hide에 각각 setIsVisible설정

}

 

[팝업 Sprite생성]

void XXX::init()
{ 

    ////////// Pop-up

   //////////////////////////////////////////////////////////////////////////////////////////

    popupBox = new CCSprite();

    popupBox->init();

    popupBox->setPosition(ccp(0,0));

    

    CCSprite* bgBox = CCSprite::spriteWithFile("pop_box.png");

    bgBox->setScale(0.7);

    bgBox->setPosition(ccp((float)screenSize.width/2, (float)screenSize.height/2));

    popupBox->addChild(bgBox,  10);

    

    btnCancle = CCMenuItemImage::itemFromNormalImage("btn_cancle.png","btn_cancle.png",

                                                                                this,menu_selector(EbookHome::popupCancleCallback) );

    btnCancle->setPosition(ccp((float)screenSize.width/2+210, (float)screenSize.height/2+80));

    

    btnRestart = CCMenuItemImage::itemFromNormalImage("btn_start.png","btn_start.png",

                                                                                this,menu_selector(EbookHome::popupRestartCallback) );

    btnRestart->setPosition(ccp((float)screenSize.width/2-100, (float)screenSize.height/2-40));

    

    btnResume = CCMenuItemImage::itemFromNormalImage("btn_resume.png","btn_resume.png",

                                                                                 this,menu_selector(EbookHome::popupResumeCallback) );

    btnResume->setPosition(ccp((float)screenSize.width/2+100, (float)screenSize.height/2-40));

    

    CCMenu* popupBtns = CCMenu::menuWithItems(btnCanclebtnRestartbtnResumeNULL);

    popupBtns->setPosition(ccp(0,0));

    popupBox->setOpacity(0);

    popupBox->addChild(popupBtns, 11);

    this->addChild(popupBox10);

    

    alphaLayer = new CCLayerColor();

    alphaLayer->initWithColor(ccc4f(0,0,0,0));

    alphaLayer->setOpacity(0);

    this->addChild(alphaLayer9);

    

    hidePopupBox();

}


출처 : http://deng-i.net/category/%EA%B3%B5%EB%B6%80%ED%95%98%EB%8A%94%20%EA%B0%9C%EB%B0%9C%EC%9E%90/Cocos%202d-x%20

cocos2d-x 에서 레이어를 통해 게임 화면을 구성합니다.


이미지 출처 : http://www.learn-cocos2d.com


이런식으로 말이죠. 레이어를 풀스크린으로 쓰면 상관이 없지만 간혹 특정 크기에 맞춰야 할때가 있습니다. 화면을 분할하여 좌측, 우측 레이어를 구분해서 사용한다던가 할때 말이죠. cocos2d-x의 Layer 클래스는 상위 Node 클래스를 상속 받기 때문에 setContentSize 인터페이스를 사용할 수 있습니다.


하지만 이 인터페이스를 통해 크기를 조절한다 해도 실제 화면에서 보면 아무런 변화가 없습니다.


아래의 그림은 960 x 640 해상도에서 집과 캐릭터를 메인 레이어에 출력한 화면입니다. 이 메인 레이어 사이즈는 가로 해상도의 반인 480 x 640으로 설정해준 상태입니다(하늘 배경은 백그라운드 레이어 ).



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
bool CGameScene::InitLayer( void )
{
    bool bRet = false;
    do
    {
        // super init first
        CC_BREAK_IF( !CCScene::init() );
 
        // 배경 레이어
        CGameSceneBGLayer* pBGLayer = CGameSceneBGLayer::create();
        CC_BREAK_IF( !pBGLayer );
        this->addChild( pBGLayer, 0, CHILD_LAYER_BACKGROUND );
 
        // 메인 레이어
        CGameSceneMainayer* pMainLayer = CGameSceneMainLayer::create();
        CC_BREAK_IF( !pMainLayer );
        pMainLayer->setContentSize( CCSizeMake( 480, 640 ) );
        this->addChild( pMainLayer, 0.5, CHILD_LAYER_MAIN );
 
        bRet = true;
    } while (0);
 
    return bRet;
}

하지만 실제 화면은 960 x 640 풀 사이즈로 나오고 있습니다. 가로 사이즈 480으로 설정한대로라면 오른쪽에 있는 집, 대머리 캐릭터는 짤려야 정상인데 말이죠. 레이어가 설정해준 480 x 640의 크기로 출력되게 하려면 Layer 클래스를 상속 받아 visit 함수를 아래와 같이 재정의 해주어야합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
void CClippingLayer::visit()
{
    glPushMatrix();
    glEnable( GL_SCISSOR_TEST );
 
    CCSize contentSize = getContentSize();
    CCEGLView::sharedOpenGLView()->setScissorInPoints( getPosition().x, getPosition().y,
        contentSize.width, contentSize.height );
 
    CCNode::visit();
 
    glDisable( GL_SCISSOR_TEST );
    glPopMatrix();
}

이 후 메인레이어를 새로 정의한 CClippingLayer를 상속 받아 사용하면...



이제 원했던대로 메인 레이어가 반만 출력됩니다.



출처 : http://kindtis.tistory.com/489

+ Recent posts