スクラッチでマリオっぽいスクロールゲームを作る上級技①　マップチップでゲームを熱くするプロの技

スクラッチプログラミングに挑戦している皆さん、どうも！スクラッチコーチです。

スクラッチでスクロールゲームを作(つく)ろうとすると、どうやって画面(がめん)を動(うご)かすか悩(なや)む(む)よね。ただ画面(がめん)を動(うご)かすだけではなくて途切(とぎ)れないようにステージを表示(ひょうじ)させることも考(かんが)えると……もうパニック！そこで今回(こんかい)はスーパースクラッチャーのグリフパッチさんが公開(こうかい)してくれているマップチップという画像(がぞう)を駆使(くし)するスクロールゲームの作(つく)り方(かた)を一緒(いっしょ)に見(み)ていく！ちなみにマップチップを使(つか)ったスクロールは上級(じょうきゅう)技(わざ)だからかなり難(むずか)しい。リストも使(つか)うし数学的(すうがくてき)なトリックもたくさん使(つか)っていく。だからこそ高(こう)品質(ひんしつ)な仕組(しく)みになる。でもなによりの魅力(みりょく)として一度(いちど)作(つく)ればハイクオリティなアクションゲームを量産(りょうさん)できるようになるっていうのがね！難(むずか)しくても挑戦(ちょうせん)してやるぜ！って気持(きも)ちをかきたてる。やっほーい！

今回(こんかい)の目標(もくひょう)「マップチップをグリッド上(じょう)に描画(びょうが)する」

マップチップとグリッドという単語(たんご)を知(し)らない人(ひと)も多(おお)いと思(おも)うので、まず単語(たんご)の説明(せつめい)をしていく。

マップチップとグリッド

まずコレを見(み)てほしい↓

何(なに)に見(み)える？え？チョコレート？残念(ざんねん)！これは土(つち)だね（たぶん）じゃあコレは？↓

これはアレでしょ！ピカっと光(ひか)るスキンヘッドを後(うし)ろから見(み)た画像(がぞう)マリオに出(で)てくるブロックの１つだよね！たくさん並(なら)べてみると分(わ)かりやすいかも。

↑の画像(がぞう)で３つブロックが並(なら)んでるよね。実(じつ)はこのスクショを解析(かいせき)するとめっちゃたくさんの「小(ちい)さな画像(がぞう)（マップチップ）」が使(つか)われてるんだ。こんな感(かん)じで↓

方眼(ほうがん)用紙(ようし)みたいに格子(こうし)状(じょう)に線(せん)を引(ひ)いてみた。実際(じっさい)は見(み)えない線(せん)だけど、このマス１つ１つにマップチップと呼(よ)ばれている小(ちい)さな画像(がぞう)を配置(はいち)しているんだよね。そしてこの方眼(ほうがん)用紙(ようし)のマスみたいに並(なら)んでいるデザインを「グリッド」と呼(よ)んでいるんだよ。このチュートリアルの趣旨(しゅし)としては「マップチップでスクロールゲームを作(つく)ろう」というものだけど、マップチップでスクロールゲームを作(つく)るというのは、こういう小(ちい)さい画像(がぞう)をたくさん並(なら)べてステージや敵(てき)やアイテムを作(つく)って、それがマリオの動(うご)きに合(あ)わせて一緒(いっしょ)に動(うご)くゲームを作(つく)ると言(い)い換(か)えることもできるのだ。そして今回(こんかい)の目標(もくひょう)はとりあえずグリッド上(じょう)にマップチップをプログラマティックに配置(はいち)するロジックを作(つく)りたい。

スタータープロジェクトをリミックスしよう

グリフパッチさんが用意(ようい)してくれたスタータープロジェクトを、日本(にほん)らしくマリオの画像(がぞう)とか音楽(おんがく)は除去(じょきょ)したものを用意(ようい)したので使(つか)ってほしい！オリジナルのスタータープロジェクトとは以下(いか)の点(てん)が違(ちが)うよ。

• マリオはスクラッチキャットに変(か)わってる
• マリオ固有(こゆう)のキャラ（クリボーやノコノコなど）とアイテム（キノコやフラワーなど）は消(け)してある。（ただしクリボーはピコに、キノコはリンゴにしておいた）
• マリオ固有(こゆう)の音楽(おんがく)は削除(さくじょ)してある（ジャンプ音(おん)とかは残(のこ)ってる）
• 実際(じっさい)のマリオのゲーム背景(はいけい)っぽい画像(がぞう)はスクラッチの背景(はいけい)画像(がぞう)に差(さ)し替(か)えてある

タテにタイルを並(なら)べる

まずはタイル（マップチップ）を縦(たて)一列(れつ)に並(なら)べるロジックに取(と)り組(く)んでいくぞ。ロジックの特徴(とくちょう)としては下(した)から上(うえ)に向(む)かって並(なら)べていくところ。じゃあタイルのスプライトを選(えら)んでいこう！

