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)向けに展開することもできます。
今回つくってみたもののデモ
- 詳しくはこちらをご覧ください。
- Cocos2d-JS公式:http://www.cocos2d-x.org/wiki/Cocos2d-js
- Cocos2d-JS GitHub:https://github.com/cocos2d/cocos2d-js
- あまり凝ったものではありませんが、こちら。Webブラウザで動きます。
- http://hkusu.github.io/Cocos2d-JS_demo/
- GitHub Pages で動かしています。
- ちなみに、こちらは公式のデモです。わりとすごい。ちょっと重いかも。
開発環境のセットアップ手順
手順はほぼ Cocos2d-JS GitHub に書いてある通りです。
私の環境
- 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 を選びました(まだα版)。
セットアップスクリプトを実行
- 先ほどダウンロードしたソースに含まれるセットアップスクリプトを実行します。
$ 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
ディレクトリを作成するディレクトリを指定します。
テンプレートの動作確認
- 一応、これで雛型は動かせる状態になっているので、
$ cd MyGame
$ cocos run -p web
デモソースの作成
背景画像と、UFO画像を追加
本稿最後の参考URLに書いた素材サイトから取得
ソースを修正
- 利用するリソースを定義
- ここで定義した素材は、アプリケーション開始時にあらかじめ読み込まれる仕組みのようです。
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
];
- ロジックを書く
- ゲーム系はあまり詳しくないですが、シーンにレイヤーを重ね、物はスプライトとして定義して動きをつけるみたいです。
- 今回は実装していませんが、もちろんタッチイベントも取得できます。
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で作れそうな予感がします。パズドラみたいのを作ろうかな^^;
- デモはこちらをご覧ください。
- このソースは GitHub に置いてあります。よろしければどうぞ。
参考URL
- Cocos2d-JS公式:http://www.cocos2d-x.org/wiki/Cocos2d-js
Cocos2d-JS GitHub:https://github.com/cocos2d/cocos2d-js
-
デモの素材(UFOと宇宙の背景)はこちらを利用させていただきました。ありがとうございます!
Cocos2d-JS GitHub:https://github.com/cocos2d/cocos2d-js
デモの素材(UFOと宇宙の背景)はこちらを利用させていただきました。ありがとうございます!
Author And Source
この問題について(Cocos2d-JS を触ってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/hkusu/items/54add3292d568bd7ac36著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .