弾幕ゲーム第2弾:矩形のあたり判定

レーザーを追加

丸い玉だけだと寂しいのでレーザーを追加しました。動画だとレーザーの挙動が
おかしいのですが、実機では問題なし。

 

線分と点の距離

レーザーは線なので、あたり判定は「線分と円」の距離で判定できます…が。
spriteから線分の式を算出するのが面倒なので、素直にcocos2d-xに
搭載されているあたり判定のメソッドを使うことにしました…が。
 

回転に対応していない

cocos2d-xの矩形のあたり判定は回転に対応していないことが判明!
ゲーム作成用のフレームワークなのに!
FlashのhitTestのようなメソッドが有っても良さそうなのに無いようです。
しかし以下のサイトを発見。考えることが面倒になっていたので
これを利用することにしました。とても助かりました!
→参考:Cocos2d-xでCCSpriteの当たり判定
 

メモ

今回は数学をする気分ではなかったので「線分と円」のあたり判定について
は諦めましたが、速度的には「こちら」の方が早いのでメモ。
このあたり判定は「線分と円」の距離が求まれば簡単に実現できます。
考え方については以下のページが詳しいです。
→参考:円と線分から多角形と円へ
 
面倒なのはレーザーの線分を求める部分。レーザーのぼやけた部分
にはあたらないようにしたいので、線分はspriteの実体よりも短くする
必要があります。
また傾いているレーザーにも対応するため、短くした線分を回転行列に
通す必要が出てくるでしょう。
このときレーザーのspriteのアンカーポイントを「上部中央」に
すると計算式を簡単にすることができると思う。
→参考:cocos2d入門編 〜anchorPointについて〜
 
しかし私の古いiPodTOuchでも前項の方法で速度低下しなかった
ため、この方法に切り替えることは考えていません。今のところ。
 
 
 

弾幕ゲーム第2弾:エクセルで弾幕の設定

20近い引数…

一昨日の状態からさらに「これから実装しそうな弾幕」も予想して引数を用意したら
20近くの引数が必要になりました…。似たカテゴリの引数を配列にしてまとめて
みましたが、以下の様な有様です(クリックで拡大します)。
arg
あまりの引数の多さに、プログラムを書いた直後ですら把握できません。
なのでエクセルでデータ(csv)を作成し、それを読み込むようにしました。
 

csvの読込

先月のシミュレーションゲーム作成でcsvデータの読込をマスターしていたので
今回の問題はエクセルから書き出したcsvデータを読み込んで解決することに
しました(下図)。1ステージに1つのcsvファイルを対応させるようにしたので
データには母船の移動に関する引数も含めるようにしました。
セルに説明を記述しているため時間が経過しても内容を簡単に確認できると思います。
(クリックで拡大)
スクリーンショット 2014-12-20 0.34.30
 
年末が近づき微妙に学習モチベーションが下がっていますが
来週末は「レーザー攻撃」を追加したいと思います。
ちょっと下調べをしたのですが、あたり判定が思いの外面倒になりそう…。
 
 

弾幕ゲーム第2弾:継承を使おうとしたら…

弾幕のバリエーションを作った

以下の動画は現時点のサンプル。複数の弾幕砲台がありますが
すべて1種類のクラスから作成されています(引数がとても多い…)。 

 

継承について

継承という仕組みはjavaScriptにも存在し、オブジェクトの共通部分を
効率よく作成する仕組みです。たとえば弾幕を出す砲台であれば、
「被弾するとダメージを受けて、ライフが0で消滅する」という部分は
共通で作成し、弾幕の種類は「それに上乗せする」形で作成します。
継承という言葉を利用して言葉を直すと、
「すべての弾幕砲台は前述の機能を継承する」という感じです。
 
ちなみにcocos2d-xでの継承は以下の様に記述します。
※現在作成しているゲームの弾クラスでspriteを継承しています。
keisyou
これはActionScript3.0の継承と似たような構文です。
→参考:ActionScript 3なら継承&実装で大規模開発もできる
ちなみにjavaScriptはActionScript1.0/2.0と同じようにprototype
を利用します。→参考:JavaScript初級者から中級者になろう
 

