●UIFlowの基本図易

○UIFlowの基本図形

 前回はタイトル・ラベルといった文字の表示を行いました。今回は基本図形の描画について説明します。UIFlowでは以下の基本図形が用意されています。

(1) 四角形(Rect)

(2) 円形(Circle)

(3) 三角形(Triangle)

(4) 直線(Line)

(5) 画像(Image)

 このうち(1)〜(4)までは同じ手順で座標値やサイズなどを設定することができます。そこで、(1)の四角形について詳しく説明します。四角形の処理が分かれば他の図形も同様に扱うことができるからです。(5)の画像については扱いが少し異なるため最後に説明します。

 いずれの図形・画像も前回のタイトル・ラベルと同様に画面左上のアイコンをM5StickC画面上にドラッグすることで配置できます。座標値や色の設定も同様です。

○四角形を配置

 それでは四角形を配置してみましょう。ただ、四角形を配置しただけでは面白くないので、配置した四角形を1秒ごとに点滅させてみます。

 まず、Rectと書かれたアイコンをM5StickCの画面までドラッグします。

 四角形の位置やサイズなどを変更する場合は、配置した四角形をクリックします。すると設定ウィンドウが表示されます。

 四角形の座標とサイズを設定します。座標値はM5StickC画面左上が原点(0,0)座標になります。M5StickCの画面サイズは横が80ピクセル、縦幅が160ピクセルになります。ここでは座標は(0,0)でサイズは縦横とも80ピクセル、枠の色は赤色、塗りの色は緑色に設定します。

 次に配置した四角形の点滅処理を行います。UIのカテゴリをクリックすると四角形の項目が表示されます。なお、四角形を配置していない場合には、この項目は出てこないので注意してください。

 四角形の項目をクリックします。するとブロックが表示されます。一番下にある「四角形[rectangle0]の表示を[hide]に設定」ブロックをクリックします。

 画面に配置されますが、とりあえずこのままにしておきます。

 次にイベントのカテゴリをクリックします。表示されるブロックから「ずっと」をクリックします。

 「ずっと」のブロックの中に「四角形[rectangle0]の表示を[hide]に設定」ブロックを入れます。

 次に四角形を1秒ごとに点滅させるのでタイマーのカテゴリから「[1]秒停止」ブロックをクリックします。

 「[1]秒停止」ブロックを「四角形[rectangle0]の表示を[hide]に設定」ブロックの下に配置します。

 「四角形[rectangle0]の表示を[hide]に設定」ブロックを複製します。複製するにはブロックの上でマウスの右ボタンをクリックします。メニューが表示されるので「複製」を選択します。複製したブロックを「[1]秒停止」ブロックの下に配置します。配置したら表示の[hide]を[show]に変更します。

 同様に「[1]秒停止」ブロックを複製し図のように配置します。これでできあがりです。

 それでは実行ボタンをクリックして動作を確認してみましょう。1秒ごとに四角形が点滅します。

●3分タイマーを作る/ボタンを押したらタイマーをスタートさせる

○3分タイマーを作る

 今度は配置した四角形のサイズを変更してみます。ただ変更するだけでは面白くないので、3分タイマーを作成してみます。時間の経過とともに四角形の縦幅が小さくなるようにします。

 まず四角形を図のように設定します。

 次に「ループ」のカテゴリをクリックします。「[i]を[ ]から[ ]まで[ ]ずつカウントする」ブロックをクリックして配置します。ブロックは「Setup」ブロックの下に連結します。

 次に繰り返しの数値を指定します。数値は「数学」のカテゴリの一番上のブロックになります。

 数値のブロックを配置したら159に数を変更します。

 同様に終了値とカウントする値も図のように設定します。

 次に四角形の高さを設定するブロックを配置します。「UI」カテゴリの中にある「四角形」の項目をクリックします。その中から「四角形[rectangle0]の高さを[30]に設定」ブロックをクリックします。ブロックは繰り返しブロック内に配置します。

 四角形の高さは繰り返しブロックで使われている変数iと同じになります。そこで「変数」のカテゴリをクリックして表示される変数iのブロックをクリックします。クリックしたら四角形の高さの部分に変数iのブロックをはめ込みます。

 あとは一定時間待つためのブロックを配置します。3分タイマーなので180秒ですが、M5StickCの画面の高さは160ピクセルです。このため四角形の1ピクセルを減らすために必要な時間は180秒÷160ピクセル=1.125秒となります。ミリ秒で設定するので図のように1125の値を入力します。

 これで完成です。実行ボタンをクリックして動作を確認してみましょう。

