推しから名刺を貰おう！~Live2D+Unity+Arduinoを活用したデジタルサイネージの試作~

2019/02/15行われたLive2DCreatorSessionsで発表した資料です。
Live2D+Unity+Arduinoで推しから名刺をもらうシステムを試作しました。

Transcript

1. 推しから名刺を貰おう！ ~Live2D+Unity+Arduinoを活用したデジタルサイネージの試作 ~ トライタム(traitam) Live2DCreatorSessions 2019/02/15
2. 自己紹介 twitter 2 トライタム (traitam) BoothでPDFを無配してます https://booth.pm/ja/items/743615 [つくったもの] 怖くない！作例で覚える Live2DCubismSDK for Unity(C93販売物)
3. （私がよく思うこと） 3
4. 二次の推しと交流したい 4
5. あわよくば何かしら物理的なモノを受け取りたい 5
6. 名刺でもいいから貰いたい 6
7. というわけで 7
8. 作りました 8
9. 使用環境 9 ・Unity2018.3f2 　Cubism3SDKforUnity R10 ・SAI2, PhotoshopCS6 Extended ・Live2D CubismEditor(ver3.3) ・Arduino starterkit v1(osoyoo製)
10. お品書き 10
11. お品書き ・制作の流れ(概要) ・[Live2D] モデル, アニメーション作成 ・[Unity] Unityでの設定 ・[Arduino] Arduinoでの回路構築/排出機作成 ・[Other] その他必要物作成 ・[Other] つなぎこみ ・[Other] その他いろいろ 11
12. 制作の流れ(概要) 12
13. 制作の流れ(概要) 1, Live2Dモデルを作成します。 Unity用アニメーションを作成 2, Unityで設定を行い、スクリプトを作り、モデルをインポート 3, Arduinoで必要なものを組み込む 4, 排出機を作る 5, その他必要なものを作り、用意 6, 動かす 13
14. モデル, アニメーション作成 14
15. モデル素材作成 ・動かすためのイラストを描きます ・上体パラメータのために影は 　ほとんどつけません ・今回は分割しながらイラストを描いています 　　(分割参考はLive2Dサンプルモデルの受付ハル ) ・総分割数：39 ・レイヤー結合や調整は Photoshop 15
16. モデル作成 ・パラメータ数14 　(専用モデルのため、使用しない角度Xなどは未作成) ・腕の切り替えはAnimatorでパーツ透明度から 16
17. アニメーション作成 ・名刺を差し出すアニメーションはカード排出と合 わせる(だいたいで合わせる ) ・あとは待機(通常/名刺引き抜かれるまで )、お辞 儀アニメーションを作成 ・SDK用途に制限チェックも忘れずに 17
18. アニメーションイベント設定 ・UnityでEvent発火を行うための設定 ・Unityでアニメーションタイミングを測ってもよい が、こちらが楽なので採用 　(UnityでLive2DのアニメーションにEvent刺せるかは未検 証) 18
19. Unityでの設定 19
20. 使用するUnityバージョン ・Unity2018.3を使用 　Unity2018.3とR9では正しくモデルを扱えない ・組み合わせによってはモデルが読み込めない現象が発生する 20 https://docs.live2d.com/cubism-sdk-manual/unity2018-3 Unity Version ~2018.2 2018.3~ Cubism3 SDK R1~R9 ◦ × R10~ ◦ ◦
21. 使用するSDKバージョン ・SDK for Unity R10を使います 　EditorアップデートでmocファイルとSDKの互換関係が増えました ・組み合わせによってはモデルが読み込めない現象が発生する 21 moc file 3.0~3.2 3.3~ UnitySDK R1~R9 ◦ × R10~ ◦ ◦ https://docs.live2d.com/cubism-sdk-manual/warnnig-for-cubism3-3-00-update/
22. Unityでの設定 22 ・.NET 4.xを使用します 　 (2018以前では.NET 2.0へ変更) ・CubismMotion3Json.csにEvent受け取り設定を追加 する 　「functionName = “[受け取りたいメソッド名]”, 」 　(受け取りたいメソッドはモデルに追加)
23. モデルインポート / アニメーション設定 23 ・モデルはD&DでOK ・UnityでEvent受け取り処理を作ったのちに入れ る ・アニメータ作成。自動推移と Trigger推移の設定
24. 処理フロー ・Live2DのEvent発火はアニメーションから ・名刺が抜き取り判定は光センサから 　analog INの値を取得し、差分が出た場合、Live2Dアニメーション を再生 24
25. Arduinoでの回路構築 / 排出機作成 25
26. Arduino配線/コード記述 26 ・光センサ(HW5P-1) ・ステッピングモータ (28BYJ-48) 　を使用 ・ArduinoIDEで書き込みプログラムを記述 　-光センサの数値をUnityへ渡す 　-回転処理 https://www.tinkercad.com
27. 排出機作成 ・「カードさえ出ればいいかな」で生まれた妥協の 産物 ・鉛筆のゴムグリップの摩擦力でカードを排出 ・軸にモータを接続してカードを排出 27
28. その他必要物作成 28
29. 排出用名刺作成 ・没入感向上のために 29 other
30. つなぎこみ 30
31. つなぎこみ・動作 31 other
32. その他いろいろ 32
33. 課題 ・排出機が貧弱すぎる 　カード2枚出てきたり、軸とモータの間で空回りしたり、何より不格好だったり ・Arduino周りのハード知識が皆無なのでリスク管理がずさん 　(シリアル通信のリスク管理 ) 　(作りこむなら、Pluginとか使うといいかも : 直近だとSerial Port Utility Pro) 33 other
34. 想定する活用現場 ・即売会での売り子(名刺渡しやカード販売で活用 ) ・Vtuberから名刺やビラを貰う (オフイベとか) 34 other
35. 発展 ・音声認識やArduinoからのトリガーでやり取り 　音認：単語で動作させるなら手軽に Unity内部の音認機能使用したり ・スケールアップでより等身大に近い形での実践 　排出機機構が心配になるが、それが突破できれば実現できそう ・HMDの活用 　純粋な視覚的没入感の向上（ミクミク握手が参考になりそう） 35 other
36. まとめ 36 ・推しから何かしら手渡しされるとか夢のよう ・Live2D+Unity+Arduino => 推しから何か貰える機構 ・作りこむなら結構大変 (少なくとも各方面にある程度の見聞が必要 ) ・どなたかブラッシュアップお願いします (切実) other