スクラッチでマリオっぽいスクロールゲームを作る上級技②　こ、こいつ（タイル）、動くぞ！

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

前回(ぜんかい)はタイルをグリッド状(じょう)に並(なら)べることに成功(せいこう)した。じゃあ次(つぎ)はこのタイルをどうすればスクロールさせることができるのか。そこに挑戦(ちょうせん)していく。今(いま)ってクローンをめっちゃ使(つか)ってるけど、そもそもスクラッチってクローンは300個(こ)までしか作(つく)れないという制限(せいげん)がある。それを考(かんが)えると、このままクローンでステージを埋(う)め尽(つ)くすのは得策(とくさく)とは言(い)えない。そういう制限(せいげん)の超(こ)え方(かた)もこのチュートリアルで見(み)ていくぜ。応用(おうよう)の効(き)く実装(じっそう)方法(ほうほう)だから、またまたスキルレベルが上(あ)がっちゃうね！

今回(こんかい)の目標(もくひょう)「タイルをスクロールさせる」

ということでタイルをスクロールさせることができればこのチュートリアルは成功(せいこう)だよ。分(わ)かりやすくするためにスタータープロジェクトに含(ふく)まれている「実験(じっけん)用(よう)」というスプライトを表示(ひょうじ)してみよう。

そうするとタイルの周(まわ)りが暗(くら)く見(み)えるようになったと思(おも)う。この方(ほう)が分(わ)かりやすいから一時的(いちじてき)にこのまま進(すす)めていこう！

タイルの配置(はいち)方法(ほうほう)を修正(しゅうせい)する

ではスプライト「タイル」を開(ひら)いておこう！

前回(ぜんかい)は実験(じっけん)を通(とお)してタイルを配置(はいち)したけど、スクロールさせるために少(すこ)し修正(しゅうせい)する。

変数(へんすう)「X座標(ざひょう)」と「Y座標(ざひょう)」をつくる

タイルのXとY座標(ざひょう)を直接(ちょくせつ)変更(へんこう)するのではなく、いったん変数(へんすう)として値(ね)を保持(ほじ)していく。もう少(すこ)し進(すす)めていくと理由(りゆう)が分(わ)かるよ。

置(お)き換(か)える（間違(まちが)いやすいから注意(ちゅうい)）

じゃあ既存(きそん)のXとY座標(ざひょう)を変数(へんすう)に置(お)き換(か)えていく。この操作(そうさ)は間違(まちが)いやすいから１つずつ一緒(いっしょ)にやっていこう。

① X座標(ざひょう)（◯にする）

まず最初(さいしょ)のX座標(ざひょう)からだ。式(しき)だけを取(と)り出(だ)して変数(へんすう)にセットするぞ。

そしてブロックを置(お)き換(か)える↓

大丈夫(だいじょうぶ)かな？

② Y座標(ざひょう)（◯にする）

次(つぎ)のY座標(ざひょう)もやってみるよ。

ブロックを置(お)き換(か)える。

③ Y座標(ざひょう)（◯ずつ変(か)える）

次(つぎ)はY座標(ざひょう)を◯ずつ変(か)えるところだ。ここは式(しき)がないから値(ね)を32にして置(お)き換(か)える。

④ X座標(ざひょう)（◯ずつ変(か)える）

最後(さいご)にX座標(ざひょう)だ。

よし！あ、まだ動(うご)かないよ。もう少(すこ)し作業(さぎょう)しよう。

メッセージ「タイルを配置(はいち)します」を作(つく)る

メッセージを作(つく)ってタイルの配置(はいち)を進(すす)めていく。

これを受(う)け取(と)ったときブロックを置(お)いてXとY座標(ざひょう)をセットするようにしていくよ。

変数(へんすう)を割(わ)り当(あ)てる

さきほど作(つく)った変数(へんすう)をここにハメてみようか。

メッセージを送(おく)る

緑(みどり)の旗(はた)のところでメッセージを送(おく)ろう。

これで今(いま)までと同(おな)じ動(うご)きをするようになった！

• なぜメッセージを送(おく)ってるの？ブロック定義(ていぎ)でよくない？

  u003cpu003e最終的(さいしゅうてき)にはこのメッセージ「タイルを配置(はいち)します」は別(べつ)のスプライトから呼(よ)び出(だ)すことを想定(そうてい)しているんだ。あと、クローン１つ１つがメッセージを受(う)け取(と)って処理(しょり)を実行(じっこう)できるようにもなるから、このあとを見据(みす)えると都合(つごう)がいいんだ。u003c/pu003e

