ページ

2015年7月25日土曜日

cocos-2d-jsでのワのなクソゲー作っていく 1日目

おはようございます龍世(@rt1031_bot)です。



なんかcocos-2d-js触ってみようと思ってからずいぶん経ちましたが、この度どうにか英語をとソースを読んで適当な解釈を元にゲームを作って見ましたw

まずはお勉強1日目ということで1日目の成果を。

まだゲームと呼べるものではないですが、やよいちゃんが迫り来るカブトムシを食べてる人から避けるゲームです。


リンクはこちら


問題点


  • のワのの座標位置をupdate関数の方で、画面の左端まで行ったらMath.random() * size.heightにしてるのに毎回同じ位置から復活しやがる
  • ゲームオーバーになったらリロードしないともう一回できない。
  • 面白くない
クソゲーにも程があんだろ!って言いたくなるようなデキと、クソコードなので勘弁してくだせぇ!


それでは1日目に学んだことをまとめていきたいと思います。


cocos-jsの動きとか

cocosにはシーンとレイヤーという概念があるようで、シーン(タイトルシーンやメニュー、ゲームシーンにリザルトシーンとか)を作った後、そのシーンにレイヤーを重ね、そのレイヤーにキャラとかを乗せていくみたいです。

まぁレイヤーとシーンを操れるようになればもうちょちょいのちょいですよ。

っとまぁそんな感じで、まずゲームを起動させると呼ばれるmain.jsというファイルに最初に表示するシーンを指定してあげて、そのシーンの処理を書いていく感じになります。


ちなみに今回はゲームシーンと申し訳程度のリザルト画面の2シーンのみです。



覚えたコードの書き方

公式のテスト動作のソースを読んで自分で書いてみるってのが多分一番早いと思いました。APIリファレンスとかは何言ってるのか全然わからなかったですw


絶対必要なやつ


var Sample = cc.Layer.extend({

    sprite:null,
    ctor:function () {

        this._super();

ここでしょうか?

レイヤーの生成と初期化です。

そして、この中にレイヤーの処理を書いていきます。


Spriteとか

       //画面サイズを取得

       var size = cc.winSize;

       //背景を作る

       var bg = cc.Sprite.create(res.bg_png);
       bg.setPosition(cc.p(size.width/2, size.height/2));

       this.addChild(bg, 0);

        //やよいちゃんを作る

        yayoi = new cc.LabelTTF("ζ*'ヮ')ζ", "Arial", 38);

        yayoi.setPosition(cc.p(size.width/2, size.height/2));

        yayoi.setColor(cc.color(255,69,0));

        this.addChild(yayoi, 5);
こんな感じです。

varの使い方やスコープは普通のjsと多分変わらないです。

Spriteというのが画像を操るメソッドで、cc.Sprite.createで生成し、
set.Psosition(cc.p(x座標, y座標));
で位置を指定し、そのあとaddChildしています。
addChildの第二引数はz軸の高さを指定していて、0にしておけば最背面になります(マイナスは試してない)

Labelは文字のラベルを操れるメソッドで、基本的な使い方はSpriteと同じです。


のワの
this.nowanos = [];

        for (var i = 0; i < 40; i++) {

            var nowano = cc.LabelTTF.create("のワの", "Arial", 38);

            nowano.v = cc.p(-5, (Math.random() + 1) * 3); //のワのさんの速度

            nowano.setColor(cc.color(255, 0, 0)); //赤くする

            nowano.setPosition(cc.p((Math.random() + 1) * size.width, Math.random() * size.height));



            this.addChild(nowano, 10);

            this.nowanos.push(nowano);

        }

のワのはたくさん作ったので、forで作ったのを配列に格納しています。
それ以外は特の何もしてません。

また、のワのを動かす際に

this.scheduleUpdate();

と書いておくと、jsでいうupdate関数を呼べます。

最初、ここでハマりました。update関数的なのがなんて関数なのかリファレンス探してもよくわからないし、setTimeOutも使えないしでどうしたらいいのか凄い悩みましたw

そしたらグーグル先生がこれを教えてくれました。

先ほどの一文を書いたあと、

  update:function (dt) {
}

で毎フレームこいつが呼ばれます。

for (var i = 0; i < this.nowanos.length; i++) {

                var nowano = this.nowanos[i];

                var pos = nowano.getPosition();

                pos = cc.p(pos.x, pos.y);

                pos.x += nowano.v.x;

                //pos.y += nowano.v.y;


                if (pos.x < 0) pos.x = Math.random() + 1 * size.width;

                if (pos.y < 0) pos.y = Math.random() * size.height;

                if (pos.y > size.height) pos.y = 0;

                nowano.setPosition(pos);

}


そんでこれでのワのを動かしてますよと。

そこで問題が。のワのが画面の左端に行った時の処理をif文で書いてますが、ここで再びMath.random()で座標を乱数表示しているのに変わらない。ヒョエー




衝突処理


var distance = cc.pDistance(ぶつかられる物, ぶつかる物);

                if (distance < 25) {

                    ぶつかった時の処理

                  }

とまぁこんな感じ。

cc.pDistanceで第一引数と第二引数の距離を取り、if文でその距離に応じて処理を書くことで衝突処理をしています。

そしてシーンの推移は

cc.director.runScene(cc.TransitionFade.create(0.5, new 推移先のシーン名));

とまぁ、こんな感じで推移させることが可能です。



反省会会場

今回はゲームっぽさが皆無だった。まずキャラがラベルってどうよ....

次回はもうちょい動きのあるものに改造したいってのと、キャラをスプライトで動かしたいなと思いました。

あと、いきなりゲーム画面じゃなくて、タイトル画面とかも欲しいですね。
もちろんリザルト画面からリプレイできるようにもしたいっすね。

ではまた!