Sunday, December 23, 2012

도대체 어느 API 레벨에 맞춰 개발해야하는 거야?




보통 범하기 쉬운 실수가 '2.1에서 젤리빈(Jelly Bean)까지, 어느 플랫폼에서든 돌아가는 앱을 만들어야지' 생각하면서 타겟을 떡하니 2.1로 잡는 것이다. 결론부터 말하자면 '넌 잘못 생각해도 너~~~~무 잘못 생각한겨'

자 지금부터 version을 지정하는 몇 개의 값들을 하나 하나 살펴보면서 어떻게 설정해서 작업을 해야할지를 생각해 보자.

Thursday, December 20, 2012

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




보통 작업하는 순서가... iOS에서 Cocos2D-X를 이용해 작업을 하고 제대로 동작하면 안드로이드에서도 확인하는 하니까 우리도 그렇게 해보겠습니다. Xcode를 열어서 HelloWorldScene.cpp파일을 아래처럼 여러분이 원하는 문구로 수정해보세요.



그리고, 빌드한 후에 실행시켜서 변경사항을 확인하시고...




Xcode  프로젝트 폴더에서 Classes 폴더와 Resources 폴더를 복사해서, 안드로이드 프로젝트 폴더에 덮어쓰기를 하세요.
그리고, ./build_native.sh를 이용해서 다시 빌드하셔서 이클립스로 가져와 다시 실행해 보세요.




성공하셨나요?


이 글은 www.raywenderlich.com에 있는 Cocos2D-X iOS and Android : Getting Started 를 토대로 작성되었습니다.

Monday, December 17, 2012

AndEngine GLES2.0 개발환경설정

예전에 만들었던 앱이 있는데,  게임 엔진을 이용해서 다시 만들면 어떨까 싶어서 AndEngine GLES2.0을 찾아보기 시작했지요. 근데, 이게 튜토리얼이나 그 외의 문서가 아주 빈약하드라구요.



조근조근 보다보니 그럴만도 하다 싶긴 하네요. 현재도 개발이 진행중이고 꽤나 많은 장점을 가지고 있어서 안드로이드 앱을 개발하는 사람들에게 충분히 매력적인 엔진이라는 생각이 들지만,  최초 개발자인 Nicolas Gramlich 이외에 개발에 참여하는 풀이 다른 오픈소스 프로젝트에 비해 작지 않나 싶고, 그때문에 문서화까지도 신경쓰지 못하는 게 아닐까 싶어요.

실제 엔진을 이용코자 세팅하는 과정에서도 보면... AndEngine이나 Example, 그 이외의 Extension을 가져오면 몇 개의 소스코드 에러가 보입니다. 한쪽에서는 변경이 이루어졌는데 그것을 이용하는 다른 쪽에서는 수정하지 않아서 생기는 문제더라구요. 개인적인 바람이라면 좀 더 많은 개발자들이 참여해서 AndEngine을 이용하는 개발자들에게 필요한 부분을 채워줬으면 하네요.

아무튼...

우선 몇 가지만 체크하고 넘어가자면... GLES 2.0은 안드로이드 2.2 이상을 지원합니다. 그리고, ADT 또한 적어도 17이상은 되어야 한다고 합니다. 설치되어있는 API 레벨과 ADT를 확인해 주세요.

그리고, 여러분이 자바 개발을 해오셨거나, 안드로이드 개발을 해오셨던 분이라면 외부 라이브러리를 사용할 때 jar 형태로 프로젝트에 포함시켜서 작업하셨을 거예요. AndEngine도 GLES 1.0은 andengine.jar 파일만 프로젝트의 빌드 패스에 포함시켜주면 됩니다. 하지만,  GLES 2.0은 그렇질 않아요. 라이브러리 프로젝트(library project)로 포함시켜줘야만 합니다.

그래서, AndEngine의 GIT repository로부터 AndEngine이나 확장 기능들에 대한 라이브러리 프로젝트를 받아오기 위해 이클립스 GIT 애드온이 설치되어야 있어야 합니다. ( Eclipse Indigo 버전부터(?)는 EGit이 포함되어 배포되는 것 같으니 확인만 해보시면 될 듯 해요)

(아래에서 보이는 화면 내용은 Eclispe for Mobile Developers에 안드로이드 개발용 플러그인을 별도 설치했고  ADT는 r21 입니다. 글 쓰는 시점에는 최신 버전입니다. 2012년 대선 투표일 며칠 전입니다. 일때문에 분당에서 일산까지 이사를 왔는데 주소 이전을 좀 늦게 하는 바람에 투표는 분당까지 가서 해야하네요. 하지만, 꼭 할 겁니다. 여러분은 하셨나요?)


여기서는 GLES 2.0 관련 라이브러리 프로젝트만을 받아옵니다. 기타 확장 라이브러리까지 모두 받아오고 예제 프로젝트까지도 받아올 거라서 숫자가 좀 많습니다.  하나 하나 내려받아 보겠습니다.

