スクラッチでマリオカート風ゲームの作り方

今回つくるゲーム

難易度

今回はスクラッチでマリオカート風ゲームを作っていきます。土管や落とし穴を避けながら、ダッシュやジャンプ台を駆使してコースをクリアするタイムトライアルゲームです。最大のポイントはコースを進む＝向こう側からどんどん障害物が迫ってくる、というのをどのようにプログラミングで表現していくかです。少し難しい関数も使いますが、これができるといろいろなレーシングゲームが作れるようになりますので是非トライしてみてください。

まずは実際にゲームをプレイしてみてください。スペースキーでアクセル、左右矢印キーで横に動きます。

youtubeざっくり解説

Youtubeで詳細の作り方を動画で解説しています。チャンネル登録もよろしくお願いします！

[スクラッチ]マリオカートっぽいゲームを作ろう！【#1】

コードのざっくり解説動画もありますのであわせてご確認ください

【ざっくり解説】スクラッチでマリオカート風ゲームの作り方

はじめに

まず、以下をリミックスしてください

マリオカート風ゲーム_素材

こちらにはゲームを作るのに必要な素材が揃っています。

カートの動きを作る

まずはカートの動きを作っていきます。どのゲームでもそうですが、プレイヤーのスプライトとは別に動きを作る用のスプライトを作るのがポイントです。例えば今回のゲームで言うと、カートの端が穴に触れただけで穴に落ちてしまうとゲームとしては厳しすぎます。ですのでカートより一回り小さいターゲットを作って、当たり判定はすべてそこで行なっていきます。ターゲットを作る意味についてはこちらでも詳しく解説しているので合わせてご確認ください。

ハンドルの操作

まずハンドル操作について考えていきましょう。今回は以下のようにルールを決めます。左右の矢印キーを押すと左右に動きますが、ジャンプ台でジャンプをしている時にはハンドル操作が効かなくなります。

これを、ターゲットのコードに書いていきます。繰り返しになりますが、操作については、すべてターゲットにコードを書いて、カートはそこについていくだけです。ハンドル操作については以下のコードとなります。幽霊の効果は一旦0としていますが最終的には９９にして隠します。

カートスピードのルール

次にカートスピードにかんしてプログラミングしていきます。カートスピードに関するルールは以下の通りとします。スペースキーでアクセルを踏んでスピードが２００まで加速し、離すと減速します。
そしてダッシュのブロックを踏むと一気に４００までスピードが上がり、その後減速しますが、２００を超えている間は加速できません。そしてコースを外れる（芝生エリアに入る）とスピードは一気に５０まで急減速します。

これをコードにすると以下の通りになります。もちろん、ターゲットに書いていきます。

ここまでできれば、いちど緑の旗を押して、プレイしてみましょう。カートスピードの変数にチェックを入れて、スピードの変化に意識してみましょう。以下のように動けば成功です。

カートをターゲットに合わせて動かす

次にカートのコードにうつっていきます。一通りターゲットの動きができたので、カートはターゲットについていくだけです。ついていきながら、動きに合わせてコスチュームを変化させていきます。

左右の矢印が押された時は、押されている間だけコスチュームを変更します。

実際にプレイしてみてください。プレイする前にターゲットの幽霊の効果を９９にしておいてください。

ブロックの動きを作る

次にブロックを設置します。今回用意したブロックは土管、ダッシュ、ジャンプ、穴、ゴールの５つです。ゴール以外のこれらのブロックがどんどん出現してコースが作られていきます。今回はわかりやすいようにブロックを少なくしていますが、例えば氷で滑らせるとか泥で進みにくくするとか、土管も二つ連なったものを作るなどいくらでも工夫できると思います。

ここで全てのコスチュームが横に倒れていますが、これは角度を０度にした時に縦になるようにしたいからです。（描いたコスチュームは９０度に向いているとされてしまうのがスクラッチの微妙なところだと思っています）

ブロックを設置する

まず、ブロックを設置していきますが考え方的には以下の図のように、(x:0、y:150)を先頭にブロックがその先に一定間隔に並んでいて、順番待ちをしているというように考えます。そして順番待ちしているブロックはブロックマップというリストで管理します。

これは、マリオなどでステージを作ったマップチップの考え方です。マップチップが２次元なのに対して、今回は１次元なので少しシンプルです。マップチップの考え方についてはこちらを参考にしてください。

