【Scratch入門】Scratchで簡単なカウントダウンタイマーを作る


※ 当ページには【広告/PR】を含む場合があります。
2021/03/20
2022/07/21
【Scratch入門】リミックスのやり方〜気になるプログラムからScratchを自習する方法
【Scratch入門】簡単なストップウォッチを作ってみる



公開されているリミックスしたプロジェクトからScratchのプログラミングを学習してみるコーナーです。 今回はカウントダウンタイマーの作り方のポイントを解説していきます。
なお、リミックスするやり方に関しては以下の記事を参照ください。

合同会社タコスキングダム|蛸壺の技術ブログ
【Scratch入門】リミックスのやり方〜気になるプログラムからScratchを自習する方法

気になるScratchプロジェクトをコピーして自分のプロジェクトに追加する「リミックス」の手順について解説します。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

カウントダウン・タイマーのプログラム例



今回は
カップヌードルを食べるためのタイマー をリミックスしたプログラムでどのようにタイマーが作らているかを解説します。
(※注) なお、タイマーがゼロになると、パソコンのスピーカー設定によっては
どデカい大きい音 が出るかもしれませんのでご注意ください。





このプログラムですが、スタートしてほぼ3分後にブザーがなるだけの簡単なタイマー・アプリです。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

タイマーの作り方



ではこのプログラムの中身を解説していきましょう。
スプライトは主に3つでタイマーが構成されています。

合同会社タコスキングダム|蛸壺の技術ブログ


これらのスプライトはそれぞれ、
秒 十の位秒 一の位 という名前です。
コスチューム画像を見ていくと、
のスプライトは3分まで測れればよいので、0~3(コスチューム0~コスチューム3)までの数字の画像を持っています。

秒 十の位秒 一の位 のスプライトは最大59秒まで図れればよいので、それぞれ0~5と0~9までのコスチューム画像を準備しておきます。

分のスプライト



まずは分のスプライトのブロックコードに着目します。

合同会社タコスキングダム|蛸壺の技術ブログ


上の図は分のスプライトの中身を少し整理したものです。
まず①の部分ですが、これは初期値の設定を行っているブロックです。 プログラムがスタートした(
🚩 ボタンを押した)ときに、数字の3の画像に設定し、またスプライトの表示座標を定位置に来るように設定しています。
次に②の部分がこのスプライトの処理ループになっています。
このループは実際プログラムの終了を呼び出すだけで、他は何もしていないブロックです。

コスチューム番号が4 (つまりは数字のゼロのコスチューム)のとき、かつ、 秒の十の位のコスチューム#(番号)が1(番目) (つまり数字のゼロのコスチューム)のとき、かつ、 秒の一の位のコスチューム#(番号)が1(番目) (つまり数字のゼロのコスチューム)、の3つの条件を満たすときだけ、 おわり のイベントが送信される仕組みです。
③の部分では、
というイベントを受け取った時に、コスチュームを次の番号に変えています。 つまり、このイベントが呼び出される度に 3 > 2 > 1 > 0 という画像に切り替わるようになります。
④の部分ですが、これは
おわり イベントを受け取ると、このスプライトの処理が終了するようにしている箇所です。

秒の十の位のスプライト



秒のスプライトは2つありますのでまずは十の位のほうを見ていきます。

合同会社タコスキングダム|蛸壺の技術ブログ


先ほどと同様で、①の部分でコスチュームの種類と文字を描画する位置の初期化を行っています。 このときの
コスチューム0 とは数字のゼロのことです。
②はこのスプライトのループ処理で
コスチュームの番号 = 2(番目) (2番目のコスチュームは数字の5)、かつ、 秒 一の位のコスチューム#(番号) = 2(番目) (秒 一の位の2番目のコスチュームは数字の9)の時に、 のイベントを送信して、先ほどでも解説したように のコスチュームを変えています。
またループの中で
30秒 待っているのは、無駄な処理をさせないための工夫のようです。 (この待ち時間は無くても動きますが、少なくとも60秒に1回の頻度でループの中の処理が動く必要があります。)
③は
十の位 という名前のイベントを受け取ると、次のコスチュームに変えるように働きます。
④は先ほどと同様に
おわり イベントでこのスプライトの動作が終了します。

秒の一の位のスプライト



最後に秒の一の位のスプライトの実装を見てみます。

合同会社タコスキングダム|蛸壺の技術ブログ


①は初期化の処理で、スプライトを描画する位置とコスチューム(数字のゼロ)にしています。
このプログラムのもっとも重要ともいえる
タイマー の役割を果たしている部分が②です。
まずスタートしてから最初の1秒を待って、タイマーのループに入っています。 このループではまず秒の一の位のコスチュームを変えてから、
0.992秒 だけ待っています。
残りの
0.008 秒がどこにいったのかというと、これはコスチュームが変わる時の処理でほんの少しだけ遅延する分を考慮して、1秒よりちょっとだけ早めにループ時間を早めているようです。
どのくらい描画処理が遅延するかは、プログラムを実行するユーザーのデバイスにも依るので、一概にループ時間を何秒に設定するのが良いとは言えませんが、このプログラムの説明書きにも「ほぼ3分」と言われているのがこのプログラム部分のことを指していると思われます。
さて、タイマー部分とは別にもう一つ③の部分にこのスプライトの処理も書かれています。 これは
コスチュームの番目 = 2 (つまりは数字の9)ならば 十の位 のイベントで、秒の十の位のスプライトのコスチュームを変化させて、1秒間ごとにコスチュームの状態をチェックしているプログラムです。
④は上と同じで、
おわり イベントでスプライトの動作を終了させています。


合同会社タコスキングダム|蛸壺の技術ブログ【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール5選

まとめ



以上、カウントダウン式のタイマーの簡潔なプログラミングレシピでしたが、いかがだったでしょうか。
カウントダウンする時間は一定のため実用性の幅は限られますが、アイデア次第では今回のようにシンプルながら面白いプログラムになっていると思います。
このテクニックを使えば、時間切れで終了となるゲームにも応用できそうです。