今回つくるもの
難易度
今回はマリオなどの横スクロールゲームで基本となるマップの作り方を解説していきます。リスト機能を使ってマップチップを作っていきますが、これがなかなか初心者にはとっつきにくく挫折してしまう人も多いと思います。しかし、一度理解してしまえば、マリオなどのスクロールゲームだけではなく、RPGゲームなど、いくらでもゲーム作りの世界が広がります。なるべく理解しやすいように解説しますので是非トライしてみてください。
今回作るものは以下となります。緑の旗を押して右矢印・左矢印を押してみてください。マリオのようにネコがステージの中を歩き回ることができます。マップチップの理解に特化した解説ですので、ジャンプや当たり判定は一切行なっていません。
こちらの動画を見てから記事を読むと理解が深まります。是非チャンネル登録もお願いします!
背景を設定
まずは背景から設定していきますが、そのまえに、ネコのキャラクターは邪魔なので隠しておきましょう。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-05-21.52.45-1024x637.png?resize=607%2C377&ssl=1)
右下にある背景のプラスボタンから背景を選ぶをクリックしてください。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-21.53.27.png?resize=494%2C439&ssl=1)
下の方にXy-grid-30pxという方眼紙の背景があるのでこちらを選択します。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-05-21.53.48-1-1024x631.png?resize=559%2C344&ssl=1)
この方眼紙のひとつのマス目が30ピクセルになっています。この方眼紙に合わせて、マップを作っていきます。
マップのレイアウトを決める
次に、どのようなマップにするか決めていきます。今回は以下のようなマップを作っていきます。
茶色・黄色・緑色の3色のブロックで構成された横長のマップで、なんとなくマリオのマップをイメージしています。
今回はわかりやすいように、
茶色:1
黄色:2
緑色:3
というように、数字を記載しておきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-05-22.48.41-1024x525.png?resize=1024%2C525&ssl=1)
ブロックを作る
レイアウトが決まったら、3つのブロックを実際に作っていきます。右下のネコのプラスボタンから描くを選択し、新しいスプライトを追加します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-21.56.07.png?resize=495%2C444&ssl=1)
ここで、コスチュームにブロックを描いていくのですが、背景のマス目にぴったりとブロックの大きさを合わせるために、背景から方眼紙をコピーしてきます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-05-21.56.49-1024x607.png?resize=1024%2C607&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-21.57.05.png?resize=945%2C852&ssl=1)
そして、コスチュームの描画エリアを拡大して、四角ツールでブロックを描きます。
このとき、なるべくマス目と同じ大きさにビッタリあうようにしてください。ビッタリあえば、そこにテキストツールで1と数字を打ち込みます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.29.56.png?resize=944%2C817&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.30.32.png?resize=944%2C817&ssl=1)
ここまでできたら、ガイドにしていた背景の方眼紙は削除し、作ったブロックの中心を、中心点にあわせます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.32.03.png?resize=944%2C817&ssl=1)
茶色のブロックができたら、それを複製して、黄色・緑色のブロックも作成します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-21.55.46.png?resize=946%2C846&ssl=1)
マップチップを作る(リストを作る)
では、ここからマップチップを作っていきます。まず、マップという名前で新しいリストを作成します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.02.37.png?resize=336%2C604&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.03.09.png?resize=394%2C363&ssl=1)
そうすると、右上のウインドウに以下のようにリストが表示されます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.03.32.png?resize=492%2C408&ssl=1)
このリストにマップの情報を書いていくのですが、ルールはとても簡単です。先ほど設定したマップを再掲します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2021/11/スクリーンショット-2021-11-05-22.48.41-1-1024x525.png?resize=1024%2C525&ssl=1)
このマップの空白の部分を0とすると以下のよう数字で表すことができます
1列目:00000000000000000000000000000000
2列目:00000000000000000000000000000000
3列目:00000000001211000000000000000000
・
・
12列目:11111111111111111001111001111111
これをそのままリストに入れていきます。以下の通りです。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.12.47.png?resize=680%2C665&ssl=1)
このように、マップに書いたものがそのままリストになると思えば簡単です。
マップ描画のコードを書く
マップリストが完成したらこれを描画するコードを書いていきます。ブロックのコードの部分に以下のようにコードを書いてください。
ここではブロック一つ一つのコスチュームと座標を指定していく作業をしていますが、今回のように横長のマップの場合、右のほうにあるブロックは画面の外側に位置してしまいます。スクラッチでは、x座標は-240〜240、y座標は-180〜180しか指定ができないので、それ以上の座標を定義できるように
ブロックx
ブロックy
という変数を作成します。ここで変数を作るときに大切なポイントがあります。ブロックxとブロックyはこのスプライトのみにチェックを入れるようにしてください。そうすることにより、クローンされたときに、それぞれのブロックが座標を持つことができるようになります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.24.12.png?resize=379%2C401&ssl=1)
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.24.40.png?resize=379%2C401&ssl=1)
列・行についても変数を作りますが、こちらはすべてのスプライト用にチェックを入れます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-07-19.58.28.png?resize=374%2C395&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/02/スクリーンショット-2022-02-07-19.58.34.png?resize=374%2C395&ssl=1)
ブロック配置という定義をおこない、左上から右下まで順番に数字を確認し、数字が入っていればその数字のコスチュームに変更してからクローンが作成されるということにしています。そして、そのときに、自分自身の座標(ブロックx:ブロックy)も指定されることになります。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.38.17.png?resize=848%2C650&ssl=1)
ブロック定義を行うきに、必ず再描画せずに実行するにチェックを入れるようにしてください。こうすることで描画が格段に早くなります。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.35.39.png?resize=717%2C562&ssl=1)
次にクローンが作られたときに、配置をする設定を行います。以下のようにコードを追加します。クローンされたときにブロックx:ブロックyに表示しますが、画面から外れているときは隠すようにします。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.38.27.png?resize=848%2C650&ssl=1)
さらに右矢印を押すと画面がスクロールして、画面右側に配置されたブロックが見えてくるようにします。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.39.51.png?resize=848%2C650&ssl=1)
ここまでできたら、緑の旗を押して、右矢印でスクロールしてみてください。以下のようにマップがスクロールできれば成功です。
キャラクターの動きも連動させる
マップチップの解説はここまでで終了ですが、せっかくなので、キャラクターの横の動きに連動してマップがスクロールされるようにしてみましょう。
ネコのスプライトに移って、スプライトの名前をプレイヤーと変更しておきましょう。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-06-1.37.10.png?resize=411%2C434&ssl=1)
プレイヤーのコードを書いていきます。ポイントはコードの一番下の部分です。プレイヤーが画面の右端まで行けないようにしていて、中央より少し右側(x=50)のラインまで来るとプレイヤーが画面を押してスクロールされるという仕掛けです。マリオだけでなく横スクロールゲームはだいたいこのようになっています。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.48.33.png?resize=594%2C708&ssl=1)
ブロック側のコードも少し変更を加えます。プレイヤーのx座標が50のときだけスクロールをするようにします。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2021-11-05-23.48.53.png?resize=836%2C740&ssl=1)
すべてのコード
これで今回の解説は終了です。最終的には以下の動画のように動くはずです。
今回のコードはすべてこちらから確認できます。是非参考にしてください。
コメント
解説がすごく分かりやすく、出来上がりも理想状態に近そうなため、こちらを拝見させていただきつつ子どもとマリオ風ゲームを作ってみています。
「マップ描画のコードを書く」の章でその通りにできない部分があり、解決模索中です。キャプチャでは、ブロック配置の定義のコードのはじめに「列を1にする」「行を1にする」と出てくるのですが、「列」「行」がプルダウンに出てこず解決策探し中です。。。
ご質問いただき、ありがとうございます。列・行も新しく変数を作っています。「変数を作る」から列・行それぞれの変数を作成してください。そのときに”すべてのスプライト用”にチェックを入れるようにしてください。ブログにも追記しておきました。また不明な点があればなんなりとご質問ください!
https://bingo-ojisan.xyz/2021/11/06/map_chip/#toc6
ありがとうございます!やってみます^^