今回つくるゲーム
難易度
今回はマリオ風ゲームの水中篇を作っていきます。基本的な作りは、マリオ風ゲームの作り方で解説した通りですが、水中を泳ぐ動きの作り方や、敵のクラゲのキビキビとした動きを作っていきます。是非マスターしてアクションゲーム作りの幅を広げてみてください。
まずは実際にゲームをプレイしてみてください。
左右矢印キー:左右移動 スペースキー:水中ジャンプ
ファイヤーについては、1秒ごとに自動で発射されるようになっています。クラゲをやっつけてゴールを目指しましょう。
マリオ風ゲームをまだ作ったことのない人はこちらから挑戦することをおススメします
はじめに
まず、以下をリミックスしてください
こちらにはゲームを作るのに必要な素材が揃っています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.34.45-1024x559.png?resize=1024%2C559&ssl=1)
ステージを作る
まずは、ステージを作っていきます。
マップチップ
横スクロールアクションゲームのステージはマップチップというテクニックを使って作成していきます。マップチップについて詳しくはこちらのブログで解説していますのであわせてご確認ください。
このゲームのマップチップは、ブロックマップというリストで用意しています。ブロックマップにチェックを入れて内容を確認してみてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.38.44.png?resize=333%2C504&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.39.00.png?resize=990%2C742&ssl=1)
ブロックのコスチュームタブを確認してみてください。岩・サンゴ・土管の3つのコスチュームが用意されていて、それぞれマップチップの1・2・3に対応しています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.37.36.png?resize=944%2C706&ssl=1)
ブロックのコード
では、マップチップの指示通りにブロックを並べていきます
ブロックのコードに移動して、以下のとおりコードを書いてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.35.31.png?resize=858%2C651&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.36.04.png?resize=858%2C399&ssl=1)
ブロックx、ブロックyの変数を作るときは、”このスプライトのみ”にチェックを入れるようにしてください。そうすることで、クローンされたそれぞれのブロックを個別にコントロールすることができます。
行・列については”すべてのスプライト用”で大丈夫です。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-18.10.23.png?resize=377%2C407&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-18.10.30.png?resize=377%2C407&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-18.10.53.png?resize=377%2C407&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-18.11.01.png?resize=377%2C407&ssl=1)
またブロック配置のブロックを作るときは以下のように”画面を再描画せずに実行する”にチェックを入れてください。これによって、ステージの読み込みが早くなります。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.39.41.png?resize=726%2C565&ssl=1)
緑の旗を押すと、以下のようにステージが表示されるはずです。まだスクロールはできませんが、画面の右側の見えていない部分にもステージが続いています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.40.37.png?resize=488%2C409&ssl=1)
プレイヤーの動きを作る
次にプレイヤーの動きを作っていきます。プレイヤーの動きを作るときは、まずターゲットで動きを作り、そこにプレイヤーを重ねていきます。詳しくは以下の記事を参考にしてください。
ターゲットの動きを作る
では、まずターゲットの動きからです。
ターゲットのスプライトに移動して、以下のようにコードを書いていきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
複雑なコードを書くときはこのように、動きごとにブロック定義をまとめていくようにしましょう。そうすることで間違えが発見しやすいのと、あとで見返しやすくなります。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.46.00.png?resize=831%2C524&ssl=1)
大枠ができればそれぞれのブロック定義を書いていきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.50.02-1.png?resize=831%2C524&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-15.50.27-1.png?resize=844%2C652&ssl=1)
あたり判定では●●色に触れるを多用しています。
色は、それぞれ以下のように対応しています。色を指定するときはスポイトツールを使います。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-19.34.02.png?resize=953%2C534&ssl=1)
実際にプレイして以下のチェックポイントを確認しましょう
・自然に落ちていって、床で止まるか ・スペースキーで水中ジャンプできるか ・左右キーで横移動できるか ・横移動した時に壁で止まるか ・水中ジャンプしたときに頭上にブロックがあると跳ね返るか ・x:50(真ん中より少し右)でスクロールするか ・スクロールしていったときにステージがきちんとできているか
プレイヤーの動きを作る
ターゲットの動きが完成すれば、プレイヤーはターゲットの上に被せていくだけです。
プレイヤーでこだわるポイントはコスチュームです。
今回は泳いでいる時と、着地した時で動きを変えます。プレイヤー(ネコ)のスプライトに移動して、以下のようにコードを書いてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.02.44.png?resize=841%2C319&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.02.55.png?resize=841%2C566&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.03.04.png?resize=841%2C473&ssl=1)
コードが書けたら、ターゲットの幽霊の効果を100にして動かしてみましょう水中で泳いでいる時の動き、地面を歩く動きを確認しましょう。
背景をスクロールさせる
では、次に背景のスクロールをしていきます。
スクロールの考え方について詳しくは以下を参考にしてください
ゲーム管理、背景1、背景2それぞれのスプライトに以下のコードを書きます
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-20.47.53.png?resize=815%2C409&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.07.30.png?resize=607%2C503&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.07.41-1.png?resize=607%2C511&ssl=1)
ここまで書けたら背景がきちんとスクロールするか確認しましょう。だんだんと完成に近づいてきました。
クラゲの動きを作る
では、次に敵となるクラゲを登場させます。クラゲやイカ特有のキビキビした動きを作っていきます。クラゲのスプライトのコスチュームを見てみると、以下のようにいろいろなコスチュームがそろっています。これらのコスチュームを順番に表示することでクラゲの動きを作っていきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.10.31.png?resize=948%2C707&ssl=1)
クラゲもブロックと同じように、マップチップを使って表示させていきます
クラゲマップというリストを作っています。0の部分はクラゲがいないところです。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.24.38.png?resize=329%2C499&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-21.05.21.png?resize=971%2C724&ssl=1)
今回、敵はクラゲだけですが、他にも敵を出現させる場合は、2以降の数字を使ったり、同じ場所に2匹以上の敵を出現させるときには、2行以上にしていきます。
では、くらげマップに従って、クラゲを配置していきます。そして、クローンされたときにクラゲの動きを書いていきます。すこし複雑ですが、いろいろな数値を変えてみて動きを確認してみましょう。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.18.07-2.png?resize=853%2C650&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.18.42-1.png?resize=853%2C642&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.20.54-1.png?resize=853%2C595&ssl=1)
ステージを作った時と同様に、くらげx、くらげyおよび横移動の変数を作るときには”このスプライトのみ”にチェックを入れるようにしましょう。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.21.25.png?resize=377%2C402&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.21.34.png?resize=377%2C402&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.22.03.png?resize=377%2C402&ssl=1)
では緑の旗を押して動きを確認しましょう
さいごの仕上げ
ではさいごの仕上げをしていきます。
プレイヤーが泡を出す
まずプレイヤーが泡を出すことで、水中にいる感じを演出します。
泡を出す間隔をランダムにすることでよりリアルにしていきます。以下の通り泡のスプライトにコードを書きましょう
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-16.28.01.png?resize=850%2C407&ssl=1)
ファイヤーを出す
つぎに、クラゲを攻撃するファイヤーを出します。何かのキーを押してファイヤーを出すようにしても良いですが、今回は1秒おきに自動的にファイヤーが出るようにします。
ファイヤーのスプライトに移動して以下のように書きます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-21.35.24-1.png?resize=780%2C598&ssl=1)
ゲームオーバーとクリア
最後にゲームオーバーとクリアを作っていきます。
ターゲットのスプライトに
クラゲに触れたらゲームオーバーを送る
黄緑色(土管の上)に触れたらクリアを送る
と既に書いているので、ゲーム管理のスプライトに以下のようにコードを書いて、ゲームオーバー、クリアを表示できるようにしましょう。また、BGMも追加しておきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-05-21.44.42-1.png?resize=824%2C598&ssl=1)
これで、すべて終了です。
実際にプレーをしてきちんと動くか確かめましょう。
すべてのコード
すべてのコードはこちらから確認できます。ステージの形を変えたり、敵の種類を増やしたりして、自分だけのゲームを作ってみてください。