toio blog

今回は車輪で移動するリモコン操作の上級編として、座標を使ってより高度な制御をしてみましょう。マットのある範囲をはみ出たら自動で戻ったり、マスを使った移動など、toioならではの移動方法・移動制御を紹介します。ゲームやロボットコンテストなどにも使える基本的な考え方が多く含まれていますので、しっかり試してみてくださいね。

※このカテゴリーでは、toioの「ビジュアルプログラミング」の基本的な使いかたや様々なあそびかたを紹介しています。この記事は主にお子様への説明をサポートいただける大人の方（保護者の方・先生）を対象としています。ご要望に応じてお子様向けの記事も準備して参ります。

※toioについては公式サイト(https://toio.io/)、本カテゴリー/a>の記事一覧は「一覧マップ」をご覧ください。

準備するもの

・toio コア キューブ（以下キューブ）
・「トイオ・コレクション」のプレイマット（以下マット）
・toioのビジュアルプログラミングに対応したPCとブラウザ
・サンプルファイル（以下ファイル）※下記よりダウンロード

ダウンロードするファイル

↑更新情報 [2019/12/18 v1.0.2]：Cubeスプライト「car」画像の解像度を改善

上記ファイルのライセンス情報（英語のみ）

使いかた

流れは「テンプレート」と同様です。ここでは詳細は割愛します。

・ファイルを上記よりダウンロードします
・ビジュアルプログラミングを起動し、ファイルを読み込みます
・「トイオ・コレクション」のマットをひろげます
・キューブの電源を入れて接続します

あそびかた

今回は、マットの上に接続済みのキューブを置くといきなりキーボードの矢印キー（上下左右キー）で操作できるようになります。初級編との違いとして、マット上に軌跡が表示されるようになっています。マットからキューブを離すと軌跡が消去されます。

はみ出ない制御

ただ、ここまでは初級編とあまりかわらないので、下記のように「キーボード操作」をほかのブロック定義に置き換えてみましょう。

置き換え後はこのようになります。

早速動かしてみましょう。キーボードの矢印キーで動かしても先ほどと変わりませんが、マットからはみ出そうな位置で指を離したり、手でキューブをマットから追い出そうとすると自動的に戻ろうとします。

マス移動

次に、マス移動に置き換えてみましょう。

今度は、キーボードの矢印キーを押すと、マットの「マス」に沿って行方向・列方向の移動ができるようになります。これまでと違い、矢印キーで指定するのはキューブの進行方向ではなく、マット上の行・列であることに注意してみてください。

このように、初級編と違い、マット上での位置や行・列といった情報を活用すると、リモコン操作もより高度なものが実現できます。

プログラムのポイント

はみ出ない制御

今回はやや複雑な見た目ですが、よくよく見るとシンプルです。

ざっくり流れを説明すると、
・マットのある範囲からはみ出ているか計算する
　・はみ出ている場合、はみ出た方向を調べ、その方向と反対側に押し戻す
・マットからはみ出ていなければ、「キーボード操作」を実行し、矢印キーで操作する
というものになっています。

注目したいテクニックとして、下記のようにY座標に現在のキューブのY座標をそのまま代入すると、現在のY座標を目標とするためY座標が固定されたままX座標だけが移動するようになります。見た目としては正方形のマットに対して水平方向に移動します。X座標を固定したい場合は現在のX座標を代入します。

この現在の位置を使って目標位置を決めたり、水平・垂直を固定するテクニックは今後も役に立つのでぜひ覚えてみてください。

こうすることで、ある方向にはみ出ようとしても自動で少し戻る制御ができるようになりました。

マス移動

こちらも見た目はやや複雑です。

特に注目したいのはこの部分です。マスが行・列とも±4の9マス分あるので、そこからはみ出ない範囲で上下左右キーに合わせて行・列をプラス1・マイナス1しています。
列を固定して行だけを現在地から1マス移動する場合は目標とする列に現在の列、目標とする行には現在の行＋1などとすると、簡単に1マス移動が実現できます。
さらに、斜めに停止しても現在の向きを検出して±45度の範囲で角度を丸めて90度ごとにセンタリングする処理を入れています。これはキューブを触ってみるとよくわかるのでぜひ体感してみてください。

これらを活用すると、マットのマスに沿って簡単に移動することができるようになりました。

やってみよう

現在の「はみ出ない制御」はX方向・Y方向の水平・垂直な動きだけですが、マットの土俵の円からはみ出ないようにするにはどうすればいいかやってみましょう。正確に円からはみ出さないためには中学〜高校の数学を使用する場合がありますが、多角形で近似できないか、など様々な方法を考えてみましょう。

マス移動は現在行と列だけの上下左右移動ですが、斜め移動を作成してみましょう。

まとめ

今回は、座標を使ってキューブのリモコン操作にマスの上下左右移動という制約を加えたり、自動的にはみ出ないような制御を行いました。プログラムはやや複雑な見た目ですが、一つ一つ追っていくと意外にシンプルです。また、触りながら試すと体感的に理解することができますので、ぜひ実行しながら試してみてください。
こういった操作はテレビゲームの世界ではキャラクター操作として当たり前の動きにも見えますが、ロボットで実現できるのは座標を使って制御ができるtoioならではと言えます。これを応用すれば現実世界でゲームのようなあそびをつくることもできそうですね。

toioならではのサンプルやテクニックなどについては随時blogで紹介していきます。また、全体像については一覧マップをご覧ください。

それではまた次回お会いしましょう。

----
※本カテゴリーや各記事の内容は私的利用を目的とした参考情報となっています。toioのビジュアルプログラミングの利用条件についてはこちらのページの最下部にある「サイトポリシー」を参照ください。
※各製品名・サービス名は各社の商標です。各製品・サービスの詳細については各製品・サービス提供元へお問い合わせください。