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에 넣어버립니다.
그러면 아래와 같이 자동으로 잡아줍니다.

# Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x

export COCOS_CONSOLE_ROOT=/Volumes/d/mudchobo/cocos2d-js-v3.0-beta/tools/cocos2d-console/bin
export PATH=$COCOS_CONSOLE_ROOT:$PATH

# Add environment variable NDK_ROOT for cocos2d-x
export NDK_ROOT=/Volumes/d/mudchobo/android-ndk
export PATH=$NDK_ROOT:$PATH

# Add environment variable ANDROID_SDK_ROOT for cocos2d-x

export ANDROID_SDK_ROOT=/Volumes/d/mudchobo/android-sdk
export PATH=$ANDROID_SDK_ROOT:$PATH
export PATH=$ANDROID_SDK_ROOT/tools:$ANDROID_SDK_ROOT/platform-tools:$PATH

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

# ant root
export ANT_ROOT=/Volumes/d/mudchobo/apache-ant

3. 프로젝트 생성

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

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

cocos new MudchoboTest -l js

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

4. 실행

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

cocos run -p web|ios|android|mac

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


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

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

 
Posted by 머드초보
,
 
전에는 웹페이지에서 안드로이드마켓을 접속할 수 없었는데요. 이제는 접속도 하고 설치도 할 수 있네요.
게다가 해당 구글계정 아이디로 로그인 한 뒤, 설치까지 하면 자동으로 안드로이드폰에 설치까지 해줍니다. 이렇게 편하게 기능을 구현해놓다니!

주소는 여기


보시면 니드포스피드 광고가 메인에 있지만, 들어가서 설치하려고 하면 설치할 수 없는 폰이라면서 안되네요. 게임쪽은 빨리 쇼부를 봐야할 듯?

마켓앱에서만 보다가 더욱 넓은 화면에서 앱을 고를 수 있어서 더 좋네요.
게다가 여기서 설치를 하면 자동으로 안드로이드폰으로 설치까지 해줍니다.
설치 방법도 매우 쉽게 되어있네요. install만 누르면 팝업창이 하나 떠서 이 앱이 어떤 권한을 사용하는지 알려주고, 그냥 설치누르면 설치가 됩니다.


생각해보니, 3G일 때에도 그냥 막 받아버리는건가......
아.....몰랐는데, 마켓을 실행하면 받는군요!^^ 주의해야할 것 같습니다. 3G 경고 따윈 물어보지 않고, 그냥 받아버립니다~

암튼, 좁은 화면에서 앱을 고르는 게 힘들었지만, 이제 웹버전이 존재를 해서 매우 좋네요. 근데 뭐 보통 좋은 앱들은 입소문을 타고 설치되는 게 대부분이죠~^^ 그래도 마켓을 뒤지다가 좋은 앱을 발견하면 매우 기분이 좋죠~

 
Posted by 머드초보
,
 
일단 그냥 기록용!

안드로이드로 음악플레이어를 만드려면 안드로이드용 음악 라이브러리에서 데이터를 가져와야합니다. 안드로이드는 자체적으로 Song, Artist, Album, Genre 등의 데이터를 sdcard에서 미디어스캔을 해서 데이터베이스를 구축합니다.
이 구축한 것을 자체적인 sqlite에 저장을 하는데, 이것을 앱에서 불러와서 쓸 수 있습니다. 뭐 Song테이블에서 해당 곡에 대한 경로까지 다 저장하고 있어서 불러와서 데이터를 보여줄 수 있는 그런 앱을 만들 수 있습니다.

간단한 예제로 아티스트 목록을 가져오는 것을......


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;
    }
}



아 귀차나서...초간단 소스를......
getArtists함수를 주목해서.....
getContentResolver().query()함수를 보면 그냥 저 테이블에서 쿼리를 날려서 cursor를 얻어옵니다.
cursor를 돌려가면서 값을 가져오면 아티스트명을 가져오게 됩니다.
그리고 이 아티스트테이블에 보면 칼럼이 4개가 있습니다. 아래사이트에 확인!
http://developer.android.com/reference/android/provider/MediaStore.Audio.ArtistColumns.html
이런 식으로 해서 가져오는데, 막상 보면 sqlite로 쿼리날리는 것과 같습니다. 직접 쿼리를 날려도 가져올 수 있구요^^

