🍜 おとうさん、おかあさんのためのScratchで作るプラットフォーマー入門 ⑤ 面の切り替え編
作成日: 2021/09/22
0

読み飛ばして良いまえがき
前回作ったゴール&ゲームオーバー編 → https://ticketnote.dev/ticket/i6XiaxhzoSQfT1coxNPr
完成予定のScratch → https://scratch.mit.edu/projects/571121487/

今回は最終回で面の切り替えを行っていきます。
(ステージと書くとScratchのステージの概念と混同しそうなので面としましたが、古い言い方過ぎて伝わらないような気もしつつ……。)


本題に入る前に前回のものに対しての微調整

前回の最終のものだとバグが2点あったので修正していきます。

1点目はブロック「猫のアニメーション」の箇所。
猫が右に進んでいるときだけ、コスチュームの変更処理がされていたので、左右の動きの絶対値が0より大きいに変更しました。これによって、左に進んでいるときも、コスチューム変更が行われ、パラパラ漫画的に猫が歩くようになります。
スクリーンショット 2021-09-22 22.56.51.png

2点目は猫と蜘蛛が接触してゲームオーバーになる箇所。
接触の仕方が悪いと、ゲームオーバーから再開する際に再びゲームオーバーになっていました。
それに対処するために、変数「猫と蜘蛛の接触許可」というのを用意して、ゲーム開始時の最初の処理の際には猫と蜘蛛が接触してもゲームオーバーにならず、2回目の処理のタイミングからゲームオーバーが有効になるように変更しました。
スクリーンショット 2021-09-22 23.01.58.png

2点目の補足として、猫側のゲームオーバー処理をちゃんと整理しました。
猫と蜘蛛が接触した時点で、このセリフと「すべてを止める」以外の処理は止めて、セリフ後にあらためて「すべてを止める」にしています。蜘蛛側は「メッセージを送って待つ」の処理なので、メッセージを送った時点で止まっています。
スクリーンショット 2021-09-22 23.04.35.png

スプライト1、スプライト2…… とかも分かりづらいので、ちゃんと名前を振り直します。
スクリーンショット 2021-09-22 23.13.24.png

この時点のサンプルも置いておきます。
https://scratch.mit.edu/projects/573511220/



本日の本題

現在の面を1つ目として、1つ追加したいと思います。

まずは猫のブロック「ゴール」を削除し、風船側にその処理を作ります。
風船側は、蜘蛛の接触とほぼ同じ作りです。
スクリーンショット 2021-09-22 23.19.54.png

猫側はまずはシンプルにセリフを言ってゴールです。
スクリーンショット 2021-09-22 23.20.38.png
この時点のサンプル → https://scratch.mit.edu/projects/573586632/

次に面2を作っていくので、スプライト「面2の地面」というのを作ってください。
僕は立体的なステージにしたかったので、こんな風にしました。左上にゲームオーバーになる赤をひっそりと置いてあるのは、ちょっとアイワナ(謎)っぽくしたかったからです。というのは余談。
スクリーンショット 2021-09-22 23.57.48.png

次に風船のコードをこんな風にしました。
変数「面」というのを追加して、面の管理をさせています。また面1と面2で風船の色を変えたいのでコスチューム管理も入れました。
イベントメッセージも「面1クリア」「面2へ」「面2クリア」の3つに追加&整理してあります。
実は肝なのは「もし面=1なら」よりも前に「もし面=2なら」を置いてあるところです。これは逆にしてしまうと、面1クリア時に変数「面」を2にし、その直後に「もし面=2なら」が来ることになるため、面1をクリアした時点でいきなり面2の処理がされてしまうので、それを避けるために先に「もし面=2なら」の処理を書いています。もし面3を作る場合は、この方式だと面2よりも前に置く必要があります。
スクリーンショット 2021-09-23 0.01.09.png

「蜘蛛」「面1の地面1」「面1の地面2」に関しては、緑の旗が押された時に見た目「表示する」を追加、イベントメッセージ「面2へ」を受け取ったときには「隠す」という処理をしました。
これで面1のときには表示され、面2になると表示が消えるということになります。Scratchの場合は、表示=当たり判定があるので、非表示になった時点で当たり判定もなくなります。これは直感的で良いですね。
この時点の蜘蛛のコードはこんな感じです。
スクリーンショット 2021-09-23 0.08.34.png

逆に「面2の地面」は、緑の旗が押された時に「隠す」、イベントメッセージ「面2へ」を受け取ったときには「表示する」という処理になっています。
スクリーンショット 2021-09-23 0.10.11.png

さて…… ここまではさっと整理できたと思います。
猫のアップデートは意外と面倒なのでちょっと覚悟してください。
面2はこんな感じでスタートは面1と同じ位置ですが、ゴールは画面左上になります。
スクリーンショット 2021-09-23 0.12.27.png
つまりずっと猫が右を向いているとおかしな感じになるので、左を押したら左を向くようにアップデートします。

定義「初期設定」に「回転方向を左右のみ」「90度に向ける」を追加し、定義「猫のアニメーション」に、左右の動きが0以上の場合は右(90度)、0未満の場合は左(-90度)という設定にしています。
「<」を先に書いているのはScratchには「≧」が無いからですが、もしあったらそちらの書き方のほうが後から読んだ時にミスが少ないかもしれません。
スクリーンショット 2021-09-23 0.15.30.png

次は「面1クリア」の変更と「面2クリア」の追加をします。
スクリプトを止める系だと、次の面に進んだ時に再開が面倒なので、変数「動きの許可」というものを作り、それで管理します。定義「初期設定」では「動きの許可」を1に、「面1クリア」と「面2クリア」の処理の最初では0にして、動きを許可しないようにしています。
スクリーンショット 2021-09-23 0.27.27.png

変数を設定しただけでは、動きを止めることができないので、定義「左右の動き」と定義「重力&ジャンプ」の中身を「もし動きの許可=1なら」でくくって、変数「動きの許可」が1のときのみ猫が動けるようにします。
スクリーンショット 2021-09-23 0.21.21.png

これで無事、猫の処理もアップデート。
お疲れさまでした。

これで面の切り替えもできました。
無事ゲームの完成です! 🎉🎉🎉

この時点でのサンプルも置いておきますね。
https://scratch.mit.edu/projects/573591236/

おつかれさまでした。
いかがだったでしょうか?
第5回はかなり駆け足だったので、なかなか難しかったかもしれませんが、質問等ありましたら、コメント欄やTwitterで送っていただければ。



シリーズ「おとうさん、おかあさんのためのScratchで作るプラットフォーマー入門」



Twitterもやっているので、よかったらフォローしてください。
https://twitter.com/Kaitou1192

本業はコードを書かせてもらえないフロントエンドエンジニアです。 こんなサービス作っています。 https://lp.re-shine.jp