우선 AndEngine의 github url 입니다. https://github.com/nicolasgramlich
링크를 클릭해서 어떤 프로젝트들이 진행 중인지도 살펴보세요.


자 그럼 이제 이클립스에서 위의 github의 필요한 프로젝트를 import 해줘야 겠죠?
file > import > Git > Projects from Git




계속 아래 그림 순서대로 진행하시면 됩니다.

윈도우즈에 설치시 참고사항:

[DEC 29 2012] 윈도우즈에서도 작업을 도우려고 설치하다보니, 임포트하고 리빌드하는 도중 PermGen Space 관련 에러가 발생하면서 그냥 멈춰서버리고 이클립스가 꺼져버리는 경우도 있더군요. Eclipse for Mobile Developer버전에 ADT만 설치하고 진행해봤는데 계속 그랬습니다. JDK 1.7버전이었는데, 이클립스 기본 컴파일러를 1.6으로 변경해주고 진행하니 되네요. 정확한 이유는 모르겠습니다. 

처음엔 1.6 버전이었습니다. ini 파일 수정해서 MaxPermSize 크게 해주고 별짓거리를 다해도 계속 먹통. 1.7로 변경하면 해결되기도 한다는 어느 댓글에 1.7로 올리고 해도 먹통. 그냥 맥에서만 하라는 얘긴가 싶어 싸그리 지워버렸다가 오기가 발동해서 이클립스 컴파일러를 1.6으로 변경하고 했더니 import가 제대로 되네요.

확실한 해결책은 아닌듯 합니다만(한번 더 설치해볼까 싶기도 합니다) 참고해서 설치해보세요.

추가: JDK를 1.6으로 내리고 임포트하는데, 문제없이 되네요. 어이없어 정말..ㅋ





아래 보면 branch를 선택하도록 하는데, master 가 GLES 1.0 이므로, 여러분은 GLES 2.0을 선택하시면 됩니다. GLES2-AnchorCenter는 향후 합쳐질 부분에 대한 것이라고 합니다.







위에 나열된 순서대로 하나씩 하나씩 확장 라이브러리들까지도 받으려고 합니다. 아래에 첨부된 그림의 목록대로 여러분도 하나씩 선택하셔서 받아오도록 하세요.



물론, 여기서 보이는 모든 라이브러리를 받지 않아도 됩니다. 필요한 것만 가져와도 되겠죠. 여기서 이렇게 많은 라이브러리 프로젝트를 가져온 것은  AndEngineExamples 프로젝트를 위해서 입니다. 앞에서도 말씀 드렸다시피 엔진에 대한 관련 문서가 부족하다보니 가장 좋은 방법은 예제를 보면서 하는 건데(다행스럽게도 다양한 예제가 포함되어 있습니다) 이 예제들이 제대로 실행되어야 하겠죠? 

아래 그림처럼 프로젝트 > properties > Android 를 선택해서 보시면 아래에 library 섹션이 있습니다. 프로젝트마다 연관된 라이브러리가 체크되어 있으니 그것도 확인하시고, 나중에 실제 라이브러리를 사용할 경우에도 그 섹션에서 찾아서 등록해주면 되니 기억해두세요.







하나더! 개발용 안드로이드 디바이스가 있으시다면 구글 앱스토어에서 AndEngine으로 검색을 하시면 예제가 포함된 앱이 있을 것입니다. 이걸 실제 디바이스에 설치하신다면 많은 참고가 되기도 하겠죠.


여기서 잠깐!! Errors!!

모두 내려받은 후에 보면 AndEngineExamples 프로젝트의 몇 개의 클래스 파일에 소스코드 에러가 발생할 수도 있습니다.  앞에서도 말씀드렸지만 엔진 개발자들이 너무도 바쁜 관계로.. 그리고 지금도 부분부분 진행되어 가고 있어서인지 제때제때 수정되지는 않는 것 같아요?  에러가 너무 많다면 필요한 라이브러리들을 제대로 내려받은건지 부터 확인하시고, 다행스럽게도 라이브러리는 모두 import 한 상태에서 몇개의 클래스 파일에만 소스코드 에러가 발생한 것이라면 아래처럼 수정해 주세요. (아래의 수정부분은 제대로 갖춰진 상태에서 발생할 수 있는 - 적어도 제가 겪은- 4개의 소스코드 에러에 대한 해결 방법일 뿐입니다.)

HullAlgorithmExample.java



TextBreakExample.java



BoundCameraExample.java



SplitScreenExample.java






자 그럼 이제 라이브러리가 준비된 것 같으니, 실제 만들어가며 이야기를 더 해보겠습니다.
(하지만, 제가 제 일이 어느정도 끝나야 포스팅될 거라는 거..... )