[Javascript] html5, Android, iOS 게임 개발 가능한 Cocos2d-JS

자바스크립트(Javascript) 2014. 6. 21. 08:07
 

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 머드초보
,

[Java] Google App Engine의 ChannelAPI를 이용한 할리갈리 게임

자바(Java) 2011. 12. 7. 20:42
 
저번에 해커톤에 가서 코딩하고 온 할리갈리 게임입니다.
jQuery Mobile와 Java와 html5의 Cavans의 짬뽕 조화로.....이루어져있습니다....ㄷㄷ
Client는 Cavans로 만들었는데, IE계열에서 전혀 동작하지 않네요. IE9에서도 안되네요ㅠ 그리고 Android계열 브라우저에도 잘 안되는 듯 합니다. 되는 곳은 iPhone계열 밖에 없네요ㅠ 아이폰이랑은 같이 게임을 하실 수 있을겁니다^^
뭐 그냥 ChannelAPI 공부하는데에 전혀 무리 없이 보실 수 있을 것 같습니다.
물론 공식사이트에 있는 Tic-Tac-Toc 예제가 더 심플하고 보기 쉬운 예제입니다ㅠ 
http://code.google.com/p/java-channel-tic-tac-toe/

 그래도 그 외에 방 개념을 넣어서 만든거라 한서버당 여러 게임을 즐길 수 있어요!
근데 몰랐는데, 문제는 무료 계정을 사용할 경우 Resource에 한계가 있습니다. 근데, 이 ChannelAPI의 Channel Created 리소스는 너무 쪼잔하게 줍니다. 하루에 100개가 제한입니다. 결국은 접속자 100명이 들어오면 끝나는 것이죠....ㄷㄷ 페이지당 채널하나니 뭐 그냥 몇명이 게임하면 끝나는 것이죠 ㅇㅇ

 그래서 다음에는 Node.js로 만들어서 무료호스팅 하는 곳에 올려볼 생각입니다!
스샷

일단 원리는 간단합니다.

1. 해당 게임페이지에 접속 시 채널생성.

채널을 생성하고 Javascript에서 Open요청을 하면 /_ah/channel/connected 요청이 호출됩니다. 여기서 입장을 시키면 됩니다. 서버에 접속되었다고 객체의 유저목록에 추가하면 됩ㄴ니다. 그 뒤에 이 사용자가 끊어질 경우 /_ah/channel/disconnected 요청이 호출되므로 그때 유저목록에서 삭제해주면 되죠!

2. 해당 방에 객체를 만들어 ClientId저장

ClientId를 저장해두어야 나중에 해당 방에 있는 유저들에게만 데이터를 보낼 때 해당 ClientId로 보낼 수 있습니다. 

쓰다보니 별거없네... 암튼 이런식으로 되는거라......
 
소스는 여기에
https://github.com/mudchobo/HalliGalliForAppEngine 

올려놓은 사이트는 여기에
http://halligalligame.appspot.com/ 

PS. 만들면서 느끼는 게 Javascript로 타이머 하나 걸면 무조건 이기겠더라구요... 웹게임에 대한 어뷰저는 어떻게 처리를 해야할 지 고민이 크네요... 
 
Posted by 머드초보
,

[Javascript] 모든 브라우저(아이폰포함) 재생할 수 있는 jQuery용 Audio 재생플러그인 jPlayer

자바스크립트(Javascript) 2010. 9. 14. 21:06
 
사실....-_-
아이폰이나 아이패드, 아이팟터치는 html5의 audio로 재생하고 나머지는 flash로 재생하면 다되는거죠.
이건 그렇게 귀찮게 구분하는 것을 알아서 해주는플러그인이에요.
이런 종류의 플러그인이 SoundManager라고도 있는데, 얘는 재생할 때 UI같은 것이 재미있는 것이 많아서 좋긴한데, 조금 무거운 것 같습니다. min파일이 50k정도 하는 듯.
그에 반에 jPlayer는 물론 jquery기반이라서 jquery를 먹고 가지만, jPlayer만 16k정도 하네요.

