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

今回つくるもの

難易度

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

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

背景を設定

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

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

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

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

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

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

茶色：１
黄色：２
緑色：３

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

ブロックを作る

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

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

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

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

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

マップチップを作る（リストを作る）

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

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

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

このマップの空白の部分を0とすると以下のよう数字で表すことができます
１列目:00000000000000000000000000000000
２列目:00000000000000000000000000000000
３列目:00000000001211000000000000000000
・
・
12列目：11111111111111111001111001111111

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

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

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

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

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

ブロックx
ブロックy

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

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

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

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

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

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

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

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

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

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

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

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

すべてのコード

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

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

ゲーム用マップ基本（マップチップ）