Scratchの手引き

Scratchの「変数」を使って、カウントアップとカウントダウンのスプライトを作る

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

はじめに

プログラミングには「変数」というものがり、ざっくりいうと、「文字や数値などをいれておける箱」というイメージです。そして、この「変数」の中身はいろいろ書き換えることができます。例えば、「ゲームのスコア」だったり、「HP(ヒットポイント)」などを入れておくことなどできます。
また条件分岐を使うことで「変数」の中身に応じて、表示されるものや、発生するイベントを切り替えたりすることもできるということになります。

変数については、こちらの記事でも紹介していますが、今回は「変数」のみが理解できるように「矢印」のスプライトをクリックすると「変数」にセットした数値が、カウントアップ(足し算)、カントダウン(引き算)されるプログラムを作ってみたいと思います。

タイマーを使った「変数」についても別の記事で紹介しています。

スプライトを変更し、最初の位置と「クローン」を使ってみる

今回は、デフォルトで準備されている「ネコ」のスプライトは使わないので、スプライトと背景のセクションから、「ネコ」のスプライトの右上にある「ゴミ箱」をクリックし削除しておきます。

次に今回使いたいスプライトを追加したいので、画面右下の「スプライトを選ぶ」をクリックします。

画面が遷移し、スプライトの一覧が表示されます。その中から「Arrow1」という「矢印」のスプライトがあります。それをクリックで選択します。

スプライトを選択すると、プログラムの画面に遷移します。(最初の画面に戻ります。)
先ほど選択した「矢印」のスプライトが選択されている状態なので、そのままプログラムを作っていきます。

最初のきっかけは、ステージのがクリックされたときにしたいので、
「イベント」から「が押されたとき」のブロックをドラッグします。

今回、カウントアップ(足し算)と、カウントダウン(引き算)の2種類のスプライトを表示させていきますが、もう一つ「矢印」のスプライトを作ると、スプライトを切り替えながらプログラムを作る必要があります。今回は解説しやすいよう、スプライトの切り替えが無いようにしたいので、「矢印」のスプライトを「クローン(コピー)」するブロックを使って、2つのスプライトを表示させます。

「制御」から「自分自身のクローンを作る」をドラッグし、「が押されたとき」のブロックの下にくっつけます。

「スプライト」の表示する場所を決めます。
「動き」から「x座標を0、y座標を0」をドラッグし、「自分自身のクローンを作る」の下にくっつけます。
次に位置を左側にしたいので、「x座標を0」の「0」を「-80」に変更してください。
もし、「y座標を0にする」が「0」になっていなければ「0」に変更してください。

座標については、こちらの記事でも解説しておりますので、参照してください。

スプライトの見た目を変えていきます。左側のスプライトはカウントアップ(足し算)にしたいので、矢印が上向きのものにします。
「見た目」から「コスチュームをarrow1-dにする」をドラッグし、「x座標を-80、y座標を0にする」の下にくっつけます。

一旦これで、カウントアップ(足し算)側の初期設定のプログラムは完了です。今度は「クローン(コピー)」された側のスプライトのプログラムを作っていきます。

「クローン(コピー)」された側のプログラムを作る

「クローン(コピー)」された側のプログラムを作っていきます。

先ず、「クローン」されたタイミングで初期状態をつくっていくので、「制御」から「クローンされたとき」をドラッグします。場所は適当な場所で構いません。

こちらのプログラムも位置を決めていきます。
「動き」から「x座標を80、y座標を0」をドラッグし、「クローン」されたときの下にくっつけます。
次にこちらの「クローン」された側は右側に表示したいので、「x座標を80」の「-80」を「80」に変更します。もし「y座標を0にする」が「0」になっていなければ「0」に変更してください。

「クローン」された側は、カウントダウン(引き算)にしたいので、下向き矢印の見た目にします。

「見た目」から「コスチュームをarrow1-dにする」をドラッグし、「x座標を0、y座標を0にする」の下にくっつけます。このままでは上向き矢印になるので、「arrow1-d」のところをクリックし、「arrow1-c」に変更します。

これで初期状態のプログラムは完成です。
ステージのをクリックします。「矢印」の「スプライト」が「クローン(コピー)」され、上下それぞれの場所に表示されています。

今度は、この「スプライト」に「変数」を割り当てて条件にマッチしたら、カウントアップ(足し算)、カウントダウン(引き算)できるようにしていきます。

共通の「変数」を変化させる条件のプログラムを作る

が押されたとき」から始まるブロックのかたまりと、「クローンされたとき」から始まるブロックの2つのかたまりが現在あります。その両方に共通する条件のプログラムを作っていきます。

「制御」から「ずっと」をドラッグし、適当な場所におきます。

次も「制御」から「もし〜なら」をドラッグし、「ずっと」の中に入れます。

この「もし〜なら」に入る条件は、「矢印」の「スプライト」をクリックしたときにカウントアップ(足し算)したり、カウントダウン(引き算)させる条件を入れていきます。

