【toio 2021（3つ目）】 #toioDo の新バージョンで追加されたコスチュームをチェックしたり衝突検知を試したりなど

この記事は、[2021年の toio のアドベントカレンダー](https://qiita.com/advent-calendar/2021/toiotomo) の 16日目の記事です。

## 今回の内容
今年の toio のカレンダーに登録した記事では 3つ目となる記事で、トピックは　2つあります。

### トピック 1つ目
1つは、以下のツイートに書かれている、toioDo の新コスチュームについてです。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">【機能③_デフォルトのコスチューム大幅追加】<br>Scratch式プログラミングで、こどもたちが実装するときに、障壁となる「デザインパーツ」が、最初からたくさん入ったセットを、追加しました。<br>これで作れる幅が、ぐっと広がります。 <a href="https://t.co/D3aOCXCY3M">pic.twitter.com/D3aOCXCY3M</a></p>&mdash; toio(トイオ)公式 (@toio_jp) <a href="https://twitter.com/toio_jp/status/1468160134354698247?ref_src=twsrc%5Etfw">December 7, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### トピック 2つ目
2つ目は、以下の記事では扱わなかった新ブロックの中の 1つ「衝突検出」の話です。

●【toio 2021（2つ目）】 #toioDo の新バージョンで追加された #toio の姿勢角ブロックを試す - Qiita
　https://qiita.com/youtoy/items/eca7a5202962ce566586

なお、上記 2つの話は、以下の公式ブログにも出てきています。
　●toio Doの新バージョンv1.3が公開されました | toio blog | toio（トイオ）
　　https://toio.io/blog/detail/20211207toio_do_v1-3.html

## Scratch 3.0 / toioDo のコスチューム
### コスチュームとは？
toioDo は、教育関連の話でも良く出てくる Scratch 3.0 をベースに作られています（Scratch  3.0 のソースコードは、GitHub で公開されていたりします）。

その Scratch 3.0 の中で、キャラクターを登場させたりする時に使える仕組みの １つにスプライトがあり、その見た目を扱うところをコスチュームといいます。

### Scratch ３．０ でデフォルトで用意されたスプライト（コスチュームを変える）
以下は Scratch のスプライト追加の画面をキャプチャしたもので、以下におさまりきらないくらい大量にあります。
![Scratch標準のスプライト.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/42de29da-4515-bce9-4c42-4c5d9564b2c3.jpeg)

### toioDo での新コスチューム
[PC版の toioDo](https://toio.github.io/toio-visual-programming/beta/) で独自の新コスチュームを確認してみます。

ゼロから作成するための画面を開くと、デフォルトで 2つのスプライトが配置されています。
そして、そのうちのボタンのほうを選ぶと、以下のような記載があります。
![toioDoのスプライト選択.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4b5ebda9-0285-ca7c-f296-2b889c1c3964.jpeg)

ボタンのコスチュームを見てみると、1画面目でも複数のタイプのボタンがあるのが分かります。
![ボタン群.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5ccc47c3-1061-07ae-e890-5049fb8ed384.jpeg)

さらに下を見ていくと、1画面に大量のコスチュームが並んだ部分もあって、大量追加という感じのようです。

<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> の新バージョンで増えたオリジナルコスチューム、大量に面白そうなものがありました！<br>（これ以外にも、まだ少しあります）<a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> <a href="https://t.co/CJGdxvNBHN">pic.twitter.com/CJGdxvNBHN</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1469568943417618432?ref_src=twsrc%5Etfw">December 11, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ツイートの画像を、以下に取り出してはってみます。
![まとめ1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/7f1cdb10-ff70-3075-08de-e0707bdff8e6.png)
![まとめ2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/40a73e8a-c0d6-0db6-6726-3248c85bbeea.png)

個人的には「みらい系ボタン」がすごく気になりました。

#### 一画面に複数まとまっているものの使い方
先ほどの、一画面に複数のパーツが集約されているものの使い方は、コスチュームの中で解説されていたりします。
具体的には、以下の画像のものです。
![複数のパーツが集まったものの使い方](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/204338b4-1ccd-6278-4427-a5e65f870589.jpeg)

## 衝突を検出するブロック
ここからは、新コスチュームとは別の、もう1つの話題です。
新バージョンで増えたブロックの中の「衝突検出」を試してみます。

### 作ったもの
まずは、試しに作ったものを掲載してみます。
こちらは、「PC のディスプレイに向かってビー玉を転がすと、それに連動して画面内のスプライトが動く」といった内容のものです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">手作り感あふれる工作とビー玉、<br>それと <a href="https://twitter.com/hashtag/toio?src=hash&amp;ref_src=twsrc%5Etfw">#toio</a> 、 <a href="https://twitter.com/hashtag/toioDo?src=hash&amp;ref_src=twsrc%5Etfw">#toioDo</a> でちょっとした試作。 <a href="https://t.co/ODHX82yOco">pic.twitter.com/ODHX82yOco</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1470048181656633347?ref_src=twsrc%5Etfw">December 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### プログラムの仕組み
ブロックで組んだプログラムは非常にシンプルなもので、以下のような処理がちょこっと用意されているだけです。

- 緑の旗を押した時、画面内のスプライトが右端の特定の位置（初期位置）に移動する
- toio での衝突検出を起点にした処理
   - スプライトを左下に向かって動かす

10個にも満たないブロックで作れる、「toio が衝突を検出したら、スプライトが動く」というだけの単純なものです。

あと、動いているスプライトのコスチュームは、新しく追加されたものを使いました（特に、そのコスチュームでないとダメな感じでは全くないのですが...）。

### 工作をした部分
ビー玉が転がる部分は、かなり手作り感あふれる作りになっています。
適当にハサミで切ったダンボールを、手で折り曲げたり、養生テープで雑にとめたり、という感じで進めました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">手作り感あふれるやつの裏側 <a href="https://t.co/dezYfkauT6">pic.twitter.com/dezYfkauT6</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1470050935632449539?ref_src=twsrc%5Etfw">December 12, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

作りとしては、転がったビー玉が特定のポイントを通る時、toio にある程度の振動・衝撃が伝わるように、という感じにしています。

## おわりに
1つ前に書いた記事に引き続き、toio Do の新バージョン v1.3 に関する内容で記事を書きました。

まだ試せていない新ブロックも、引き続き、試していければと思っています。