그 외의 Song테이블이라던지, Album테이블, Playlist테이블 같은 것도 위와 같은 방법으로 다 가져오고, 삽입하는 것도 가능합니다.
플레이리스트는 MediaStore.Audio.Playlists 이곳 테이블에 insert하면 되고~
이건 플레이르스트 곡목록 관련된 것들 MediaStore.Audio.Playlists.Members
앨범은 MediaStore.Audio.Albums
곡은 MediaStore.Audio.Media
장르는 MediaStore.Audio.Genres
등등~

PS. 근데, 이거 테이블 구조 같은 것을 잘 정리한 곳이 왜 없죠?-_- 내가 못찾는 건가... 안드로이드 사이트 가도 없는 것 같은데....
 
Posted by 머드초보
,
 
안드로이드에는 음악앱이 엄청 많아요!

Android에서 음악 데이터베이스를 오픈했기 때문에 미디어스캔을 거쳐서 안드로이드db에 앨범, 곡, 아티스트별 db를 자동으로 생성하게 되어서 이걸 안드로이드 개발자가 앱을 개발하면서 접근할 수 있으며, 음악플레이도 쉽게 할 수 있어서 누구나 음악앱을 만들 수 있죠.

음악앱의 관건은 역시 사용자가 편리하게 음악을 들을 수 있는 것과 비주얼적인 요소와 부가적인(가사나 이퀄라이저, 소셜 정도?) 기능이 얼마나 잘 되어있는지로 판단할 수 있겠죠^^

그래서 한번 비교해봤어요~

1. PowerAMP Music Player Beta (현재까진 무료)
아직 베타라서 그런지 무료입니다. 셋팅메뉴에 buy메뉴가 있는걸보니, 나중에 유료로 팔 모양입니다 ㄷㄷ
파워앰프의 장점은 멋진 UI입니다. 하지만 이런 ui말고도 이퀄라이저도 완벽히 제공합니다.
사용자 삽입 이미지

멋진 플레이어UI! 오른쪽은 이퀄라이저 조절!


다른 플레이어는 폴더재생기능이 조금 부족한데, 이 파워앰프는 폴더재생과 라이브러리재생 두가지모드가 모두 존재합니다.
게다가 락화면모드까지 제공을 해서 현재 안드로이드카페에서 가장 인기있는 플레이어로 자리잡았네요!
또 앨범아트가 없으면 자동으로 받아주는 기능도 있는 것 같습니다. 전 앨범아트가 다 있는 MP3를 받아서 뭐 필요 없는 기능이지만^^

사용자 삽입 이미지

폴더재생과 라이브러리재생 제공! 락화면 제공!


한가지 단점이 있다면 역시나 가사-_- MP3 파일안에 있는 가사를 보여주는 기능이라도 있었으면 좋겠는데, 없네요.
디자인:★★★★★ 아오 디자인 만점! 제가 원했던 디자인ㅠㅠ
UI:★★★★ 폴더랑 라이브러리랑 합치기 힘든 형태인데, UI적으로 잘 구현한 것 가틈! 하지만 버튼이 너무 많아서 좀 복잡하긴 함ㅠㅠ
부가기능:★★★ 락스크린은 맘에 들었지만, 가사 때문에 별두개 깜 ㅇㅇ

2. tunewiki (광고버전은 무료, 비광고버전은 유료)

소셜의 기능을 넣은 음악플레이어 ㄷㄷ
일단 폴더재생은 안되구요-_- 그리고 광고가 있습니다.
일반적인 라이브러리재생을 지원합니다.
튠위키의 장점은 엄청난 부가기능이죠. 오히려 플레이어기능은 그지같아도 부가기능하난 최고입니다.

첫번째로 가사재생됩니다. 하지만.. 제목으로 그냥 검색해버리나봅니다. 그래서 가사가 가끔 안맞을 때가 있습니다. 알송은 md5로 검색하는데ㅠㅠ 그리고 외국에서 서비스하는거라 한국노래 가사는 거의 없습니다. 뭐 좀 맘에 안들지만 나름 싱크가사네요^^

두번째론 뮤직맵을 제공합니다. 현재 지도에서 이런 음악을 지역에서 듣고 있다는 것을 보여주는 것이죠. 이건 정말 맘에 드네요~ 게다가 듣고 있는 음악에 대해 유튜브검색을 제공해서 바로 어떤 음악인지 확인할 수 있어요~

