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

2021/03/21

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

【Scratch入門】SVG画像をScratchステージの背景として使う〜 viewportの意味とviewBox属性の使い方

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

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

【Scratch入門】リミックスのやり方〜気になるプログラムからScratchを自習する方法

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

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

こちらの方で公開されている

ストップウォッチ

アプリをリミックスさせていただきます。

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

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

プログラムをスタートし、

①

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

もう一度

①

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

さらにもう一度

①

を、もう一度

①

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

時間の経過中に

②

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

なお、

③

の

クリア

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

【Pスクール厳選】Scratchをしっかり学ぶためのオススメ書籍まとめ

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

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

スプライト

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

まずストップウォッチを表示するスプライトの構造については、順に左から右に6桁のデジタル文字を担当する

10m

・

1m

・

10

・

1

・

0.1

・

0.01

という名前のスプライトが割り当てられています。

この６つのデジタル文字のスプライトには

0〜9

までの10つのコスチュームでタイマーを表現しているような作りになっています。

2つのスイッチに関しては、

スイッチ左

・

スイッチ右

という名前のスプライトで操作するようです。

他には経過時間をリセットするボタンには

ボタンクリア

という名前のスプライトが対応しています。

数字の表示の実装

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

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

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

変数名	説明	値の例
スイッチ	スイッチ右で切り替えるときの状態を表す。スイッチがONの状態が１、OFFの状態が０	1 or 0
ストップウォッチ	単位を秒で表した経過時間を保持している	681.19 (=11分21秒19)
入力	ラップタイムを呼び出すための番号を入力。この記事では解説しない	14 (番目のレコード)
表示	呼び出されたラップタイムを保持する。この記事では解説しない	105.22 (=01分45秒22)

それぞれの桁で数字を表示しているやり方はとてもシンプルで、

ストップウォッチ

というタイマーの経過時間の数値を保持させていて、後はそれぞれのスプライトのループ処理に

10分の位の数字

、

1分の位の数字

、

10秒の位の数字

、

1秒の位の数字

、

0.1秒の位の数字

、

0.01秒の位の数字

、を調べればその文字が表示されるようになっています。

例えば10分の位であれば、変数

ストップウォッチ

に入っている数値を

600

で割り算すると、現在何十分なのかに換算できます。

このストップウォッチでは１時間以上の時間は測れないので、ちょうど一時間で表示がゼロに戻ります。ということで、

***を6で割った余り

という演算ブロックから、

0〜5

までの数字が10分の位の文字として与えているような仕組みになってます。

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

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

ボタン部分の実装

次にストップウォッチをスタート・ストップさせている

スイッチ右

と、経過時間をゼロにリセットする

ボタンクリア

の実装をまとめて見てみます。

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

ここでは

このスプライブロックが押されたとき

イベントが動作の基点になっていることが分かります。

まず図の①の箇所で、変数

スイッチ

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

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

その中の③という箇所で処理を行っているわけですが、スイッチがオン（

スイッチ = 1

）のときは後述する

タイマー

イベントを送り、ストップウォッチが動作している状態に移行します。

もしそうでなければ、スイッチはオフ(

スイッチ = 0

)ですが、このプログラムだと念のために確実に

スイッチを0にする

を呼び出しています。

このプログラムのもっとも理解しておきたいプログラミング・ポイントがこの④のブロックです。先程の

タイマー

イベントが呼び出されたタイミングで、ストップウォッチが動作モードに変化させて・経過時間を操作しているストップウォッチの心臓部とも言えます。

まずストップウォッチが動作モードになると、内部のタイマーがリセットされて、プログラム全体に

スタート

イベントを送り、動作中であることを知らせています。

そしてこの処理ブロック自身は、再び

スイッチ右

が押される(

スイッチ = 0

になる)まで

〜まで繰り返す

ループで、変数

ストップウォッチ

に現在の経過時間を更新し続けます。

なお、ここでの変数

ホールド

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

スイッチ = 0

になり、ストップウォッチ一時停止状態になると、この処理ループが終わり、変数

ホールド

の値を更新して、このブロックに割り当てられていたプログラムも終了します。

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

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選

まとめ

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

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

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

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

カテゴリー

記事のおしながき

【Pスクール厳選】Scratchを学べるオンライン＆駅前プログラミングスクール５選