머드초보의 블로그

Javascript로 html5게임과 Android랑 iOS 게임을 만들 수 있는 멀티플랫폼 게임개발툴입니다. 제가 웹게임을 만드려고 알아보고 있었는데, 이게 가장 적합한 것 같네요. 게다가 같은 소스코드로 그대로 Android, iOS도 같이 빌드할 수 있습니다.

Cocos2d-x인 경우에는 c++을 이용해서 멀티플랫폼을 지원하는데,Cocos2d-x를 잠깐 해봤을 때 c++은 대학교 때 이후로 해보질 않아서 조금 어려운 점이 많았습니다. string을 다루는 법부터 시작해서 헤더파일도 다루고 그러는 것이 익숙치 않더라구요(아...쉬운 문법 언어만 해와서ㅠ). 

그래서 사이트에 가서 찾아보니 Javascript로도 개발을 할 수 있는 제품도 있더군요. 그래서 살짝 맛보기를 해보니 클래스명은 x와 서로 비슷하며 사용법 또한 비슷한데, 이것을 Javascript로만 표현을 했습니다. 문법면에서는 훨씬 쉽게 개발할 수 있을 겁니다(물론 저는 웹개발이 주여서 그게 더 쉽게 느껴지지만, c++만 한사람은 x가 더 쉽겠죠?).

간단히 다운로드 셋팅을 한 번 해봅시다. 참고로 저는 맥 이용자입니다. 윈도우에서도 되는지는 잘 모르겠네요.

0. 준비물

Apache ANT : http://ant.apache.org/bindownload.cgi
Python2.7.6 : https://www.python.org/downloads/
AndroidSDK : https://developer.android.com/sdk/index.html?hl=sk
AndroidNDK : https://developer.android.com/tools/sdk/ndk/index.html
XCode : AppStore에서 받으삼.
WebStorm: 있으면 좋음. 없으면 그냥 에디터에서 편집해도 됨 ㅇㅇ

1. Cocos2d-JS 다운로드

http://cocos2d-x.org/download
위 사이트에서 받을 수 있습니다. Cocos2d-JS를 받습니다. 아직까지는 베타버전입니다. 곧 정식버전이 나오길 ㄷㄷ. 그리고 다운로드 사이트에서는 크게 3가지를 받을 수 있는데요. Cocos2d-x, Cocos2d-JS, CocoStudio입니다. Cocos2d-x와 Cocos2d-JS는 말그대로 C++개발, JS개발 툴이구요. CocoStudio는 게임 개발할 때 필요한 Scene, UI, Animation 등을 손쉽게 개발할 수 있는 툴입니다. 유니티를 개발할 때에도 유니티개발툴에서 애니메이션, UI를 개발하는데 그것과 비슷한 것이라고 보면 됩니다.

그리고 개발하기 위해서는 웹에디터가 하나 필요한데요. 여기서 추천하는 것은 WebStorm입니다. 웹스톰이 확실히 자바스크립트 코딩할 때에는 갑이거든요. 자바스크립트 디버깅도 할 수 있고, 코드힌트 에러도 제일 잘 잡는 에디터에요. 웹개발에도 갑이고 꽤 좋은 에디터에요. 여기서 만든 에디터들은 다 좋아요. 

2. 환경 설정

환경설정은 Python으로 구현이 되어 있습니다. Cocos2d-JS압축을 풀면 setup.py파일이 나옵니다. 이걸 실행하면 NDK, Android SDK설정이 어디에 있냐고 물어보면서 그대로 대답하게 되면 그 값을 기반으로 .bash_profile에 환경변수와 패스를 저장해줍니다. NDK, SDK, ANT를 적당한 곳에 풀고 해당 패스를 물어보는 것에 적으면 알아서 .bash_profile에 넣어버립니다.
그러면 아래와 같이 자동으로 잡아줍니다.

근데 보면 버그인지 모르겠지만 ANT_ROOT는 안잡아주더군요. 그래서 그냥 ANT_ROOT는 수동으로 추가했습니다. 

3. 프로젝트 생성

source ~/.bash_profile을 해서 profile파일을 다시 읽던가 아니면 터미널을 껐다켜면 해당 패스와 환경변수가 잡혀있을 겁니다. 그러면 초간단 프로젝트를 생성할 수 있습니다. COCOS_CONSOLE_ROOT가 패스에 잡혀서 cocos를 실행할 수 있습니다. 얘가 프로젝트를 만들어 줍니다. 

만들고 싶은 경로 위치로 가서 아래와 같이 실행하면 바로 만들어 집니다.

new는 프로젝트 생성하라는 것이고 다음은 프로젝트 명입니다. 다음 옵션은 -l은 언어를 선택하는 건데, js로 하라는 것입니다. 그러면 바로 생성이 됩니다.

4. 실행

바로 실행하면 최초 헬로우월드 게임이 나옵니다. 실행도 cocos로 하면 됩니다.

원소스로 4가지 플랫폼을 전부다 실행해볼 수 있습니다. 올인원 겁나 좋아하는데 딱 저한테 맞는 플랫폼이네요. web으로 띄우면 서버도 자체적으로 만들어서 띄웁니다. web은 따로 컴파일이 필요없고, ios와 android는 따로 컴파일 후에 실행하게 됩니다. 시간이 조금 걸리긴 합니다.

확인해보니 websocket(socket.io모듈도 지원)도 지원을 합니다. 나중에 시간될 때 웹소켓으로 멀티유저게임을 한 번 만들어봐야겠네요. 

참고문서
http://cocos2d-x.org/docs/manual/framework/html5/v2/cocos-console/en

package com.mudchobo.test.musiclibrarytest;

import java.util.ArrayList;
import java.util.List;

import android.app.ListActivity;
import android.database.Cursor;
import android.os.Bundle;
import android.provider.MediaStore;
import android.widget.ArrayAdapter;

public class MusicLibraryTestActivity extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        List<String> artists = getArtists();
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, artists);
        setListAdapter(adapter);
    }
    
    public List<String> getArtists() {
    	List<String> list = new ArrayList<String>();
		String[] cursorColumns = new String[] {
				MediaStore.Audio.Artists._ID,
				MediaStore.Audio.Artists.ARTIST
		};
		Cursor cursor = (Cursor) getContentResolver().query(
				MediaStore.Audio.Artists.EXTERNAL_CONTENT_URI,
				cursorColumns, null, null, null);
		
		if (cursor == null) {
			return list;
		}
		if (cursor.moveToFirst()) {
			int idColumn = cursor.getColumnIndex(MediaStore.Audio.Artists._ID);
			int artistColumn = cursor.getColumnIndex(MediaStore.Audio.Artists.ARTIST);
			do
			{
				String artist = cursor.getString(artistColumn);
				list.add(artist);
			} while (cursor.moveToNext());
		}
		cursor.close();
		return list;
    }
}