ボンバーマン制作日記1~マップの生成から爆発まで

この間から新しいゲームを作り始めました。

作るゲームは今は亡きハドソンの名作「ボンバーマン」です。

どうしてボンバーマンにしたかというと自作ゲームエンジンのタイルマップとスプライトのテストとしてトップビューのアクションゲームを作りたかったというのがあります。そのためにはレトロゲームのコピーが一番やりやすいし楽しいです。

ということでとりあえず今日までの進捗を書いておきます。

マップの当たり判定の肝を作る

まず今回トップビューのゲームを作るにあたって絶対に作らないといけないものがありました。

それがこのツイートで紹介している当たり判定です。

このツイートのGIFのようにトップビューのゲームではキャラクターが角をスルッと滑るように動くように作っておく必要があります。

これが無いと角で引っかかって操作性が悪くてイライラしてゲームが台無しになります。

どうやって作るのかちょっと悩みましたが何度か試行錯誤してるうちに「そうか!」と分かったのでできました。

やり方が分かってしまえばそんなに難しいものではなかったです。中学校数学でできます。

気になる方は解説記事をどうぞ ▷ 記事を見る

マップの生成

今回はステージが進むごとにマップが広くなっていく予定です。それと破壊可能ブロックの位置はランダムで毎回変わるようにします。

ということでプログラムでマップを作るようにしなくてはいけない。

なのでまずボンバーマンのマップがどんなんだったかを調べました。

ボンバーマンのマップはまず周囲を破壊不能ブロックで囲んであります。そして一つ飛びに破壊不能ブロックが並んでいます。

そして空いているところにランダムに破壊可能ブロックを置いていくだけ。大して難しくない。

後はプレイヤーの場所だけは必ず空いているようにしておけばOKです。

それで出来上がったのがこれです。

ゲームは爆発だ!

ここからいよいよボンバーマンの最重要部分である爆弾についてのプログラムに取り掛かります。

まずは爆弾の設置。これはプレイヤーキャラのタイルマップ上の位置におけばOKなので難しくない。

一定時間後に爆発するようにしてここで爆発用スプライトを作るようにしようと思ったら問題発生!!

自作ゲームエンジンでは各オブジェクトを毎フレーム更新処理を行えるようにするにはシーンのregisterUpdatingObjectに登録しないといけないんですが、これだと他のクラス内から行うことができません。なんてこった(´Д`)

やむなくマップクラスに同じ機能をつけてとりあえず対処したわけですが、今後のことを考えるとpixi.jsの表示に関するクラスはすべてregisterUpdatingObjectメソッドを持っておいた方が良いのかもしれない。ということでこれは今後修正する予定です。

で、爆発のアニメーションを作ってみたんですがなんか違う(^^;)

原因は一マスずつアニメーションのタイミングで追加していくようにしていたからです。これはこれで良いような気もするんですけどね(^^;)

なので爆発時にすべての爆発用のスプライトを表示するように変更しました。

で、その際に破壊可能ブロックがある位置ではブロックを燃えるアニメーションに切り替えるようにしました。

というのが現在の状況です。

これから

これから敵キャラやアイテムなんかを追加していきます。

そしてステージ進行ができれば完成だと思います。

目標はファミコン版ボンバーマンなので数日以内にはできそうに思ってます(‘ω’)ノ

どのゲームで遊ぶ?

マリオ風横スクロールアクションゲーム。地下から制限時間内に脱出しろ!
enchant.jsでこんなのもできるのか?と試したテストゲーム。
クッソしょうもないあほげー。ある温泉街で殺人事件がおきた。どうやら犯人はこの中にいるようだ。
マリオ風アクション。敵を撃ち落としてコインを集めるげーむ。

コメント欄

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

ゲームタグ一覧

ゲーム開発書籍(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発