====== Cocos2d-JS ======
자바스크립트를 이용하여 (2D) 게임 개발을 하기 위한 라이브러리. 이것의 C++ 버전인 Cocos2d-x가 더 유명하다. Cocos2d-JS는 Cocos2d-html5와 Cocos2d-x Javascript Binding을 포함한 버전이다. 콘솔 명령을 통해 멀티 플랫폼 개발이 가능하다.

===== 설치 =====
  - 공식홈페이지에서 다운로드
  - 안드로이드 개발환경 설정을 하는 경우 아래 항목 참고
  - {Cocos2d-JS 폴더}\tools\cocos2d-console\bin 을 환경변수에 추가
  - 콘솔에서 python setup.py 실행

===== 안드로이드 개발환경 설정 =====
Cocos2d-x의 안드로이드 개발환경 설정 부분(([[programming:cpp:cocos2d-x#안드로이드_개발환경_설정|안드로이드 개발환경 설정]]))을 참고한다.

===== 프로젝트 생성 =====
<code bash>
// Create a project contains Cocos2d-x JSB and Cocos2d-html5:
$ cocos new -l js

// Create a project contains Cocos2d-html5 only:
$ cocos new -l js --no-native

// Create a specified name project in a specified directory:
$ cocos new projectName -l js -d ./Projects
</code>

첫 번째 방법의 경우 현재 폴더 아래에 MyJSGame 폴더가 생성된다.

===== 프로젝트 실행 =====

  * 웹서버로 프로젝트 실행

<code bash>
$ cd ~/work/MyJSGame
$ cocos run -p web
</code>

  * Cocos2d-x Javascript 바인딩으로 컴파일 및 프로젝트 실행

<code bash>
$ cd ~/work/MyJSGame
$ cocos compile -p ios|android|mac
$ cocos run -p ios|android|mac
</code>

  * 유용한 옵션

<code>
-p platform : The platform can be ios|mac|android|web.
-s source   : Your project directory, if not specified the current directory will be used.
-q          : Quiet mode, remove log messages.
-m mode     : Mode debug or release, debug is default
--source-map: General source-map file. (Web platform only)
</code>

===== 유용한 IDE =====
자바스크립트 IDE 중엔 WebStorm이 가장 유용한 것 같다. (하지만 유료) 그 외에 SublimeText도 유용하다고 하는듯. WebStorm을 이용한 개발 환경 설정은 공식 홈페이지의 문서를 참고한다. 간단히 요약하면 다음과 같다.

  - WebStorm 설치
  - (위에 언급한 방법으로) Cocos2D-JS 프로젝트 생성
  - WebStorm 실행
  - File - New Project from Existing Files... 실행
  - 프로젝트 폴더 선택
  - 다이얼로그 상단의 Project Root 버튼 클릭
  - Finish

이렇게 하면 알아서 된다. 참고로 WebStorm을 이용하면 코드 작성과 디버깅이 아주 편리해진다. 사용해 보면 안다.

===== 유용한 튜토리얼 =====
현재는 공식 홈페이지의 튜토리얼이 가장 잘 되어 있는 것 같다.

  * [[http://cocos2d-x.org/docs/tutorial/framework/html5/parkour-game-with-javascript-v3.0/chapter1/en|공식 홈페이지]] (왼쪽 Tutorials의 Pakour Game with Javascript)
  * [[http://www.raywenderlich.com/tutorials|Raywenderlich]] 의 Intermediate Game Programming with Cocos2D 부분
  * [[http://www.gamefromscratch.com/page/Cocos2D-HTML-5-Tutorial-Series-table-of-contents.aspx|Cocos2D HTML 5 Tutorial Series]]

===== 해상도 정책 =====
게임 월드를 브라우저에 어떻게 보여줄지 정하는 정책이다. 기본적으로 정의되어 있는 정책은 총 5가지이다.

  * SHOW_ALL (PROPORTION_TO_FRAME + SHOW_ALL)
  * NO_BORDER (EQUAL_TO_FRAME + NO_BORDER)
  * EXACT_FIT (EQUAL_TO_FRAME + EXACT_FIT)
  * FIXED_WIDTH (EQUAL_TO_FRAME + FIXED_WIDTH)
  * FIXED_HEIGHT (EQUAL_TO_FRAME + FIXED_HEIGHT)

괄호 안의 내용은 (Container strategy + Content strategy)이다. Container strategy는 3가지, Content strategy는 5가지가 있으며 이를 자신이 원하는 방식으로 조합할 수도 있다. Container strategy란 cocos2d container와 canvas를 frame(보통 body, 쉽게 말해 브라우저 화면 전체)에 어떻게 맞출지 정하는 방법이다. Content strategy란 game world를 container에 어떻게 맞출지 정하는 방법이다. 만약 제공되는 strategy가 맘에 안들면 customizing 할 수도 있다. [[http://www.cocos2d-x.org/docs/manual/framework/html5/v2/resolution-policy-design/en|공식홈페이지]]의 도움말을 참고한다.

===== 문제 해결 =====

  * 내가 작업한 걸 웹브라우저에서 확인했더니 현재 작업 내용이 아니라 이전 작업 내용이다.

웹브라우저의 캐시 기능 때문이다. 해당 웹브라우저에서 이전 캐시를 지우거나 캐시 기능을 사용 해제한다. 웹스톰과 크롬을 이용하여 디버깅 하는 경우에는 크롬의 새로 고침 버튼을 클릭하고 있으면 캐시비우기 메뉴가 나타난다.

  * 크롬의 WebStorm 플러그인과 WebStorm이 연결되지 않는다.

간혹 WebStorm의 포트 설정이 바뀌는 경우가 있는 것 같다. WebStorm에서 어느 포트로 웹서버를 생성했는지 확인하고 크롬의 플러그인 목록에서 WebStorm의 옵션 메뉴로 들어가 포트를 변경한다.

  * 자바 업데이트 후 compile이 되지 않는다.

[[http://discuss.cocos2d-x.org/t/export-cocos2d-js-html-5-games/15270/16|여기]]를 참고한다. 요약하면 다음과 같다.

1. 환경 변수의 JAVA_HOME, PATH 부분을 jdk 1.6 or 1.7 버전 디렉토리로 변경한다.\\
2. cocos2d-js-v3.1\tools\cocos2d-console\plugins\project_compile\build_web\__init__.py 파일을 다음과 같이 수정한다.

아래의 부분을

<code python>
child = subprocess.Popen(commands, stderr=subprocess.PIPE)
</code>

아래와 같이 변경한다.

<code python>
child = subprocess.Popen(commands, stderr=subprocess.PIPE, shell=True)
</code>

===== Facebook SDK =====
3.0 버전부터 Facebook SDK가 포함된다. 만약 직접 Facebook의 자바스크립트 SDK를 사용하면 모바일 버전으로 포팅하는 경우 다시 코드를 작성해야 하나 Cocos2D JS의 SDK를 사용하면 그럴 필요가 없다. 관련 내용은 아래 링크를 참고한다.

  * [[http://www.cocos2d-x.org/docs/manual/framework/html5/facebook-sdk/api-reference/en|Facebook SDK Beta for Cocos2d-JS API Reference]]

===== Local Storage =====
안드로이드나 iOS에서 local storage를 이용하고 싶은 경우 cc.sys.localStorage를 이용하면 된다. 사용 방법은 다음과 같다.

<code javascript>
//Handle for quick access to Cocos2D's implementation of Local Storage:
var ls = cc.sys.localStorage;

var value = "foo";
var key  = "bar";

//This should save value "foo" on key "bar" on Local Storage
ls.setItem(key, value);

//This should read the content associated with key "bar" from Local Storage:
var data = ls.getItem(key);

cc.log(data); //Should output "foo" to the console.

//This should remove the contents of key "bar" from Local Storage:
ls.removeItem(key);

//This should print "null"
data = ls.getItem(key);
cc.log(data);
</code>
===== Analytics =====

===== Push =====

===== 관련 항목 =====
  * [[programming:javascript:cocos2d-js:syntax|Cocos2d-JS 문법]]
  * [[programming:javascript:cocos2d-js:tip|Cocos2d-JS 팁]]
  * [[programming:javascript:cocos2d-js:tests|Test Cases 정리]]

===== 참고 =====
  * [[http://cocos2d-x.org/|공식홈페이지]]
  * [[http://www.cocos2d-x.org/docs/manual/framework/html5/release-notes/en|Cocos2D-JS Release Notes, Change Log]]
  * [[programming:cpp:cocos2d-x|Cocos2d-x]]

**튜토리얼**
  * [[http://blogs.msdn.com/b/gamewords777/archive/2015/04/09/my-first-game-with-cocos2d-js.aspx|My first game with Cocos2D JS]]
  * [[https://www.youtube.com/channel/UCFkfibjxPzrP0e2WIa8aJCg|Cocos2D-JS로 만드는 flappy bird]]