「演算」から「〜かつ〜」をドラッグし、「もし〜なら」の「〜」の中に入れます。

具体的な条件を入れていきます。
「調べる」から「マウスのポインターに触れた」を「〜かつ〜」の左側に入れます。(右側でも構いません。)

マウスポインターに触れただけでなく、クリックしたタイミングでカウントアップ(足し算)、カウントダウン(引き算)させたいので、続けて「調べる」から「マウスが押された」をドラッグし、「マウスのポインターに触れたかつ〜」の「〜」に入れます。

これで条件部分の作成完了です。
それぞれに入れていきたいので、これを「複製」します。「ずっと」のブロックの右上辺りを右クリックして、「複製」をクリックします。

「複製」されたものをら「が押されたとき」のブロックのかたまり側、の「コスチュームをarrow1-dにする」の下にくっつけます。

もう一つの方は、「クローンされたとき」のブロックのかたまりの「コスチュームをarrow1-cにする」の下にくっつけます。

これでそれぞれに条件部分のブロックが反映されました。
今度はこの条件の中に変数を割り当てて、その条件になったときカウントアップ(足し算)か、カウントダウン(引き算)かを指定すれば完成です。

「変数」を作る

いよいよ「変数」を作っていきます。今回は、カウントアップ(足し算)、カウントダウン(引き算)をするプログラムなので、数字を入れる「変数」を作るということになります。

画面左側の「変数」をクリックし、「変数を作る」をクリックします。

画面が遷移し、「変数」を作るモーダル画面が表示されます。
「新しい変数名:」のところは、「変数」の名前をいれます。何でもよいのですが、今回はわかりやすく「カウンター」という名前にします。

今回は、これだけで大丈夫なので「OK」をクリックします。

ステージを見てみると、先ほど作成した「カウンター」の変数がステージ上に表示されています。
「変数」の表示は消すこともできますが、カウントアップ(足し算)、カウントダウン(引き算)されたときの「変数」の中身の様子をみたいので、表示はこのままにしておきます。

「変数」をプログラムに入れていく

「変数」をプログラムの中に適応させていきます。

カウンターは、最初は「0」から始めたいので、その初期状態を決めます。
「変数」から「カウンターを0にする」をドラッグし、「が押されたとき」の下に入れます。

このままら「が押されたとき」のブロックのかたまり側を作っていきます。
「変数」から「カウンターを1ずつ変える」をドラッグし、「もしマウスのポインターに触れたかつマウスが押されたなら」の中に入れます。

こちら側はカウントアップ(足し算)にしたいので、「カウンターを1ずつ変える」の「1」という数値はこのままで構いません。1回クリックしたら、1つ増えるということになります。

但し、「ずっと」の中にいるので、一瞬で4桁ほどの数字にカウントアップ(足し算)されてしまいます。
それを防ぐ上で時間を制御していきます。

「制御」から「1秒待つ」をドラッグし、「カウンターを1ずつ変える」の下にくっつけます。
これで1回クリックしたら、1つカウントアップされます。

次に「クローンされたとき」のブロックのかたまり側も同じようにカウント操作を入れていきます。

「変数」から「カウンターを1ずつ変える」をドラッグし、同じく「もしマウスのポインターに触れたかつマウスが押されたなら」の中に入れます。
こちら側は、カウントダウン(引き算)になるので、「カウンターを1ずつ変える」の「1」を「-1」に変更します。

同じく、こちらもこのままでは一瞬で4桁ほどカウントダウン(引き算)されてしまうので、時間を操作するブロックを入れていきます。

「制御」から「0.5秒待つ」をドラッグし、「カウンターを-1ずつ変える」の下にくっつけます。

これで今回のプログラムは完成です。

動作確認してみます。

ステージのをクリックします。
まずカウントアップ(足し算)を試します。画像では右側の「上向き矢印」のスプライトを2回クリックしました。「変数」の数値が2つカウントアップ(足し算)され、「0」から「2」に変化しました。

今度は、カウントダウン(引き算)を試します。右側の「下向き矢印」のスプライトを6回クリックすると、「2」から「-6」引き算されることになるので、「-4」になりました。

意図した通りにプログラムが動作しました。

まとめ

  • 「変数」は文字や数字をいれておける箱
  • 「変数」の中身は、プログラムによって変化することができる
  • 「変数」を変化させるには、条件分岐を使ってその条件にマッチしたら、変更したい中身にする
  • クローンすることで、1つのスプライトから複製することができる

今回、「変数」と「変数」の挙動がわかりやすいよう、簡単なカウントアップ(足し算)、カウントダウン(引き算)のプログラムを作ってみました。冒頭で記載した通り、「変数」は文字や数値を入れておける箱で、その中身もプログラムの中で変化させることができます。今回のようにカウントアップ(足し算)させたり、カウントダウン(引き算)させることで、「変数」の挙動がわかったかと思います。

うまく活用することで、「ゲームのスコア」が加算されたり、「HP(ヒットポイント)」が減ったりするようなゲームを作ることができるのでご参考いただければかと思います。