현재 브라우저가 지원하는 오디오 코덱이 다 다른데요.
크롬은 mp3/ogg 지원하고, 사파리는 mp3만, opera와 firefox는 ogg만 지원을 해요.
그래서 mp3에 대한 재생을 할 때에는 opera와 firefox는 플래시로 재생시키도록 하게 되는 것이죠.

게다가 UI연동같은 것도 progress callback함수나 complate callback함수 등 재생, 일시정지, 정지 이런 것이 너무 함수로 잘되어있어서(마치 as3의 sound클래스를 보는 듯한...) 쉽게 쓸 수 있어요~

공식사이트

대충 써보니까 매우 좋네요. 저는 이렇게 문서화랑 demo가 잘되어 있는 사이트가 너무 좋아요!ㅠㅠ

[code]
$("#player").jPlayer({
            ready:function(){
                this.element.jPlayer("setFile", "http://mudchobo.tomeii.com/html5/jPlayer/aa.mp3").jPlayer("play");
            },
            swfPath:"/html5/jPlayer/"
        })
        .jPlayer("onSoundComplete", function(){
              // 다음곡 처리~
        })
        .jPlayer("cssId", "play", "btnPlay")
        .jPlayer("cssId", "pause", "btnPause")
        .jPlayer("cssId", "stop", "btnStop");
[/code]
이런식으로 jQuery문법에 충실하도록 제작되었네요~
게다가 css랑 연동도 저렇게 play버튼을 지정해주고 btnPlay태그가 재생버튼이 바로 되어버리죠!
최고인 듯.

암튼 잘 쓰세요~
 
Posted by 머드초보
,

[Javascript] Canvas를 이용한 Coverflow인 jCoverflow를 이용한 가수별 앨범목록보기

자바스크립트(Javascript) 2010. 6. 27. 10:15
 
한번 만들어보려고 했는데요... 그냥 우연히 Canvas를 이용한 Coverflow 라이브러리가 있을 것 같아서 검색해보니 역시 있네요.
근데 얘좀 잘못 만들어진 듯-_- Canvas를 여러개 만들어놓고 돌리고 있네요-_- Canvas 하나면 될 듯한데...




사이트
http://jcoverflow.sourceforge.net/

사용법은 파일 다운로드해서 압축풀면, coverflow.js랑 coverflow.css넣고,
[code]<div id="coverflowHolder">
    <div id="__cvfl-coverflow-holder" style="display:none">
        <div id="__cvfl-coverflow">
            <div id="__cvfl-coverflow-wrapper"></div>
            <div id="smallerPreview"></div>
            <div id="__cvfl-coverflow-label"></div>
        </div>
    </div>
</div>[/code]
이런 div를 html에 넣고,
[code]Coverflow.init([리스트배열], {createLabel, onSelectCenter, refill});[/code]
이런식으로 호출해주면 되네요.
저기 리스트배열에는
[{src, labelObject}] 형식으로 src는 이미지 주소를 넣고, labelObject는 선택되었을 때 넣을 데이터를 넣으면 나중에 보여줄 때 편리하게 하는 것 같습니다.
그리고, 함수정의로 createLabel은 현재위치의 coverflow의 정보를 보여주기 위한 html을 리턴하는 함수입니다.
onSelectCenter는 선택된 것 클릭했을 때 액션이고,refill은 잘 모르겠습니다-_-

여러가지 기능이 더 있는 것 같은데, 몬가 문서정리가 하나도 안되어있는 것 같습니다.

아! 주의사항!
coverflow.js파일을 상단에 임포트하려고할 때 window.addEventListener가 undefined가 나와서, 로드가 완료된 뒤 처리하도록 바꿔야해요. 휠이 먹히도록 하는 부분인 듯 한데,
728~729줄을
[code]window.onload = function(){
    두줄넣기
}
[/code]
요렇게 처리!

이걸 응용해서만든! 가수별 앨범목록!
http://mudchobo.tomeii.com/jcoverflow/


안드로이드에서도 잘 되네요. 근데, 약간 느리고, 문제가 있긴 하지만, 일단 잘됩니다(응?)...
사용자 삽입 이미지

 
Posted by 머드초보
,

