スクラッチでマリオっぽいスクロールゲームを作る上級技⑩　もはやマリオメーカーっす

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

前回(ぜんかい)はタイルをスクロールさせることに成功(せいこう)したね！上下(じょうげ)左右(さゆう)に動(うご)かすと画面(がめん)外(がい)にタイルが移動(いどう)して、見(み)えなくなると同時(どうじ)に逆(ぎゃく)側(がわ)に回(まわ)り込(こ)んでリサイクルさせる仕組(しく)みを作(つく)り込(こ)んだ。しかも画面(がめん)外(がい)に移動(いどう)するときに発生(はっせい)するスクラッチ特有(とくゆう)の問題(もんだい)「突(つ)っかかり現象(げんしょう)」にBIGコスチュームで対応(たいおう)する方法(ほうほう)も学(まな)んだ。なかなか充実(じゅうじつ)した学(まな)びがあったんじゃないかな！学(まな)びの加速(かそく)は止(と)まらない！今回(こんかい)もぶっ飛(と)ばしていくからついてきてくれぃ♪

今回(こんかい)の目標(もくひょう)「」

地形(ちけい)生成(せいせい)の準備(じゅんび)をする

ではスプライト「地形(ちけい)生成(せいせい)」を開(ひら)いてほしい。

このスプライトにはコスチュームはなくて、コーディングだけしていく用(よう)のスプライト。

リスト「★ステージグリッド（タイル設計(せっけい)図(ず)）」を用意(ようい)する

タイルを規則的(きそくてき)に並(なら)べるためにリストを使(つか)って管理(かんり)していくので、このタイミングでリストを作(つく)ろう。

リストでグリッドを管理(かんり)する作戦(さくせん)

でもリストでタテとヨコを管理(かんり)することなんて出来(でき)るだろうか？それには今回(こんかい)の作戦(さくせん)内容(ないよう)を事前(じぜん)に理解(りかい)しておくことが大切(たいせつ)になってくる。

ここまでの復習(ふくしゅう)

まずグリッドは前回(ぜんかい)学(まな)んだね。方眼(ほうがん)用紙(ようし)みたいに縦横(じゅうおう)に整列(せいれつ)されたマス（タイル）みたいなイメージのデザインだったよね。こんな↓

で、スクラッチでタイル（マップチップ）をグリッド状(じょう)に並(なら)べてスクロールすることまでは成功(せいこう)しているよね。

グリッドをリストで管理(かんり)する方法(ほうほう)

いまはランダムでいろんなタイルが並(なら)べられているけど、今回(こんかい)のチュートリアルでは規則(きそく)正(ただ)しく開発者(かいはつしゃ)が意図(いと)したとおりに整然(せいぜん)とタイルを並(なら)べていきたい。こんな↓

これをどうすればリストで管理(かんり)できるか、という作戦(さくせん)内容(ないよう)を伝(つた)える。

グリッドは左下(ひだりした)から数(かぞ)える

まずグリッドのマスはどういう順番(じゅんばん)で並(なら)んでいるだろうか。下(した)の図(ず)を見(み)てほしい。

このようにグリッドは左下(ひだりした)を１として、上(うえ)に向(む)かって２，３，４とカウントアップしていき、次(つぎ)の列(れつ)の一番(ばん)下(か)からまた５，６，７……と数(かぞ)えていくんだ。

グリッドをリストで管理(かんり)する方法(ほうほう)

これをリストで管理(かんり)するとこうなる。

