今回つくるゲーム
難易度
今回はパックマン風ゲームを作っていきます。迷路状のステージを動きまわり、敵を避けながらクッキーを食べていきます。今回ポイントとなるのは「壁を突き抜けない方法」と「クッキーを食べる方法」です。一つ前の記事で書いたボンバーマン風ゲームの作り方とあわせてトライすれば、より理解が深まります。
以下が今回つくるゲームです。左右上下矢印で移動して敵を避けながらクッキーを食べてください
ステージ・キャラの作成
まずは、背景やパックマン・敵キャラといったスプライトを作成していきます。
スプライトはそのまま使って、プログラムだけを学習したいという方は、以下をリミックスして次の章に進んでください。
ステージをつくる
新規ファイルを作成し、右下のプラスボタンから背景を選ぶを選択し、Xy-grid-20pxを背景に指定してください。最終的にこのグリッドは消しますが迷路を描くガイドに利用します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.10.28.png?resize=494%2C434&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-11.11.11-1024x639.png?resize=1024%2C639&ssl=1)
グリッドの上に迷路を書いていきまうが、今回は[色:69,鮮やかさ:100,明るさ:63]で太さを4の紫色を指定します。そしてグリッドに沿って以下のように迷路を書いていきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.14.08.png?resize=745%2C689&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.17.32.png?resize=745%2C689&ssl=1)
以下を真似て迷路を作ってみてください。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-19.16.10-1024x702.png?resize=1024%2C702&ssl=1)
次に迷路にクッキーを配置していきます。小さい黄色の丸を作り、コピーしながら迷路の中に配置していきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-19.14.49-1024x702.png?resize=445%2C304&ssl=1)
最終的に以下のように157個のクッキーを配置します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-19.18.38.png?resize=503%2C379&ssl=1)
これでステージは一旦完成です。繰り返しになりますが最終的にはグリッドは消して背景は黒にします。
パックマンを作る
次にパックマンを作っていきますが、まずはパックマンを動かす「ターゲット」を作ります。ボンバーマンの作り方でも書きましたが、マス目や迷路の中をキャラクターを進ませる場合は小さな丸いターゲットですべての動き(当たり判定等)を作り、キャラクターはその上にかぶせます。そうすることで、枠をはみ出るようなダイナミックな表現が可能になります。ネコのスプライトを削除し、新たにスプライトを描きます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.29.27.png?resize=492%2C441&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.29.39.png?resize=492%2C441&ssl=1)
描くターゲットのスプライトは右上の窓を見ながら、一つのマス目の中に収まるように調整します。
※最終的には大きさをプログラム上でチューニングするのでだいたいで大丈夫です。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-11.35.24-1024x640.png?resize=629%2C393&ssl=1)
次に、作ったターゲットのスプライトをコピーして、パックマンを作っていきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-11.36.54-1024x640.png?resize=633%2C396&ssl=1)
パックマンはオレンジの丸の一部が欠けていくことで口の開け閉めを表現します。
丸の一部を欠けさせるためには以下のフローで行います。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.40.07.png?resize=942%2C817&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.40.38.png?resize=942%2C817&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.41.42.png?resize=942%2C817&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.41.59.png?resize=942%2C817&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.43.44.png?resize=942%2C817&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.44.47.png?resize=942%2C817&ssl=1)
同様にさらに開いた口のコスチュームを用意します。口の根元を奥の方にするのがコツです。
そしてパックマン1〜4の4つのコスチュームを順番に表示することで口をパクパクするように見せることができます。(2と4は同じ形です)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-11.54.08.png?resize=942%2C817&ssl=1)
敵キャラのスプライト
続いて敵キャラを作っていきますが、先ほど同様、ターゲットから作っていきます。
ターゲットの大きさは先ほど作ったパックマンのターゲットと同じ大きさにします。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-11.56.23-1024x639.png?resize=1024%2C639&ssl=1)
次に、敵キャラクターを作っていきます。自分の好きなキャラクターを作りましょう。コスチュームを複数作っておくとキャラが動いているように見せることができます。
最終的な大きさはプログラムで調整していきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-11.58.14-1024x639.png?resize=1024%2C639&ssl=1)
パックマンの動きを作る
パックマンを動かすために、まずターゲットのプログラムを行なっていきます。以下のように左右上下の矢印を押した時にそれぞれの方向を向けて半マス進めます。基本的な考え方はボンバーマンで説明した通りですので詳しくはこちらをご確認ください。
ボンバーマン風ゲームの作り方(ターゲットの動き)
ボンバーマンと違うのは、ボンバーマンが1マス進めるのに対して、パックマンは半マス進むということです。パックマンは壁が線なので、1マス進むと線を飛び越してしまうので半マスづつ進めます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-19.24.47.png?resize=584%2C706&ssl=1)
次に、中央の左右にある穴を抜けると、逆の穴に移動するようにします。
以下のようにコードを追加します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-19.29.49.png?resize=743%2C721&ssl=1)
実際に動かすと以下のようになります。
続いてパックマンをターゲットにあわせて動かしていきますが、その前に、ターゲットを透明にします。透明にしないと、パックマンの下にターゲットが見えてしまいます。透明にするためには幽霊の効果を使います。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-19.34.47.png?resize=577%2C366&ssl=1)
そして、パックマンのスプライトに移動し、以下のようにコードを書きます。大きさを120%にせっていし、ずっとターゲットにいき、ターゲットの向きに向けます。
そしてずっと次のコスチュームに変えることで口をパクパクさせます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-19.36.16.png?resize=577%2C488&ssl=1)
実際に動かしてみてください。以下のように動けば成功です。
クッキーを食べる
次にパックマンがクッキーを食べる動きを作っていきます。
今回はクッキーを黒く塗りつぶすことで食べたようにみせます。最終的に背景を黒色にするので、クッキーが消えたように見えます。
塗りつぶすためにペンの機能を使います。
左下のボタンから拡張機能でペンを選択してください。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-10-19.39.06-1-1024x650.png?resize=1024%2C650&ssl=1)
次にターゲットのコードに移動し、以下のようにコードを追加します。
移動中はペンを下ろし、移動が終わるとペンを上げます。
ペンの太さはマスの半分の10に設定します。旗が押された時には全部消してリセットします。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-19.43.13.png?resize=557%2C467&ssl=1)
以下のように、移動したところが黒く塗りつぶされていきます。
敵キャラの動きを作る
次に敵キャラの動きを作っていきます。パックマン同様、ターゲットからプログラムしていきます。
敵ターゲットのコードを以下のように書いていきます。パックマンのターゲットと似たコードですが、敵は自動で動きますので、壁にぶつかる、もしくは2割の確率で向きを変えます。
これについてはボンバーマンの敵キャラを自動で動かすのパートでも詳しく解説しています。
また、中央控え室から1秒で外に飛び出すうごきを最初に入れています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/08/ビンゴおじさんアイコン2.png?resize=92%2C92)
敵キャラが控え室に戻れないよう、わざと控え室の出口をせまくしています。なので、出るときはワープさせるように外に飛び出させます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-22.28.38.png?resize=806%2C728&ssl=1)
次に、敵1のキャラクターをターゲットの上にかぶせていきます。これもパックマンの時と同じ考え方です。敵キャラは回転方法を左右のみにしておきます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-20.08.11.png?resize=612%2C341&ssl=1)
一度緑の旗を押して、敵キャラを動かしてみましょう。
敵キャラを増やす
ここから敵キャラを増やしていきます。敵2・敵3・敵4の3体を追加します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-15-18.15.42.png?resize=413%2C322&ssl=1)
まずは控え室に全員集合させ、そこから1体づつ飛び出ていきます。
これをプログラムに反映させていくと、以下のようになります。
敵2
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-22.38.11.png?resize=834%2C592&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-22.40.52.png?resize=355%2C516&ssl=1)
敵3
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-22.38.23.png?resize=834%2C592&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-22.40.58.png?resize=355%2C516&ssl=1)
敵4
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-22.38.35.png?resize=834%2C565&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-10-22.41.06.png?resize=355%2C516&ssl=1)
ゲームオーバー・クリアを設定
続いて、ゲームオーバーとクリアを設定していきます。以下のようにパックマンのターゲットのコードに追加していきます。まず、「食べた数」という変数を用意して、クッキー(黄色)に触れると1づつ変えます。0.05秒待つのは、何度も同じクッキーを数えないようにするためです。
そして、食べた数が157になるとクリア、それまでに敵1〜4に触れるとゲームオーバーです。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-11-0.51.33.png?resize=839%2C675&ssl=1)
食べた数は右上に表示させて、何個食べたかわかるようにしましょう。
最後の仕上げ
まず、背景を変更します。グリッドの背景を削除し、代わりに黒の長方形を作り、最背面に設置します。
これで一気にゲームっぽくなりました。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/10/スクリーンショット-2021-10-11-0.55.51-1024x638.png?resize=1024%2C638&ssl=1)
最後にBGM・音の効果を設定します。BGMはステージのコードに書きます。
今回はVideoGame2というBGMを使います。またあわせて、ゲームオーバーとゲームクリアを受け取った時にはBGMを止めるようにしましょう。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-11-1.22.00.png?resize=601%2C432&ssl=1)
効果音はパックマンのターゲットのコードに追加していきます。食べた数が1増えた時にBiteの音を鳴らし、ゲームオーバーになったとき、ゲームクリアした時にもそれぞれ効果音を鳴らします。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-10-11-1.22.37.png?resize=836%2C751&ssl=1)
すべてのコード
すべてのコードは以下からも確認することができます。