※ 当ページには【広告/PR】を含む場合があります。
2021/03/21
【Scratch入門】Scratchで簡単なカウントダウンタイマーを作る
【Scratch入門】SVG画像のviewportの意味とviewBox属性の使い方
【Scratch入門】リミックスのやり方〜気になるプログラムからScratchを自習する方法気になるScratchプロジェクトをコピーして自分のプロジェクトに追加する「リミックス」の手順について解説します。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選ストップウォッチのScratchプログラミング例
こちらの方で公開されているストップウォッチアプリをリミックスさせていただきます。このストップウォッチはラップタイム記録機能も付いているので高性能なプログラムですが、今回のテクニック解説記事の中では基礎的な機能の作成のみにフォーカスしていきます。具体的なプログラミングコードを覗く前に、ちょっとだけストップウォッチの使い方を解説しておきます。プログラムをスタートし、①のボタンを一回押すと、タイマーが起動し、数字のカウンターが変化し、時間が経過していきます。もう一度①ボタンを押すと、経過中の時間を一旦停止できます。さらにもう一度①を、もう一度①をとボタンを押す度に、タイマーの起動・一時停止を切り替えることができます。時間の経過中に②のボタンを押す度にラップタイムが内部のメモリに記録されるようになっています。今回はこのラップタイム記録機能の説明は行いませんが、今後機会があれば、リスト機能の応用例として記事に取り上げてみようと思います。なお、③のクリアボタンではタイマーの一時停止中に押すと、経過時間がリセットされゼロに戻ります。
【Pschool厳選】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になり、ストップウォッチ一時停止状態になると、この処理ループが終わり、変数ホールドの値を更新して、このブロックに割り当てられていたプログラムも終了します。以上の一連の動作によって、ストップウォッチがシンプルに作成されているようです。
【Pschool厳選】Scratchを学べるオンライン・駅前プログラミングスクール５選 まとめ
今回はScratchでタイマーを利用する応用例として、公開されるプロジェクトをリミックスして、ストップウォッチの作り方をざっと解説しました。このテクニックを利用すると、ゲーム中の一時停止のような機能に応用できると思いますので、是非自分のものにして使ってみてください。