画像(がぞう)の右側(みぎがわ)に新(あたら)しく表示(ひょうじ)されたリスト「★ステージグリッド（タイル設計(せっけい)図(ず)）」の中(なか)を見(み)てほしい。1つ目(め)には１０という数字(すうじ)が入(はい)ってるよね。これはステージグリッドの１つ目(め)のマスにはコスチューム番(ばん)号(ごう)１０のタイルが入(はい)ってますよという意味(いみ)になるんだ。続(つづ)けて２マス目(め)、３マス目(め)もコスチューム番(ばん)号(ごう)１０のタイルが入(はい)っていることが見(み)て取(と)れる。で４つ目(め)のマスには何(なに)もないので、空白(くうはく)のタイル（＝コスチューム番(ばん)号(ごう)２）が格納(かくのう)されている。そして５つ目(め)だ。ここにはステージグリッドの５マス目(め)のタイルが入(はい)ってる。リストだけ見(み)ると何番目(なんばんめ)から次(つぎ)の行(ぎょう)になるのか分(わ)からないけど、そこは変数(へんすう)で管理(かんり)すればタテが何個(なんこ)のグリッドなのか分(わ)かるから大丈夫(だいじょうぶ)。とまぁこれがグリッドをリストで管理(かんり)する考(かんが)え方(かた)だ。これをしっかり頭(あたま)に入(い)れておくと、ココからの実装(じっそう)がより明確(めいかく)に理解(りかい)できると思(おも)う。よぉし話(はなし)はここまでにして手(て)を動(うご)かしていくぞぉ！

ブロック定義(ていぎ)「_地形(ちけい)を生成(せいせい)する」を用意(ようい)する

じゃ、再(さい)描画(びょうが)なしのブロック定義(ていぎ)を用意(ようい)するよ！これが地形(ちけい)生成(せいせい)のメイン処理(しょり)だ。

リストを初期(しょき)化(か)する

とりあえず処理(しょり)の最初(さいしょ)にリストの初期化(しょきか)を行(おこな)おう。

ステージグリッドのサイズを変数(へんすう)化(か)する

グリッドの横幅(よこはば)と高(たか)さを変数(へんすう)で管理(かんり)していくようにしよう。

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

とりあえずヨコ３０、タテ２０で初期(しょき)化(か)しておこう。

ステージの土台(どだい)を作(つく)る

じゃあグリッドにタイルのコスチューム番(ばん)号(ごう)をどんどん入(い)れていってステージを作(つく)ってみよう。まずどんなステージを作(つく)るのか共有(きょうゆう)するよ。今(いま)から作(つく)るのはこんな感(かん)じの箱型(はこがた)のステージ↓

左右(さゆう)に壁(かべ)があって、上(うえ)には天井(てんじょう)、下(した)には床(ゆか)がある、こんなシンプルなステージの枠組(わくぐ)みを作(つく)っていくよ。使(つか)うタイルはすべてコスチューム番(ばん)号(ごう)１０のもの。

左(ひだり)の壁(かべ)を作(つく)る

まずは左(ひだり)の壁(かべ)から作(つく)ってみよう。

ブロック定義(ていぎ)「_壁(かべ)を追加(ついか)する」を用意(ようい)する

壁(かべ)を追加(ついか)する処理(しょり)を再(さい)描画(びょうが)なしのブロック定義(ていぎ)にまとめていくよ。

呼(よ)び出(だ)す

地形(ちけい)を生成(せいせい)する処理(しょり)で呼(よ)び出(だ)そう。

ステージグリッドの高(たか)さだけ繰(く)り返(かえ)すループを作(つく)る

壁(かべ)の高(たか)さはステージグリッドの高(たか)さと同(おな)じだから、さっそくさっき作(つく)った変数(へんすう)を利用(りよう)しよう。

タイルを追加(ついか)する

壁(かべ)のタイルは１０番(ばん)だから、１０をリストに追加(ついか)していくよ。

• １０は定数(ていすう)として変数(へんすう)化(か)すべき？

  u003cpu003eパッと見(み)で１０が何(なに)を意味(いみ)しているのか分(わ)かりづらいから、いつもどおりマジックナンバー（≒よく分(わ)からない数字(すうじ)）をなくすために１０も変数(へんすう)にしたほうがいいかな、と思(おも)う人(ひと)もいるかも。でもそうするとコスチュームの数(かず)だけ変数(へんすう)を作(つく)る必要(ひつよう)があって、なにげにコスチューム数(すう)が６７個(こ)あるから多(おお)すぎるｗu003c/pu003eu003cpu003e逆(ぎゃく)に分(わ)かりづらくなりそうだから、リスト「★ステージグリッド（タイル設計(せっけい)図(ず)）」に追加(ついか)する数字(すうじ)はコスチューム番(ばん)号(ごう)ですよとコメントなどに明記(めいき)しておくのがベター。u003c/pu003e

床(ゆか)と天井(てんじょう)を作(つく)る

