スクラッチでマリオのゲームを作る特大レッスン #16 - 恐怖、壁に引きずり込まれるホラーなバグ！

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

壁(かべ)にめり込(こ)む(む)バグをご報告(ほうこく)いただきました！

ステージ2で少(すこ)し先(さき)のゴーストをスタート付近(ふきん)におびき寄(よ)せて右(みぎ)に向(む)いてダメージを受(う)けると後(うし)ろの落(お)ちないようの壁(かべ)に当(あ)たり、地面(じめん)にめり込(こ)む(む)というあまり関係(かんけい)ないバグを見(み)つけました。sakiyomidaさん

バグ報告(ほうこく)してくださったsakiyomidaさん、ありがとうございます。このバグはちょっと痛(いた)いので直(なお)そうと思(おも)います。そして少(すこ)し大(おお)きめなバグ修正(しゅうせい)になったので、チュートリアルまるまる１回(かい)分(ぶん)として記事(きじ)化(か)しました。

バグの確認(かくにん)

とりあえずどんなときにどんなバグが起(お)きるのか見(み)ておきます。

壁(かべ)に追(お)い込(こ)まれた状態(じょうたい)で敵(てき)にぶつかると壁(かべ)にめり込(こ)んでしまうのです……これはマズイ。

ブロック定義(ていぎ)「スタックを回避(かいひ)する」を改修(かいしゅう)する

今回(こんかい)メインで直(なお)すのはブロック定義(ていぎ)「スタックを回避(かいひ)する」です。

コスを変更(へんこう)する

横向(よこむ)きのスタックを回避(かいひ)したいので、コスを変更(へんこう)します。

ちょっと条件(じょうけん)分岐(ぶんき)が多(おお)いブロック定義(ていぎ)なので挿入(そうにゅう)部分(ぶぶん)を間違(まちが)わないように気(き)をつけてください。

障害物(しょうがいぶつ)に触(ふ)れているかどうかを判定(はんてい)する

直前(ちょくぜん)のX座標(ざひょう)を控(ひか)えておく

これからX座標(ざひょう)を調整(ちょうせい)していくので、変更(へんこう)前(まえ)のX座標(ざひょう)をバックアップしておきます。

スプライトの大(おお)きさと同(おな)じ回数(かいすう)チェックする

スプライトが壁(かべ)にまるまる埋(うず)もれてしまってもいいように、大(おお)きさの分(ぶん)だけチェックを繰(く)り返(かえ)すことにします。余裕(よゆう)をもたせたいならここにプラスしてもOK。

試(ため)しに逆進(ぎゃくしん)させる

向(む)いてる方(ほう)とは逆(ぎゃく)側(がわ)に１座標(ざひょう)ずつズラしていきます。

• 数式(すうしき)を解説(かいせつ)します

  ＼u003cp＼u003eまず「向(む)き / 向(む)きの絶対値(ぜったいち)」を見(み)てください。向(む)きが90度(ど)（右向(みぎむ)き）なら、90 ÷ 90 ＝ 1となります。向(む)きが-90度(ど)（左向(ひだりむ)き）なら、－90 ÷ 90 ＝ -1になります。これをそのままX座標(ざひょう)に加(くわ)えても前進(ぜんしん)するだけなので、もっとめりこんでしまう。そこで「0 － 1 = -1」とか「0 - (-1) = 1」にして、値(ね)を反転(はんてん)させてます。＼u003c/p＼u003e

脱出(だっしゅつ)できたら止(と)める

X座標(ざひょう)に補正(ほせい)値(ち)を加(くわ)えたあとに改(あらた)めて障害物(しょうがいぶつ)に触(ふ)れているか調(しら)べます。もう触(ふ)れてなかったら脱出(だっしゅつ)成功(せいこう)なので、処理(しょり)を止(と)めます。

脱出(だっしゅつ)できなかった場合(ばあい)はX座標(ざひょう)を戻(もど)す