[HTML5/Javascript] Python용 pywebsocket과 구글크롬을 이용한 WebSocket 연결

HTML5 2010. 6. 6. 19:45
 
HTML5에서 WebSocket이라는 것을 지원하는데, 보면 그냥 우리가 일반적으로 쓰는 TCP형태의 소켓이 아니라 http와 같이 ws라는 프로토콜을 이용해서 통신하는 것 같습니다.

일단 pywebsocket사이트입니다.
http://code.google.com/p/pywebsocket/
이곳에서 0.5버전이 있는데, 그것을 받습니다.

설치하고 삽질해보려면 python이 필요합니다.
http://www.python.org/download/
파이썬을 잘 몰라서 그런데, 왜 버전이 두개로 나눠져있죠?-_- 2.6.5랑 3.1.2로 2.x버전과 3.x버전이 나눠서 그것도 2.x대 버전이 지속적으로 업데이트를 하고 있어요... 궁금하네.
일단 저는 2.6.5를 설치했습니다.
그리고 파이썬을 path에 잡아줍니다. 어디서든 실행해야하거든요.
Windows7기준으로 제어판 -> 시스템 -> 고급시스템설정 -> 환경변수에 있는 path에 python실행 경로를 추가하면 됩니다.

설치는 readme파일에 나온 것 처럼 그냥 build하고 install하면 된다는....
python setup.py build
하면 module파일들이 생성되고,
python setup.py install
하면 파이썬에 모듈을 설치하는 듯.

아...일단 이 모듈을 아파치와 연동해서 사용하는 방법이 있구요. 혼자서 테스트하며 띄울 수 있는 방법이 있네요. 일단 그냥 테스트해볼꺼니까 standalone모드로...

src/mod_pywebsocket폴더에 가면 standalone.py파일이 있는데, 실행하면 됩니다.
python standalon.py -w ../example/
상위에 있는 example폴더를 소켓에 올리는데, 파일 네이밍으로 소켓url을 정하게 되는 것 같습니다(?).
example에 echo_wsh.py파일이 있는데, ws://localhost/echo 로 요청하면 되더라구요.
거기에 있는 echo_client.py는 뭐하는 놈인지 모르겠네요ㅠㅠ
어쨌든 이제 브라우저코드를....

[code]
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>WebSocket Echo</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <script>
            var ws;
            $(document).ready(function(){
                if ("WebSocket" in window){
                    ws = new WebSocket("ws://localhost/echo");
                    ws.onopen = function(){
                        ws.send("message to send");
                    }
                    ws.onmessage = function(e){
                        $("#result").append(e.data + "<br />");
                    }
                    ws.onclose = function(){
                        // close
                    }
                }
               
                $("#btnConfirm").click(function(){
                    if (!ws)
                        return;
                    ws.send($("#textMessage").val());
                });
                $("#textMessage").keyup(function(e){
                    if (e.keyCode == 13){
                        if (!ws)
                            return;
                        ws.send($(this).val());
                        $(this).val("");
                    }
                });
            });
        </script>
      </head>
    <body>
        <input type="text" id="textMessage" />
        <input type="button" id="btnConfirm" value="전송"/>
        <div id="result"></div>
      </body>
</html>
[/code]
쉬운 코딩은 역시 jquery...
WebSocket을 만들고, send로 보내고, onmessage이벤트로 수신받습니다. 아직 크롬에서 밖에 안됨-_-

예제 사이트도 있습니다.
http://code.google.com/p/websocket-sample/
다른 건 안보고 채팅예제만 좀 봤는데, tcp소켓처럼 하는 방식은 아니더군요.
보니까 서버에 파일을 하나 생성해서 한쪽에서 메세지를 던지면 파일에 쓰고, 다른 한쪽은 계속 그 파일을 주시하다가 변경되었으면 그걸 이용해서 연결된 쪽에 메세지를 전달하는 형태로 구현이 되어있습니다.


 
Posted by 머드초보
,

티스토리툴바