スプライトの移動方法(いどうほうほう)


スプライトの移動方法(いどうほうほう)を学ぶ

スプライトの位置(いち)を移動(いどう)させる方法(ほうほう)は1つではありません。 具体的(ぐたいてき)な例(れい)とそれぞれの違(ちが)いについて説明(せつめい)します。サンプルプロジェクトを読(よ)み込(こ)み、 実際(じっさい)に動(うご)かしながら色々な移動(いどう)のさせ方を覚(おぼ)えていきましょう。

スプライトの移動方法(いどうほうほう)

ファイルを読み込む方法(ほうほう)

パソコンの中にあるサンプルプログラムをスクラッチで読み込んで動(うご)かしてみましょう。

  1. 公式(こうしき)サイトを開(ひら)きます。
    https://scratch.mit.edu/
  2. 左上のメニューの「作る」をクリックします。

  3. 左上のファイルをクリックして、「コンピューターから読み込む」をクリックします。
  4. 「PC」 - 「ドキュメント」 - 「scratch_samples」の順(じゅん)にダブルクリックします。 そして、「MoveSample.sb3」を選択(せんたく)します。
  5. 以下(いか)の画面(がめん)が出たら、OKをクリックします。
  6. ※次のいずれかの場合には「サンプルプログラムをダウンロードする方法」に従(したが)ってダウンロードし、 「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座標(ざひょう)にチェックをつければそのスプライトの座標(ざひょう)が表示(ひょうじ)されます。

^