Hoicos Blog

Author: かどけん

Scratchで2Dゲームのジャンプを実現しよう

プログラミング

ジャンプを様々な方法で実現
747482 m 1024x683 - Scratchで2Dゲームのジャンプを実現しよう-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-自由研究, Scratch, 小学生

2Dアクションゲームは1970年代から現在まで様々な進化を遂げて皆にプレイされてきました。これだけ長い歴史があればアクションの実現方法(プログラム)も無数にあるのは当然です。
今回は2Dアクションゲームでは定番のジャンプアクションについて考え、Scratchで実際にプログラミングして違いを見ていきしょう!

様々なジャンプ方法

今回作っていくジャンプアクションの大まかな仕様は次のようにします。

  ・スペースボタンが押されたら上昇
  ・一定時間後もとの位置に戻ってくる


スプライトが上下するだけのアニメーションなので早速作っていきましょう。
自分の好きなスプライトを選択し、そのスプライトのスクリプトエリアを開いておくことを忘れずに。

アニメーションを伴わないジャンプ

手始めに一番簡単だと思われる方法でジャンプアクションを作っていきます。
ジャンプさせるスプライトのスクリプトエリアに次のスクリプトを追加しましょう。

750b9d64068319e6891f4a6f521d2dc5 - Scratchで2Dゲームのジャンプを実現しよう-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-自由研究, Scratch, 小学生

左のスクリプトでは緑の旗(スタートボタン)が押されたらy座標を-100に設定。(画面下のほうにスプライトを移動)右ではスペースボタンが押されたら最初にy座標50に行き0.2秒待った後元の位置に戻るようにしています。

では実際の動きを見てみましょう。

どうでしょう?
すごく動きがカクカクしてますよね……残像の影響でジャンプしているように見えなくはないのですが何か違う。

さらに各数値を大きくしてみるとどうでしょう。
元の位置と到達点の差が大きくなればなるほど違和感が増しますし、待つ秒数も変に長いと止まって見えてしまいます。

なめらかなジャンプ

次に元の位置→最高点→元の位置までなめらかで簡単なアニメーションを伴うジャンプを実現してみましょう。これも先ほどのスクリプトに少し手を加えるだけなのでさほど難しくないと思います。

1 1024x320 - Scratchで2Dゲームのジャンプを実現しよう-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-自由研究, Scratch, 小学生
2 1024x668 - Scratchで2Dゲームのジャンプを実現しよう-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-自由研究, Scratch, 小学生

上下どちらのスプライトを追加しても同じような動作をします。
上はScratch特有のブロックを使いシンプルにまとめ、下は条件を満たすまでの繰り返しを使いコマ送りのようにすることでなめらかなアニメーションを実現しています。

実際の動きを見てみましょう。

最初のカクカクジャンプよりジャンプらしくなってきましたね!
最高点まで到達したら同じような動きで元の位置に戻っていく。繰り返しの条件を”~色に触れた”ブロックなどに変えることでジャンプの条件(どこまで落下するかなど)を簡単に変えることができるのもこのスクリプトのおもしろさです。

しかし何かまだ物足りない……

一言でいえばスピード感が圧倒的に足りないっ!!
一定の速度で上昇して一定の速度で元の位置まで下降するのは動きが間延びしてのんびりな印象を与えてしまいます。これはスピーディーでスリリングな2Dアクションゲームとは程遠いです……。

ということで次はこれ

速度を考えたジャンプ

ここでは現実の世界のジャンプに少し近づけたジャンプを実現しましょう。
現実のジャンプでは、速さは人がジャンプする瞬間と着地する瞬間が一番大きく、最高到達点付近で一番小さくなります。
この要素をScratchでのジャンプに取り入れた場合どうなるのでしょうか。

今回のスクリプトでは変数を使うので自分で作っておきましょう。

3 - Scratchで2Dゲームのジャンプを実現しよう-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-自由研究, Scratch, 小学生
名前は自由ですがここでは速度とします

実際に追加するスクリプトはこちら。

4 1024x620 - Scratchで2Dゲームのジャンプを実現しよう-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-自由研究, Scratch, 小学生

ここではスペースキーが押されたらまず、速度という変数に20という値を与えています。そのあと元の位置付近に戻ってくるまでループし、位置調整するというのが大まかな流れです。
速度という変数はループ一回ごとに1ずつ減っていきます。そうすることで”y座標を~ずつ変える”ブロックに入力する値がどんどん小さくなっていきます。こうやってジャンプ時の速度の変化というものをプログラミングで表しているのです。

実際の動きはこちら。

これぞ本場のジャンプ!!
最高点付近で動きがゆっくりになり、地面近くでは素早くなるという現実と同じジャンプの動きを再現できています。
このジャンプはScratchの多くのゲームで使われているので頑張って覚えましょう!

高校物理を使ったジャンプ

最後におまけコーナーです。高校で習う範囲なので読み飛ばしてもらっても構いません。
現実の世界(理想空間)では重力加速度、初速という決まった値と時間という変数によってジャンプの動きを求めることができます。これをプログラミングしていきましょう。追加するスクリプトはこちら。

5 1024x448 - Scratchで2Dゲームのジャンプを実現しよう-%e3%83%97%e3%83%ad%e3%82%b0%e3%83%a9%e3%83%9f%e3%83%b3%e3%82%b0-自由研究, Scratch, 小学生

最初に変数初速タイマーに値を入れます。
その後 h = v0t – gt2/2 (h : y座標 , v0 : 初速 , t : 時間 , g : 重力加速度 )という式をもとに、ある時間におけるy座標をその都度求めることでジャンプを再現しています。

最後にどのような動きになるか動画を貼りますが、重力加速度(画像では9.8のところ)や初速の値を変えることで動きは大きく変わります。実際にやってみて研究するのも楽しいかもしれません。

最後に

今回はジャンプアクションをScratchでつくりました。この方法はほかのプログラミング言語でも使用できる方法なのでしっかりと自分のものにして、自分だけの作品をどんどん作っていってください。
最後まで読んでいただきありがとうございました!


この記事がいいと思ったら↓のシェアボタンから

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。