ゲームプログラミングレシピ集

マップ配列は多次元配列を使ってもいいのですが、1次元配列と2次元配列では処理の重さが段違いなのでマップを作るときは基本的に1次元配列を使用して疑似的に2次元配列ぽく使用しています。

PIXI.Graphicsであれば塗りつぶしや線の描画がファイルロードなどをせずにすぐに使えるので、仮に何かをテストで表示したいときは便利なので積極的に使っていきましょう。マップチップ描写用の基本的な処理が出来てしまえば、後はPIXI.GraphicsをPIXI.Spriteに置き換えるだけです。

今回からはWebブラウザで動かすゲームではなく、Electronを使って*ゲームを作ります。といってもElectronはGoogleChromeと同じ仕組みを採用しているのでhtmlを表示したりjavascriptが動きます。そのうちElectronについての記事もあげますが、今回はpixi.jsに焦点を当てています。Electronについては詳しくお話しませんので知りたい人はググってください。

今回は衝突判定の関数を使いまわしやすいように改良してみましょう。現状、1つの壁にしか衝突判定を設定していないので、これから用意する壁すべてに衝突判定を付けられるようにしたいので使いまわしやすいようにしましょう。

今回からジャンプ機能を一旦削除しているので、パックマンタイプの見おろし型上下左右移動が出来るタイプの衝突判定を作っていこうと思います。前回の記事では左から移動してきた時の衝突判定だけをつくっていたので、今回はおさらいも含めて左だけではなく上下と右からの衝突も作ってみましょう。

前回ゴールとぶつかったときに判定される仕組みを作ってみました。ゴールは見た目では重なり合ってしまうので判定が効いているかわかり辛かったのでjavascriptのconsole.logメソッドを使ってデバッグメッセージで確認をしてみました。今回は見た目でもぶつかっているとわかるように障害物を作ってみたいと思います。

当たり判定は矩形どうしが重なった時に判定されるものということは、前回で理解していただけたと思います。円形でも問題ないですが、円の場合は少し複雑な計算式になるので、今回は最も簡単なである矩形を使った当たり判定を解説します。

基本的に当たり判定はキャラクターの形そのものではなく、四角か円形で行われる場合が多いです。なぜかと言うと、プログラムは複雑な形をするほど処理数が増えるのでシンプルな四角や丸が一番処理が軽く最も利用されています。基本的なキャラクターの当たり判定には矩形(四角)を用いることが多いです。

pixi.js講座第四弾はスーパーマリオ風のジャンプの実装方法になります。あくまでスーパーマリオ風です。細かい調整はしていないので今回作るジャンプの仕組みは、今後自分自身への課題としてやってみるのも面白いですよ。

マリオ風ジャンプの実装は前回で一気にやりたかったのですが、思ったよりも記事が長くなってしまったので切り分けることにしました。今回はジャンプアクションゲームの要でもあるジャンプの実装について学んでいきましょう。