먼저 이클립스에 cocos2d-x 환경을 세팅한다. 그리고 cocos2d-x 프로젝트를 하나 만든 다음, 그것을 안드로이드 스튜디오에서 열어볼 것이다. 

아래와 같이 13기가의 용량을 비워두고 환경 세팅을 시작했다. cocos2d-x프로젝트를 만들어 기기에 돌려보기까지 13기가를 꼬박 다 쓰고도 5기가를 추가로 다시 마련했다.

그리하여 환경세팅은 겨우겨우 끝냈지만 아직 빌드라던지 새 프로젝트를 만든다던지 하기 전이었다.

400메가가 남은 상태에서 도저히 진행이 불가능하여서 iMoive와 가비지벤드, iPhoto를 지우고 다시 진행했다. 

내가 새벽에 내내 작업을 해서 정신이 혼미했지만.. 안드로이드 스튜디오가 깔려 있는 상태에서 나머지 환경세팅을 하는데 약 20기가 정도가 들었다. 빌어먹을 NDK..
그리고 여분의 15기가를 준비하여 프로젝트를 생성, 빌드하는데 무리없도록 만들었고 가슴이 아픈 메모리 정리였다ㅠ

결론적으로 나는 총 35기가 정도의 용량으로 환경세팅을 완료했다. (확실하게 측정한 값은 아닙니다. 참고만 해주세요...)

아래는 간단하게나마 환경세팅을 하는 순서를 나열하겠다.
혹시 이미 설치된게 있다면 알아서 넘어가면 된다.

글쓴이가 기본 환경 경로로 잡은 곳은 /Users/사용자이름/Document 이다.
여기에 eclipse와 Cocos2d-x, ant, ndk를 다운 받았고, android-sdk는 eclipse폴더 안에 넣어두었다.

맥에서 Cocos2d-x 환경 세팅하기