隣(となり)の列(れつ)に移(うつ)って、今度(こんど)は床(ゆか)と天井(てんじょう)を作(つく)ろうか。

今度(こんど)はさっきより複雑(ふくざつ)だね。まず一番(いちばん)下(した)にはタイル１０の床(ゆか)があって、間(あいだ)は空白(くうはく)だからタイル２がズラッと並(なら)んで、最後(さいご)にまたタイル１０で天井(てんじょう)を作(つく)る感(かん)じだね。

ブロック定義(ていぎ)「_床(ゆか)と天井(てんじょう)を追加(ついか)する」を用意(ようい)する

これもブロック定義(ていぎ)にしていこう。

床(ゆか)を追加(ついか)する

まずはタイル１０を追加(ついか)しようか。

空白(くうはく)を追加(ついか)する

つぎに空白(くうはく)だからタイル２をズラッと追加(ついか)しよう。追加(ついか)する回数(かいすう)は床(ゆか)と天井(てんじょう)の２タイル分(ぶん)を高(たか)さから引(ひ)いた数(かず)だ。

タイル２を追加(ついか)する

中身(なかみ)は空白(くうはく)とする。

天井(てんじょう)を追加(ついか)する

最後(さいご)に天井(てんじょう)としてタイル１０を追加(ついか)しよう。

ブロック定義(ていぎ)「_床(ゆか)と天井(てんじょう)を追加(ついか)する」を実行(じっこう)する

ではこのブロック定義(ていぎ)も実行(じっこう)したいのだけど、今(いま)作(つく)ったのは１列(れつ)だけだよね。イメージ通(どお)りなら同(おな)じ地形(ちけい)がヨコにもずっと続(つづ)いてほしいのでループで囲(かこ)って一気(いっき)に作(つく)っちゃいたいよね！

両(りょう)サイドの壁(かべ)を除(のぞ)いた回数(かいすう)だけ繰(く)り返(かえ)す

両(りょう)サイドに１つずつ壁(かべ)があるから合計(ごうけい)２を横幅(よこはば)から引(ひ)いた回数(かいすう)繰(く)り返(かえ)せばOKだね。

実行(じっこう)していくぅ

よしよし、きっと上手(うま)くいってるはず。

右(みぎ)の壁(かべ)を作(つく)る

まだ実行(じっこう)しても描画(びょうが)されないけど右(みぎ)の壁(かべ)も作(つく)っちゃおう。

といってもさっき作(つく)ったブロック定義(ていぎ)「_壁(かべ)を追加(ついか)する」を実行(じっこう)したらOKだね。

メッセージ「地形(ちけい)を生成(うみな)します」を作(つく)る

この一連(いちれん)の処理(しょり)を動(うご)かすタイミングはメッセージを受(う)け取(と)ったときにするよ。こうすることで他(ほか)のスプライトの初期化(しょきか)などが終(お)わったり、都合(つごう)のいいタイミングで地形(ちけい)生成(せいせい)ができるゆえ。

実行(じっこう)する

スプライト「タイル」からメッセージを送(おく)る

このメッセージを送(おく)るのはタイルからにしておこうか。

リストの中身(なかみ)を確認(かくにん)する

よし、これで緑(みどり)の旗(はた)を押(お)したらリスト「★ステージグリッド（タイル設計(せっけい)図(ず)）」の中(なか)にちょうど６００個(こ)のデータが入(はい)るようになったはずだからチェックしてみてほしい！

タイルのクローン生成(せいせい)手順(てじゅん)を改修(かいしゅう)する

リストはできたけど、まだ緑(みどり)の旗(はた)を押(お)してもタイルが設計(せっけい)図(ず)通(どお)りには並(なら)ばないよね。ということでこのリストをしっかり使(つか)っていくところを作(つく)っていく。その前提(ぜんてい)として、すでに作(つく)ったタイルのクローン生成(せいせい)手順(てじゅん)を少(すこ)しだけ変更(へんこう)しておこうと思(おも)う。ここから開(ひら)いてほしいスプライトは「タイル」だ。

変数(へんすう)「ステージグリッドのインデックス」を作(つく)る

新(あたら)しく変数(へんすう)を作(つく)るよ。

この変数(へんすう)の役割(やくわり)なんだけど、リスト「★ステージグリッド（タイル設計(せっけい)図(ず)）」のインデックスを保持(ほじ)することになる。

