Cocos2d-JSでhelloworld


JSでWebゲームが作れるCocos2d-JS(ver3.2)でHelloworldまで作ってみる。

## 実行環境

| | version |
|:---:|:---:|
| OS | OSX-Yosemite 10.10.1 |
| Shell | zsh 5.0.5 (x86_64-apple-darwin14.0) |
| Cocos2d-JS | 3.2 |

--
# 環境構築
## ダウンロード

公式サイトからFullバージョンをダウンロード
 http://www.cocos2d-x.org/download

![Download_Cocos2d-x_Cocos2d-html5_Cocos_Studio___Cocos2d-x.png](https://qiita-image-store.s3.amazonaws.com/0/18700/08f23f50-419e-d3e0-7f16-ff716a95333d.png "Download_Cocos2d-x_Cocos2d-html5_Cocos_Studio___Cocos2d-x.png")


任意の場所に解凍しておく。今回はホームディレクトリ（~/)。

## とりあえず動かしてみる。

解凍したディレクトリ直下にてpythonのSimpleHTTPServerを起動。

```
[masato@mba-18] $ cd ~/cocos2d-js-v3.2
[masato@mba-18] $ python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...
```

ブラウザで 'http://localhost:8000/js-tests/' にアクセスすればサンプルが表示される。

## セットアップ

README.md に記載されている通り、`./setup.py` を実行。
途中で各種パス(NDK_ROOT,ANDROID_SDK_ROOT,ANT_ROOT)を聞かれるが、何も入れていないのでとりあえずすべてEnterでスキップする。

```
[masato@mba-18] $ ./setup.py

Setting up cocos2d-x...

...

A backup file "~/.bash_profile.backup" is created for "~/.bash_profile".

Please execute command: "source ~/.bash_profile" to make added system variables take effect
```

.bash_profileを書き換えているようだ。
差分を見るとPATHを追加している模様。

```
[masato@mba-18] $ diff ~/.bash_profile.backup ~/.bash_profile
1a2,5
>
> # Add environment variable COCOS_CONSOLE_ROOT for cocos2d-x
> export COCOS_CONSOLE_ROOT=~/cocos2d-js-v3.2/tools/cocos2d-console/bin
> export PATH=$COCOS_CONSOLE_ROOT:$PATH
[masato@mba-18] $
```

zshを使っているので、.bash_profileを再読み込みしても反映されない。自分でexportコマンドを打つ。

```
[masato@mba-18] $ which cocos
cocos not found
[masato@mba-18] $ export COCOS_CONSOLE_ROOT=/Users/masato/cocos2d-js-v3.2/tools/cocos2d-console/bin
[masato@mba-18] $ export PATH=$COCOS_CONSOLE_ROOT:$PATH
[masato@mba-18] $ which cocos
/Users/masato/cocos2d-js-v3.2/tools/cocos2d-console/bin/cocos
[masato@mba-18] $
```

cocosコマンドが使えるようになった。

## HelloWorldの作成
ゲームの雛形を作成する。今回は~/dev/Cocos2dJS以下に作成。

```
[masato@mba-18] $ cocos new HelloWorld -l js -d ~/dev/Cocos2dJS
Running command: new
> Copy template into ~/dev/Cocos2dJS/HelloWorld
> Copying cocos2d-html5 files...
> Copying files from cocos root directory...
> Copying files from template directory...
> Copying directory from cocos root directory...
> Copying cocos2d-x files...
> Rename project name from 'HelloJavascript' to 'HelloWorld'
> Replace the project name from 'HelloJavascript' to 'HelloWorld'
> Replace the project package name from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.HelloWorld'
> Replace the mac bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.HelloWorld'
> Replace the ios bundle id from 'org.cocos2dx.hellojavascript' to 'org.cocos2dx.HelloWorld'
```

`/dev/Cocos2dJS`以下に`HelloWorld`ディレクトリができた。
このディレクトリがゲームの雛形になる。

## 動かしてみる。

作成されたディレクトリで `cocos run`コマンドを打つとブラウザが立ち上がってゲームが起動する。

```
[masato@mba-18] $ cd ~/dev/Cocos2dJS/HelloWorld
[masato@mba-18] $ cocos run -p web
```

![Cocos2d-html5_Hello_World_test.png](https://qiita-image-store.s3.amazonaws.com/0/18700/26616afb-4fd1-042d-e869-c7b319fb2c79.png "Cocos2d-html5_Hello_World_test.png")

## 構成

完成したHelloWorldのディレクトリ構成はこんなかんじ。

```
[masato@mba-18] $ tree -L 2 ~/dev/Cocos2dJS/HelloWorld
~/dev/Cocos2dJS/HelloWorld
├── CMakeLists.txt
├── frameworks
│   ├── cocos2d-html5
│   ├── js-bindings
│   └── runtime-src
├── index.html
├── main.js
├── project.json
├── res
│   ├── CloseNormal.png
│   ├── CloseSelected.png
│   ├── HelloWorld.png
│   └── favicon.ico
├── src
│   ├── app.js
│   └── resource.js
└── tools
    ├── bindings-generator
    └── tojs

9 directories, 10 files
```


index.html で main.js を読み込んでいる。

```index.htmlL25
...
25 <script src="main.js"></script>
...
```

main.js で HelloWorldSceneを読み込んでる。

```main.jsL55
 55     cc.LoaderScene.preload(g_resources, function () {
 56         cc.director.runScene(new HelloWorldScene());
 57     }, this);
```

HelloWorldSceneはsrc/app.jsで宣言されてる。

```src/app.jsL71
 71 var HelloWorldScene = cc.Scene.extend({
 72     onEnter:function () {
 73         this._super();
 74         var layer = new HelloWorldLayer();
 75         this.addChild(layer);
 76     }
```

app.jsで表示されている内容を制御している模様。

## ちょっと変えてみる。

app.jsの中でHelloWorldのLabelTTFを作ってる。ここを変えてみる。

```diff
diff --git a/src/app.js b/src/app.js
index 8df4e42..835c2fc 100644
--- a/src/app.js
+++ b/src/app.js
@@ -35,7 +35,7 @@ var HelloWorldLayer = cc.Layer.extend({
         // 3. add your codes below...
         // add a label shows "Hello World"
         // create and initialize a label
-        var helloLabel = new cc.LabelTTF("Hello World", "Arial", 38);
+        var helloLabel = new cc.LabelTTF("Hello Cocos2d-JS", "Arial", 38);
         // position the label on the center of the screen
         helloLabel.x = size.width / 2;
         helloLabel.y = 0;
```


![Cocos2d-html5_Hello_World_test.png](https://qiita-image-store.s3.amazonaws.com/0/18700/8b00c389-2955-f21b-0215-86404ac25c0b.png "Cocos2d-html5_Hello_World_test.png")
　

変わった！