1. 맥에 이클립스 설치 (http://toplogic.tistory.com/40)

2. 맥에 이클립스에 안드로이드(android-sdk) 설치 (http://toplogic.tistory.com/41)
$ sudo find / -name "*ndk*"
"*ndk*"의 뜻은 ndk를 포함한 모든것을 찾아달라는 뜻이다.

3. 대망의 NDK 다운 (https://developer.android.com/ndk/downloads/index.html#download)

- 글쓴이는 r10e 버전을 다운받았다.
- 다운 받고 나면 아래와 같이 압축을 풀어준다. (압축 푸는데 시간 좀 걸린다. 용량도 엄청 잡아먹는다.)
ndk$ chmod a+x android-ndk-r10c-darwin-x86_64.bin
ndk$ ./android-ndk-r10c-darwin-x86_64.bin

4. ANT를 다운 (http://ant.apache.org/bindownload.cgi)

5. ./bash_profile을 설정한다.
- $ vi /Users/사용자이름/.bash_profile 을 쳐서 ./bash_profile 파일에 들어간다.
- vi 에디터 사용법을 모른다면 대강 익히고 돌아오자..

- 위 스크린샷과 같이 경로를 지정해주면 되는데, 앞에서 다운 받았던 것들의 경로를 넣어주면 된다. (tip : 폴더를 드래그해서 터미널에 드롭하면 절대 경로를 알아낼 수 있다!)
- android-sdk, ndk, ant의 경로를 오타 없이 잘 넣자.

6. 이제 cocos2d-x를 다운받자! (http://www.cocos2d-x.org/download/version#Cocos2d-x)
- 글쓴이의 경우 v3.0을 다운받았다. (http://cdn.cocos2d-x.org/cocos2d-x-3.0.zip)

7. 다운받은 Cocos2d-x의 압축을 풀고, 터미널로 압축을 풀었던 폴더에 들어간다.

8. .bash_profile파일에 지정해놨던 경로들을 Cocos2d-x에 적용시킨다. 아래 명령어를 치면 된다.
$ ./setup.py
- 만약 뭐 경로가 하나라도 없다면 없는 경로가 있다고 알려줄 것이다.
- 경로가 잘 세팅 되있다면 아래 명령어를 치면 된다고 뜰 것이다. 아래 명령어를 치면 이제 경로 적용이 완료된 것이다.

$ source ~/.bash_profile

여기까지 잘 따라왔다면 mac에서 cocos2d-x 환경 세팅이 완료된 것이다.
아흑.. 너무 힘들었다.. 하지만 아직 프로젝트를 생성해보기 전까지 방심해서는 안된다. 젠장 첩첩산중이지만 슬슬 끝이 보인다. 

맥에서 Cocos2d-x 프로젝트 생성하기

1. 프로젝트를 생성하고 싶은 경로에 들어가서 아래 명령을 입력한다.

$ cocos new MyGameTest -p com.your_company.mygametest -l cpp -d ./mygametest
- 프로젝트 이름은 MyGameTest이고 페키지 이름은 com.your_company.mygametest이다 그리고 mygametest폴더를 만들어서 그 안에 프로젝트를 생성한다.

2. finder에서 프로젝트 폴더 안에 들어가보면 아래와 같이 나온다. 프로젝트 생성이 된거다.

아이폰 프로젝트를 Xcode로 열고 실행시켜보기

0. Xcode가 설치되있어야합니다.

1. 위 경로에서 proj.ios_mac 폴더에 들어가서 Xcode 프로젝트를 실행시킨다.

2. Xcode가 켜지면 빌드&런을 해서 시뮬레이터(혹은 단말기)에 앱이 올라가는지 보면 된다.
- 빌드하는데 시간이 생각보다 많이 걸린다.. ㅠ

이렇게 실행이 되면 성공이다.

안드로이드 프로젝트를 Android Studio에서 실행시켜보기

0. 안드로이드 스튜디오를 설치해놓아야한다.

1. 유튜브 링크에 들어가서 그대로 따라한다. 이미 프로젝트 생성까지는 했으므로 안드로이드 스튜디오에 프로젝트를 import하는 부분부터 하면 된다. (https://youtu.be/VLeGy1foMQA?t=7m51s)

2.  쭉 따라서 하면 된다. 아래와 같이 된다면 성공이다.

추가로) 이 포스팅에서는 안드로이드 빌드를 터미널에서 해보진 않았지만, 터미널에서 안드로이드 빌드를 해보는 과정에서 아래와 같은 에러가 뜨는 경우가 있다. 

$ cocos run -p android
...
...
building apk Android platform not specified, searching a default one...
Can't find right android-platform for project :"/Users/nownabe/projects/HelloCocos/proj.android".
The android-platform should be equal/larger than 10

이 문제는 이 링크(http://qiita.com/nownabe/items/496285423c74b47dcd42)를 통해서 해결할 수 있다. 비록 일본어로 되어있지만 크롬으로 켜서 번역기 돌리고 보면 나름 이해가 된다. 중간부분에 해결 방법을 설명해놓았다. 안드로이드의 버전 문제인듯 하다.

원문 : http://www.raywenderlich.com/14865/introduction-to-pixel-art-for-games

 Glauber Kotaki on July 18, 2012  (translated by canapio)

픽셀아트는 요즘 게임쪽에서 아주 인기있는중인데, 그 이유는 아래 세가지 정도라고 생각한다.

• 외관(Looks). 픽셀아트는 보기 훌륭하다! 한 스프라이트에 각 픽셀에대해 만드는 것에대핸 이야기를 말한다.
• 향수를 일으킨다(Nostalgia). 픽셀아트는 플레이어들이 자라면서 즐겼던 닌텐도, Super 닌텐도, Genesis(나의 경우!)등의 엄청난 향수를 불러일으킨다.
• 배우기가 편하다.(Ease of learning). 픽셀아트는 배우기에 가장 쉬운 타입의 디지털 게임중 하나로써, 특별하게 당신이 아티스트이기보다는 프로그래머 타입에 가깝다면 더욱이 쉽다.

이제 픽셀아트를 만져볼 생각이 있는가? 그럼 나와 같이 따라오면 내가 가장 간단하게 만들면서 게임에 바로 사용할 수 있는 쿨내 풍기는 캐릭을 어떻게 만드는지 보여주겠다!

그리고 추가로, 캐릭 만드는 법을 보여주고 난 다음에는, iPhone game에 적용시키는 법을 Ray가 알려줄 것이다!

이 강좌를 따라오려면 Adobe Photoshop이 필요하다. 만약 포토샵이 없으면, 여기 어도비에서 제공하는 무료 다운로드 링크(http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop)를 이용하면 된다.

픽셀속으로 빠져들어 읽어내려가보자!

픽셀 아트가 뭔가?

시작하게전에 “픽셀아트”이 뭔지 부터 깔끔하게 잡고 가자. “픽셀아트”은 당신이 생각하는것 만큼 명확한 뜻이 있진 않다. 그래서 의견이나 스타일의 문제이나 이번 강좌에서 정의를 나름 지어질 수 있길 바란다 :]

가장 쉽게 “픽셀아트”을 정의하는 방법은 무엇이 “픽셀아트"이 아닌가를 생각하면 된다. 무엇이든 generates 픽셀이면 픽셀아트가 아니라 할 수 있다. 아래 예제가 있다.

Gradient

1
2
3
4
5
6
7
8
9

-(id) init { 
    if( (self=[super init])) { 
        CCSprite * hero = [CCSprite spriteWithFile:@"sprite_final.png"]; 
        hero.position = ccp(96, 96); 
        hero.flipX = YES; 
        [self addChild:hero]; 
    } 
    return self; 
}

우리는 스프라이트를 화면의 왼쪽 사이드에 놓고 그가 오른쪽을 보는것처럼 만들것입니다.

컴파일하고 돌려보면 당신이 예상한대로 스프라이트는 화면에 나타날것입니다. 

그러나 이 강좌에서 처음 말했던것을 기억하세요. 우리는 일부로 크기를 키워야합니다. 그리고 각 픽셀들이 추가 블록을 주어 픽셀아트 느낌이 나도록 보이게 하고 싶다.

따라서 init 메소드에 아래 라인을 추가하자:

1

hero.scale = 2.0;

쉽지요? 컴파일과 실행... 잉? 스프라이트가 블러처리가 되버렸다! 

이건 스케일이 바뀔 때 Cocos2D의 기본 세팅인 anti-aliases art 때문이다. 픽셀아트에서는 이걸 사용하지 말아야한다. - 우리는 딱 떨어지는 엣지가 필요하다.

운좋게도, 아래 라인 하나만 더 추가하면 굉장히 쉽게 해결할 수 있다.

1

[hero.texture setAliasTexParameters];

이 설정은 image의 스케일을 변화시켜도 anit-aliasing이 일어나지 않게 Cocos2D를 세팅하고, 이것은 “pixel-like”하게 보이게 만든다. 컴파일과 실행하여... ㅇ어로올1!! 된다!!

pixel art를 사용할 때 이점을 말하자면 - 우리는 실제 화면에 보이는 그림 사이즈보다 작은 이미지 파일을 사용하면 된다, 이건 텍스쳐 용량을 엄청나게 줄여준다. 그리고 우리는 레티나 디스플레이를 위한 이미지를 따로 준비할 필요가 없다!

이제 뭘 해야하나?

나는 당신이 이 튜토리얼을 즐기고 pixel art에대해 조금이나마 배워갔기를 바란다.

헤어지기전에 여기 마지막 팁들을 주겠다.

• 항상 anti-alias, gradients나 너무 많은 컬러를 사용하는것을 피해야 한다는 것을 기억하자. 이것은 당신이 알지 못하고 하는것보다 알고 하는것이 당신 자신에게 굉장히 좋을 것이다.
• 만약 당신이 북고풍을 구현하기를 REALLY 원한다면, 8-bit나 16-bit와 같은 완전 극한의 오래된 콘솔 작품을 한번 구경해 보아라.
• 거기엔 ‘복고풍’을 떠나서 엄청나게 많은 스타일이 있다. 하드웨어가 좋아지면서, 리소스들은 더 좋고 더 다양한(섹시한) 색을 사용할 수 있게 되었다. 이것은 오래된 하드웨어에서 어떻게 픽셀아트가 만들어지는지 몰라도 되게 되었으며,  더 다양하고 새로운 아티스트들을 이끌었다. Newer consoles like Game Boy Advance, Nintendo DS, Playstation 1 and some mobile phones have games with these styles, so look into those!
• 몇몇 스타일에서는 어두운 테두리가 없다; 어떤건 빛이나 그림자가 없다. 이것은 스타일에 따라 다르다! 이 강좌를 통해 알게된 작업물에 어떻게 명암을 주는지 아는것은 훌륭한 일이지만, 당신이 마음 가는대로 스타일링하는것을 마음속에 새겨두자.
• 만약 좀 더 자신이 있다면, 다음 용어들로써 더 세세한 강좌를 찾아볼 수 있을 것이다: isometric, dithering, anti-alias, celout and subpixel animation.

Pixel art는 시작할 때 쉬워서 쉽게 느껴질 수 있지만 사실 엄청난 시간이 걸려야 좋은 pixel art 가 만들어진다.

스킬을 올리는 가장 좋은 방법은 연습, 연습 또 연습이다. - 그리고 pixel artists에게 조언을 받는것까지!

나는 당신이 pixel art 포럼에 당신의 작업물을 올려 다른 작가로부터 조언을 받을것을 강력히 추천한다. 작게 시작하고, 많이 연습하여 피드백을 받으면 당신은 엄청난 pixel art 게임을 탄생시킬 준비가 된 것이다!

만약 pixel art에 대해 다른 질문이 있다면, 아래 토의 포럼에 가입하고 당신들이 미래에 굉장한 pixel art를 만들 수 있는 모습을 보게되면 좋겠다! :]

translated by canapio