それでコスチュームを9番目(ばんめ)のBlock-Goldに変更(へんこう)しておこう。なぜって？そりゃ、このブロックはグリフパッチさんのお気(き)に入(い)りだからだよｗ

サイズ

すべてのタイルは縦横(じゅうおう)16x16の正方形(せいほうけい)なんだけど、ちょっと小(ちい)さいから見(み)た目(め)を2倍(ばい)にして扱(あつか)っていく。つまり見(み)た目(め)は32x32の正方形(せいほうけい)になる。

位置(いち)

暫定的(ざんていてき)に中央(ちゅうおう)に行(い)くように設定(せってい)する。

実験(じっけん)してみよう！

ここからは実験(じっけん)タイムだ。まずはクローンを作(つく)ってY座標(ざひょう)を32変(か)えるブロックを置(お)いてみて。どっか適当(てきとう)な場所(ばしょ)に置(お)いてOK。

これをクリックしてみて。そしたらこんな感(かん)じになるはず↓

おお！なんかすでに完成(かんせい)が見(み)えたｗ気(き)が早(はや)いかｗ

ループで自動生成(じどうせいせい)する

じゃあもっとたくさん作(つく)るようにループで囲(かこ)ってみようか。5回(かい)繰(く)り返(かえ)すようにしよう。

クリックしてみると↓

柱(はしら)が立(た)った！

変数(へんすう)「■クローン生成(せいせい)数(すう)Y」を作(つく)る

この５という数字(すうじ)はあとで少(すこ)し変(か)えるけど、縦(たて)にクローンを何個(なんこ)作(つく)るかという定義(ていぎ)として変数(へんすう)化(か)しておこう。変数(へんすう)名(めい)は「■クローン生成(せいせい)数(すう)Y」だ。僕(ぼく)のマイルールだけど、■という接頭語(せっとうご)は定数(ていすう)を意味(いみ)するよ。定数(ていすう)は一度(いちど)設定(せってい)したら、ゲーム開始(かいし)後(ご)は変(か)わらない変数(へんすう)のことなんだ。

初期(しょき)化(か)する

これは緑(みどり)の旗(はた)が押(お)されたときに初期(しょき)化(か)されるようにしておこう。

使(つか)う

実験(じっけん)中(ちゅう)のプログラムでも使(つか)っていく。

結果(けっか)は変(か)わらないので引(ひ)き続(つづ)きやっていこう。

ブロックの位置(いち)をズラす

今(いま)はブロックが画面(がめん)の上(うえ)に偏(かたよ)ってるから、これを中央(ちゅうおう)に配置(はいち)されるようにセンタリングしてみる。これでブロックをズラす感覚(かんかく)を知(し)っていこう。ズラし方(かた)はカンタン。たんにY座標(ざひょう)を変(か)えるだけ。まず式(しき)を作(つく)ってみよう↓

変数(へんすう)「■クローン生成(せいせい)数(すう)Y」にマイナス１６を掛(か)けた数字(すうじ)をY座標(ざひょう)に加(くわ)える……おっといきなりマイナス１６という謎(なぞ)の数字(すうじ)が出(で)てきたね。１６というのはブロックのサイズ（３２）の半分(はんぶん)を意味(いみ)してるんだ。半分(はんぶん)ズラしたいから１６を使(つか)ってるよ。で、なぜマイナスかというと今回(こんかい)はブロックを下(した)に下(さ)げたいから。くっつけて実験(じっけん)用(よう)プログラムに追加(ついか)してみよう。

テストすると……。

画面(がめん)の中央(ちゅうおう)にブロックが配置(はいち)されるようになったね！これでタテにブロックを並(なら)べるという要件(ようけん)は実現(じつげん)の目処(めど)が立(た)った。素晴(すば)らしい。大(おお)いなる一歩(ぽ)だよ。

グリッド上(じょう)にタイルを並(なら)べる

タテにタイルを並(なら)べることに成功(せいこう)したというのは、方眼(ほうがん)用紙(ようし)のタテ一列(れつ)のマスが作(つく)れたようなものだよ。あとはこれをヨコにもズラしていきたいね。さぁどんな作戦(さくせん)がいいかな。うん、今回(こんかい)はヨコに１マスだけズラして再(ふたた)び下(した)から上(うえ)にタイルを配置(はいち)するようにしていこう。

ヨコに１マス動(うご)かす

とりあえず隣(となり)の列(れつ)に移動(いどう)するためにX座標(ざひょう)を１マス動(うご)かそうか。

これで実行(じっこう)するとこうなる↓

