🍜 おとうさん、おかあさんのためのScratchで作るプラットフォーマー入門 ② 重力編
作成日: 2021/09/18
2

読み飛ばして良いまえがき
前回作った左右の動き編 → https://ticketnote.dev/ticket/d4klC7IJ23v8ZtfomH4N
完成予定のScratch → https://scratch.mit.edu/projects/571121487/



本日の本題

さて、早速今日の本題です。
横視点のプラットフォーマーで重要になってくるのは、重力的な動きです。
これがなければ床に落ちてゲームオーバーみたいなこともありませんが、そもそもゲームとして成立していないので面白くありません。今回は、その重力を作っていきます。
今回の最終形は https://scratch.mit.edu/projects/571959279/

最初にこの「描く」ボタンを選んで地面を作っていきましょう。
スクリーンショット 2021-09-18 17.53.04.png

塗りつぶしは色:30、鮮やかさ:100、明るさ:100。枠線は使用しない(赤の斜線を選択)。
この色で下の方に長方形を置いてください。その際「スプライト2」という名前になっていると思いますが、この「スプライト2」のx座標を0、y座標も0にしてもらうとこの編集画面での床の位置と、右上のステージの床の位置が合うと思います。
スクリーンショット 2021-09-18 17.55.22.png

満足いく床が描けたら「スプライト1」の猫を選んでもらい、左上の「コード」というタブを選択してください。

さて、重力を作るので…… 緑の旗を押したら、ずっとy座標に何かをすれば、なんか下の方に行きそうな気がするので、まずはそれを作ってみましょう。
スクリーンショット 2021-09-18 18.05.54.png
こんな感じ。
最初にy座標が0に戻って欲しいので、初期化のためのものを入れています。
そのあとはずっとy座標を-10ずつ変えています。

例によってサンプルも置いておきますので、実際にどう動くのかを試してみてください。
https://scratch.mit.edu/projects/571943985/

どうなりましたか?

……床を突き抜けて、画面の枠もほぼ突き抜けていますね。
これはどう見てもバグっています。

これは床にあたったらどうなるか?という処理がないので、こんなことになっています。

では床にあたったら…… という処理を入れてみましょう。
それはこんな風に書けます。
否定形の日本語なのでぱっと頭に入ってこないですが、先の「色:30、鮮やかさ:100、明るさ:100」の色のものに触れていない時は猫が画面下方向に動くと書いています。つまり触れている時は動かなくなったということで、これで重力と地面が表現できるようになりました。
スクリーンショット 2021-09-18 18.10.53.png
この時点のサンプル → https://scratch.mit.edu/projects/571947320/

次にジャンプを入れてみたいと思います。
地面にいる時にキーボードの上を押したら猫が上に移動して、再び地面まで落ちてくるという処理です。
スクリーンショット 2021-09-18 18.32.10.png
それは、こんな風に書けます。
この時点のサンプル → https://scratch.mit.edu/projects/571951310/

ちなみに前段で「もし緑色に触れていないなら」だったのを「もし緑色に触れていたら」という条件に変更しています。これは、そのあとに「でなければ」という処理が入るのですが、先のままだと「もし緑色に触れていないのでなければ」という処理になって二重否定が発生してしまいます。これは、プログラムとしては間違いではないのですが、分かりづらいので、「もし緑色に触れていないなら」を取ってシンプルにしています。
余談ですが前段のものはこんな風に書くこともできます。
スクリーンショット 2021-09-18 18.31.27.png
「もし◯◯なら」の時に空欄、「でなければ」の方にだけ処理を入れるということでも大丈夫です。

さて、無事、重力とジャンプを作ることができました。 🎉🎉🎉



が……
このままだとガクガクした動きかつ、ゲームっぽい動きではないので、アレンジしていきます。

「上下の動き」という変数を作りました。
まずは重力から調整したいので、一旦ジャンプの処理をはずし、上下の動きを加えていきます。
スクリーンショット 2021-09-18 19.14.30.png
こんな風にしました。
地面にいないときには「上下の動き」を -1 ずつ増やして、これで加速を表現しています。
また地面にいるときは「上下の動き」を 0 にして、動きを止めます。
ジャンプの動きは外してあるので、ジャンプはしません。
この時点のサンプル → https://scratch.mit.edu/projects/571953421/

次にジャンプを入れましょう。
ジャンプもふわっとジャンプさせたいので「上下の動き」で処理します。
スクリーンショット 2021-09-18 19.22.42.png
この時点のサンプル → https://scratch.mit.edu/projects/571959279/

さて…… 今回はここまで。
次回は、①でやった左右の動きと、今回の上下の動きを組み合わせます。
その際、わかりづらくなるのを避けるためにブロック定義というのも使う予定です。
お楽しみに。



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



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

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