今回つくるゲーム
難易度
今回はスクラッチでマイクラ風巨大迷路を作っていきます。3Dでそびえ立つ壁の中をプレイヤーが進んでいきゴールを目指します。今回3Dの迷路はすべてペンで描いていきます。プレイヤーが進むにつれて変わる景色をペンを使ってどのように描いていくかを学ぶことができます。スクラッチでペンを使った3Dゲームの入門編としてトライしてみてください。
今回のゲーム作りにトライする前に、3D背景の描き方の基本を先に学習することをオススメします。
まずは実際にゲームをプレイしてみてください。上下矢印キーで移動、左右矢印で回転することができます。ゴールまでチェックポイントが5個ありますので、チェックポイントを頼りにゴールを目指してください。
こちらの動画でもわかりやすくゲームの作り方をゼロから解説していますのであわせてチェックしてください。チャンネル登録もよろしくお願いします!
※今回の記事を書くにあたって、PROCLASS BLOGを参考にさせていただきました。とてもわかりやすく立体の歴史から書かれているので是非読んでみてください。
はじめに
まず、以下をリミックスしてください
こちらにはゲームを作るのに必要な素材が揃っています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-19.51.30-1-1024x558.png?resize=1024%2C558&ssl=1)
まずは2Dの迷路をつくる
3Dの巨大迷路を作るために、まずは2Dの迷路を作っていきます。設計図のスプライトのコスチュームを見ると、以下のように迷路が作られています。ここで描かれた迷路が最終的には立体になります。好きな絵を描いて迷路にしてみても良いですね。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-21.04.13.png?resize=944%2C711&ssl=1)
設計図のコードに以下のようにコードを書いておきましょう。
幽霊の効果は最終的には100にして、設計図を隠します、いまのところは0にしておきましょう。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-21.16.57.png?resize=346%2C200&ssl=1)
2Dの迷路をプレイヤーが移動する
次に、この2Dの迷路をプレイヤーが移動します。
プレイヤーのスプライトに移動してコスチュームをみてください。以下のような豆粒のような丸が用意されています。(右に白い丸をつけているのは向いている方向をわかりやすくするためです。)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.05.46.png?resize=424%2C317&ssl=1)
次に、プレイヤーのコードに以下のようにコードを書きます。これで設計図の迷路の中をプレイヤーが動き回ることができます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.05.17.png?resize=847%2C495&ssl=1)
実際にを押して、プレイヤーを動かしてみましょう。きちんと壁で止まるかも確認してください。
3Dの壁を描く準備をする
3D背景の描き方の基本で学んだように、3Dの背景を描くには距離リストを作りその距離リストの通りにペンで壁を描きます。
今回のゲームではプレイヤーから壁までの距離を計測し、それを距離リストに入れていくということをします。以下の図のように、プレイヤーから見て-48°〜48°まで目線を動かしながら距離を測っていきます。移動するたびに視界は変わりますので、その都度リストを作っていくことになります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.27.55-1024x556.png?resize=1024%2C556&ssl=1)
視界のスプライトに移動してコスチュームをみると、これまた豆粒のような丸があります。これを視線の方向に発射して距離を測定します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.29.43-1024x560.png?resize=1024%2C560&ssl=1)
プレイヤーのコードに戻り、以下のように”視界を作る”のメッセージを追加します。プレイヤーが動くたびに視界を作ります。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.13.44-1.png?resize=851%2C538&ssl=1)
次に、視界のスプライトのコードに以下のようにコードを書きます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-21.32.23.png?resize=666%2C643&ssl=1)
これでプレイヤーが移動するたびにリストが更新されていきます。実際距離リストにチェックを入れて確認しましょう。以下のようにプレイヤを移動させると数値が変わっていくのが確認できると思います。
3Dの壁を描く
では、3Dの壁を描いていきましょう。コードは3D背景の描き方の基本で学んだものと同じです。
視界のコードに以下のコードを追加します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-21.42.11.png?resize=858%2C638&ssl=1)
これで壁が描けるようになりました。
設計図とプレイヤーの幽霊の効果を100にしてからを押してプレイしてみてください。以下のようにネコの迷路が3Dになり、その中を進んでいるように見えるのがわかると思います。
チェックポイントを作る
ここまでこればもう少しです。巨大迷路をさまよっていると、自分がどこにいるか分からなくなってしまうので、チェクポイントを設けるようにしましょう。ポイント1のスプライトに移動して、以下のようにコードを書きます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.34.16.png?resize=681%2C395&ssl=1)
設計図の透明の効果を80にしてを押してみてください。以下のようにしっぽの付け根の部分にチェックポイント1が設置されているのがわかります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.34.02.png?resize=494%2C412&ssl=1)
同様に、ポイント2〜5及び、ゴールのスプライトに以下のようにコードを書きます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.34.37.png?resize=388%2C357&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.34.43.png?resize=388%2C357&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.34.49.png?resize=388%2C357&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.34.49-1.png?resize=388%2C357&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.34.56.png?resize=388%2C357&ssl=1)
これで以下のように、チェックポイントが設定されます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.35.37.png?resize=495%2C416&ssl=1)
キャラクターを表示する
次に、迷路を探索するキャラクターを設置します。今回はペンギンを採用しました。
キャラクターのコードに以下のようにコードを書きます。
上下の矢印キーが押されて移動しているときだけ、ぴょこぴょこ動くようにしています。そしてチェックポントを通過すると、ペンギンがポイント通過中と言って知らせてくれます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-20.37.33.png?resize=863%2C634&ssl=1)
では、実際にプレイしてみましょう。以下のように動けば成功です。
タイムトライアル
最後に、ゴールまでのタイムをはかれるようにします。ゲーム管理のスプライトに移動して、以下のコードを書きます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/06/スクリーンショット-2022-06-28-22.04.37.png?resize=561%2C307&ssl=1)
すべてのコード
これですべてのプログラミングが終了です。このやり方でやると、どんな絵でも3D迷路にできてしまうので、是非自分だけの迷路を作ってみてください。
すべてのコードはこちらから確認できます。