カメラを作(つく)る

カメラXとカメラYという変数(へんすう)を用意(ようい)して、このプロジェクトに「カメラ」という概念(がいねん)を導入(どうにゅう)する。カメラがあることで、このあと作(つく)るプレイヤー（マリオ）の動(うご)きに合(あ)わせてタイルがスクロールするような演出(えんしゅつ)が可能(かのう)になるんだ。

変数(へんすう)「★カメラX」と「★カメラY」を作(つく)る

両方(りょうほう)ともすべてのスプライトで参照(さんしょう)できるように作(つく)っていこう。

スライダーにして最大(さいだい)500まで変更(へんこう)できるようにする

変数(へんすう)の表示(ひょうじ)を右(みぎ)クリックしてスライダーで変更(へんこう)できるようにしておこう。

もう一回(かい)右(みぎ)クリックして、今度(こんど)はスライダーの指定(してい)範囲(はんい)を変更(へんこう)しておこう。

とりあえず５００にしておいて。

カメラYもスライダーにしておく

カメラYも同(おな)じくスライダーにして０から５００まで指定(してい)できるようにしよう。横並(よこなら)びにしておくと分(わ)かりやすいよ。

X座標(ざひょう)からカメラXを減算(げんざん)する

タイルの位置(いち)をカメラに合(あ)わせて動(うご)くようにしたいので、X座標(ざひょう)からカメラXの値(ね)を減算(げんざん)する。

Y座標(ざひょう)側(がわ)も同(おな)じくY座標(ざひょう)からカメラYの値(ね)を減算(げんざん)して置(お)き換(か)えよう。こうなる↓

メッセージを常(つね)に送(おく)るようにする

緑(みどり)の旗(はた)のところに置(お)いたメッセージを送(おく)る処理(しょり)が繰(く)り返(かえ)されるようにループで囲(かこ)うよ。

スクロールの第(だい)一歩(ぽ)、成(な)る

これで動(うご)かしてみると……

きったぁ！！スクロールの産声(うぶごえ)が聞(き)こえるぜ！

タイルを回(まわ)り込(こ)ませる（リサイクルする）

上(うえ)の動画(どうが)を見(み)てみると、タイルが動(うご)くのはいいけど白(しろ)い余白(よはく)が見(み)えてしまうよね。スクロールゲームでは余白(よはく)があったら困(こま)るので、画面(がめん)外(がい)に消(き)えたタイルを回(まわ)り込(こ)ませて余白(よはく)を埋(う)めていくよ。

タイルを配置(はいち)するときに回(まわ)り込(こ)み（リサイクル）を実装(じっそう)する

メッセージ「タイルを配置(はいち)します」を受(う)け取(と)ったときに、タイルがどこにいるかで回(まわ)り込(こ)む(む)かスクロールするかを、クローン１つ１つに判断(はんだん)させよう。

画面(がめん)外(がい)（左(ひだり)）にいるかどうか調(しら)べる

まずタイルの場所(ばしょ)（X座標(ざひょう)）はこれで分(わ)かる↓

そしてタイルが画面(がめん)外(がい)（今(いま)は暗(くら)い部分(ぶぶん)のこと）の座標(ざひょう)はコレで分(わ)かる↓

正確(せいかく)に言(い)うとこれは画面(がめん)外(がい)（左側(ひだりがわ)）の座標(ざひょう)だね。クローン生成(せいせい)数(すう)Xに16を掛(か)けるとちょうど画面(がめん)外(がい)の座標(ざひょう)になるよ。クローン生成(せいせい)数(すう)Xは５だから「5 x -16」ということだね。これがどうして画面(がめん)外(がい)の座標(ざひょう)に成(な)るのか、視覚的(しかくてき)に分(わ)かるように↓コレを見(み)てね。

一番左(いちばんひだり)の赤(あか)い線(せん)が5 x -16で算出(さんしゅつ)されるX座標(ざひょう)の位置(いち)だよ。ここよりもタイル自身(じしん)のX座標(ざひょう)が小(ちい)さければ、すなわち画面(がめん)外(がい)に出(で)てるっていう判断(はんだん)だね。式(しき)にするとこういう感(かん)じ↓

これを条件(じょうけん)式(しき)にはめよう。

画面(がめん)外(がい)（右(みぎ)）に回(まわ)り込(こ)ませる

