【Scratch3基礎 x タイマー】簡単なストップウォッチを作ってみる


2021/03/21

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

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

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

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

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

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

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

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

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

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

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

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

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

スプライト

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

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

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

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

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

数字の表示の実装

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

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

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

変数名

説明

値の例

スイッチ

スイッチ右で切り替えるときの状態を表す。スイッチが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分の位の文字として与えているような仕組みになってます。

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

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

ボタン部分の実装

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

記事の担当:taconocat

ナンデモ系エンジニア

これからの"地方格差"なきプログラミング教育とは何かを考えながら、 地方密着型プログラミング学習関連テーマの記事を不定期で独自にブログ発信しています。