【Scratch入門】簡単なストップウォッチを作ってみる


※ 当ページには【広告/PR】を含む場合があります。
2021/03/21
【Scratch入門】Scratchで簡単なカウントダウンタイマーを作る
【Scratch入門】SVG画像のviewportの意味とviewBox属性の使い方

今回も公開されているScratchプロジェクトの中からリミックスを行い、タイマー機能を利用したストップウォッチの基本的なプログラミングのポイントを取り上げてみます。

なお、リミックスするやり方に関しては以下の記事を参照ください。

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

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


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

ストップウォッチのScratchプログラミング例

こちらの方で公開されているストップウォッチアプリをリミックスさせていただきます。

このストップウォッチはラップタイム記録機能も付いているので高性能なプログラムですが、今回のテクニック解説記事の中では基礎的な機能の作成のみにフォーカスしていきます。

具体的なプログラミングコードを覗く前に、ちょっとだけストップウォッチの使い方を解説しておきます。

合同会社タコスキングダム|タコキンのPスクール

プログラムをスタートし、
のボタンを一回押すと、タイマーが起動し、数字のカウンターが変化し、時間が経過していきます。

もう一度
ボタンを押すと、経過中の時間を一旦停止できます。

さらにもう一度
を、もう一度をとボタンを押す度に、タイマーの起動・一時停止を切り替えることができます。

時間の経過中に
のボタンを押す度にラップタイムが内部のメモリに記録されるようになっています。今回はこのラップタイム記録機能の説明は行いませんが、今後機会があれば、リスト機能の応用例として記事に取り上げてみようと思います。

なお、
クリアボタンではタイマーの一時停止中に押すと、経過時間がリセットされゼロに戻ります。


合同会社タコスキングダム|タコキンのPスクール【Pschool厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

Scratchでストップウォッチの作り方

ということで、これらの機能がどのように実装されているか、プロジェクトの中身の方で確認していきましょう。

スプライト

まずは素材の方をよく見て行きます。

合同会社タコスキングダム|タコキンのPスクール

まずストップウォッチを表示するスプライトの構造については、順に左から右に6桁のデジタル文字を担当する
10m1m1010.10.01という名前のスプライトが割り当てられています。

この6つのデジタル文字のスプライトには
0〜9までの10つのコスチュームでタイマーを表現しているような作りになっています。

2つのスイッチに関しては、
スイッチ左スイッチ右という名前のスプライトで操作するようです。

他には経過時間をリセットするボタンには
ボタンクリアという名前のスプライトが対応しています。

数字の表示の実装

まずは一番左の十分の桁の数値を表示しているプログラミングブロックは以下の図のようになります。

合同会社タコスキングダム|タコキンのPスクール

このプログラムで利用されている変数がいくつかあります。

各変数の役割を整理すると以下のようになっています。

変数名

説明

値の例

スイッチ

スイッチ右で切り替えるときの状態を表す。スイッチがONの状態が1、OFFの状態が0

1 or 0

ストップウォッチ

単位を秒で表した経過時間を保持している

681.19 (=11分21秒19)

入力

ラップタイムを呼び出すための番号を入力。この記事では解説しない

14 (番目のレコード)

表示

呼び出されたラップタイムを保持する。この記事では解説しない

105.22 (=01分45秒22)

それぞれの桁で数字を表示しているやり方はとてもシンプルで、ストップウォッチというタイマーの経過時間の数値を保持させていて、後はそれぞれのスプライトのループ処理に10分の位の数字1分の位の数字10秒の位の数字1秒の位の数字0.1秒の位の数字0.01秒の位の数字、を調べればその文字が表示されるようになっています。

例えば10分の位であれば、変数
ストップウォッチに入っている数値を600で割り算すると、現在何十分なのかに換算できます。

このストップウォッチでは1時間以上の時間は測れないので、ちょうど一時間で表示がゼロに戻ります。ということで、
***を6で割った余りという演算ブロックから、0〜5までの数字が10分の位の文字として与えているような仕組みになってます。

他の位の数字も同じ理屈で計算・表示されています。

合同会社タコスキングダム|タコキンのPスクール

ここでは詳しく説明しませんが、どういう計算になっているかはご自身で考えてみてください。

ボタン部分の実装

次にストップウォッチをスタート・ストップさせているスイッチ右と、経過時間をゼロにリセットするボタンクリアの実装をまとめて見てみます。

まずスイッチ右のコーディングブロックを見ると以下のようになっていると思います。

合同会社タコスキングダム|タコキンのPスクール

ここでは
このスプライブロックが押されたときイベントが動作の基点になっていることが分かります。

まず図の①の箇所で、変数
スイッチに入っている数を切り替えます。値が1のときには0を、0のときには1になるようにして、スイッチの切り替えを表現している箇所です。

次に②の緑の矩形で囲った部分ですが、これはボタンを押されたときのアニメーション効果を演出している箇所です。

その中の③という箇所で処理を行っているわけですが、スイッチがオン(
スイッチ = 1)のときは後述するタイマーイベントを送り、ストップウォッチが動作している状態に移行します。

もしそうでなければ、スイッチはオフ(
スイッチ = 0)ですが、このプログラムだと念のために確実にスイッチを0にするを呼び出しています。

このプログラムのもっとも理解しておきたいプログラミング・ポイントがこの④のブロックです。先程の
タイマーイベントが呼び出されたタイミングで、ストップウォッチが動作モードに変化させて・経過時間を操作しているストップウォッチの心臓部とも言えます。

まずストップウォッチが動作モードになると、内部のタイマーがリセットされて、プログラム全体に
スタートイベントを送り、動作中であることを知らせています。

そしてこの処理ブロック自身は、再び
スイッチ右が押される(スイッチ = 0になる)まで〜まで繰り返すループで、変数ストップウォッチに現在の経過時間を更新し続けます。

なお、ここでの変数
ホールドで、一時停止したときの経過時間を保管しているので、動作再開時でも経過時間がその分加算されて表示できるようになっています。

スイッチ = 0になり、ストップウォッチ一時停止状態になると、この処理ループが終わり、変数ホールドの値を更新して、このブロックに割り当てられていたプログラムも終了します。

以上の一連の動作によって、ストップウォッチがシンプルに作成されているようです。


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

まとめ

今回はScratchでタイマーを利用する応用例として、公開されるプロジェクトをリミックスして、ストップウォッチの作り方をざっと解説しました。

このテクニックを利用すると、ゲーム中の一時停止のような機能に応用できると思いますので、是非自分のものにして使ってみてください。