スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ゲーム作りのテクニック

今回つくるもの

難易度3 out of 5 stars

今回はマリオなどの横スクロールゲームで基本となるマップの作り方を解説していきます。リスト機能を使ってマップチップを作っていきますが、これがなかなか初心者にはとっつきにくく挫折してしまう人も多いと思います。しかし、一度理解してしまえば、マリオなどのスクロールゲームだけではなく、RPGゲームなど、いくらでもゲーム作りの世界が広がります。なるべく理解しやすいように解説しますので是非トライしてみてください。

今回作るものは以下となります。緑の旗を押して右矢印・左矢印を押してみてください。マリオのようにネコがステージの中を歩き回ることができます。マップチップの理解に特化した解説ですので、ジャンプや当たり判定は一切行なっていません。

youtubeしっかり解説

こちらの動画を見てから記事を読むと理解が深まります。是非チャンネル登録もお願いします!

【しっかり解説】スクラッチでマリオ用マップの作り方(マップチップの基本)

背景を設定

まずは背景から設定していきますが、そのまえに、ネコのキャラクターは邪魔なので隠しておきましょう。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

右下にある背景のプラスボタンから背景を選ぶをクリックしてください。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

下の方にXy-grid-30pxという方眼紙の背景があるのでこちらを選択します。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

この方眼紙のひとつのマス目が30ピクセルになっています。この方眼紙に合わせて、マップを作っていきます。

マップのレイアウトを決める

次に、どのようなマップにするか決めていきます。今回は以下のようなマップを作っていきます。
茶色・黄色・緑色の3色のブロックで構成された横長のマップで、なんとなくマリオのマップをイメージしています。
今回はわかりやすいように、

茶色:1
黄色:2
緑色:3

というように、数字を記載しておきます。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ブロックを作る

レイアウトが決まったら、3つのブロックを実際に作っていきます。右下のネコのプラスボタンから描くを選択し、新しいスプライトを追加します。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ここで、コスチュームにブロックを描いていくのですが、背景のマス目にぴったりとブロックの大きさを合わせるために、背景から方眼紙をコピーしてきます。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)
スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

そして、コスチュームの描画エリアを拡大して、四角ツールでブロックを描きます。
このとき、なるべくマス目と同じ大きさにビッタリあうようにしてください。ビッタリあえば、そこにテキストツールで1と数字を打ち込みます。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)
スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ここまでできたら、ガイドにしていた背景の方眼紙は削除し、作ったブロックの中心を、中心点にあわせます。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

茶色のブロックができたら、それを複製して、黄色・緑色のブロックも作成します。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

マップチップを作る(リストを作る)

では、ここからマップチップを作っていきます。まず、マップという名前で新しいリストを作成します。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)
スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

そうすると、右上のウインドウに以下のようにリストが表示されます。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

このリストにマップの情報を書いていくのですが、ルールはとても簡単です。先ほど設定したマップを再掲します。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

このマップの空白の部分を0とすると以下のよう数字で表すことができます
1列目:00000000000000000000000000000000
2列目:00000000000000000000000000000000
3列目:00000000001211000000000000000000


12列目:11111111111111111001111001111111

これをそのままリストに入れていきます。以下の通りです。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

このように、マップに書いたものがそのままリストになると思えば簡単です。

マップ描画のコードを書く

マップリストが完成したらこれを描画するコードを書いていきます。ブロックのコードの部分に以下のようにコードを書いてください。

ここではブロック一つ一つのコスチュームと座標を指定していく作業をしていますが、今回のように横長のマップの場合、右のほうにあるブロックは画面の外側に位置してしまいます。スクラッチでは、x座標は-240〜240、y座標は-180〜180しか指定ができないので、それ以上の座標を定義できるように

ブロックx
ブロックy

という変数を作成します。ここで変数を作るときに大切なポイントがあります。ブロックxとブロックyはこのスプライトのみにチェックを入れるようにしてください。そうすることにより、クローンされたときに、それぞれのブロックが座標を持つことができるようになります。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)
スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

列・行についても変数を作りますが、こちらはすべてのスプライト用にチェックを入れます。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)
スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ブロック配置という定義をおこない、左上から右下まで順番に数字を確認し、数字が入っていればその数字のコスチュームに変更してからクローンが作成されるということにしています。そして、そのときに、自分自身の座標(ブロックx:ブロックy)も指定されることになります。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ブロック定義を行うきに、必ず再描画せずに実行するにチェックを入れるようにしてください。こうすることで描画が格段に早くなります。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

次にクローンが作られたときに、配置をする設定を行います。以下のようにコードを追加します。クローンされたときにブロックx:ブロックyに表示しますが、画面から外れているときは隠すようにします。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

さらに右矢印を押すと画面がスクロールして、画面右側に配置されたブロックが見えてくるようにします。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ここまでできたら、緑の旗を押して、右矢印でスクロールしてみてください。以下のようにマップがスクロールできれば成功です。

キャラクターの動きも連動させる

マップチップの解説はここまでで終了ですが、せっかくなので、キャラクターの横の動きに連動してマップがスクロールされるようにしてみましょう。

ネコのスプライトに移って、スプライトの名前をプレイヤーと変更しておきましょう。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

プレイヤーのコードを書いていきます。ポイントはコードの一番下の部分です。プレイヤーが画面の右端まで行けないようにしていて、中央より少し右側(x=50)のラインまで来るとプレイヤーが画面を押してスクロールされるという仕掛けです。マリオだけでなく横スクロールゲームはだいたいこのようになっています。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

ブロック側のコードも少し変更を加えます。プレイヤーのx座標が50のときだけスクロールをするようにします。

スクラッチでゲーム用マップの作り方(マリオ風ゲームの基本)

すべてのコード

これで今回の解説は終了です。最終的には以下の動画のように動くはずです。

今回のコードはすべてこちらから確認できます。是非参考にしてください。

ゲーム用マップ基本(マップチップ)

コメント

  1. kawane より:

    解説がすごく分かりやすく、出来上がりも理想状態に近そうなため、こちらを拝見させていただきつつ子どもとマリオ風ゲームを作ってみています。
    「マップ描画のコードを書く」の章でその通りにできない部分があり、解決模索中です。キャプチャでは、ブロック配置の定義のコードのはじめに「列を1にする」「行を1にする」と出てくるのですが、「列」「行」がプルダウンに出てこず解決策探し中です。。。

    • ビンゴおじさん より:

      ご質問いただき、ありがとうございます。列・行も新しく変数を作っています。「変数を作る」から列・行それぞれの変数を作成してください。そのときに”すべてのスプライト用”にチェックを入れるようにしてください。ブログにも追記しておきました。また不明な点があればなんなりとご質問ください!
      https://bingo-ojisan.xyz/2021/11/06/map_chip/#toc6