だいたい、3分で四角形が消えてなくなります。なお、M5StickCにはRTC、リルタイムクロック機能があります。今回は使用しませんが、次回このRTCを使って3分タイマーを作成します。

○ボタンを押したらタイマーをスタートさせる

 先ほどまでのプログラムは勝手にタイマーがスタートしてしまいました。これでは使い勝手が悪すぎますので、今度はボタンが押されたらタイマーをスタートさせるようにします。また、M5StickCにはボタンAとBがあるのでそれぞれ3分タイマーと1分タイマーにしてみましょう。

 まず、先ほどのブログラムを流用します。新たに配置するのはボタンが押された時に処理を行うブロックです。これは「イベント」のカテゴリをクリックして表示されるブロックの中から「ボタン[A]が[wasPress]のとき」ブロックをクリックします。

 このブロックの中に先ほど作成した繰り返しブロック全体を図のようにはめこみます。

 これでボタンAが押された時の処理はできあがりです。次にボタンBが押された時の処理を追加します。ブロックを複製します。

複製したら図のように変更します。設定する秒数は1分タイマーなので60秒÷160ピクセル=0.375秒、つまり375ミリ秒になります。

設定が終わったら完成です。動作を確認してみましょう。プログラムを転送したらボタンA(正面のM5と書かれたボタンです)を押すと3分タイマーになります。右側のボタンBを押すと1分タイマーになります。

●残り秒数を表示する/その他の基本図形と画像の表示

○残り秒数を表示する

 それでは最後に残りの秒数も同時に表示させてみましょう。四角形の上に残りの秒数を重ねて表示したいところですが、実際にやってみると表示に不具合があり見た目によくりあません(UIFlowのバージョンアップ等で解消される可能性はあります)。そこで、画面の半分に秒数、残り半分に四角形を表示することにします。

 まず、四角形のサイズを半分にします。

 秒数を表示するラベルを図のような位置とフォントに設定します。

 ラベルに表示する秒数は変数iの値に待ち時間分のミリ秒を掛けた値になります。秒数は整数にしたいので「四捨五入」ブロックを使います。「四捨五入」ブロックは「数学」のカテゴリ内にあります。

 秒数を表示するブロックを図のように配置したら完成です。

 実行ボタンをクリックして動作を確認してみましょう。

ボタンAを押すと180秒からカウントされ、ボタンBを押すと60秒からカウントされます。

○その他の基本図形と画像の表示

 四角形以外の図形として円形、三角形、直線があります。これらも四角形と同様に配置することができます。詳細は設定ウィンドウで行うことができます。

 UIFlowではあらじめ用意した画像の表示もできます。ただし、画像ファイルは25KB以内でないといけません。また、Photoshopで作成するとなぜか画像が表示されないことがあります。GIMPやMacのプレビュー.app等であれば表示されます。条件を満たしているのに画像が表示できない場合は画像処理アプリケーションを変更してみてください。

 それでは画像を表示してみましょう。あらかじめ表示する画像は用意されているものとします。まず、ImageアイコンをM5StickC画面にドラッグして配置します。配置したらアイコンをクリックします。設定ウィンドウが表示されます。表示する画像はimagePath部分で指定します。現時点ではデフォルトの画像しかありません。表示する画像は別途転送しなければいけません。

 画面右上にあるMANAGERボタンをクリックします。

 するとリソースマネージャーが表示されます。Add Imageボタンをクリックします。

 用意した画像を選択します。

 画像を選択するとM5StickC本体に画像データが転送されます。少し時間がかるので待ちます。なお、M5StickCとの接続が切れていると転送されません。

 無事に転送が終わると図のようになります。間違って転送してしまった場合は赤いDeleteボタンをクリックしてください。

 問題がなければCancelボタンをクリックしてリソースマネージャーを終了します。

 画像アイコンをクリックして設定ウィンドウを表示します。imagePathのポップアップをクリックすると転送したファイル名が表示されます。表示するファイルを選択します。

 画面にうまく収まるように位置などを調整します。

 あとは「UI」のカテゴリの画像の項目から「画像[image0]を見せる」ブロックを配置すれば完成です。

 プログラムを実行すると指定した画像がM5StickCの画面に表示されます。

 次回はRTC(リアルタイムクロック)とスピーカーHATを使って今回より正しく秒数をカウントする3分タイマーを作成します。

著者 古籏一浩

プログラミングをベースにして面白そうなものはとりあえずやってみるというスタンス。複雑なものよりシンプルで楽しめるものが好み。最近は30年前に移植したゲーム(mz-700版 SPACE HARRIER)の話などを書いたりしています。著者サイト:http://www.openspc2.org/