#はじめてゲームプログラミング と #toio をつなげる仕組み（ #toioDo を使った試作 3種の概要編）

この記事の内容は、タイトルのとおりです。

[Nintendo Labo](https://www.nintendo.co.jp/labo/) でも行われているような、物理世界とソフト内の世界をつなぐ仕組みを、「[はじめてゲームプログラミング](https://www.nintendo.co.jp/switch/awuxa/)」とロボットトイ「[toio](https://toio.io/)」を活用して試した話の概要です。

## 試した作例3つ
ひとまず、概要を書く前に、どのようなものができあがったのか、試作したもの 3つが動作している様子を掲載してみます。

### 試作1： toio が回転している際の方向を検出
はじめてゲームプログラミング側では、「かたむきノードン」を使っています。
それで Joy-Con（R） の向きを検出できるので、Joy-Con（R） を toio の上にのせて toio を回転させれば、その回転がゲーム内へ伝わるという仕組みです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> の上に Joy-Con をのせ、 <a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> から toio を回転させるという方法で、 <a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> の中の世界と現実世界をつないでみたw<br><br>（はじめてゲームプログラミング側は、かたむきノードンを利用） <a href="https://t.co/3jJHMbbxjO">pic.twitter.com/3jJHMbbxjO</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406188236771188739?ref_src=twsrc%5Etfw">June 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 試作2： toio が特定の位置を横切ったことを検出
2つ目の試作では、はじめてゲームプログラミング側は「モーションIRカメラノードン」を使っています。
モーションIRカメラは Joy-Con（R） の下についているもので、この試作では toio がカメラ内の特定の位置にいるかどうかをみています。

モーションIRカメラ自体については、以下の記事を見ると分かりやすいと思います。　
　●学研さんと「モーションIRカメラ」のヒミツについて調べてみました。 | トピックス | Nintendo
　　https://topics.nintendo.co.jp/article/06bba8b4-f5ca-11e7-86dc-063b7ac45a6d

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> と <a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> をつなぐテストの第2弾！<br>今度は、モーションIRカメラのノードンを使った形にて。<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> が右端か左端に移動する時、キャラクターのアクションと効果音再生を実行する形にしてみました。<br>（ <a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> が特定のマスを横切ることを、トリガーにしてみた形） <a href="https://t.co/EDMA4F8DvU">pic.twitter.com/EDMA4F8DvU</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406423308778704897?ref_src=twsrc%5Etfw">June 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 試作3： toio が特定の方向に向いたことを検出
はじめてゲームプログラミング側では、上記の「試作2」と同じでモーションIRカメラノードンを使っています。
試作2 との違いを少し補足すると、試作2 では toio 本体が特定の位置を横切ることを検知していましたが、こちらは toio 本体の上につけたレゴに貼り付けられた「再帰性反射テープ」を検知しています（さらなる補足はこの後で）。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">再帰性反射テープの活用事例。<a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> のモーションIRカメラノードンを使って、 <a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> の向き（特定方向のみ）を検知してます。<br><br>toio の上につけたグレーのレゴは検出されなかったので、再帰性反射テープを活用 ←貼る高さを変えたもの 2方向分を用意してみたり。<a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> <a href="https://t.co/mhyvrFEnNV">pic.twitter.com/mhyvrFEnNV</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406446484724215808?ref_src=twsrc%5Etfw">June 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 物理部分の話（主にレゴ関連）
今回、レゴが活躍した部分があるので、それを少し紹介しておきます。
具体的には、以下の部分です。

1. 試作1 で toio の上に Joy-Con をのせる支え
2. 試作2・3 で Joy-Con を固定する台
3. 試作3 で再帰性反射テープを貼る部分の作成

Twitter にそれぞれをアップで撮った写真をツイートしていたので、それを引用したり元の写真を掲載する形で紹介します。
なお、ここで出てくるレゴの個々のパーツは、[部品の個別購入ができるオンラインショップ（ブリッカーズ）](https://www.brickers.jp/)で購入しました。

### 試作1　で使ったレゴパーツ
toio の上に Joy-Con をのせる支えで使ったものです。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">ちなみに、 <a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> の上に Joy-Con をのせるための土台は、即席で作ったこんな感じのもの。<br><br>（サクッと試したかっただけなので、 <a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> のプログラムもブロック 2個だけで、 <a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> のプログラムも、必要最小限な数だったりですが） <a href="https://t.co/7n9LuPhfkM">pic.twitter.com/7n9LuPhfkM</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406191378145562627?ref_src=twsrc%5Etfw">June 19, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 試作2・3 で使ったレゴパーツ
Joy-Con のモーションIRカメラを toio のほうに向けて固定するため、その土台として使ったものです。

![試作2・3で使ったレゴパーツ.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/46dd0c02-3a60-90e0-5898-734472bfc73c.jpeg)

### 試作3 で使ったレゴパーツ（toio と組み合わせ）
試作3 で再帰性反射テープを貼る部分に使ったレゴパーツはこちらです。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">ちなみに、<br>toio の上にレゴをつけて、その正面と裏でそれぞれ高さ違いで再帰性反射テープを貼って、<br>とやったものの実物がこちら。 <a href="https://t.co/0ffuCpjXoZ">pic.twitter.com/0ffuCpjXoZ</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406450058682191875?ref_src=twsrc%5Etfw">June 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 再帰性反射のテープの利用について
ここで登場する再帰性反射テープですが、これを使った理由は toio の上につけたグレーのレゴが、（少なくとも toio と同じ距離にある状態では）モーションIRカメラで検出されなかったためです。

試作2 では、toio 本体をモーションIRカメラで検出できていて、再帰性反射テープを使ったりはしていませんでした。
その後、試作3 で使っている toio の向きが特定の向きになったことを検知するための板状のものが、以下のツイートにあるようにモーションIRカメラで検出できませんでした（写真左側だと、検出された領域が toio のサイズ・形のものになっている）。そこで試しに再帰性反射テープを貼って確認すると、良い感じにテープを貼った部分が検出できそうだったので、このような構成にしました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> と <a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> をつなぐテストを引き続き。<br><br>モーションIRカメラノードンで、toio は普通に検出できてたけれど、その上にグレーのレゴをのせてみたら、そちらは検出されない感じが（toio の色・材質による感じなのかな...）。<br><br>今こそ、再帰性反射のテープが活きる！ <a href="https://t.co/lsnmM0QN29">pic.twitter.com/lsnmM0QN29</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406436089418579969?ref_src=twsrc%5Etfw">June 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## プログラムに関する概要
今回のプログラミングを作った環境についてですが、 toio 関連の部分は全てブロックプログラミング環境の「#toioDo」を使っています。また、Nintendo Switch側は「はじめてゲームプログラミング」になります。

### 試作1 のプログラム（おおまかな内容）
#### toio 関連
toio Do で作った内容は、とてもシンプルです。
冒頭の動画にもうつりこんだりしてますが、ブロック 2つのみでできています。処理内容は「スプライトが押された時」に「toio　を一定時間回転させる（左右のタイヤの速さに、絶対値は同じで符号が反対の数字を指定）」という内容だけです。

#### はじめてゲームプログラミング関連
まず、ゲーム内の視点を上から見た視点（Y軸の上から下向きの視点）にしています。
そして、ワールドノードンで「ワールドのかたち」を「なし」にしたうえで、床になるモノノードン（直方体）を置いています。

その床の部分の上に、モノノードン 3つ（円柱・球・直方体）とヒンジれんけつノードンをつないだものを置いて、それが回転できるような設定・つなぎ方にしています。これは、最後のレッスンで登場した仕組みを参考に作りました。
そして、上記の床の部分に設置した物体の回転を、かたむきノードンと連携させています。かたむきノードンは Joy-Con（R）から値を取得するようにしています。

細かい設定などは他にもありますが、おおまかな仕組みは上記のとおりです。

### 試作2 のプログラム（おおまかな内容）
この試作だけは、動作内容を少し補足しておきます。

toio の動きとしては、動画の画面上の左右方向の真ん中と、その点から左右にある点の合計 3箇所を移動していきます。
そして、左右にある点を目的地にした場合のみ、ゲーム内のキャラが反応する仕組みとしています（そして、その時のキャラの動き・効果音のセットは 2種類準備）。つまり、動きとゲーム内のキャラの反応の有無の関係は以下となります。

- 真ん中の点/右の点 ⇒ 左の点： ゲーム内のキャラが反応（リアクション・音のセット1）
- 真ん中の点/左の点 ⇒ 右の点： ゲーム内のキャラが反応（リアクション・音のセット2）
- 右の点/左の点 ⇒ 真ん中の点： ゲーム内のキャラは反応しない

はじめてゲームプログラミングのプログラムで上記の移動を検知するのに、モーションIRカメラノードンを使っています。そして、検知するポイントを「真ん中の点と右の点の間」・「真ん中の点と左の点の間」の 2箇所に置いています（ここで、スポイトノードンを利用）。

#### toio 関連
toio Do で作った内容は、他の 2つと比べると相対的にはブロックが多めです。
処理自体はそれほど複雑ではなく、3つのスプライトがあって、それらに「スプライトが押されたら、特定のマスへ移動する」という動作をするためのブロックが置かれています。

少し工夫している部分はあり、単純なマス目の移動（目的地の列と行と移動する速さを指定するブロック）を指定するのみだと、以下の問題が発生しました。

 - 上で書いた「右の点/左の点 ⇒ 真ん中の点： ゲーム内のキャラは反応しない」という部分で、ゲーム内のキャラが反応（どちら方向に横切ったか、という判定はないため）
 - 上で書いた「右の点 ⇒ 左の点」・「左の点 ⇒ 右の点」という移動をした際に、「リアクション・音のセット1」と「リアクション・音のセット1」の両方が反応する（横切られたか検知する点を両方通るため）

#### はじめてゲームプログラミング関連
見た目の部分は、デフォルトのワールドにヒトノードンを配置した構成です。
そのヒトノードンのアクションの部分に、特定の値を入力するワイヤーをつないでいて、そこで入力される値の違いでヒトノードンのリアクションを変えています（※規定の範囲の値を入力することで、特定のリアクションやリアクションなしという複数の内容を直接指定できる、というヒトノードンの仕組み）。

その入力値の元になる値は、モーションIRカメラノードンとスポイトノードンを用いて生成しています。
その入力値を加工して、ヒトノードンのリアクションの入力値に変えています。

全体像は以下のような感じです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">先ほどツイートしてた試作の、2つ目のプログラム（はじめてゲームプログラミングのほう）の概要。 <a href="https://t.co/NfVucp7MPC">pic.twitter.com/NfVucp7MPC</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406476730831839235?ref_src=twsrc%5Etfw">June 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

値の加工の部分が多段になってますが、「くらべるノードン」・「0から変わったしゅんかんノードン」・「けいさんノードン」を使っています。
これにより、toio が特定の場所を横切った瞬間に 1回だけ値を出力し（※ 横切っている間、ずっと値が出るというのは避けるようにし）、ヒトノードンに入力される値は toio が横切った場所によって値の大きさが変わるような構成にしています。

### 試作3 のプログラム（おおまかな内容）
#### toio 関連
toio Do で作った内容は、比較的シンプルです。
3つのスプライトを用意し、それらのスプライトにブロック 2つがある、というのが主な構成です。処理内容は「スプライトが押された時」に「toio　をある速度で特定の角度に向ける」という内容だけです。

角度を指定して動かす仕組みのために、この試作では上記の試作2 と同様に toio専用マットを使っています。

#### はじめてゲームプログラミング関連
内容は、試作2 の内容とほぼ同じで、違う部分はモーションIRカメラノードン内で検出をする仕組みのみです。
そのおおまかな違いは、スポイトノードンで検知する部分の位置が違うだけ、という感じです。

## まとめ
今回、はじめてゲームプログラミングと toio Do を組み合わせる仕組みの試作の話を記事に書きました。
3つあるので、それぞれの概要を大まかに書いた形です（プログラムの部分は、ずいぶん端折りすぎた感もある気もしますが...）。

また、引き続き面白い仕組みが作れないか、試作を行っていければと思っています。

## 【追記】 余談
その後、こんな試作もしてみました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/%E3%81%AF%E3%81%98%E3%82%81%E3%81%A6%E3%81%AE%E3%82%B2%E3%83%BC%E3%83%A0%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0?src=hash&amp;ref_src=twsrc%5Etfw">#はじめてゲームプログラミング</a> からの出力を micro:bit で受けとるテスト。出力はしんどうノードンで。<a href="https://twitter.com/hashtag/Scratch?src=hash&amp;ref_src=twsrc%5Etfw">#Scratch</a> 3.0 の micro:bit拡張機能を使うものと、MakeCode を使うものの両方で動作確認ができました。 <br>Scratch用の拡張機能のほうは、 <a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> アプリと Scratch 3.0 の 2つの環境でお試し。 <a href="https://t.co/BZ652v2Hkc">pic.twitter.com/BZ652v2Hkc</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1406657919148429317?ref_src=twsrc%5Etfw">June 20, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>