Cocos2d-x / Cocos2d-JS のインストール〜起動まで

#はじめに
既出と思いますが、勉強会用の導入ドキュメントとして。
Cocos2d-x / Cocos2d-JS のインストールから起動までを記載します。

#"Code once, run everywhere”

本家サイトに行くと
Cocos2d-xとCocos2d-JSという２タイプのフレームワークが存在しています。

![cocos_info.png](https://qiita-image-store.s3.amazonaws.com/0/43766/db10582e-9dc8-6a47-87b4-8eb4fec99569.png)

Webゲームを作りたい場合はCocos2d-JS一択。
アプリのみを作りたい場合はCocos2d-xと、Cocos2d-JS両方の選択肢があり、
開発言語がC++を選択したい場合はCocos2d-x,JavaScriptを選択したい場合はCocos2d-JSを選択することになります。

それぞれのインストール方法と起動までを記載します。

#Cocos2d-JSの場合

##Cocos2d-JS v3.0 RC2をDLする
http://www.cocos2d-x.org/download

##DLされたdirへ
>cd cocos2d-js-v3.0-rc2/

##セットアップする
>./setup.py
>source ~/.bash_profile

##新規ゲームdirの作成(カレント下のworkspaceに作る例)
>mkdir /Users/ユーザー名/workspace
>cd /Users/ユーザー名/workspace
>cocos new Cocos2dJSv3SampleGame -p com.your_company.mygame -l js -d /Users/ユーザー名/workspace

##Webゲームの起動
>cd /Users/ユーザー名/workspace/Cocos2dJSv3SampleGame/
>cocos run -p web
(ここでブラウザが勝手に開く。開かなければ http://127.0.0.1:8000/ )

##Webゲームのコンパイル方法
>cocos compile -p web -m release

publish/html5に書き出される.

	「No valid JDK installed.」
	JDKのインストールが必要
	http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html	
	
	「ANT_ROOT not defined. Please define it in your environment」
	が出る場合はANT_ROOTを設定すること！

	#ANTのダウンロード
	cd tmp
	sudo curl -O http://ftp.kddilabs.jp/infosystems/apache/ant/binaries/apache-ant-1.10.1-bin.tar.gz

	#解凍
	tar zxvf  apache-ant-1.10.1-bin.tar.gz

	#/user/binに移動
	sudo mv apache-ant-1.10.1 /usr/bin/

	#bash_profileを編集
	cd
	vim .bash_profile
	//-----------------------
	ANT_ROOT=/usr/bin/
	ANT_HOME=/usr/bin/apache-ant-1.9.4
	PATH=$ANT_HOME/bin:$PATH
	PATH=$ANT_ROOT/bin:$PATH
	//-----------------------

	#PATHを反映
	source ~/.bash_profile

	または.....

	$brew install ant.
	
	//-----------------------
	export ANT_ROOT=/usr/local/bin/
	export ANT_HOME=/usr/local/bin/ant/
	export PATH=$ANT_HOME/bin:$PATH
	export PATH=$ANT_ROOT/bin:$PATH
	//-----------------------
	

##XCodeで開いて実行
frameworks->runtime-src->proj.ios_mac->MyGame.xcodeproj
をダブルクリック
XCodeのシュミレーターの実行を行うと起動される
![スクリーンショット 2014-08-14 10.18.06.png](https://qiita-image-store.s3.amazonaws.com/0/43766/9ab62399-4b76-3e46-8af5-6679230b8684.png)
![スクリーンショット 2014-08-14 10.19.23.png](https://qiita-image-store.s3.amazonaws.com/0/43766/60c6ff31-8801-b318-ea43-9f244d239fea.png)
![スクリーンショット 2014-08-14 10.19.39.png](https://qiita-image-store.s3.amazonaws.com/0/43766/52018681-3437-b877-9a5c-d7efd2896f86.png)
![スクリーンショット 2014-08-14 10.25.54.png](https://qiita-image-store.s3.amazonaws.com/0/43766/0f4b6da1-bb56-07d6-98a7-973c5a600576.png)


##設定ファイルの編集

###画面サイズの設定
>main.js
>cc.view.setDesignResolutionSize(320, 480, >cc.ResolutionPolicy.SHOW_ALL);

###FPSやデバッグ表示有無の設定
>project.json
>"showFPS" : true,
>"frameRate" : 30,

###新規ファイルの追加
>project.json
>    "jsList" : [
>        "src/resource.js",
>        "src/app.js"
>    ]


#Cocos2d-Xの場合

##Cocos2d-x-3.2をDLする
http://www.cocos2d-x.org/download

##DLされたdirへ
>cd cocos2d-x-3.2/

##セットアップする
>./setup.py
>source ~/.bash_profile

##新規ゲームdirの作成(カレント下のworkspaceに作る例)
>mkdir /Users/ユーザー名/workspace
>cd /Users/ユーザー名/workspace
>cocos new Cocos2dXv3.2SampleGame -p com.your_company.mygame -l cpp -d /Users/ユーザー名/workspace

##XCodeで開いて実行
proj.ios_mac->MyGame.xcodeproj
をダブルクリック
XCodeのシュミレーターの実行を行うと起動される
![スクリーンショット 2014-08-14 10.30.59.png](https://qiita-image-store.s3.amazonaws.com/0/43766/903f61b2-58c5-e9ee-1614-3fd73adcc0df.png)
![スクリーンショット 2014-08-14 10.31.21.png](https://qiita-image-store.s3.amazonaws.com/0/43766/f9a2310b-6e16-3249-459d-4ce3424e47fd.png)
![スクリーンショット 2014-08-14 10.36.05.png](https://qiita-image-store.s3.amazonaws.com/0/43766/25d357d2-7215-878d-86f7-e0265bf1a5a8.png)

#おしまい
v2系のときは、アプリとWebでそれぞれ起動スクリプトやパスが異なっていたのですが、v3系でこのようにまとめてみるとどちらを使っても起動までの手順がほぼ変わらず、とても分かりやすくなっているなぁという印象をあらためて感じました^^


#Cocos2d-JS/Cocos2d-xでライブラリをsubmodule化する
	#Cocos2d-JSの場合-------------------------------------------------

	#frameworksを削除
	rm -rf frameworks/

	#gitを初期化
	git init

	#サブモジュールとしてcocos2dを加える
	git submodule add https://github.com/cocos2d/cocos2d-js.git cocos2d

	#3.0betaに切り替える
	cd cocos2d
	git checkout cocos2d-x-3.0beta

	#cocos2d/frameworksをシンボリックリンクとして張る
	ln -s ./cocos2d/frameworks/ frameworks

	#submodule updateする
	git submodule update --init --recursive


	#Cocos2d-xの場合-------------------------------------------------

	#frameworksを削除
	rm -rf cocos2d/

	#gitを初期化
	git init

	#サブモジュールとしてcocos2dを加える
	git submodule add http://github.com/cocos2d/cocos2d-x.git cocos2d

	#3.0betaに切り替える
	cd cocos2d
	git checkout cocos2d-x-3.0beta

	#submodule updateする
	git submodule update --init --recursive