Mobile Application Development: iOS와 Android에서 Cocos2D-X 사용하기

작성에 바탕이 된 것들

Mac OS X Mountain Lion

Xcode 4.5.2

Cocos2d-2.0-x-2.0.4

Eclipse for Mobile Developer (juno)

iPhone4S, Galaxy Nesus(Jelly Bean)

Cocos2D는 그 성능뿐만 아니라 사용의 용이성으로 인기가 있는 프레임워크이지만 Objective-C로 작성이 되어있어서 iOS나 Mac에서 동작하는 게임을 만드는데 쓰입니다. 안드로이드에서도 역시나 동일하게 동작하는 앱을 Cocos2D API를 이용해서 아주 쉽게 만들수 있다면 얼마나 좋겠어요?

그래서, Cocos2D-X 게임 프레임워크가 있는 것이지요. Cocos2D-X는 C++로 작성된 Cocos2D API로 보시면 됩니다. C++로 작성되어 있기 때문에 안드로이드나 윈도우즈 리눅스 같은 다른 플랫폼에서도 동작할 수 있도록 해주는 것이죠.

준비물이 필요하죠.

먼저 Cocos2D-X의 최신 버전을 구합니다.
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download

Xcode Template 설치

압축파일 형태로 제공되니 압축을 푼 다음에 원하는 위치로 이동시키시면 됩니다. 그리고, 그 폴더 내부에 보면 install-templates-xcode.sh 파일이 있으니, 이것을 터미널에서 실행시켜서 Xcode용 템플릿을 설치하시면 되요.
명령은 다음과 같습니다.

sudo ./install-templates-xcode.sh

Xcode를 실행해서 File > New > Projects... 로 이동해서 새로운 프로젝트를 만들려다보면 템플릿이 올라와 있는 것을 확인하실 수 있어요.

안드로이드 개발 환경 설정

다음으로는 자바 쪽에서의 확인과 준비를 해줘야 겠네요.
이클립스를 켜신 후 Help > Install New Software ,

제가 설치한 이클립스 버전은 Eclipse for Mobile Developer 버전입니다 (click here)
각자의 이클립스 버전을 확인하시고, 거기에 아래 details에 나오는 C/C++ Development Tools 가 설치되어 있는지 확인하세요. 설치가 안되어 있으면 위 그림에서 선택하셔서 설치하시면 될테구요.

저 처럼 이미 설치가 되어 있다면 이제
Android NDK (Native Development Toolkit)을 셋업할 때 입니다.

앞에서 잠깐 말씀드렸다시피, cocos2d-x는 C++로 작성이 됩니다. 그래서, 자바에서는 바로 그걸 사용할 수가 없죠.
하지만, 우리에겐 NDK가 있습니다.

아시다시피 안드로이드 애플리케이션은 자바로 작성이 되기 때문에 거의 모든 앱은 자바로 개발이 되어있죠. 그렇다고 모두가 그런건 아닙니다. 구글이 NDK라는 걸 내놓았거든요. 이게 뭐냐...
JNI(Java Native Interface)라고하는 기술(원래 자바에 있었고 사용하던 기술입니다)을 통해 C/C++로 작성된 컴포넌트도 사용할 수 있게 해주는 툴킷입니다.

cocos2d-x는 c/c++로 프로그램 소스코드를 작성하고, 자바 어플리케이션에서는 NDK를 통해 그 소스코드에 접근한다는 거죠.

NDK를 먼저 구해야겠죠?
안드로이드 사이트에 가셔서 우선 NDK 최신 버전을 다운로드(click here) 하신 후에, 압축 파일을 여러분이 원하는 위치에 풀어줍니다.

안드로이드 개발 환경에 NDK를 도입하면서 추가적으로 알아야할 한 가지는 C/C++ 컴파일을 위한 '툴체인(toolchain)'입니다. 툴체인은 컴파일과 링크(GCC 4.4.3 컴파일러을 이용하는)을 깔끔하게 처리해주고, (언제든 설치가능한) 인증된 APK 패키지로 빌드해 주죠.

