スプライトの 移動方法 を学ぶ
スプライトの 位置 を 移動 させる 方法 は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 座標 にチェックをつければそのスプライトの 座標 が 表示 されます。