今回つくるゲーム
難易度
今回はスクラッチでマリオ風ゲームを作っていきます。プレイヤーが横スクロールをしながら、ジャンプしてコインを取ったり、敵を倒したりします。エッセンスを凝縮しながらしっかりと学習できるようにかなり簡略化した内容にしています。これができるようになれば、自分だけの横スクロールアクションゲームを作るようになれますので、是非挑戦してください。
まずは実際にゲームをプレイしてみてください。左右の矢印キーで移動、スペースキーでジャンプです。
こちらの動画を見てから記事を読むことをお勧めします。チャンネル登録もよろしくお願いします!
はじめに
まず、以下をリミックスしてください
こちらにはゲームを作るのに必要な素材が揃っています
作業をしやすいように、まず全てのスプライトを非表示に設定してください。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-16-23.19.54-1024x563.png?resize=1024%2C563&ssl=1)
マップ(面)を作る
まず、マップを作ります。横長のマップ(面)をどのように作るかをまずは設計し、それをプログラムに落とし込んでいきます。ゲーム用マップの作り方については以下の記事で詳しく記載していますので参考にしてください。
どのようなマップにするか計画する
今回は以下のようなマップを作ります。今後自分でゲームを作るときは、どのようなマップにするのか考えながらまずエクセルでこのようなシートを作ってみるのが良いと思います。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-16-23.38.04-1024x302.png?resize=1024%2C302&ssl=1)
ここでは
1:ブロック 2:ハテナ 3:土管 4:旗
のように対応されます。
ブロックのスプライトを見ると、以下のようにコスチュームが揃っています。それぞれのコスチュームが対応する番号に配置されるとイメージしてください。(5番目の「から」のコスチュームはハテナを叩いてコインをゲットした後に表示されるものです。)
ブロックのコスチュームの作り方はこちらを参考にしてください。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-14.28.34.png?resize=947%2C707&ssl=1)
マップチップ(リスト)を作る
マップができたらそれをリストにしていきますが、リミックスの中にすでにリストは作成されています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-16-23.40.07-1024x559.png?resize=704%2C383&ssl=1)
マップを拡大するとこのようになります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-16-23.40.30.png?resize=713%2C695&ssl=1)
詳しくはこちらで解説していますが、エクセルで作ったマップ通りに数字を並べたものになりますので直感的に理解しやすいかと思います。
ブロックを表示させる
ではここからプログラムを組んでブロックを表示させていきます。
プログラムは以下の通りとなりますが、詳しい解説はこちらを参考にしててください。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
ブロックx・ブロックyの変数を設定するときに「このスプライトのみ」にチェックを入れることがとても大切です!
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-16-23.43.52.png?resize=830%2C609&ssl=1)
これで緑の旗を押してください。以下のようにマップが出現するはずです。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-16-23.44.25.png?resize=490%2C409&ssl=1)
スクロールしたときにきちんとマッピングされているかはこの時点ではわかりませんので、次にプレイヤーの動きを作っていきます。
プレイヤーの動きをつくる
ここではプレイヤーのネコが左右に動いたりジャンプしたりできるようにしていきますが、こちらも以下の記事に詳しく解説していますのであわせてご確認ください。
ターゲットの動きを作る
上記記事でも解説している通り、プレイヤー(ネコ)のスプライトに直接コードを書くのではなく、少しスリムに設計されたターゲットで動きをつくり、プレイヤーはそのターゲットを追従します。
ターゲットのコードの全貌は以下になります。コードの詳しい説明はこちらをご確認ください
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-16-23.58.09.png?resize=812%2C613&ssl=1)
以下の動画のようにターゲットがマップの中を動けるようになるはずです。動きを確認するとともに、マップが最後まできちんと描けているかも確認するようにしましょう。
プレイヤー(ネコ)の動きを作る
次にプレイヤーの動きを作っていきます。プレイヤーのスプライトに以下のようにコードを書いていきます。コードに関する詳しい解説はこちらをご確認ください。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-16-23.53.34.png?resize=839%2C569&ssl=1)
あわせて、先ほど作成したターゲットの幽霊の効果を100にすることで、以下のようにネコがマップ内をかけまわれるようになります。
ハテナを叩いてコインをゲットする
次にハテナのブロックを叩いてコインをゲットできるようにします。まず、ブロックにあたると「たたく」という判定されるようにします。ターゲットの「天井」の定義がそれにあたりますので、以下のようにコードを追加します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-16-23.58.32.png?resize=367%2C213&ssl=1)
たたくのメッセージを受け取ったときに、それがハテナのブロックかどうか判定しなければなりません。叩いたときのターゲットの位置(座標)を基準として、下記の範囲内のブロックがハテナかどうかを判定していきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-15.23.43.png?resize=947%2C538&ssl=1)
以下のコードをブロックのコードに追加していきます。叩くを受け取ったときに、叩かれたブロック(プレイヤーの上部のブロック)がハテナであれば、コスチュームをからにして、コインゲットを送ります。そしてコインが表示される位置を、ハテナブロックの上部に定義(コインx、コインy)します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.00.34.png?resize=819%2C462&ssl=1)
続いて、コインのスプライトに移動し、以下の通りプログラムを書きます。
コインゲットを受け取ったときにハテナの上部にコインを表示させて少しだけ上に飛んで消えます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.02.00.png?resize=819%2C353&ssl=1)
以下のようにハテナブロックをたたくとコインが出てきて、ブロックがからになれば成功です。
敵の動きをつくる
敵を表示させる
次に敵を表示させます。今回は、スクラッチのデフォルトキャラクターであるカニ(Crab)を的に設定しています。このカニが土管の間を往復するような動きを作ってみます。
コードは以下の通りとなります。
敵は2体作りたいので、クローンを2回作成し、それぞれに敵IDを振ります。
それぞれの敵IDに対して初期位置(敵x、敵y)・移動速度を設定します。
敵x、敵y、移動速度の変数については敵ごと(クローンごと)で値が異なるので、変数を作るときに”このスプライトのみ”にチェックを入れるようにしてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.16.49.png?resize=853%2C605&ssl=1)
このままでは、カニが土管をすり抜けてしまうので、土管に触れたら反転するように指示を追加します。触れた時の色は土管の縁の色を抜き取ります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.17.18.png?resize=853%2C640&ssl=1)
以下の動画のようにカニが土管の間を行ったり来たりできれば成功です。
敵を踏みつける
プレイヤーは敵に当たるとゲームオーバーになりますが、踏みつけると敵をやっつけられます。
敵に触れるという意味では同じですが、踏みつけたのか、当たったのかは、「ジャンプの勢い」で判定していきます。歩いているときはジャンプの勢いは−1ですので、ジャンプの勢いが−1のときはゲームオーバーで、それ以外の時は踏みつけたと判定して敵を消します。このコードは敵(カニ)のスプライトに書いていきます。
以下のように敵の動きのブロック定義の中に、プレイヤーに触れた時の挙動を追加します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.21.27.png?resize=655%2C600&ssl=1)
ゲームオーバーを設定する
プレイヤーが敵に当たった時に加えて、穴に落ちるとゲームオーバーとなります。
プレイヤーのスプライトに移動し、以下をのように穴に落ちた時の処理を追加します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.29.08.png?resize=839%2C643&ssl=1)
そして、GAMEOVERのスプライトに移動して、以下の通りコードを追加します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.30.09.png?resize=608%2C176&ssl=1)
これで、カニに当たったり、穴に落ちるとゲームオーバーとなります。以下のように動けば成功です。
背景を作る
これまでずっと背景はマス目でしたが、最後に背景を設定します。
背景の横スクロールをするのに、ステージ、背景1、背景2にそれぞれ以下のプログラムを書きます。
背景のスクロールについては以下の記事で詳しく解説していますのでなぜこのようなプログラムになるのかはこちらを参考にしてください
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
背景の雲は、ブロックより遅く動くのでスクロール速度を−2に設定しています。近景と遠景で動く速度を変えるとリアリティーが出ます
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-20.25.09.png?resize=542%2C614&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-0.35.09.png?resize=514%2C597&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-17-20.23.05.png?resize=542%2C614&ssl=1)
すべてのコード
以上でマリオ風ゲームの作り方は終了です。ステージを変えてみたり、敵を増やしたり、BGMや効果音をつけたり、タイマーをつけたり、好きなように拡張してみてください。
すべてのコードはこちらから確認できます。