反対(はんたい)側(がわ)に移動(いどう)させよう。反対(はんたい)側(がわ)に行(い)く演算(えんざん)はこれ↓

さっきはマイナス１６だったけど、今度(こんど)は３２だね。 また視覚(しかく)化(か)してみたよ↓

今度(こんど)は半(はん)マス（１６）じゃなくて１マス（３２）を５回(かい)プラスの方向(ほうこう)に動(うご)かすと右側(みぎがわ)のX座標(ざひょう)が算出(さんしゅつ)できるというのが見(み)て取(と)れるかな。ブロックにするとこんな感(かん)じ↓

「◯ずつ変(か)える」ブロックになってるか注意(ちゅうい)してね。

動(うご)きを確認(かくにん)する

今回(こんかい)から実験(じっけん)用(よう)スプライトのサイズを4x4に変更(へんこう)してるよ。うっすらとタイルが回(まわ)り込(こ)んでいる様子(ようす)が見(み)て取(と)れるかな？

こうすることでクローンをリサイクルできるんだ。これこそがスクラッチのクローン300個(こ)の制限(せいげん)に引(ひ)っかからないようにスクロールを実装(じっそう)できるカラクリってわけだね。ただ逆方向(ぎゃくほうこう)に動(うご)かすとまだリサイクルができてないよね。次(つぎ)は逆方向(ぎゃくほうこう)へのリサイクルも実装(じっそう)していくよ。

両方向(りょうほうこう)に対応(たいおう)した回(まわ)り込(こ)み処理(しょり)を作(つく)る

まず条件(じょうけん)式(しき)から変(か)えていくよ。カンタンなのは単純(たんじゅん)に条件(じょうけん)ブロックをまるごとコピーしてしまう方法(ほうほう)だけど、ここでは数学的(すうがくてき)なトリックで解決(かいけつ)していく。といっても何度(なんど)かやったことがある絶対値(ぜったいち)を使(つか)った方法(ほうほう)だから、比較的(ひかくてき)シンプルな技(わざ)だよ。

画面(がめん)内(ない)かどうかの判定(はんてい)を変(か)える

条件(じょうけん)式(しき)で変(か)えるのは3箇所(かしょ)↓

まずX座標(ざひょう) - カメラXの絶対値(ぜったいち)を求(もと)める。それがクローン生成(せいせい)数(すう)X x 16より大(おお)きいかどうかを調(しら)べる。変更(へんこう)後(ご)はこんな感(かん)じ↓

X座標(ざひょう)とカメラXの比較(ひかく)を作(つく)る

次(つぎ)はX座標(ざひょう)がカメラXよりも小(ちい)さいかどうかを調(しら)べるために、この条件(じょうけん)ブロック内(ない)にもう１つ条件(じょうけん)ブロックを配置(はいち)する。

X座標(ざひょう)がカメラXより小(ちい)さいかどうか

大(おお)きい場合(ばあい)

小(ちい)さい場合(ばあい)は今(いま)まで通(とお)り32ずつX座標(ざひょう)を変(か)えればOKで、大(おお)きい場合(ばあい)は逆(ぎゃく)に-32ずつ変(か)えればOk。

左右(さゆう)にスクロールするぞ！

ひゅいーん！

Y軸(じく)にもスクロールさせる

X座標(ざひょう)の処理(しょり)をまるごと複製(ふくせい)しよう。

Y軸(じく)になるように各所(かくしょ)を書(か)き換(か)える

あとは変数(へんすう)を入(い)れ替(か)えよう。入(い)れ替(か)えるのは6箇所(かしょ)。

タテにもスクロールするぅ！

黒(くろ)いマスクをどけてみる

よし基本的(きほんてき)なスクロールの動(うご)きは出来(でき)た！じゃあ黒(くろ)いマスクをどけてみようか、実験(じっけん)用(よう)スプライトを表示(ひょうじ)オフにしてみよう。

それでスクロールしてみよう！っと、あれ？

ガッタガタやん！？さっきまでのスムーズなスクロールはどこへ！？

タイルを画面(がめん)いっぱいに広(ひろ)げる

「なにかミスったか？」と焦(あせ)るかもしれないけど、大丈夫(だいじょうぶ)。実(じつ)はさっきからずっとガタガタだった。たんに黒(くろ)いマスクがあったおかげで気(き)にならなかっただけなんだ。ということは今(いま)は中央(ちゅうおう)に５マスずつしかないけど、画面(がめん)いっぱいにこのタイルを広(ひろ)げればさっきみたいな挙動(きょどう)になるはずだ。