しかし継承は使いませんでした…

初めは、一定間隔で弾を連射する「マシンガン」と複数の弾を同時に発射
する「ショットガン」を作成しようとしたのですが、そうすると
「複数の弾を一定間隔で連射する」場合はどうしたら良いの?となった
わけです。「マシンガン」を継承して「ショットガン」を足すのかな?
しかし「何となく効率が悪いような気がして」結局は引数を利用して
色々な弾幕を生成できるようにしました。継承は使わずじまいです…。
 
その結果、現時点で引数が10を越えており管理しにくくなってきたので
エクセルのcsvを読み込む形に変更中。次回説明しようと思います。
 
 
 

弾幕ゲーム第2弾:時間差で砲台を稼働

時間差で砲台を稼働

普通の弾幕ゲームは一定のダメージを負う毎に攻撃が変化し、徐々に難しくなっていきます。
しかし私が作成しているゲームの仕様だと、砲台をたくさん配置しているため、
最初は鬼のような攻撃となり、砲台が破壊される毎に弱くなってしまいます。
 
これではゲームの流れとして良くないので、対策を考えてみました。動画では4つの砲台が
有りますが中心の砲台はゲージが青くなっていて攻撃をしません。
青いゲージは徐々に短くなり、青ゲージが無くなると攻撃を開始します。
つまり時間差で攻撃を開始するようになっています。
 
また青いゲージの砲台にダメージを与えるとゲージのが減り、攻撃までの時間が
短くなります。一度に攻撃されるのは不利なため、待機中の砲台にはダメージを
与えないようにするという戦略が有効になったりもします。

 
 

敵のバリエーション

今回のアプリでは敵の種類を沢山用意しようと思います。
1943がモチーフなので艦艇のクラスでカテゴリを分ける予定です。
 
駆逐艦ステージ:
搭載している砲台は少ないが移動量が大きい。youtubeのサンプルは駆逐艦タイプ。
 
戦艦ステージ:
巨大な船体と大火力な砲台だけど移動量はほとんど無い。惑星攻略用の艦のため
プレイヤーのような小型機には弱い。噛ませ犬的なステージ?
 
巡洋艦ステージ:
駆逐艦と戦艦の間のクラス。そこそこ大きくて、そこそこ移動する。
 
空母ステージ:
小型機をたくさん排出する艦艇。プレイヤーのような小型機の天敵で、難関な
ステージが多くなる予定。
 
 

来週の予定

現在は前面に弾を出す砲台だけですが、たくさんのバリエーションを作成して
いこうと思います。弾の大きさも複数用意する予定。

弾幕ゲーム第2弾:作業開始

自機の操作

前回の操作方法は、私の小さいiPodTouchでも自機が指に隠れないような操作方法を
模索して完成させたのですが、大きい画面では親指が届かず帰って操作しにくくなり
また、左右方向の操作がジェットのON/OFFという状態になってしまいました。
ということで、今回はより一般的なスワイプして操作するものに変更します。
この方法はマルチタップの必要がないので簡単に実現できました。
※今回はタテのレイアウトで作成しますが、動画は都合上ヨコに傾けました。
 
→参考:Youtube:ダライアス(スマホ版)の操作
 

1942(ゲーム)のボス戦がモチーフ

今回の動画では破壊対象が3つありますが、これはあとで「砲台」に置き換わる予定です。
色々なゲーム機に移植された名作「1942」の砲台がたくさん搭載されたボス戦が個人的に
すきなので(あとダライアスのボス戦も好きです)モチーフにしたいと思います。
沢山の砲台をプチプチと破壊していくのは楽しそうだと思うのです。
 
Youtubeで動画を探したらカプコンではない1942が見つかった…
こんなハイクオリティとは張り合うつもりはなく、シンプルな幾何学的なデザインに
する予定です。