• インデックスってなに？

  インデックスというのはリストの何番目かという数字です。リストじゃなくても例えば図書館の本棚を想像してみて。本棚の5番目にある本のインデックスは５。１９番目にある本のインデックスは１９みたいなイメージ。

  プログラミングだとインデックスという言葉は必須知識の１つだから、もし知らなかったらこの機会に覚えよう。

  ちなみにメジャーなプログラミング言語だとインデックスは１番目が０になる。２番目が１になる。でもスクラッチだと１番目は１だし、２番目は２になってるから注意。

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

座標(ざひょう)を変更(へんこう)する

このタイミングで座標(ざひょう)の処理(しょり)も変更(へんこう)していく。下(した)に示(しめ)した２箇所(かしょ)をまずは変(か)えるよ。

この２箇所(かしょ)の式(しき)を削除(さくじょ)して、シンプルに１６にしておいてほしい。

この１６はタイルのサイズ（３２）の半分(はんぶん)という意(い)味(あじ)がある。（あとでリファクタリングのときに変数(へんすう)化(か)する予定(よてい)）１６にセットするのは、それがタイルのセンターを示(しめ)す座標(ざひょう)だから。

これを３２ずつズラせば、すべてのマスにきっちりタイルが埋(う)まっていく。

• クローン生成(せいせい)数(すう)を使(つか)った計算(けいさん)ではだめなの？

  u003cpu003e変更(へんこう)前(まえ)はクローン生成(せいせい)数(すう)に掛(か)け算(ざん)をして座標(ざひょう)を算出(さんしゅつ)してたけど、今後(こんご)はカメラを使(つか)ってステージを動(うご)かしていくように変(か)えるから、先(さき)を見据(みす)えて変更(へんこう)しておいたんだ。カメラはスプライト「マリオ」を作(つく)るときに実装(じっそう)する予定(よてい)だから、もうちょっと先(さき)だね。u003c/pu003e

ステージグリッドのインデックスを変(か)える

次(つぎ)はインデックスを変更(へんこう)しよう。

タテ移動(いどう)する

コーディングは次(つぎ)の通(とお)り。

「■クローン生成(せいせい)数(すう)Y回(かい)繰(く)り返(かえ)す」というループ内(ない)にブロックを追加(ついか)したよ。こうすることで下図(かず)のような動(うご)きがデータ上(じょう)は実現(じつげん)できるってこと。

改行(かいぎょう)する

次(つぎ)はヨコ移動(いどう)、ではなくて改行(かいぎょう)。改行(かいぎょう)する手順(てじゅん)としては、

1. まずヨコ移動(いどう)してから
2. 次(つぎ)に一番(いちばん)下(した)に移動(いどう)する

複雑(ふくざつ)に見(み)えるけどコーディングしてみるとカンタン。ステージグリッドのインデックスを次(つぎ)の演算(えんざん)結果(けっか)ずつ変(か)えればOK。

ステージグリッドのインデックスに反映(はんえい)するとこうなる↓

演算(えんざん)はシンプルだけど、直感的(ちょっかんてき)に分(わ)かりづらいよね！演算(えんざん)を２段階(だんかい)で考(かんが)えると理解(りかい)しやすいよ。下図(かず)を見(み)てみて。

２つの変数(へんすう)の役割(やくわり)

ステージグリッドとクローン生成(せいせい)数(すう)Yという２つの変数(へんすう)を使(つか)っているよね。復習(ふくしゅう)がてら各(かく)変数(へんすう)の役割(やくわり)を思(おも)い出(だ)してみよう。

• ステージグリッドの高(たか)さは、画面(がめん)外(がい)（見(み)えない範囲(はんい)）も含(ふく)めたステージのタテの大(おお)きさ
• クローン生成(せいせい)数(すう)Yは、画面(がめん)内(ない)（見(み)える範囲(はんい)）に生成(せいせい)されるクローンのタテの個数(こすう)

だからステージグリッドの高(たか)さのほうが基本的(きほんてき)に数字(すうじ)が大(おお)きい。

演算(えんざん)の解説(かいせつ)

で、演算(えんざん)の解説(かいせつ)をしようか。