何(なに)タイル必要(ひつよう)か計算(けいさん)する

ではスクラッチのプレイ画面(がめん)の横(よこ)と縦(たて)に何個(なんこ)ずつクローンを作(つく)ればいいか計算(けいさん)してみようか。いまは適当(てきとう)に5 x 5を定数(ていすう)として「■クローン生成(せいせい)数(すう)X」「■クローン生成(せいせい)数(すう)Y」に入(い)れてるけど、ちょっと割(わ)り算(ざん)してみる。

ヨコ

スクラッチのプレイ画面(がめん)の横幅(よこはば)の座標(ざひょう)は-240から240まで合計(ごうけい)480ある。そして1つのタイルの大(おお)きさは32だから、480 ÷ 32 = 15になる。ただ15だとピッタリすぎてリサイクルされる一瞬(いっしゅん)に白(しろ)い余白(よはく)が見(み)えてしまうのでプラス１して、16個(こ)のクローンを用意(ようい)する。↓この動画(どうが)は最初(さいしょ)は変数(へんすう)「■クローン生成(せいせい)数(すう)X」は15、途中(とちゅう)から16で再起動(さいきどう)して両者(りょうしゃ)の違(ちが)いを確認(かくにん)できるよ。16の方(ほう)がいい感(かん)じでしょ？

タテ

タテは-180から180だから、360 ÷ 32 = 約(やく)12だ。ヨコのときと同(おな)じく12だと余白(よはく)が気(き)になるからプラス１して13を変数(へんすう)「■クローン生成(せいせい)数(すう)Y」にセットしよう。コーディングはこんな感(かん)じになる↓

よしよし、これでカンペキ……かな？

なーんか、下(した)の方(ほう)のタイルおかしくない？画面(がめん)外(がい)に消(き)える瞬間(しゅんかん)にもたつくような動(うご)きしてるよね？相撲(すもう)の土俵(どひょう)際(ぎわ)で粘(ねば)る力士(りきし)みたいにタイルが粘(ねば)ってスムーズに消(き)えない……。

画面(がめん)外(がい)にスムーズに移動(いどう)する処理(しょり)

これはスクラッチ独特(どくとく)の仕様(しよう)で、画面(がめん)から消(き)えるときにちょっと突(つ)っかかるように動(うご)くんだよね。これを解決(かいけつ)する方法(ほうほう)は色々(いろいろ)あるんだけど、今回(こんかい)はBIGというコスチュームを使(つか)った技(わざ)を紹介(しょうかい)する。必(かなら)ずしも直感的(ちょっかんてき)ではないけど、この突(つ)っかかり現象(げんしょう)はBIGで解決(かいけつ)できる、って覚(おぼ)えてしまえばOKだ。コスチュームを見(み)てみて。

1つ目(め)にBIGっていう名前(なまえ)のコスチュームがあるよね。他(ほか)のタイルのサイズは32 x 32だけど、このコスチュームは36 x 36になってて、少(すこ)しだけ大(おお)きめのBIGサイズなコスチュームなんだ。こいつがいい仕事(しごと)をする。画面(がめん)外(がい)に消(き)える瞬間(しゅんかん)だけタイルをこのBIGに着替(きが)えさせることで、あたかもスムーズに画面(がめん)外(がい)に消(き)えるような演出(えんしゅつ)ができるんだ。突(つ)っかかり現象(げんしょう)が起(お)きるタイミングが32 x 32よりも36 x 36のほうが（サイズが大(おお)きいから）遅(おそ)いんだ。その特性(とくせい)を利用(りよう)したトリック技(わざ)ってこと。まぁスクラッチ以外(いがい)では使(つか)えない技(わざ)だろうけど、何事(なにごと)も諦(あきら)めなければ抜(ぬ)け道(みち)がある、って信(しん)じて実験(じっけん)しまくるのはプログラミングにおいてはメジャーな精神(せいしん)論(ろん)だったりする。

BIGに着替(きが)える

ではメッセージ「タイルを配置(はいち)します」を受(う)け取(と)ったときの、座標(ざひょう)変更(へんこう)を反映(はんえい)する直前(ちょくぜん)で着替(きが)えようか。

よし、座標(ざひょう)を反映(はんえい)したらすぐにまた元(もと)のコスチュームに戻(もど)せばOK！……なんだけど、どのコスチューム（タイル）に戻(もど)せばいいか分(わ)からないから変数(へんすう)を作(つく)ってコスチューム番(ばん)号(ごう)を保持(ほじ)しておこう。

