toio SDK for Unity をセットアップして、ビジュアルスクリプティングであそぼう

# はじめに
- この記事は、【Advent Calendar 2022 / IoT・ハードウェア】「toio Advent Calendar 2022」に投稿した記事となります。

https://qiita.com/advent-calendar/2022/toiotomo

# この記事の概要
- Unity2021に、toio SDK for Unity ver1.5.1 を導入するうえで、うのっちが個人的にポイントとなるところを解説したものです。
- yokohama.unity第11回のLTの内容を、Qiita用に書き起こしたものです。(一部オミットしています)

# この記事が役に立つ方
- これからtoio SDK for Unity を導入しようと考えている方。
- Unityで少し変わったビジュアルスクリプティングの使い方をしたいと思っている方。
- Unityの使い方を広げたい方。
- toioをお持ちで、他の遊び方を探している方。

# 本編
## スライド1 タイトル

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/a05d990f-aea5-7d39-766d-d6f54d15f007.png)

- こんにちは。うのっちです。
- 普段はオンライン講師や教材制作をしながら、配信や声優を勤めています。
- ボーイズトイが好きで、toioとはワークショップの縁で遊んでいます。
- 2021年の「ロボやろ」でグランプリをとったのが良い思い出です。

## スライド2 うれしいお知らせ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/bce45cad-e197-64cd-d874-60a1dff2e53a.png)

- 2022年10月6日に、ver1.5.1がリリースされました。

https://toio.io/blog/toio-sdk-for-unity/

## スライド3 導入の仕方

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/f6ebbf0c-54a6-ab7f-d550-f4c23015f0e6.png)

- モリカトロンさんのホームページへ移動して、上の図のようにGitHubへ遷移します。

https://morikatron.com/t4u/

## スライド4 リンクの箇所

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/dcf12bdf-e074-6f4d-4539-a670cf70ce32.png)

- 上の図のように、GitHubページの下の方へスクロールすると、「toio SDK for Unity ドキュメント」のリンクがあるので、クリックします。

## スライド おさえておきたいポイント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/4fa039eb-cd4d-3bba-4170-800d2eacb7a6.png)

## スライド 準備ポイントの説明

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/56537a4d-6333-70ea-a2f8-4fad3376a10b.png)

### 準備ポイント①
- 「toio SDK for Unity」のインストール自体は、packageデータをダウンロードしてインポートすることで完了します。

### 準備ポイント②
- Unityのビジュアルスクリプティングでtoioを制御する場合は、ビジュアルスクリプティング用の設定が必要となります。それが上の図で示している「Unity Visual Scripting向けの設定」となります。

## スライド 準備ポイント②で、いくつかおさえておきたいポイント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e828cc63-8940-83ec-7e72-29d4d1b89c70.png)

- toio SDK for Unityでビジュアルスクリプティングを使う設定では、うのっちが思ういくつかの忘れがちなポイントがあります。
- ひとつはノードライブラリの設定。
- もうひとつはクラスの設定。
- そしてノードの再生成。

## スライド ノードライブラリの追加1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/e760e0aa-2118-b0c5-fac3-5020c3e8a0ac.png)

- 上の図のように、ProjectSettingsで、上の図のように「Node Library」を展開します。

## スライド ノードライブラリの追加2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/98b679fe-d439-d606-800b-a133aa7d3b87.png)

- 新しいリストを追加して、上の図のように「toio-sdk-scripts」をあたらしく追加します。

## スライド クラスの追加1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/6db46972-62b4-0133-4b3f-d8db86fc6fe8.png)

- 引き続き、ProjectSettingsで、上の図のように「Type Options」を展開します。

## スライド クラスの追加2

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/610bdbe5-841d-d830-3853-5e6748b4ac4e.png)

- 上の図のように、新しいリストを追加していきます。
- 詳細は次のスライドになります。

## スライド クラスの追加3

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/7e72356b-5f79-616b-9f6d-68d36f1897e2.png)

- GitHubのドキュメントに、具体的にどのようなクラス名を追加すればよいか書いてあります。
- ちょっと数が多いと感じるかもしれませんが、難しくないのでひとつずつ追加していきます。

## スライド ノードの再生成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/95f3875b-34c7-7774-33a2-5aa5f9c2a2c7.png)

- 上の図のように、ProjectSettingの「Regenerate Nodes」を押下して、ノードの再生成を行います。

## スライド 完了の確認

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/95cac0e1-874e-dbfa-6db4-d37f208f435d.png)

- 上の図のようなウィンドウが表示されたらオッケーです!!

## スライド わすれがちなポイント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/af8065bf-0ebb-b698-098c-8009be648296.png)

## スライド Sceneでビジュアルスクリプティングの動作へ切り替える方法

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/bebb87fa-6aea-4212-0da0-4537fc63de89.png)

- 例ですが、各Scene内のヒエラルキーにある「scene」のふたつのコンポーネントを切り替えます。
- 「Basic Scene」のチェックを外します。
- 「Script Machine」のチェックを入れます。

## スライド 最後にうのっち的まとめ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/521e5344-b18c-0fde-d4fa-13ff499376a1.png)

## スライド

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/191635/38acd54e-cef3-642b-4b16-5cde94733f2d.png)

- ビジュアルスクリプティングは、普段テキストスクリプティングに慣れていると最初はとっつきにくいところはありますが、下の動画のように、実行時のノード遷移がわかりやすいという利点があります。
- また、他の3Dエンジンの開発環境のようなノード形式にも親しみやすいと思うので、やってみて損はない機能です。

https://youtu.be/ijWOII8XlEU

記事は以上となります。
ありがとうございました。

---