見出し画像

toio開発者向けマットを使ってプロジェクションなスタンプをつくってみた。

ぽし

開発者向けマット（仮称）

SIEから発売されているロボットトイ「toio」。
このロボットの特徴の一つは絶対座標と呼ばれる、コアキューブ（白くて四角い本体のこと）を正確な座標に移動させることができることです。

そのためこうしたお互いを認識した賢い振る舞いが可能です。しかも、これらを使って自由にプログラミングする仕組みが公式に提供されています。

以前までは、絶対座標を扱うにはプレイマットという細かくマーカが書き込まれた別売りソフトの付属品が必要だったのですが、今回、開発者向けマット（仮称）というより開発に向いたものが配布されました。今後は商品化するのかな？というところですが、待望の品だったためさっそく応募。
※開発者向けマット（仮称）の詳細はこちらにまとまっていました。

プロジェクションスタンプをつくってみた

ここからは実際に使用してプロトタイプをつくってみた大まかな流れです。
まず、つくってみたものはこちらです。

toio本来とは少し違った使い方ですが、プロジェクタと組み合わせることで、スタンプを押せるものをつくってみました。読み取ったtoioコアキューブの絶対座標の位置に、画像を生成しているだけのシンプルなものです。

toioを読み取りセンサーとして扱い、3Dプリンタで出力した持ち手に丸々埋め込んでいるだけ。。固定も養生一枚というやっつけ具合。

スクリーンショット (42)

ガワの部分はFusion360でモデリングし、3Dプリンタで出力しています。
toioの埋め込み部分は、面倒だから養生か両面テープで固定してしまおうと決めていたので、W32.5*D32.5*H25.5という大雑把な大きさにしました。

積層0.16mm、infill15%で3時間くらい。もう一回り小さくてもいいかも。それより、スタンプなのだから向きがわかる柄を付ければよかったなと...！

スクリーンショット (44)

プロジェクションする画はUnityから出力しています。toio.jsからWebSocketで渡した座標に、InstantiateでSpriteの2D画像を生成している簡易な作りです。といっても、それだけでもJSに不慣れな僕は型変換などで散々苦戦しましたが。。
最終的な投影にはキャリブレーションのためにTouchDesignerを使っています。この辺の細かい流れも本当は書きたいのですが、長々しちゃうので今回は割愛します...。（リプライやDMで聞いていただけたら回答します）

Textureを入れ替えれば別のスタンプにもできます。簡易プレイマットと一緒に付いてきた簡易カードなんかも使って、特定のカードをペタッと押せば絵柄が切り替わる、みたいなことをしても楽しそうです。今回はスタンプに寄せて静止画にしましたが、過去に動画をペタペタ貼れるようなシステムをつくったとき結構楽しかったので、動画やエフェクトを付けても面白いかも。

また、どうしてもプロジェクションものは遮蔽が気になってしまうところです。今回のスタンプも、手で直接押す動作をするため、先に投影している図柄を遮りがちです。しかもtoioコアキューブがマットから離れた瞬間に図柄を描画、という実装にしているため、離す速度が遅いと手の上に図柄が押印されるみたいになってしまうのですよね。。
しかし、今回配布された開発者向けマット（仮称）なら通常のプレイマットと違って薄いので、リアプロジェクションができそうです...！これは結構用途が広がりそうでワクワク。

そんな感じで、絶対座標を使った遊びはなかなか楽しく、今回の開発者向けマット（仮称）のおかげで今までのプレイマットよりもさらに自由度も高くなりそうです。
実を言うと今回のものはキャンペーン応募のために過去のプロトタイプを使いまわして半日くらいでつくったものだったのですが、作りこめば意外に面白くなりそうな可能性も感じました。

このほか、toioコアキューブにはモーターやLEDも標準搭載されており、複数台制御も可能なため、その辺も上手く使うともっと楽しいです。
興味のある方はtoio公式の事例もあるので、是非調べてみてください。


いいなと思ったら応援しよう！

この記事が参加している募集

#つくってみた

24,413件