変数(へんすう)「コスチューム番(ばん)号(ごう)」を作(つく)る

• タイルのコスチューム番(ばん)号(ごう)、の方(ほう)が正確(せいかく)では？

  u003cpu003eうん、たんにコスチューム番(ばん)号(ごう)っていう名前(なまえ)にするよりも、タイルのコスチューム番(ばん)号(ごう)にしたほうが分(わ)かりやすいと感(かん)じる人(ひと)も多(おお)いと思(おも)う。もしそう感(かん)じるなら、さっき作(つく)ったX座標(ざひょう)とY座標(ざひょう)も「タイルのX座標(ざひょう)」「タイルのY座標(ざひょう)」っていう名(めい)前(まえ)の方(ほう)が正確(せいかく)だと感(かん)じるかもね。u003c/pu003eu003cpu003e僕(ぼく)の場合(ばあい)はu003cemu003eスプライト名(めい)が「タイル」なわけだからu003c/emu003e、コスチューム番(ばん)号(ごう)というローカル変数(へんすう)があったらそれはu003cemu003e暗黙(あんもく)の了解(りょうかい)でu003c/emu003e（タイルの）コスチューム番(ばん)号(ごう)とか、（タイルの）X座標(ざひょう)っていう解釈(かいしゃく)に成(な)ると思(おも)っているからわざわざ「タイルの」って言葉(ことば)を付(つ)けてない。付(つ)けないと誰(だれ)のコスチューム番(ばん)号(ごう)なのか分(わ)からない！というときはつけるけど、今回(こんかい)は付(つ)けなくても分(わ)かると思(おも)ったので付(つ)けてない。でも付(つ)けてもOK！u003c/pu003eu003cpu003eこのあたりの議論(ぎろん)は突(つ)き詰(つ)めるとけっこうディープな話(はなし)になっていくから面白(おもしろ)かったりもする。オブジェクト指向(しこう)とかポリモーフィズムといったプログラミング上(じょう)の概念(がいねん)にまで波及(はきゅう)する可能性(かのうせい)もあるので、興味(きょうみ)がある人(ひと)は調(しら)べてみるのもアリ！u003c/pu003e

初期化(しょきか)時(じ)のコスチューム番(ばん)号(ごう)を保持(ほじ)する

ブロック定義(ていぎ)「_初期(しょき)化(か)する」でコスチューム番(ばん)号(ごう)をランダムに割(わ)り当(あ)ててるところがあるよね。そこで着替(きが)えるのではなく、いったん変数(へんすう)にコスチューム番(ばん)号(ごう)を保持(ほじ)するように置(お)き換(か)えるよ。

式(しき)だけ移(うつ)したらブロックも差(さ)し替(か)える。

元(もと)のタイルに戻(もど)す

よし、さっきBIGに着替(きが)えたところに戻(もど)ろう。そこで座標(ざひょう)を反映(はんえい)させたあとに元(もと)のタイルに戻(もど)るようにブロックを置(お)くよ。

スムーズに画面(がめん)外(がい)に行(い)くぞ！

画面(がめん)の外(そと)にスムーズに移動(いどう)できるようになったぜ！ドスコイ！

ステージを作(つく)ってみる！

ここまでたどり着(つ)いた諸君(しょくん)！おめでとう！いま作(つく)ったプロジェクトこそが、素晴(すば)らしきスクロールゲームのエンジンとなる革命的(かくめいてき)なタイルマップシステムだ。いまはランダムに並(なら)んでいるタイルを、規則的(きそくてき)に並(なら)べることでマリオやマイクラ、忍者(にんじゃ)伝(でん)といった名作(めいさく)が育(はぐく)まれる土台(どだい)となるぞ！たまらん！たまらんですぞぉ！みんながどんな作品(さくひん)を作(つく)ろうとニヤニヤしているのか、想像(そうぞう)するだけでこっちもワクワクしてくる！分(わ)かる人(ひと)はどんどんステージを考(かんが)えておいてくれ。もちろんチュートリアルもまだ終(お)わらないぜ。このあとステージを作(つく)り込(こ)む(む)方法(ほうほう)を紹介(しょうかい)して、実際(じっさい)にマリオ（プレイヤー）がどうすればタイルの上(うえ)を暴(あば)れまわることができるのかまで紹介(しょうかい)していく予定(よてい)だ！刮目(かつもく)して待(ま)つべし。