세번째론 이 플레이어로 들은 탑50 아티스트 및 곡을 볼 수 있다는 것이죠. 나라별로 차트가 존재해서 현재 우리나라에서 뭐가 대세인지 확실히 보여주네요^^ 게다가 클릭하면 동영상으로 음악을 재생할 수 있어요. 완전 최고네요.

네번째는 트위터나 페이스북 공유할 수 있는건데, 그냥 제목과 아티스트명만 공유하는 거니 뭐 별로 좋은 기능은 아닌 듯. 와 부가기능 많네...

사용자 삽입 이미지

가사나오긴 하는데, 없는게 더많음 ㅇㅇ, 오른쪽은 나라별로 순위에서 본 순위목록!



사용자 삽입 이미지

뮤직맵입니다. 에코브릿지 노래를 누군가 듣고 있는데, 이노래가 궁금하면 바로 유튜브검색으로 확인할 수 있어요~


디자인:★ 디자인 따윈 하지 않은 앱입니다-_-
UI: ★★ 부가기능이 많아서 그런지 UI가 엄청 불편합니다-_- 그래도 나름 많은 기능을 쉽게 해보려고 애를 쓴 흔적이 보이지만, 뭘 찾으려고 해도 참 어렵습니다ㅠ
부가기능: ★★★★★ 부가기능은 그냥 짱먹습니다! 심심할 때 음악에 대한 정보나 사람들은 어떤 음악을 듣는지에 대해서 한번에 확인할 수 있어서 좋습니다~


3. Winamp Beta (무료)
역사가 13년이나 된 Winamp가 안드로이드용으로도 나왔습니다.
폴더재생안되고, 가사안되고, 부가기능도 없고, 아무것도 안됨. 그냥 플레이어임 ㅇㅇ
근데, Wifi를 이용해서 pc와 싱크를 맞추는 기능이 있는 것 같습니다. 근데 제가 아무리 삽질해봐도 안되네요...ㅠㅠ Winamp 5.59beta버전 깔면 된다고 하는데, Device에서 안뜨네요ㅠㅠ
USB로도 된다고 해서 별짓을 다해봤는데 안되네요ㅠㅠ
암튼 이런 싱크기능이 있으면 회사나 집이나 이동이 많은 사람들에게 어디서나 같은 음악을 들을 수 있는 장점이 있겠네요~^^

암튼, 그런 부가기능이 하나있고, 락화면일 제공합니다. 락화면은 좌측상단에 락풀면 또 원래 락화면이 나오네요. 그냥 다 풀리게 해주지-_-
사용자 삽입 이미지

그냥 평범한 플레이어... 우측은 락화면


디자인: ★★ 그냥 무난한 디자인임 ㅇㅇ
UI: ★★★ 두개주려다가 좀 맘에 드는게 다른 플레이어에 볼 수 없는 아코디언형태의 UI가 있음. 저기 home을 누르면 라이브러리가 보이고 아래는 플레이어형태! 하지만 별로 유용해보이진 않음.
부가기능:★★★ 락화면이랑 wifi싱크로 세개줌.

4. Music PlayerPro (유료)
기본 음악앱이랑 비슷한데, 거기에 여러가지 기능을 더 추가해서 유료로 팔고 있는 앱입니다.
음악플레이어 형태는 비슷한데, 거기에 폴더재생기능을 추가했습니다.
그리고 부가기능으로는 가사와 앨범정보, 앨범아트들을 받을 수 있게 되어있습니다. 근데 잘 안되네요-_-
락화면을 제공합니다.
공유기능을 제공하는데, 앨범아트를 공유하면 트위터를 통해 공유할 수 있습니다. 음원을 공유하고 싶으면 email이나 블루투스를 통해 공유가 가능합니다.
사용자 삽입 이미지

큼직한 앨범아트가 맘에드네요! 플레이어화면은 그냥 일반적인 플레이어화면

사용자 삽입 이미지

현재 재생중인 음악에 대해 가사 및 앨범정보 앨범아트를 가져올 수 있고, 해당곡의 앨범아트를 트위터로 공유할 수 있고, 오디오파일을 쉽게 공유할 수 있다-_-


