はじめまして、vitaminです。初めて社内ブログの記事を書きます！

今回は、Cocos2d-jsでブラウザゲームを開発する方法について書きたいと思います。
現在開発中のシステムでCocos2d-jsを使っており、結構簡単に出来そうだったので、やってみようと思いました。

Cocos2d-jsとは

Cocos2d-jsは、Cocos2d-xというゲームエンジンのJavascriptバージョンです。
ブラウザ、Android、iOSに対応したゲームを簡単に作成できるようです。今回は、ブラウザゲームを作ってみます。

動作環境

Ubuntu14.04
Cocos2d-x v3.0
(Python2.7.6) ※ Linuxならデフォルトで入っていると思います

Cocos2d-jsの導入

まず、公式のダウンロードページからCocos2d-xのv3.0のzipファイルをダウンロードします。
次に、ダウンロードしたzipファイルを展開します
展開したディレクトリ内に移動し、setup.pyを実行します

$> wget wget http://www.cocos2d-x.org/filedown/cocos2d-x-3.10.zip
$> unzip cocos2d-x-3.10.zip -d cocos2d-x-3.10.zip
$> cocos2d-x-3.10
$> ./setup.py

cocos helpでcocosのヘルプが出れば完了です。

Cocosプロジェクトの作成と動作確認

適当なディレクトリに移動し、以下のコマンドを実行します

$> cocos new NewGame -l js -d .

NewGameは適当なゲーム名で実行してください。すると、NewGameという新しいプロジェクトディレクトリが作成されていると思います。次に、Cocos2dを起動します。

$> cocos run -p web --host 0.0.0.0 --port 3000

ブラウザから、http://<サーバのIPアドレス>:3000 にアクセスすると、Hello Worldのサンプル画面が表示されると思います。 f:id:viatmin:20160316170942p:plain

Cocosプロジェクトのディレクトリ構造

プロジェクトのディレクトリ構造は以下のようになっています。
今回関係ある部分だけ抜粋しています。

NewGame/
 ├ index.html
 ├ main.js
 ├ project.json
 ├ res/
 │ ├ HelloWorld.png
 │ └ loading.js
 └ src/
     ├ app.js
     └ resource.js

project.json : プロジェクトの設定が記述されているファイル。特に、自作のjsなどを追加するときに編集する。
index.html : 大元のhtmlファイル。ここでmain.jsを読み込んでいる
main.js : ゲームを動作させるjsファイル。
res/ : 利用するリソースファイルを格納する。画像とか
src/ : 自作のゲームのシーンなどを作成して格納する。app.jsは初期のHello Worldが格納されている。

作成するゲーム

今回は、イルカが表示され、クリックしたところにイルカが寄ってくるという簡単なゲームを作成したいと思います。サンプル画像はこんな感じです。 f:id:viatmin:20160316200855p:plain

画像の追加

適当に良さそうなイルカの画像をres/ディレクトリに配置します。
今回はここからお借りしました。
イルカ01のイラスト｜かわいいフリー素材、無料イラスト｜素材のプチッチ
そして、src/resource.js に画像のパスを追加します。

var res = {
  HelloWorld_png : "res/HelloWorld.png",
  Dolphin_png : "res/dolphin.png",
};

ゲームのシーンの作成

Cocosでは(おそらくゲーム全般?)、まずゲームのScene(シーン)を作成します。
Sceneには、複数のLayerがあり、Layerの上には複数のオブジェクトであるSpriteが配置されます。
この辺の説明がわかりやすいと思います。 [cocos2dx] Sceneを作成する | studycocos2dx

自作のシーンを作成するため、src/dolphin.js というファイルを作成します。
project.json と main.js も忘れずに変更します。

src/dolphin.js

// レイヤの定義
var DolphinLayer = cc.Layer.extend({
    sprite:null,
    // レイヤのコンストラクタ
    ctor:function () {
        this._super();
        var size = cc.winSize;

        // イルカのスプライトを追加
        this.dolphin = new cc.Sprite(res.Dolphin_png);
        // スプライトの位置を中心に設定
        this.dolphin.attr({
            x: size.width / 2,
            y: size.height / 2
        });
        // レイヤにスプライトを配置
        this.addChild(this.dolphin, 0);

        return true;
    }
});

// シーンの定義
var DolphinScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        // 背景のレイヤを追加
        var backgroundLayer = new cc.LayerColor(cc.color(170, 202, 222, 255));
        this.addChild(backgroundLayer);
        //DolphinLayerのインスタンスを追加
        var dolphinLayer = new DolphinLayer();
        this.addChild(dolphinLayer);
    }
});

project.json

...
    "jsList" : [
        "src/resource.js",
        "src/app.js",
        "src/dolphin.js"
    ]

main.js(72行目あたり)

    cc.LoaderScene.preload(g_resources, function () {
        // 動作させるシーンを変更
        //cc.director.runScene(new HelloWorldScene());
        cc.director.runScene(new DolphinScene());
    }, this);

これで、以下のようにイルカの画像が表示されるようになったと思います。
f:id:viatmin:20160316190519p:plain

イベントの追加

次は、クリックするとイルカが動くという動作を追加したいと思います。
DolphinLayerのctorに以下のコードを追加します。

        var that = this;
        // EventManaerの追加
        cc.eventManager.addListener({
            // マウスイベントの登録
            event: cc.EventListener.MOUSE,
            // イベント関数の追加
            onMouseDown: function(e) {
                // イルカのスプライトのアニメーションを実行
                that.dolphin.runAction(
                    cc.Sequence.create(
                        // 1秒で、クリックされた座標まで移動
                        cc.MoveTo.create(1, cc.p(e.getLocationX(), e.getLocationY()))
                    )
                )
            }
        }, this);

これで完成です！！
f:id:viatmin:20160316204504g:plain