Cocos2d-JS を触ってみた


前から気になった Cocos2d-JS を触ってみたので、セットアップ手順やソースを共有します。

# Cocos2d-JS とは

- Cocos2d-html5 と Cocos2d-x JSB（JavaScript Bindings）を合わせたものらしいです。
	- 詳しくはこちらをご覧ください。
		- Cocos2d-JS公式：http://www.cocos2d-x.org/wiki/Cocos2d-js
		- Cocos2d-JS GitHub：https://github.com/cocos2d/cocos2d-js
- JavaScript でWEBブラウザ向けの2Dゲームが作れ、またネィティブアプリ(iOS、Android)向けに展開することもできます。

# 今回つくってみたもののデモ

![スクリーンショット 2014-05-05 0.45.02.png](https://qiita-image-store.s3.amazonaws.com/0/35733/778aacc1-cb30-4924-5e03-905726116cee.png "スクリーンショット 2014-05-05 0.45.02.png")

- あまり凝ったものではありませんが、こちら。Webブラウザで動きます。
	- http://hkusu.github.io/Cocos2d-JS_demo/
	- GitHub Pages で動かしています。
- ちなみに、こちらは公式のデモです。わりとすごい。ちょっと重いかも。
	- http://www.cocos2d-x.org/MoonWarriors/index.html
	- http://www.cocos2d-x.org/html5-samples/samples/games/FruitAttack/index.html

# 開発環境のセットアップ手順

手順はほぼ [Cocos2d-JS GitHub](https://github.com/cocos2d/cocos2d-js) に書いてある通りです。

## 私の環境

- Mac OS X v10.9.2
- Python が必要ですが、Mac OS に初めから入っていたもので大丈夫でした。

```
$ python -V

Python 2.7.5
```

## Cocos2d-JS をブラウザでダウンロード

- ここから
	- http://www.cocos2d-x.org/download
	- 今回は v3.0 を選びました（まだα版）。

		![スクリーンショット 2014-05-04 23.52.10.png](https://qiita-image-store.s3.amazonaws.com/0/35733/b41ecfc4-33cd-eee1-06da-2bc2dc7efb55.png "スクリーンショット 2014-05-04 23.52.10.png")

## セットアップスクリプトを実行

- 先ほどダウンロードしたソースに含まれるセットアップスクリプトを実行します。

```
$ cd cocos2d-js-v3.0-alpha2/
$ ./setup.py
```

- Android NDK のパスやら何やら聞かれますが、今回はブラウザだけで動かせればいいので全部スキップしました^^;
	- Android向けに展開する際には必要なようです。
- これで `cocos` コマンドが使えるようになっているはずです。

## ゲームのテンプレート作成

- 任意の場所で下記コマンドを実行
	- 私は `cocos2d-js-v3.0-alpha2` があるディレクトリで実行しました。

```
$ cocos new MyGame -l js -d .
```

※ `MyGame` は任意の文字列です。この名前のディレクトリが作成されます。
※ `-l js` で JavaScript を利用することを指定します。
※ `-d` は `MyGame` ディレクトリを作成するディレクトリを指定します。

- すると次のように作成されます。

	![スクリーンショット 2014-05-05 0.23.23.png](https://qiita-image-store.s3.amazonaws.com/0/35733/b329f131-e305-955c-51d4-62669393aac3.png "スクリーンショット 2014-05-05 0.23.23.png")

## テンプレートの動作確認


- 一応、これで雛型は動かせる状態になっているので、

```
$ cd MyGame
$ cocos run -p web
```

- するとブラウザが起動します。

	![スクリーンショット 2014-05-05 0.26.00.png](https://qiita-image-store.s3.amazonaws.com/0/35733/a7ae32c4-c328-6cdf-7f1d-bffb7eb28384.png "スクリーンショット 2014-05-05 0.26.00.png")

# デモソースの作成

## 背景画像と、UFO画像を追加

本稿最後の参考URLに書いた素材サイトから取得

- `MyGame/res/ufo_96.png`

	![](https://raw.githubusercontent.com/hkusu/Cocos2d-JS_demo/gh-pages/res/ufo_96.png)

- `MyGame/res/back.jpg`

	![](https://raw.githubusercontent.com/hkusu/Cocos2d-JS_demo/gh-pages/res/back.jpg)

## ソースを修正

- 利用するリソースを定義
	- ここで定義した素材は、アプリケーション開始時にあらかじめ読み込まれる仕組みのようです。

```javascript:MyGame/src/resource.js
var res = {
    UFO_png : "res/ufo_96.png",
    Back_jpg : "res/back.jpg"
};

var g_resources = [
    //image
    res.UFO_png,
    res.Back_jpg

    //plist

    //fnt

    //tmx

    //bgm

    //effect
];
```

- ロジックを書く
	- ゲーム系はあまり詳しくないですが、シーンにレイヤーを重ね、物はスプライトとして定義して動きをつけるみたいです。
	- 今回は実装していませんが、もちろんタッチイベントも取得できます。

```javascript:MyGame/src/app.js
var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {

        // 初期化？
        this._super();

        // ウィンドウサイズを取得
        var size = cc.director.getWinSize();

        /////////////////////////////
        // 背景イメージのスプライトを作成
        /////////////////////////////
        // どうやらレイヤーの 0 が一番奥である模様
        this.back_img = cc.Sprite.create(res.Back_jpg);
        // 中心を指定する模様
        this.back_img.x = size.width / 2;
        this.back_img.y = size.height / 2;
        this.addChild(this.back_img, 0)

        /////////////////////////////
        // UFOのスプライトを作成
        /////////////////////////////
        this.ufo = cc.Sprite.create(res.UFO_png);
        this.ufo.x = 100;
        this.ufo.y = size.height /2;
        this.addChild(this.ufo, 5)

        /////////////////////////////
        // UFOの動きを定義
        /////////////////////////////
        // 1秒で右に200移動
        var act1 = cc.MoveBy.create(1, cc.p(200 , 0));
        // 0.5秒づつジクザグに
        var act2 = cc.MoveBy.create(0.5, cc.p(100 , 100));
        var act3 = cc.MoveBy.create(0.5, cc.p(100 , -200));
        var act4 = cc.MoveBy.create(0.5, cc.p(100 , 200));
        var act5 = cc.MoveBy.create(0.5, cc.p(100 , -200));
        // 回転
        var act6 = cc.RotateTo.create(0.5, 180);
        var act7 = cc.RotateTo.create(0.5, 360);
        // 0.5秒で左上に移動しながら10分の1に縮小
        var act8 = cc.Spawn.create(cc.MoveBy.create(0.5, cc.p(-600, 100)), cc.ScaleTo.create(0.5, 0.1, 0.1));

        // アクションを実行
        this.ufo.runAction(cc.Sequence.create(act1, act2, act3, act4, act5, act6, act7, act8));

        return true;
    }
});

var HelloWorldScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new HelloWorldLayer();
        this.addChild(layer);
    }
});

```

- 以上で完成です！ `$ cocos run -p web` で動作を確認してください。

# おわりに

あまり深く触っていませんが、わりと簡単に2DゲームがJavaScriptで作れそうな予感がします。パズドラみたいのを作ろうかな^^;

- デモはこちらをご覧ください。
	- http://hkusu.github.io/Cocos2d-JS_demo/
- このソースは GitHub に置いてあります。よろしければどうぞ。
	- https://github.com/hkusu/Cocos2d-JS_demo

# 参考URL

- Cocos2d-JS公式：http://www.cocos2d-x.org/wiki/Cocos2d-js
	- APIリファレンス：http://www.cocos2d-x.org/reference/html5-js/V3.0alpha2/index.html
- Cocos2d-JS GitHub:https://github.com/cocos2d/cocos2d-js

- 書籍：[Cocos2d-html5ではじめるモバイルゲーム開発 [Kindle版]](http://www.amazon.co.jp/gp/product/B00HGNIK38/)
- デモの素材(UFOと宇宙の背景)はこちらを利用させていただきました。ありがとうございます！
	- http://www.easyicon.net
	- http://jp.wallpapersus.com