툴체인을 사용함으로써, 외부의 C/C++ 라이브러리(Cocos2d-x같은)를 이클립스에서 사용할 수 있게 되고, 이 라이브러리들(APK 내부에 외부 동적 라이브러리로 컴파일된)은 JNI를 통해 안드로이드 아키텍쳐와 상호 통신하게 된다는 겁니다.

컴파일 툴체인은 두 가지 방법으로 사용됩니다.

stand alone mode : 사용자가 작성한 make file 내에서 arm-linux-androideabi-g++ 을 직접 사용합니다. 이렇게 하면 프로젝트의 복잡도를 증가시키므로 다른 대안이 없을 경우에만 고려하시면 됩니다.
integrated mode : NDK에 있는 ndk-build 쉘 툴을 이용하는 방법입니다. 이 툴은 NDK 라이브러리 빌드에 최적화된 make file 이니 이 방법을 택하는 게 더 낫겠죠?

Xcode에서 샘플 어플리케이션 만들기

샘플 어플리케이션을 만드는 건 어렵지 않아요. 특별한 기능을 만들어 넣을 것도 아니구요. 아래의 순서대로 따라가기만 하면 됩니다.

프로젝트 이름은 Cocos2DxFirstIosSample이라고 작성하시면 되고...

실행을 시키시면 아래와 같은 화면이 나올 겁니다.

Cocos2D-X & Android

iOS에서 했던 것과 같은 'Hello World' 를 안드로이드 플랫폼에서도 할 건데, 이클립스에는 Cocos2D-X 템플릿이 없기 때문에 명령창에서 뭔가를 해줘야 해요.

1. 안드로이드 프로젝트를 생성하기

Cocos2D-X가 설치된 디렉토리를 보면 create-android-project.sh 라는 쉘 스크립트가 있는데 이것을 이용해서 안드로이드 프로젝트를 만들 수 있습니다. 하지만, 그 쉘 스크립트에는 여러분이 설치한 NDK와 Android SDK에 대한 정보가 없으므로 쉘 스크립트를 수정해서 그 안에 NDK와 Android SDK가 설치된 위치를 알려줘야 합니다.

NCK_ROO_LOCAL과 ANDROID_SDK_ROOT_LOCAL 값을 여러분이 설치한 정보에 맞게 수정해주세요.

create-android-project.sh 수정

이제 수정한 쉘 스크립트를 터미널을 열어서 실행하시면 됩니다.
./create-android-project.sh

아래 그림처럼, 패키지 이름을 입력하라고 나오면 적절한 패키지 이름을 정해서 입력해주고...
그러면, 사용가능한 안드로이드 API 종류들과 그에 따른 id 를 보여줄 것입니다. 아래 그림 보면 id 가 1부터 차례로 보이죠?

<패키지명을 입력해 줍니다>

그럼, 그 중에서 내가 개발할 API를 선택해서 다시 입력해 주고, 프로젝트 이름도 입력해 줍니다.

< 타겟 플랫폼의 API를 지정합니다 >

모두 제대로 입력을 했다면 아래처럼 디렉토리와 파일들을 생성하고 업데이트 했슴을 보여주고 마칩니다.

위 로그에서 디렉토리와 파일이 추가되고 생성되는 위치를 잘 보세요. 어디에 생성되나요?
cocos2d-x가 설치된 디렉토리 밑(그러고보니, cocos2d-x가 설치된 디렉토리이름이 cocod2d-x로 되어 있네요.이런...)에 바로 생성되는 군요....(그렇다고, 만들어진 디렉토리를 다른데로 옮기지는 마세요. 아직은요. 이 다음에 수행할 작업을 할 때 수행이 안될 수도 있으니까요)

2. 안드로이드 프로젝트를 빌드하기

