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秒ごとに四角形が点滅します。