JavaScript
cocos2d
cocos2d-x
cocos2d-JS

Cocos2d-JS を触ってみた

More than 5 years have passed since last update.

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


Cocos2d-JS とは


  • Cocos2d-html5 と Cocos2d-x JSB(JavaScript Bindings)を合わせたものらしいです。



  • JavaScript でWEBブラウザ向けの2Dゲームが作れ、またネィティブアプリ(iOS、Android)向けに展開することもできます。


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

スクリーンショット 2014-05-05 0.45.02.png


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

手順はほぼ Cocos2d-JS GitHub に書いてある通りです。


私の環境


  • Mac OS X v10.9.2

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

$ python -V

Python 2.7.5


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


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


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

$ 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 を利用することを指定します。

-dMyGame ディレクトリを作成するディレクトリを指定します。



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

    スクリーンショット 2014-05-05 0.23.23.png




テンプレートの動作確認


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

$ cd MyGame

$ cocos run -p web



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

    スクリーンショット 2014-05-05 0.26.00.png




デモソースの作成


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

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



  • MyGame/res/ufo_96.png




  • MyGame/res/back.jpg




ソースを修正


  • 利用するリソースを定義


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




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
];



  • ロジックを書く


    • ゲーム系はあまり詳しくないですが、シーンにレイヤーを重ね、物はスプライトとして定義して動きをつけるみたいです。

    • 今回は実装していませんが、もちろんタッチイベントも取得できます。




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で作れそうな予感がします。パズドラみたいのを作ろうかな^^;


参考URL