Scratchの基本操作

Scratchの基本的な操作をして、ネコのスプライトを動かしてみる

Scratchはアメリカの、MIT(マサチューセッツ工科大学)メディアラボで開発されたビジュアルプログラミング言語です。

はじめに

Scratchの基本操作を学習していきましょう。ここでは、「もし〜なら」や「ずっと」など、いくつかのコードブロックを組み合わせてネコを動かすプログラミングを作っていきたいと思います。

わかりやすいくやっていきたいと思いますので、今回はPCのキーボードにあるカーソル(矢印キー)の左右を押すと、それに合わせてネコも左右に動くプログラミングを作っていきたいと思います。

こちらの記事で実際の操作を行う前の画面説明については、別の記事にありますのであわせてご覧ください。

▼ 今回作成するプログラム(のの旗をクリックして動作を確認することができます)

ステージの座標を理解する

ステージの位置を操作するには、座標(X座標、Y座標)を使うことができます。プログラミングをする前にScratchにおける座標について、簡単に理解するために解説していきます。

座標は、中学生の数学で習うと思いますが、ここでは、ステージ上の場所を数字で指定するとだけ覚えておけば大丈夫です。

まず、ステージは、横方向がX座標、縦方向はY座標で位置を数値であらわすことができます。例えば、ネコに対して、「X座標を3」、「Y座標を5」と数値を入れれば、その数値を入れた場所へネコが動くということです。

下図で見ていただければわかりやすいと思います。
真ん中が、0で、一番右にいくには240、一番上にいくには180ということになります。

では実際にネコの「スプライト」を動かしてみます。

ステージのネコを直接ドラッグしてみましょう。
左下へ移動すると、XとYの数字が変わりました。つまり現在ネコの「スプライト」は、X座標 165、Y座標 -84の位置にあるということです。

今度は逆に、数値の入力でネコの位置を変えてみましょう。
横方向を真ん中にしたいと思うので、Xのところに「0」と入力します。
そうすると、ネコの横方向の位置が中央になりました。

座標を理解しておくと、好きな位置に移動したり、「スプライト」を配置することができます。

ネコを中央の位置に戻しておきたいので、Yのところも「0」と入力しておいてください。

ブロックをつける、外す、消す

今度は、ブロックをつけたり、外したりをするScratchの基本操作をいよいよやってみましょう。

Scratchのプログラミングは、ブロックのエリアからドラッグして、コードブロックをつなぎ合わせて作成していきます。

どのブロックでも構いませんが、ここではコードブロックのエリアから、基本となるきっかけのイベントのブロックが押されたとき」のコードブロックを入れていきます。ブロックを見つけたら図のように右側のエリアへドラッグしてきてください。

そして、今度は、「表示する」のコードブロックをさがし、同じく図のようにドラッグし、先ほどの「が押されたとき」のコードブロックの下につけます。

そして、3つめは「隠す」のコードブロックをドラックし、さらにその下(「表示する」の下)にくっつけます。

このように左側のコードからコードブロックを見つけ、右側へドラッグし、コードブロックをくっつけながらプログラミングを作成していきます。

逆にコードブロック外したいときは、外したいコードブロックをドラッグすると、その下から全てを外すことができます。

もちろん、コードブロックを削除することもできます。

もし、「隠す」を消したい場合は、「隠す」のコードブロックのところで右クリックして「ブロックを削除」をクリックします。

削除されたので、コードブロックの画面からなくなりました。

今回は、「表示する」のブロックも使いませんので、同じく削除します。
削除する方法はもう一つあり、不要なコードブロックをコードブロックのリストにドラッグすることでも削除できます。

ネコを動かすプログラミング

では、いよいよプログラミングをやっていきましょう。冒頭でも記載した通り、PCのカーソルで、ネコの「スプライト」を左右に動かすプログラミングを作っていきます。

まず、スタートとなる「が押されたとき」のコードブロックが残っていると思います。
「ずっと」の処理をその下に続けたいので、「ずっと」のブロックを探し、ドラックして「が押されたとき」の下にくっつけましょう。

今度は、カーソルを押したときの操作部分をつくります。

「もし〜なら」のコードブロックをドラッグし、「ずっと」のコードブロックの中に入れます。

次に「もし〜なら」の「〜」の六角形の部分を埋めていきます。
「スペースキーが押された」を見つけドラッグします。

今度は、「スペースキーが押された」のところをクリックし、「右向き矢印」をクリックし変更しします。


そして、「もし〜なら」の中に六角形の中に「右向き矢印が押された」を入れ込みます。

「もし〜なら」の中に「右向き矢印が押された」を入れ込みます。
六角形が白くなったときに離せば入ります。

右向き矢印を押したときに、横方向(X座標の方向)に動かしたいので、「10歩動かす」をドラッグし、「もし〜なら」の中に入れ込みます。

これで右カーソル(右矢印)を押せば、10歩動くプログラミングができました。

続けて、左側も動くようにしたいので、同じような操作をします。
再び「もし〜なら」のコードブロックをドラッグし、「ずっと」の中に入れ、上部の「もし〜なら」のコードブロックの下にくっつけます。

そして、「スペースキーが押された」のコードブロックもドラッグします。

今度は、「左向き矢印」をクリックして、「もし〜なら」の中に「左向き矢印キーが押された」を六角形の入れ込みます。

同じくX座標の方向に動かしたいので、「10歩動かす」のコードブロックをドラッグし、「もし〜なら」の中に入れ込みます。

そして、「10」のところを「-10」にします。これで左カーソルを押せば、左方向に10歩動く(-10歩動く)プログラミングができました。

それでは、作ったプログラミングが意図した通り動くか試してみましょう。ステージの上部にあるをクリックします。

PCのキーボードのカーソル(矢印キー)の左右を押すと、矢印の方向にネコが動くと思います。

まとめ

  • ステージの横方向はX、縦方向はY
  • コードのところからコードブロックをドラッグする
  • コードブロック同士をつなげたり、入れたりしてプログラムを作る
  • ステージのをクリックするとプログラムが動作する

いかがだったでしょうか。座標のところは若干難しく感じられる場合もあるかと思いますが、これがScratchの基本知識になります。使っていくうちに慣れてくるかと思いますので今回の操作がわからなくても大丈夫です。

「もし〜」については、こちらに詳しい記事を記載しておりますのでご覧ください。

次回は、ネコが歩いて動いているようにこのプログライミングを少し改良し、アニメーションをさせていきたいと思います。

次の記事:Scratchでネコのスプライトが歩くアニメーションを作ってみる