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

伊東 けいこ

パソコンのキーボードの十字キーを使ってキャラクターを動かしてみましょう。

矢印キーで上下左右にネコを歩かせてみよう

今回のポイント

【1】最初の位置、向き、サイズを指定しよう

まずは動かすキャラクター(スプライト)を決めましょう。ここでは以前に作成した「ネコを歩かせてみよう」を参考に、ネコが歩いて上下左右に進むようにプログラミングをします。

ネコのスプライトを選択して、スタート地点を決めるプログラムから作りはじめましょう。上下左右に動きやすいようにステージの中心からスタートすることにします。緑の旗を押したらネコが(x座標:0、y座標:0)の位置に移動するように設定しました。向きと大きさも一緒に指定しておきましょう。

スタート地点を決める

【2】右向き矢印キーを押したら右に歩く設定をしよう

まずは右向き矢印キーが押されたら右に歩くように設定します。「イベント」カテゴリーから [右向き矢印キーが押された時] ブロックを選んで[10歩動かす]ブロックを下に置きます。10歩だと動きがわずかなので「20歩」に変更しました。右向き矢印キーを押して動きを見てみましょう。

右に歩く

一度キーを押すと20歩分(20座標分)右に動くことがわかります。押し続けるとどうなるでしょうか?押している間、右に動き続けますね。

動くことを確認したところで、歩いている動きをつけましょう。「ネコを歩かせてみよう」を参考に、コスチュームを変えて少し間をおくことを繰り返すことで、トコトコ歩く動きを表現します。「ネコを歩かせてみよう」では、緑の旗を押すと歩き続けるプログラムでしたので [ずっと] ブロックを利用しましたが、同じようにするとキーから指を離しても歩き続けてしまいます。

右に動くプログラム
今回は [20歩動かす] [次のコスチュームにする] [0.1秒待つ] を [右向き矢印キーが押された時] の下に入れてみましょう。

右向き矢印キーを押すと少し右に進み、押し続けている間は右向きにトコトコと歩くようになりました。

【3】他の方向(左、上、下)を設定しよう

右向きに歩く設定ができたので、他のキーを同様にプログラミングしましょう。

それぞれ最初からプログラムのブロックを作ってもよいのですが、先程作成した右向きのプログラムをコピーしてアレンジすることもできます。プログラムのブロックにマウスオーバーした状態で右クリックしブロックを「複製」しましょう。

ブロックを複製する

複製したできたブロックの「右向き矢印」を「左向き矢印」に変更してください。
[左向き矢印キーが押された時] に、左に動くようにするにはどうすればよいでしょうか?試しに [20歩動かす] を[-20歩動かす] に変えてみましょう。

後ろ向きに歩く?

左には動くのですが、向きが右向きのままで後ろ歩きになってしまいます。まず左に向きを変えてあげましょう。

左右に反転する設定
向きを変えよう
左右の向きをコントロールするときには、必ず回転方法を設定しましょう。最初に作った[緑の旗が押されたとき]から始まるプログラムに、[回転方法を左右のみにする]を追加してください。

次に、[左向き矢印キーが押されたとき]から始まるプログラムに[-90度に向ける]を追加してください。そして前に進ませるために-20歩ではなく、 [20歩動かす] にします。これで左向き矢印キーを押すと、左を向いて歩くようになりました。

先に作成した[右向き矢印キーが押されたとき]から始まるプログラムにも、はじめに[90度に向ける]を追加してください。

左右の動きが設定できたので、上下の動きのブロックも同様に作成します。ただし、ネコの向きについては上下に動く時に変える必要がないので設定を省きます。 [◯歩動かす] ブロックは左右の動きにしか使えないため、[y座標を◯ずつ変える] ブロックを利用します。

次の図が、全てのプログラムです。緑の旗を押した時のプログラム、上下左右のキーを押した時のプログラムを確認してください。

4方向の設定

これでネコが「上下左右にトコトコ歩く」ようになりました。

【4】背景を編集しよう

ネコを自在に歩かせることができるようになったので、似合う背景に変えてみましょう。

背景画像はプログラミングを行うエリアの右下部分、ステージ(背景)エリアで編集することができます。

 背景を編集
「ステージ」編集エリアの写真アイコンをマウスオーバーすると「背景を選ぶ」ためのオプションが表示されます。

どこかで見覚えが……と思われる方、そのとおりです。背景の編集方法はスプライトを編集する時と同じです。試しに「描く」をクリックすると、スプライトの描画画面と同じ編集画面が表示されます。

背景の編集画面

ペイントエディタを使って絵を描く方法について詳しくは、こちらの記事をご参照ください。

Scratch(スクラッチ)でオリジナルのスプライトを作りたい:ペイントエディタの使い方

ここでは、空と原っぱに草と花を加えて野原を作ってみました。

背景の画像

野原を背景にしたものがこちらです。

「矢印キーで上下左右にネコを歩かせてみよう」 実際のプログラム

【5】今回のまとめ

今回は、

– 「何かのキーを押す」アクションに合わせてスプライトを動かす設定
– 背景のアレンジ

に挑戦しました。キャラクターをキーで自由に動かすことができるようになると、Scratchで遊べる実感が湧いて楽しくなってくるのではないでしょうか。

Scratchの使い方や作品アイデアがたくさん! Scratchでプログラミングに挑戦!

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

コメント

16件のコメント

    1. ご活用いただきどうもありがとうございます。

  1. これで、動かす方法が、わかりました。
    ありがとうございます!

    1. 知りたい!プログラミングツール図鑑 編集部 より:

      ご活用ありがとうございます。

    1. 知りたい!プログラミングツール図鑑 編集部 より:

      ゲーム作成がんばってください。

  2. すごく分かりやすい説明で、スクラッチが苦手な自分でも出来ました!ありがとうございます!

    1. それはよかったです。他の記事も参考にぜひいろいろ作ってみてください!

    1. ご活用ありがとうございます。

    1. 知りたい!プログラミングツール図鑑 編集部 より:

      ご活用ありがとうございます。ぜひ、いろいろ挑戦してみてください。

  3. 面白いなぁと思ったけど、もう少し簡単な奴が知りたい!

    1. 知りたい!プログラミングツール図鑑 編集部 より:

      ご利用ありがとうございます。この2つは、基本の使い方もわかるようにできているので、ぜひチェックしてみてください。

      さわってわかるスクラッチ:初めてのプログラムに挑戦。キャラクターを動かそう!
      https://tool-zukan.com/column/6124/

      Scratch(スクラッチ)はじめの一歩 「ネコを歩かせてみよう」〜これだけで基本の使い方がよくわかる!
      https://tool-zukan.com/column/4346/

    1. ぜひ、いろいろ作ってみてください。

ツール図鑑編集部 へ返信するコメントをキャンセル