• なんで脱出(だっしゅつ)できなかったって分(わ)かるの？

  ＼u003cp＼u003e＼u003cspan style=＼u0022font-family: -apple-system, BlinkMacSystemFont, ＼u0026quot;Segoe UI＼u0026quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, ＼u0026quot;Helvetica Neue＼u0026quot;, sans-serif; color: initial;＼u0022＼u003eもし脱出(だっしゅつ)できていたら、「大(おお)きさ」回(かい)繰(く)り返(かえ)すループ内(ない)の「このスクリプトを止(と)める」が動(うご)いて、今回(こんかい)置(お)いた「X座標(ざひょう)を直前(ちょくぜん)のX座標(ざひょう)にする」まで処理(しょり)が届(とど)かないのです。＼u003c/span＼u003e＼u003c/p＼u003e＼u003cp＼u003eつまり、ここまで処理(しょり)が来(き)てしまったということはイコール脱出(だっしゅつ)できなかったということになります。＼u003c/p＼u003e

テストする

よぉしいい感(かん)じ、おわり、と思(おも)いきや別(べつ)のバグが発生(はっせい)しています。今度(こんど)は自分(じぶん)から壁(かべ)にグイグイ当(あ)たるように進(すす)んでみます。すると……。

X座標(ざひょう)がどんどんズレてしまって、そのうちプレイヤーがカメラから外(はず)れてしまうのです。これは良(よ)くないですね。

カメラとX座標(ざひょう)の同期(どうき)を改善(かいぜん)しよう

このバグの根本的(こんぽんてき)な原因(げんいん)は、X座標(ざひょう)をズラしたのにカメラは動(うご)いてない、という点(てん)です。今回(こんかい)はカメラをX軸(じく)に動(うご)かしているブロック定義(ていぎ)「X軸(じく)に移動(いどう)する」を改修(かいしゅう)することで対応(たいおう)していきたいと思(おも)います。

条件(じょうけん)分岐(ぶんき)を追加(ついか)する

X座標(ざひょう)がズレてない場合(ばあい)は今(いま)まで通(とお)りの処理(しょり)を行(おこな)えばOKなので、条件(じょうけん)分岐(ぶんき)で仕切(しき)ります。今回(こんかい)ガッツリ処理(しょり)を追加(ついか)するのは「でなければ」の方(ほう)です。

X座標(ざひょう)を調整(ちょうせい)する

X座標(ざひょう)が０ではないときだけ、X座標(ざひょう)に補正(ほせい)値(ち)を加(くわ)えます。

• 逆進(ぎゃくしん)させています

  ＼u003cp＼u003e＼u003cspan style=＼u0022font-family: -apple-system, BlinkMacSystemFont, ＼u0026quot;Segoe UI＼u0026quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, ＼u0026quot;Helvetica Neue＼u0026quot;, sans-serif; color: initial;＼u0022＼u003e向(む)きのときと同(おな)じですね。まず「X座標(ざひょう) ÷ X座標(ざひょう)の絶対値(ぜったいち)」を見(み)てみましょう。＼u003c/span＼u003e＼u003c/p＼u003e＼u003cp＼u003eX座標(ざひょう)がたとえばプラス5のときは画面(がめん)の中央(ちゅうおう)よりも右側(みぎがわ)にいます。なのでマイナス5を加(くわ)えてX座標(ざひょう)を０に戻(もど)したいですよね。そこで「5 ÷ 5 = 1」を反転(はんてん)させて「0 - 1 = - 1」としてからX座標(ざひょう)に加(くわ)えていきます。＼u003c/p＼u003e＼u003cp＼u003eこれで動(うご)くたびに１ずつX座標(ざひょう)が補正(ほせい)されていきます。＼u003c/p＼u003e

テストする

壁(かべ)に当(あ)たってX座標(ざひょう)がズレても、同時(どうじ)に逆(ぎゃく)にも補正(ほせい)しているのでX座標(ざひょう)が増(ふ)えないようになりました。これでバグ修正(しゅうせい)は終(お)わり……じゃないんです😅

再(ふたた)びブロック定義(ていぎ)「スタックを回避(かいひ)する」を改修(かいしゅう)する

今回(こんかい)の修正(しゅうせい)で、これまで隠(かく)れていたバグが浮(う)き彫(ぼ)りになりました。よくある話(はなし)です。

スライムが止(と)まらないｗ