디자인: ★★★ 무난함 ㅇㅇ
UI: ★★★ 무난함 ㅇㅇ
부가기능: ★★★ 무난함 ㅇㅇ
그냥 무난한 플레이어임-_-


휴.... 개인적으로 PowerAMP의 UI와 디자인의 Tunewiki의 부가기능을 합친 쉽고 좋은 ui플레이어가 나왔으면 좋겠네요ㅠㅠ
 
Posted by 머드초보
,
 
저는 어렸을 적 패밀리(패미콤), 알라딘보이(메가드라이브), 슈퍼컴보이(슈퍼패미콤), 게임보이를 하면서 자란 세대라서 이런 에뮬레이터가 돌아간다는 것에 참 좋네요~ 그래도 역시 터치로 조작하는 건 힘들긴 하네요. wii컨트롤러가 있으면 그래도 할만하긴 합니다^^

총 5가지가 있네요.
PS1, 메가드라이브, 슈퍼패미콤, 패미콤, 게임보이

1.psx4droid
플레이스테이션1 에뮬레이터인데요. 나온지 얼마 안된 것 같은데요. 이걸로 철권은 돌아가지 않고, 메탈슬러그X는 케릭터선택하면 진행이 안되고, 그나마 스트리트파이터 ex+a가 구동이 되는데, 이건뭐 슬로우 모션이네요. 갤럭시S처럼 하드웨어가 좋은 사양이라면 제대로 구동될 지도 모르겠네요^^
일단 아직은 초기버전입니다. 그래서 그런지 느리고, 사운드도 불안정하며 돌아가는 게임이 몇개 없는 듯 합니다.
구동시에 문제가 많은 SCPH1001.BIN 등의 바이오스가 필요하구요. frameskip정도만 있었어도 좀 할만 했을 것 같습니다.
WII리모콘으로 조작이 가능합니다.
아래는 구동영상입니다. 제가....직접 찍어봤습니다 ㅠㅠ 조작은 Wii리모콘으로 하는겁니다^^ Wii리모콘도 잘 지원하네요~^^


2. Gensoid
메가드라이브(알라딘보이) 에뮬이네요. 어렸을 적에 삼성에서 SEGA라이센스를 따와서 출시한 알라딘보이일꺼에요. 잼있는 게임 많았는데^^
완벽하게 돌아갑니다. WII리모콘도 잘 되고, 사운드도 잘나오고.
사용자 삽입 이미지

재미있게 했던 스토리 오브 도어!


3. SNesoid
슈퍼컴보이! 현대에서 출시했나요? 암튼, 게임수도 엄청 많았고, 동킹콩이 유명했죠!
완벽하게 돌아갑니다. 물론 WII리모콘도 잘되고, 사운드도 잘나오고.
사용자 삽입 이미지

파이날 파이트!! 2인가 그럴꺼에요-_- 1이 더 재미있는데^^


4.Nesoid
패밀리라는 게임기로 유명했던 게임기. 변종도 참 많아서-_- 이건 열혈시리즈가 최고였죠!
위와 동일합니다. 다 잘되고 WII리모콘도 잘되고^^ 사운드도 잘나오고
사용자 삽입 이미지

열혈 신기록이라고 아시려나 모르겠네요. 허들 뛰어넘고, 수영하고 건물 뛰기 파이팅 등의 게임을-_-


5. GameBoid
현재 NDS의 그 전 버전이라고 할 수 있는 Game Boy Adcanced 에뮬이죠!
앵간해선 잘 돌아갑니다만, 가끔 안돌아가는 롬파일이 있습니다. 그리고, 사운드가 지지직거리면서 제대로 안나오는 파일도 있구요. 가장 최근에 나온 게임기라서 그런지 아직 불안정한 듯^^
그래도 많은 분들이 롬을 해킹하셔서 한글판 롬파일도 많이 돌아다니더라구요-_-
사용자 삽입 이미지

유희왕게임인데, 어떻게 하는지 모르겠네요-_-


저와 같은 세대라면 에뮬레이터와 Wii리모콘 하나 사서 들고 다닐만 합니다-_- 추억을 생각하면 예전에 잼나게 했던 게임을 다시 깨보는 것은 어떨지....-_-
 
Posted by 머드초보
,