① ヨコに移動(いどう)する

まずインデックスにステージグリッドの高(たか)さを足(た)すことでヨコの列(れつ)に移動(いどう)できる。この演算(えんざん)に来(く)るまでに変数(へんすう)「■クローン生成(せいせい)数(すう)Y」回(かい)繰(く)り返(かえ)すループでインデックスは１ではなくて画面(がめん)の１つ上(じょう)の位置(いち)、上(うえ)の図(ず)だと５になっているはずだ。そこにいったん変数(へんすう)「■ステージグリッドの高(たか)さ」を足(た)してみようか。上(うえ)の図(ず)を参考(さんこう)にすると６だね。だから５＋６＝１１ってことだね。これを視覚(しかく)化(か)すると下図(かず)のようになるよ↓

② 一番(ばん)下(か)に移動(いどう)する

そして変数(へんすう)「■クローン生成(せいせい)数(すう)Y」をマイナスするんだよね。上図(じょうず)を参考(さんこう)にするとクローン生成(せいせい)数(すう)Yは４だね。つまり１１ー４＝７だ！インデックス７はちょうど次(つぎ)の行(ぎょう)の一番(ばん)下(か)の位置(いち)だね。

これでステージの高(たか)さとクローン生成(せいせい)数(すう)がどんなにかけ離(はな)れていても確実(かくじつ)に改行(かいぎょう)処理(しょり)が上手(うま)くいくんだ。少(すこ)しだけ触(ふ)れたけどカメラを実装(じっそう)する段階(だんかい)になると、こういった数学的(すうがくてき)に確実(かくじつ)に上手(うま)くいく方法(ほうほう)を実装(じっそう)しておいたほうが何(なに)かと無難(ぶなん)になるんだよ。仕組(しく)みが複雑(ふくざつ)でも１つ１つは確実(かくじつ)に動(うご)いてくれれば、バグったときもどこを直(なお)せばいいか発見(はっけん)しやすいし。または土管(どかん)でワープみたいなマリオの位置(いち)座標(ざひょう)がガラリと一変(いっぺん)するような処理(しょり)を作(つく)るときも、こういう計算(けいさん)で位置(いち)を割(わ)り出(だ)す仕組(しく)みが整(ととの)っているとバグが起(お)きにくいんだ。

着替(きが)える場(ば)所(ところ)を変(か)える

いまコスチュームをランダムで着替(きが)えているブロックがあるけど、これをメッセージ「タイルを配置(はいち)します」を受(う)け取(と)ったときに変(か)えよう。

既存(きそん)のブロックを削除(さくじょ)する

いまのブロックは削除(さくじょ)してOK。

新(あら)たにブロックを置(お)く

メッセージ「タイルを配置(はいち)します」を受(う)け取(と)ったときにコスチュームを着替(きが)えるようにしていくよ。まずはココ↓にブロックを置(お)こう。

設計(せっけい)図(ず)通(どお)りのタイルを配置(はいち)する

リスト「★ステージグリッド（タイル設計(せっけい)図(ず)）」で指定(してい)した通(とお)りのタイルを配置(はいち)したいので、リストからコスチューム番(ばん)号(ごう)を取(と)り出(だ)そう。これを使(つか)うよ↓

ちょい変(へん)数名(すうめい)が長(なが)いけどｗカチッとハメていこう↓

うん、長(なが)いねｗ

カメラの座標(ざひょう)を初期(しょき)化(か)しておく

テストの前(まえ)にカメラの座標(ざひょう)も初期(しょき)化(か)しておくね。カメラXは240、カメラYは180にしておくよ。

テストぉ！

いよいよテストで動(うご)かしてみるぞ！長(なが)かった！

やふー！なんかめっちゃステージの土台(どだい)っぽいの（語彙力(ごいりょく)ｗ）出(で)てきたぁ！みんなも出来(でき)た？

ステージを洗練(せんれん)させる

とはいえまだまだスクロールしてみると課題(かだい)が山積(やまづみ)しているのが分(わ)かる。

次回(じかい)はこのタイルがループしちゃってる問題(もんだい)にタックルしていく。もう少(すこ)しで本格的(ほんかくてき)なスクロールゲームの土台(どだい)が手(て)に入(はい)るぜ！