スライムってマジ進撃(しんげき)のスライムなんですよね……当(あ)たっても全然(ぜんぜん)止(と)まらない。将棋(しょうぎ)で言(い)う香車(きょうしゃ)《きょうしゃ》みたいな敵(てき)モブなんです……。いや、香車(きょうしゃ)は当(あ)たれば止(と)まるか……スライム、厄介(やっかい)だぜ。こうなる↓

ピューンって上(うえ)にｗ

ブロック定義(ていぎ)「スタックを回避(かいひ)する」でY座標(ざひょう)を戻(もど)す

X座標(ざひょう)は変数(へんすう)「直前(ちょくぜん)のX座標(ざひょう)」に値(ね)をバックアップしておいて、回避(かいひ)できなかったらX座標(ざひょう)を元(もと)に戻(もど)してありました。Y座標(ざひょう)ではこれを行(い)っていません。ちゃんとやります。

直前(ちょくぜん)のY座標(ざひょう)をバックアップする

回避(かいひ)できなかったらY座標(ざひょう)を元(もと)に戻(もど)す

テストする

うん、上(うえ)にピューンって行(い)くバグは直(なお)った。もう問題(もんだい)ない。ないよね。うん、ないね。ははっ。え？なんかネコが壁(かべ)にめり込(こ)んでないかって？オー、ワタシ、ニホンゴ、ワカラナーイ、ソーリーソーリーナイカクソーリー。冗談(じょうだん)はさておき、はい、またバグってますね。直(なお)します、直(なお)しますよぉ！バグめぇ！

再(ふたた)びブロック定義(ていぎ)「X軸(じく)に移動(いどう)する」を改修(かいしゅう)する

原因(げんいん)を明(あき)らかにしておきましょう。犯人(はんにん)は……ワタシだぁｗいや、バグを憎(にく)んで人(ひと)を憎(にく)まず。誰(だれ)が悪(わる)いとかじゃない。次(つぎ)の動画(どうが)を見(み)てください↓

X座標(ざひょう)とネコの動(うご)きが鍵(かぎ)です。

• 何(なに)が起(お)きてるの？

  ＼u003cp＼u003e＼u003cspan style=＼u0022font-family: -apple-system, BlinkMacSystemFont, ＼u0026quot;Segoe UI＼u0026quot;, Roboto, Oxygen-Sans, Ubuntu, Cantarell, ＼u0026quot;Helvetica Neue＼u0026quot;, sans-serif; color: initial;＼u0022＼u003eさきほどX座標(ざひょう)がズレているときはカメラは動(うご)かさずに逆進(ぎゃくしん)させて補正(ほせい)するという処理(しょり)を、ブロック定義(ていぎ)「X軸(じく)に移動(いどう)する」に追加(ついか)しました。＼u003c/span＼u003e＼u003c/p＼u003e＼u003cp＼u003eこのため、X座標(ざひょう)がプラス33のときはカメラが動(うご)かさずに、一歩(ぽ)あるくごとにX座標(ざひょう)がマイナス１ずつ補正(ほせい)されます。すると、ネコはX33からX32に移動(いどう)します。これだと、X32に壁(かべ)があった場合(ばあい)、せっかく脱出(だっしゅつ)した壁(かべ)に再(ふたた)び埋(うず)もれてしまうことになります。＼u003c/p＼u003e＼u003cp＼u003eこれでは真(しん)の解決(かいけつ)からは程遠(ほどとお)いのが現状(げんじょう)です。＼u003c/p＼u003e

このバグをちょっとマシにしていきます。マシに。

ブロック定義(ていぎ)「X軸(じく)に移動(いどう)する」に条件(じょうけん)を追加(ついか)する

X座標(ざひょう)を補正(ほせい)する際(さい)に壁(かべ)があったらマズイ？なら壁(かべ)にぶつかってるときは補正(ほせい)しなければいいよ！という発想(はっそう)です。そしてコレ自体(じたい)は正(ただ)しいですが、パーフェクトではありません。

問題点(もんだいてん)は何(なに)か

こうなります↓

壁(かべ)に埋(うず)もれても脱出(だっしゅつ)はできてます。そして、そのまま左(ひだり)に行(い)こうとしても補正(ほせい)が働(はたら)いて再(ふたた)び埋(うず)もれるバグはなくなりました。しかし！右(みぎ)に進(すす)もうとすると壁(かべ)の中(なか)に引(ひ)きずり込(こ)まれてしまいます……ホラーです😫