이제 프로젝트를 빌드할 때인데요. 두 과정으로 이루어집니다. 명령 스크립트를 통해 C++코드를 컴파일하고, 이클립스로 자바 코드를 컴파일하거든요.

첫 번째 단계:

C++코드를 컴파일 하기 위해서, 프로젝트 폴더(여기서는 cocos2d-x/samplecocos2dxandroid )에 보면 proj.android 폴더가 있습니다. 그 안에 build_native.sh 스크립트 파일이 있는데요. 이걸 실행시키면 되거든요.

근데 NDK_ROOT 가 지정되어 있지 않아서 아래처럼 될거예요. 스크립트를 직접 수정해서 NDK_ROOT를 지정해준다음에 해도 되겠지만 여기서는 .bash_profile에 환경변수를 따로 지정해두고 쓰도록 하겠습니다.

아래 그림처럼 사용자 루트로 가서 .bash_profile을 수정해주세요

그리고나서 다시 build_native.sh 쉡 스크립트를 실행시켜주시면 아래 그림처럼 컴파일이 됩니다.

위 과정을 통해 C++ Cocos2D-X 라이브러리도 빌드되었고, 여러분이 작성중인 프로젝트를 위한 C++코드도 빌드되었습니다.

두 번째 단계:

이큽립에서 방금 수행한 결과로 만들어진 프로젝트를 읽어오도록 하겠습니다.
File > New > Project.. >Android > Android Project from Existing Code

다음 화면에서는 앞에서 준비한 프로젝트 폴더를 지정해줍니다.
/[cocos2dx설치된 폴더]/[프로젝트 이름]/proj.android

프로젝트를 불러오면, 에러가 발생할 수 있습니다.
아래그림처럼 말이죠.

프로젝트의 Properties > Android 항목을 보면 다음과 같은 걸 볼 수 있습니다. 참조하는 라이브러리가 X표시가 되어 있네요.

필요한 라이브러리 프로젝트를 import 해주면 해결이 됩니다.
File > Import

Browse... 버튼을 클릭하셔서 cocos2d-x 가 설치된 폴더 내에서 아래 그림 처럼 라이브러리를 찾아줍니다
.../cocos2d-x/cocos2dx/platform/android/java 네요

자, 그럼 소스코드에 발생하던 에러는 사라지죠?

나머지 하나는 AndroidManifest.xml 파일에 기분나쁜, 빨간 x 표시가 있죠? xml 파일을 열어보시면 아이콘 파일로 @drawable/icon 이라고 지정되어 있는데.. 프로젝트의 어디에도 drawable의 이름이 icon인것은 없어서 그렇습니다. 기본 템플릿으로 만들어지고 제공되는 아이콘이 ic_launcher.png 파일이므로 그걸로 바꿔주시던지 아니면 icon.png라는 이름의 (여러분이 직접 디자인한) 아이콘 이미지파일이 있다면 그것을 drawable 폴더에 복사해 넣어주세요.

빌드하고 실행시켜 보세요. HelloWorld 기본 템플릿으로 만들어진 앱이 구동이 될겁니다
아직까지는 이전 아이폰앱 프로젝트와 병합하지 않은 상태이기 때문에, 스크립트로 자동 생성되면서 포함된 이미지를 사용해서 같은 기능만 구현하고 있습니다. 오른쪽 하단 버튼도 그렇구요.

아이폰에서 작성한 라이브러리를 안드로이드쪽에서 사용하려면?
관심이 있던 부분이 이거죠. 한쪽 플랫폼에서 작성한 라이브러리를 다른 한쪽에서 재사용하는 것. 우선 두 개의 프로젝틀 를 비교해 보면 비슷한 구석이 있습니다.

프로젝트 내의 Classes 폴더를 보면, 동일한 네 개의 파일이 있는 걸 알 수 있어요. 실제 각각의 파일을 열어봐도 아주 동일합니다 (둘다 템플릿으로 만들어진 것들이니 당연하겠죠?)