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

上級

今回つくるゲーム

難易度4 out of 5 stars

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

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

youtubeざっくり解説

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

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

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

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

はじめに

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

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

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

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

カートの動きを作る

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

ハンドルの操作

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

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

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

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

カートスピードのルール

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

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

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

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

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

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

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

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

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

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

ブロックの動きを作る

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

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

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

ブロックを設置する

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

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

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

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

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

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

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

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

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

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

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

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

ブロックを動かす

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

またスタートフラッグはカートよりも前面にくるので、カートの位置を最前面から一つ奥に下げておきます。

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

次に、背景です。左側木と右側木の二つのスプライトを用意しています。これもブロックのコードをコピーしてきて以下のように書きます。それぞれ、左側木マップと右側木マップを用意しているので、そこに1と0を書いていくことで、間隔をあけながら木を表示させていっています。

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

ここまで書けたら実際に動かしてみましょう。スタートや背景の動きを追加することでゲームの完成度が増してきました。

タイムトライアルを設定する

最後に、ゲームにタイムトライアルを設定していきます。緑の旗を押すとカウントダウンが始まり、3カウントでスタートでき、タイマーもスタートします。

タイム管理のスプライトに以下のコードを書きます。

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

カウントダウンの音はこちらからお借りしました。©︎OtoLogic

そして、スタート=0のときはアクセルを踏んでもスタートできないようにします。逆に言うとスタート=1のときだけアクセルが効きます。以下のようにターゲットのコードに追加します。

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

以下のように動けば成功です。

すべてのコード

これで完成です。ブロックマップを編集して自分だけのコースを作ったり、ブロックの種類を追加して、オリジナルゲームを作ってみてください。

すべてのコードはこちらから確認できます。

マリオカート風ゲーム

コメント

  1. 林幸政 より:

    s2102365@kawagoe-c.ed.jpわかりました

  2. 林幸政 より:

    です

  3. 林直政 より:

    スクラッチでマイクラのつくリかたをおしえてください

  4. mrdaito より:

    今からこれを作らしていだだいているのですが、ブロックの場所のクローンされた後にある位置ランダムの場所が変わらないのでどうすればいいか教えて頂けませんか⁇

    • ビンゴおじさん より:

      すみません、メッセージ見逃していました。そこの部分すごく難しいですよね。記事通りに書けば動くはずなんですが、もしよければ作っている途中のプロジェクトを共有してもらえますか?どこがおかしいか中身みてみますが。スクラッチからメッセージもらえるとスムーズかと思います。
      https://scratch.mit.edu/users/kanett/

  5. intelyuza5 より:

    木が真ん中に来ます。

  6. スクラッチの初心者 より:

    初コメント失礼します、今回もわかりやすい説明をありがとうございます、僕は今スクラッチでF1のゲームを作っているのですが速度メーターの方がわからず困っています、初コメントでリクエストは失礼かもしれませんが、できれば速度メーターの作り方を記事に載せて頂いてよろしいでしょうか?長文失礼しました

    • ビンゴおじさん より:

      速度メーターいいですね!ちょっと考えてみます。