何(なに)が起(お)きているか

X座標(ざひょう)と補正(ほせい)で何(なに)か間違(まちが)いが起(お)きています。それを明確(めいかく)にするために次(つぎ)の動画(どうが)を見(み)てください。

これは壁(かべ)から脱出(だっしゅつ)した直後(ちょくご)です。直後(ちょくご)なのでX座標(ざひょう)が０ではなくプラスに増(ふ)えています。この状態(じょうたい)で右(みぎ)に歩(ある)こうとしています。すると補正(ほせい)が働(はたら)き、一歩(ぽ)動(うご)くごとにX座標(ざひょう)がマイナス１されているのです。するとネコはどんどん左側(ひだりがわ)に動(うご)いていき、結果的(けっかてき)に壁(かべ)に引(ひ)きずり込(こ)まれるのです。補正(ほせい)が裏目(うらめ)に出(で)ました。

どうしたらいいか

ネコが左(ひだり)に動(うご)いていくのに合(あ)わせてステージ（カメラ）も左(ひだり)に動(うご)かせば壁(かべ)にめり込(こ)む(む)ことはなくなります。ネコが右(みぎ)に動(うご)くと左(ひだり)に補正(ほせい)される、なら壁(かべ)も左(ひだり)に動(うご)かせばネコは壁(かべ)に埋(うず)もれないよね、という話(はなし)です。

• 変更(へんこう)前(まえ)）ネコが右(みぎ)に動(うご)く→左(ひだり)に補正(ほせい)される→壁(かべ)があるとめり込(こ)む(む)
• 変更(へんこう)後(ご)）ネコが右(みぎ)に動(うご)く→左(ひだり)に補正(ほせい)される→壁(かべ)も左(ひだり)に動(うご)かす→壁(かべ)はないからネコは動(うご)ける

こんな↑イメージの改修(かいしゅう)をしていきます。

カメラを補正(ほせい)する

作業(さぎょう)はカンタンです、コピペ。

テストする

だいぶマシになりました。壁(かべ)には引(ひ)きずり込(こ)まれません。まだまだ改善(かいぜん)の余地(よち)はありそうです。あとちょっと！

最後(さいご)に微調整(びちょうせい)する

変数(へんすう)の初期化(しょきか)

処理(しょり)の順番(じゅんばん)を調整(ちょうせい)する

アニメーションとスタックを回避(かいひ)する処理(しょり)を入(い)れ替(か)えた方(ほう)が動(うご)きがスムーズでした。

ブロック定義(ていぎ)「スタックを回避(かいひ)する」を微調整(びちょうせい)する

コス名(めい)のバックアップを取(と)ります。

変数(へんすう)「直前(ちょくぜん)のコスチューム名(めい)」を作(つく)る

バックアップを取(と)る

コスを元(もと)に戻(もど)す

テストする

だいぶマシになりました。万(まん)が一(いち)埋(うず)もれてしまっても、無事(ぶじ)に脱出(だっしゅつ)できて、かつ壁(かべ)に引(ひ)きずり込(こ)まれないような処理(しょり)になっています。

まとめ

１つのバグを直(なお)そうとしたら芋(いも)づる式(しき)にバグがどんどん発生(はっせい)して、けっこうな大改修(だいかいしゅう)になりました。よくある。よくあるんです。こういうバグを潰(つぶ)す作業(さぎょう)に集中(しゅうちゅう)しちゃう人(ひと)はけっこうプログラマーに多(おお)いかも。以前(いぜん)プログラマーの先輩(せんぱい)から、この世(よ)にバグのないシステムなんてない、と聞(き)かされました。バグはあります。ホコリみたいなもんです。南極(なんきょく)にだってホコリはあるって聞(き)いたこともあります。みんなの作品(さくひん)にバグがあっても、それは力量(りきりょう)不足(ぶそく)とか設計(せっけい)ミスとか深(ふか)く考(かんが)えず、どうしてバグってるのかを追求(ついきゅう)してから直(なお)すようにしてみてください。