スプライトの移動方法を学ぶ
スプライトの位置を移動させる方法は1つではありません。 具体的な例とそれぞれの違いについて説明します。サンプルプロジェクトを読み込み、 実際に動かしながら色々な移動のさせ方を覚えていきましょう。
スプライトの移動方法
ファイルを読み込む方法
パソコンの中にあるサンプルプログラムをスクラッチで読み込んで動かしてみましょう。
- 公式サイトを開きます。
https://scratch.mit.edu/ - 左上のメニューの「作る」をクリックします。
- 左上のファイルをクリックして、「コンピューターから読み込む」をクリックします。
- 「PC」 - 「ドキュメント」 - 「scratch_samples」の順にダブルクリックします。
そして、「MoveSample.sb3」を選択します。
- 以下の画面が出たら、OKをクリックします。
-
※次のいずれかの場合には「サンプルプログラムをダウンロードする方法」に従ってダウンロードし、
「scratch_samples」フォルダに置いてください。
・「scratch_samples」フォルダがない
・「scratch_samples」フォルダ内にファイルがない
・サンプルプログラムのファイルを誤って削除してしまった
・サンプルプログラムのファイルを誤って変更してしまった
読み込んだサンプルプロジェクトを動かしてみる
- 「movesample.sb3」の読み込みができたらをクリックしましょう。
右下に並んでいる5つのスプライトのいずれかをクリックすると そのスプライトが選択された状態になり、動かすことができるようになります。
選択されているスプライトをクリックしてみる
選択されているスプライトをクリックすると自動的に移動します。それぞれの動き方を見てみましょう。
-
- スプライト
- 説明
400歩動かすを使って移動させています。
?歩動かすを使うとそのスプライトが向いている方向へ移動しますので、 先に動きたい方向へ向けておく必要があります。
右に移動させたければ、まずスプライトを右(90度)に向けてから ?歩動かすで移動させます。
左に移動させたければ左(-90度)、上であれば0度、 下であれば180度に向けてから?歩動かすで移動させます。
このサンプルではをクリックした時に 90度に向ける(右に向ける)を実行していますので、 右に向かって移動します。
移動した後に180度回して左を向いた 状態にしていますので、 もう一度クリックすると左に400歩動いた先に移動します。
400歩動かすという名前ですが、 スプライトが1歩ずつ移動していくわけではなく、400歩動いた先に瞬間移動しているように見えます。
移動先に向かって進む様子を見せたい場合はスプライト3~5で使用している方法を使います。
-
- スプライト
- 説明
x座標を400ずつ変えるを使って移動させています。
移動のしかたは400歩動かすと同じです。 ただし、スプライトの向きに関係なく右に移動します。
x座標を?ずつ変えるを使って左に移動させたい場合はx座標を-400ずつ変えるとします。 スプライトを左に向ける必要はありません。
y座標を10ずつ変える、 y座標を-10ずつ変えるを使えばそれぞれ上に10、 下に10移動させることができます。
座標についてはこちらで説明しています。
-
- スプライト
- 説明
2秒でx座標を200に、y座標を50に変えるを使って移動させています。
この方法ではスプライトが徐々に移動している様子が表示されます。
移動する前の座標をx座標を-200、 y座標を0としていますので右方向だけでなく上方向にも移動します。
右に移動し終わったら、2秒でx座標を-200に、y座標を0に変えるを実行して元の位置に戻しています。
-
- スプライト
- 説明
5歩動かすを200回くり返すことで移動させています。
をクリックした時に90度に向ける (右に向ける)を実行していますので、 まず右に向かって5歩ずつ移動し、右端に着いたら跳ね返り、 左に向かって移動していきます。5歩×200回=1000歩移動して止まります。
1000歩動かすを使うと1000歩動いた先に瞬間移動してしまいますが、 5歩動かすをくり返すと、 5歩ずつ移動している様子が表示されます。
もし端に着いたら、跳ね返るを 200回くり返すの外側(くり返すの後)に置くと、 どのように動くのか試してみましょう。
右端に着いた時点では跳ね返らずに右に進み続けようとします。 そして1000歩移動し終わったら跳ね返って左を向いた状態で止まります。 (右端にずっといて、しばらくしたら左を向いて止まるという見え方になります)
-
- スプライト
- 説明
135度に向けるで右下に向けてから 10歩×500回動かしています。端に着いたら跳ね返ります。
回転について
- スプライトの動かしかたを5つご紹介しましたが、左を向いたり、
跳ね返ったときに上下も入れ替わって逆立しているようになってしまう点が気になると思います。
これはスプライトの回転方法を左右のみにしてあげれば解決します。
左右のみにする方法は2つあります。
方法その1
- を実行します。 実行した後は見た目の向きの変化が左右のみになります。
方法その2
- スプライトの向きを表示し、回転の種類をから
に変更します。
を選択すると左右にも変化しなくなります。
「1」スプライトの「2」向きをクリックしてスプライトの向きをである「3」を表示させて実行します。
こうすると-90度(左向き)にしても逆さになりません。
これはあくまで見た目(コスチューム)の回転に対する設定なので移動には影響しません。 180度に向ければ下方向に移動します。
選択されているスプライトを矢印キーで動かしてみる
次にキーボードの操作でスプライトを動かす方法をご紹介します。
矢印キーを押すと選択されているスプライトが動きます。それぞれのスプライトの動き方を見てみましょう。
-
- スプライト
- 説明
上下左右の矢印キーが押されたときのイベントを受けたらそれぞれ座標を変更します。
サンプルプログラムではx座標を?ずつ変える、 y座標を?ずつ変えるを使っていますが、 スプライト4のように押した矢印キーの方向に向けてから 5歩動かすとしても構いません。
-
- スプライト
- 説明
右向き矢印キーが押されたら x座標を5ずつ変えます。
他の3つの方向に対しても同じようにします。
これらはくり返してチェックし続ける必要があります。
-
- スプライト
- 説明
各方向の矢印キーが押されていることをチェックして座標を変える点はスプライト2と同じです。
スプライト2では1つのキーが押されていても他のキーが押されているのかのチェックをしていますが、 スプライト3では右が押されていない場合だけ残りのキーをチェックします。
左右のどちらも押されていなければ上のキーをチェックし、 3つとも押されていない場合だけ下のキーをチェックします。
スプライト2と3では複数のキーを同時に押した場合の動き方が違います。
スプライト2で右向き矢印キーと左向き矢印キーを両方とも押すと、 右に5、左に5移動するので結果的にどちらにも移動しません。
右向き矢印キーと下向き矢印キーを両方とも押すと右下に移動します。
スプライト3の場合は右向き矢印キーと左向き矢印キーを両方とも押したり、 右向き矢印キーと下向き矢印キーを両方押したりしても右方向にだけ移動します。
右向き矢印キーが押されていたら残りの矢印キーはチェックしないため、 このような動きとなります。
-
- スプライト
- 説明
スプライト2とほぼ同じですがスプライト4では 矢印キーの方向に向きを変えた後に5歩動かすで移動しています。
スプライト2では左右に移動する時に見た目の向きを変えずに移動していますが、 スプライト4では動く方向を向いています。
スプライト2でも向きを変えてから座標を変更すれば同じ動きになります。
-
- スプライト
- 説明
右向き矢印キーを押すと、スプライトが右へ回転します。
左向き矢印キーの場合は左へ回転します。
上向き矢印キーを押すとスプライトが向いている方向へまっすぐ進みます。
下向き矢印キーを押すとスプライトの向きの逆の方向へ進みます(後ろへ下がります)。
それぞれのキーを押し続けると次のように動きます。
2つのキーを同時に押している時の動き
4つのうちのどれか一つの矢印キーを押した場合、
スプライト1~4はほぼ同じ動き方をしますが、
左右のキーを同時に押すというように2つ以上のキーを同時に押した場合はそれぞれ違う動き方をします。
左右のキーを同時に押した場合と右下のキーを同時に押した場合のそれぞれのスプライトの動き方を説明します。
-
- スプライト
- 説明
右向き矢印キーのみが押されている場合は右に5移動(+5移動)します。
左向き矢印キーのみが押されている場合は左に5移動(-5移動)します。
両方のキーが押されている場合、後に押された方のキーのみが実行され続けます。
例えば右、左の順に押した場合、ほぼ同時であったとしても左に移動し続けます。
左、右の順に押すと右に移動し続けます。
-
- スプライト
- 説明
右向き矢印キーのみが押されている場合は右に5移動(x方向に+5移動)します。
下向き矢印キーのみが押されている場合は下に5移動(y方向に-5移動)します。
両方のキーが押されている場合、後に押された方のキーのみが実行され続けます。
例えば右、下の順に押した場合、ほぼ同時であったとしても下に移動し続けます。
下、右の順に押すと右に移動し続けます。
-
- スプライト
- 説明
まず右に5移動(+5移動)し、次に左に5移動(-5移動)するので同じ場所からずっと動きません。
見た目の向きも変わりません。
-
- スプライト
- 説明
右に5移動し、次に下に5移動をくり返して右下へ移動し続けます。
-
- スプライト
- 説明
右向き矢印キーが押されているので右に5移動(+5移動)します。
左向き矢印キーが押されているかどうかは確認されないので左には動きません。
よって右に移動し続けます。判定の順番(ブロックの順番)を入れ替えて 左向き矢印キーの判定を先にすると左に移動し続けます。
ただしスプライトが向いている方向は変わりません(後ろに向かって移動しているように見えます)。
-
- スプライト
- 説明
右向き矢印キーが押されているので右に5移動します。
下向き矢印キーが押されているかどうかは確認されないので下には動きません。
よって右に移動し続けます。判定の順番(ブロックの順番)を入れ替えて 下向き矢印キーの判定を先にすると下に移動し続けます。
ただしスプライトが向いている方向は変わりません。
-
- スプライト
- 説明
まず右(90度)を向いて、その方向に5移動(+5移動)します。
次に左(-90度)を向いて、その方向に5移動(-5移動)するので同じ場所からずっと動きません。
右を向いた後に左を向くので左を向き続けます。
判定の順番(ブロックの順番)を入れ替えて 左向き矢印キーの判定を先にすると、位置は変わりませんが右を向き続けるようになります。
-
- スプライト
- 説明
まず右(90度)を向いて、その方向に5移動します。
次に下(180度)を向いて、その方向に5移動します。
右を向いた後に下を向くので下を向いた状態で右下へ移動し続けます。
判定の順番(ブロックの順番)を入れ替えて下向き矢印キーの判定を先にすると、 右を向いた状態で右下へ移動し続けるようになります。
-
- スプライト
- 説明
現在の向きから右へ5度回転します。
次に左へ5度回転します(最初の向きに戻ります)。
左右に同じ角度だけ回転するので向きは変わりません。
上下を両方とも押した場合は、前に5、後ろに5移動するので同じ位置にい続けます。
-
- スプライト
- 説明
現在の向きから右へ5度回転します。
次に後ろへ5移動します。
それをくり返し、後ろに進みながら右に回転移動します。
右と上を両方とも押した場合はスプライトが前に進みながら右に回転移動します。
位置(座標)の説明
-
- 説明
画面上の位置を座標といいます。
座標には左右の位置を表すx座標と上下の位置を表すy座標があります。
右に行くほどx座標が大きくなり、上に行くほどy座標が大きくなります。
位置を表す座標を(x座標, y座標)のように表すことにします。
Scratchの画面では真ん中が(0, 0)となります。4隅の座標は次のような値となります。
右上隅(240, 180)、右下隅(240, -180)、左上隅(-240, 180)、左下隅(-240, -180) との値が そのスプライトの現在の座標です。
x座標を
変更 などを使って値を変更すると、そのスプライトの位置が変わります。の座標を変更してみて、 どの位置に表示されるのかを確認してみましょう。 ペンの現在の座標の値は右上に以下のように表示されます。
他のスプライトでも、そのスプライトを選んでx座標、 y座標にチェックをつければそのスプライトの座標が表示されます。