ブロックマップは初めから作っていますが、以下のようにブロックマップのリストにチェックを入れることで確認できますし、自由に編集することでコースを簡単に変更することができます。

ブロックのスプライトに以下のようにコードを書きます。

ここでブロックx、ブロックyの変数を作る時は必ず”このスプライトのみ”にチェックを入れるようにしましょう。それによって、各ブロックが独自の座標を持つことができます。

また、ブロック配置のブロックを作る際は、画面を再描画せずに実行するにチェックを入れるようにしてください。こうすることでマップの読み込みが早くなります。

これでブロックの設置は完了です

ブロックを動かす

ここからが、今回のプログラムの最難関です。カートが進むというのは、カート位置自体は変えずに、ブロックがどんどんこっちに迫ってくることで動いていることを表現します。

シューティングゲームのようなものであれば、上から敵や銃弾が降ってくるだけなので簡単ですが、今回のようなレーシングゲームの場合、遠近法を使うので、

❶ 遠くにいると動きは遅く、近くにいると動きが早い
❷ 遠くにいると小さく、近くにいると大きく見える

ということをどのようにプログラムで自然に表現できるかがポイントとなります。

まず❶について考え方は以下の通りとなります。ブロックが近づく速さは、カートの速さに比例しながら、近づくほど早くなります。

これをコードに書いていくと以下のようになります。先ほどのブロックのコードに追加してください。

0.00009などの数値はどのように決めたのかと思われるかと思いますが、実際はいろいろな数字を当てはめながらちょうどいい感じになるように設定しているだけです。初めから正解を導き出せるのではなく、書いては動かしを繰り返していくのがプログラミングのポイントです。

ここで新しく作ったブロックの近づく速さについても、”このスプライトのみ”にチェックを入れてください。

ここまでできたら実際にプレイしてみてください。スペースを押してアクセルを踏み込むと以下のようにブロックが大きくなりながら迫ってくるはずです。

ブロックの左右の配置を決める

このままでは、正面からしかブロックがこないので、端によければ進めることになってしまいます。
今回はブロックの配置位置を左側・中央・右側の３つのエリアに分けて配置するように考えます。クローンされたブロックが３つのエリアのどこに配置されるのかは、ランダムに決めることにします。
位置ランダムという変数を用意して（−１〜１）の乱数を設定します。

中央に配置されたブロックは今のままの動きで大丈夫ですが、左側・右側に設置されたブロックは、遠近法で大きくなりながら斜めに移動させなければなりません。ここでtanという数式を使います。下の図のように近づいてくる速さ×tan25をすると、横にスライドする速さが算出されます。それに先ほど定義した位置ランダムを掛けることで、左右の動きが作れて、中央だと０になります。

このあたりは、かなり難関なので、理解できなくてもそういうものだと思ってコードを書き写してそのまま進めてください

あと、ダッシュのコスチュームだけは左右に流れてくる場合は左右３０度回転させた方が良いので、位置ランダム×30度に向けるという指示も追加します。また、ゴールは必ず中央に配置されるので、ゴール以外に適用されるような指示も追加します。

コードは以下の通りとなります（もちろんブロックのコードに追加していきます）

ここまでできたら実際に動かしてみましょう。以下のように動けば成功です

カートがブロックに触れた時の動き

最後に、カートがこれらのブロックに触れた時の動きを定義していきます。ブロックのコードに以下を追加してください。ブロックがターゲットに触れた時にそれぞれメッセージを発信していきますが、ジャンプ中は何も起こらないようにします。（画面上は触れてしまいますが、実際には飛び越えているので）。またゴールという変数を作っていますが、これは後で使います。

それぞれのメッセージを受け取った時のターゲットとカートの動きを作っていきます。ターゲットにはカートスピードの変化を、カートにはコスチュームの変化を追加していきます。穴に落ちるとゲームオーバが表示されます。

では実際に動かしてみて、正しく動くか確認しましょう。

これで、ゲーム完成と言ってもいいくらいですが、さらにゲームの完成度をあげていきましょう

スタートと背景の動きを追加

ゲームの完成度をあげるために、スタートと背景の動きを追加していきます。

まずはスタートです。スタートのスプライトに移動して以下のようにコードを書きます。ブロックの動きをコピーして以下のように変更していきます。すべての変数はそのまま使えますのでスタート用に新たに変数を作成する必要はありません。これも変数を作る時に”このスプライトのみ”にチェックを入れた利点でもあります。