Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
推しから名刺を貰おう!~Live2D+Unity+Arduinoを活用したデジタルサイネージの試作~
Search
traitam
February 15, 2019
0
450
推しから名刺を貰おう!~Live2D+Unity+Arduinoを活用したデジタルサイネージの試作~
2019/02/15行われたLive2DCreatorSessionsで発表した資料です。
Live2D+Unity+Arduinoで推しから名刺をもらうシステムを試作しました。
traitam
February 15, 2019
Tweet
Share
More Decks by traitam
See All by traitam
2019年お絵かきふりかえり+α
traitam
0
790
ここが楽しい/しんどいLive2D Cubism SDK for Unity
traitam
0
240
Featured
See All Featured
Designing Experiences People Love
moore
136
23k
Code Reviewing Like a Champion
maltzj
515
39k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
55
9.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Writing Fast Ruby
sferik
622
60k
Automating Front-end Workflow
addyosmani
1357
200k
Agile that works and the tools we love
rasmusluckow
325
20k
The Pragmatic Product Professional
lauravandoore
26
5.8k
Thoughts on Productivity
jonyablonski
60
3.9k
Transcript
推しから名刺を貰おう! ~Live2D+Unity+Arduinoを活用したデジタルサイネージの試作 ~ トライタム(traitam) Live2DCreatorSessions 2019/02/15
自己紹介 twitter 2 トライタム (traitam) BoothでPDFを無配してます https://booth.pm/ja/items/743615 [つくったもの] 怖くない!作例で覚える Live2DCubismSDK
for Unity(C93販売物)
(私がよく思うこと) 3
二次の推しと交流したい 4
あわよくば何かしら物理的なモノを受け取りたい 5
名刺でもいいから貰いたい 6
というわけで 7
作りました 8
使用環境 9 ・Unity2018.3f2 Cubism3SDKforUnity R10 ・SAI2, PhotoshopCS6 Extended ・Live2D CubismEditor(ver3.3)
・Arduino starterkit v1(osoyoo製)
お品書き 10
お品書き ・制作の流れ(概要) ・[Live2D] モデル, アニメーション作成 ・[Unity] Unityでの設定 ・[Arduino] Arduinoでの回路構築/排出機作成 ・[Other]
その他必要物作成 ・[Other] つなぎこみ ・[Other] その他いろいろ 11
制作の流れ(概要) 12
制作の流れ(概要) 1, Live2Dモデルを作成します。 Unity用アニメーションを作成 2, Unityで設定を行い、スクリプトを作り、モデルをインポート 3, Arduinoで必要なものを組み込む 4, 排出機を作る
5, その他必要なものを作り、用意 6, 動かす 13
モデル, アニメーション作成 14
モデル素材作成 ・動かすためのイラストを描きます ・上体パラメータのために影は ほとんどつけません ・今回は分割しながらイラストを描いています (分割参考はLive2Dサンプルモデルの受付ハル ) ・総分割数:39 ・レイヤー結合や調整は Photoshop
15
モデル作成 ・パラメータ数14 (専用モデルのため、使用しない角度Xなどは未作成) ・腕の切り替えはAnimatorでパーツ透明度から 16
アニメーション作成 ・名刺を差し出すアニメーションはカード排出と合 わせる(だいたいで合わせる ) ・あとは待機(通常/名刺引き抜かれるまで )、お辞 儀アニメーションを作成 ・SDK用途に制限チェックも忘れずに 17
アニメーションイベント設定 ・UnityでEvent発火を行うための設定 ・Unityでアニメーションタイミングを測ってもよい が、こちらが楽なので採用 (UnityでLive2DのアニメーションにEvent刺せるかは未検 証) 18
Unityでの設定 19
使用する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~ ◦ ◦
使用する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/
Unityでの設定 22 ・.NET 4.xを使用します (2018以前では.NET 2.0へ変更) ・CubismMotion3Json.csにEvent受け取り設定を追加 する 「functionName
= “[受け取りたいメソッド名]”, 」 (受け取りたいメソッドはモデルに追加)
モデルインポート / アニメーション設定 23 ・モデルはD&DでOK ・UnityでEvent受け取り処理を作ったのちに入れ る ・アニメータ作成。自動推移と Trigger推移の設定
処理フロー ・Live2DのEvent発火はアニメーションから ・名刺が抜き取り判定は光センサから analog INの値を取得し、差分が出た場合、Live2Dアニメーション を再生 24
Arduinoでの回路構築 / 排出機作成 25
Arduino配線/コード記述 26 ・光センサ(HW5P-1) ・ステッピングモータ (28BYJ-48) を使用 ・ArduinoIDEで書き込みプログラムを記述 -光センサの数値をUnityへ渡す -回転処理 https://www.tinkercad.com
排出機作成 ・「カードさえ出ればいいかな」で生まれた妥協の 産物 ・鉛筆のゴムグリップの摩擦力でカードを排出 ・軸にモータを接続してカードを排出 27
その他必要物作成 28
排出用名刺作成 ・没入感向上のために 29 other
つなぎこみ 30
つなぎこみ・動作 31 other
その他いろいろ 32
課題 ・排出機が貧弱すぎる カード2枚出てきたり、軸とモータの間で空回りしたり、何より不格好だったり ・Arduino周りのハード知識が皆無なのでリスク管理がずさん (シリアル通信のリスク管理 ) (作りこむなら、Pluginとか使うといいかも : 直近だとSerial Port
Utility Pro) 33 other
想定する活用現場 ・即売会での売り子(名刺渡しやカード販売で活用 ) ・Vtuberから名刺やビラを貰う (オフイベとか) 34 other
発展 ・音声認識やArduinoからのトリガーでやり取り 音認:単語で動作させるなら手軽に Unity内部の音認機能使用したり ・スケールアップでより等身大に近い形での実践 排出機機構が心配になるが、それが突破できれば実現できそう ・HMDの活用 純粋な視覚的没入感の向上(ミクミク握手が参考になりそう) 35 other
まとめ 36 ・推しから何かしら手渡しされるとか夢のよう ・Live2D+Unity+Arduino => 推しから何か貰える機構 ・作りこむなら結構大変 (少なくとも各方面にある程度の見聞が必要 ) ・どなたかブラッシュアップお願いします
(切実) other