最後(さいご)の１つがヨコにズレたね。よしよし。じゃあもう一回(かい)、いや４回(かい)くらい続(つづ)けて実験(じっけん)用(よう)プログラムをクリックしてみてくれる？すると……。

おおお！なんかいい感(かん)じにグリッド上(じょう)に並(なら)んだよ！完成(かんせい)じゃんｗいや、まだだ、まだ終(お)わらんよ……。

自動(じどう)でグリッド上(じょう)に並(なら)べる

いちいちクリックせずに決(き)まった回数(かいすう)だけX方向(ほうこう)にもタイルが配置(はいち)されるようにしていこう。

変数(へんすう)「■クローン生成(せいせい)数(すう)X」をつくる

まぁ作(つく)るんでしょうね、と思(おも)っていたあなた！正解(せいかい)です。Yを作(つく)ったならXも作(つく)るのです。

初期(しょき)化(か)する

５を割(わ)り当(あ)てておこうか、とりあえず。

Yの上(うえ)に置(お)いとく、X→Yのほうが自然(しぜん)ゆえ。動(うご)きに差(さ)はないけど。

実験(じっけん)用(よう)プログラムをループで囲(かこ)う

この変数(へんすう)の回数(かいすう)繰(く)り返(かえ)すループブロックで実験(じっけん)用(よう)プログラム全体(ぜんたい)を囲(かこ)おう。

X方向(ほうこう)にも半(はん)マスだけズラしておく

Y方向(ほうこう)にもズラしてセンタリングしたので、X方向(ほうこう)にもズラしておこう。実験(じっけん)結果(けっか)が見(み)やすくなるし、X方向(ほうこう)にもズラす感覚(かんかく)を身(み)につけることができる。

テストしてグリッド上(じょう)になってるか確認(かくにん)する

実行(じっこう)するとこんな感(かん)じになるはず！

きたこれ。ほぼグリッドだわ。ん？なにか言(い)いたそうだね？一(ひと)つ余(あま)ってる？いや、気(き)のせい気(き)のせい、ちっちゃいことは気(き)にすんなワカチコ……ん？たしかに１つ余(あま)ってるタイルがいるね！ひゅー、僕(ぼく)じゃなきゃ見逃(みのが)しちゃうところだったね。

本体(ほんたい)を隠(かく)す

この１つはクローンではなくて本体(ほんたい)なので、最初(さいしょ)に表示(ひょうじ)するブロックを置(お)いて最後(さいご)に隠(かく)すブロックを置(お)けば解決(かいけつ)だよ。

実行(じっこう)結果(けっか)は↓

スマッシュ！やったぜ。

実験的(じっけんてき)にタイルをランダム生成(うみな)してみる

いまはグリフパッチさんが大好(だいす)きな９番目(ばんめ)のコスチュームだけなんだけど、試(ため)しにこれをランダムで変(か)えてみようか。

これで実行(じっこう)するとデタラメなタイル生成(せいせい)に成功(せいこう)する↓

ブロック定義(ていぎ)「_初期(しょき)化(か)する」を作(つく)る

さて、今(いま)まで実験(じっけん)用(よう)にクリックで実行(じっこう)してきたプログラムを、ブロック定義(ていぎ)にまとめていこうと思(おも)う。再(さい)描画(びょうが)無(な)しで実行(じっこう)する初期化(しょきか)処理(しょり)としてまとめていく。

ぱっと見(み)で再(さい)描画(びょうが)なしって分(わ)かるように、接頭語(せっとうご)にアンダーバーをつけておこうと思(おも)う。

実験(じっけん)用(よう)プログラムをまるっと移動(いどう)する

このブロック定義(ていぎ)にさっきまで作(つく)ってたプログラムを入(い)れていこう。

呼(よ)び出(だ)す

緑(みどり)の旗(はた)のところで呼(よ)び出(だ)すようにする。

今(いま)まではズラ～～～っとタイルが配置(はいち)される様子(ようす)が見(み)えてたけど、これでパッと生成(せいせい)されるようになったはず！

やったぜ。

スクロール処理(しょり)を作(つく)っていく！

グリッド上(じょう)に表示(ひょうじ)する基礎(きそ)は整(ととの)った。これを画面(がめん)全体(ぜんたい)に拡大(かくだい)させるまえに、スクロールする処理(しょり)を作(つく)っていく。そのほうが全体(ぜんたい)のメカニズムを把握(はあく)する上(うえ)で効率的(こうりつてき)だからなんだ。区切(くぎ)りがいいからスクロールは次(つぎ)の記事(きじ)で解説(かいせつ)していく。ここまでだけでもグリッドシステムを共有(きょうゆう)することができて嬉(うれ)しい。スクロールゲームに向(む)けて素晴(すば)らしい一歩(ぽ)を踏(ふ)み出(だ)せてるよ！この調子(ちょうし)でやっていこう♪