Scratch(スクラッチ):ネコをビヨーンとジャンプさせよう

伊東 けいこ

今回はネコを「ジャンプ」させるプログラムを作ります。
左右の矢印キーで横方向に歩き、上矢印キーでジャンプします。

Scratch(スクラッチ):ネコをジャンプさせよう

完成イメージ

目次

【1】素材を用意しよう(ネコと背景)

まずはジャンプするスプライト(ネコ)と背景を用意しましょう。

ネコ:

作品を作る時に最初からいるネコのスプライトを使います。名前をわかりやすいものに変えておきましょう。(ここでは「ジャンプネコ」にしました。)

背景:

ステージエリアにおいてある「背景」を選択し、「背景」タブをクリックして編集画面を出しましょう。四角形ツールで空と地面を描きます。

背景を作る
青い四角と緑の四角で空と大地を作る

【2】スタート時の設定をしよう(位置や向きなどの初期設定)

スタートした時の設定をします。ネコのスプライトを選択し、[ 緑の旗が押された時 ] ブロックに「位置」「向き」「大きさ」「回転方法」を指定するブロックを追加しましょう。

スタート時のネコの状態を設定
スタート時のネコの状態を設定

【3】ジャンプするプログラム

上向き矢印キーをクリックするとジャンプするプログラムを作ります。単純な動きに見えますが、一定の速度で上に移動して、下に降りてくるだけの動きだとジャンプしているように見えません。上に上がるときはだんだんスピードをゆっくりにして、落ちてくるときはだんだんスピードを速くすると、「ビヨーン」という感じの緩急のついたリアルな動きになります。

(3-1) 「ジャンプ移動量」の変数を用意する

ネコにジャンプさせるには、上下の位置を決めるy座標を変えます。まずは、y座標の移動距離を管理する変数を用意します。「変数を作る」をクリックし、「ジャンプ移動量」という名前の変数を作りましょう。

「ジャンプ移動量」の変数を作る

(3-2) 「ジャンプ」するプログラム

ジャンプのプログラムは 次の図の通りです。まず [ 上向き矢印キーが押された時 ] ブロックに続けて、変数「ジャンプ移動量」を20に設定します。そしてジャンプで上に移動するプログラムと、下に移動するプログラムを追加します。

重力を考慮してジャンプの動きを作る

上向きに移動するプログラムでは、y座標を変数「ジャンプ移動量」だけ変えます。これを10回繰り返して、繰り返すたびに「ジャンプ移動量」を-2して減らすので、1回に移動する距離はだんだん短くなります。最初が「20」なので、「20」「18」「16」……となり、10回繰り返した後の「ジャンプ移動量」は「0」になります。

下向きに移動するプログラムも仕組みは同じです。繰り返すたびに「ジャンプ移動量」を+2して増やすので、1回に移動する距離はだんだん長くなります。最初が「0」なので、「0」「2」「4」……となり、11回目の「ジャンプ移動量」は「20」になります。下向きのときはy座標を減らしたいので、「ジャンプ移動量」に-1をかけてマイナスの値にします。

上向きの移動を繰り返すのが10回だったのに対し、下向きが11回なのは、上向きの移動を10回行った後、下向きの1回目の繰り返しでは移動距離が0となるためです。上に上がるのと同じ距離を移動するには11回繰り返す必要があります。

(メモ) 単純に上下するだけだとどうなる?

一度に移動する量を変化させず、同じ速度で上下させるとどうなるでしょうか?

同じ速度で移動する場合

実際の動きを見てみましょう。ジャンプしているというよりも、シンプルに上下している動きになるのがわかります。


「ジャンプするネコ」シンプル版

【4】左右に歩く動きと組み合わせよう

ジャンプのプログラムができたので左右に歩くプログラムを追加しましょう。 [ 右向き矢印キーが押された時 ] ブロックと、 [ 左向き矢印キーが押された時 ] ブロックに向きを設定し、コスチュームを変えながら移動するプログラムを追加します。

Scratch(スクラッチ)に挑戦!矢印キーで上下左右にネコを歩かせてみよう

できあがった全体のプログラムはこちらです。

ネコがジャンプするプログラム

矢印キーで左右に歩き、上向き矢印キーでジャンプするネコのプログラムができました。


「ジャンプするネコ」 実際のプログラム

【5】今回のまとめ

一見シンプルな「ジャンプ」の動きですが、リアルなジャンプの感じを出すには、ちょっと工夫が必要です。繰り返しと変数を使って移動距離を毎回変化させる手法はジャンプ以外にも使えるのでぜひ応用してみてください。

Scrathcの使い方や作品アイディアはこちらをチェック!

伊東 けいこ
Web制作者&ライター。2017年よりオランダ在住。 サイト構築の傍らオランダにおける教育&テクノロジー、社会&テクノロジー周辺を追っています。 https://chari-kamo.com

コメント

コメントを書く