Live2D Advent Calendar 8日目の記事です！
作っているもの
プロジェクト「FUKUWARAI」です
動画で見るとわかりやすいですので、よかったら見てください
内容
コンセプトは「アナログで描いた絵が動く」です。
塗り絵した絵がLive2Dで動くみたいなアプリケーションを作ってみました。
まだプロトタイプですが、紙とスマートフォンさえあれば、塗ったり描いたりした絵がLive2Dで動き出します。
今はシンプルちゃん(Live2Dのチュートリアルキャラ)だけですが、テクスチャも描きやすく調整して、もっと自由度あげたいですね。
作った経緯
先日、沖縄パラダイスジャムというハッカソンで優秀賞を頂いたアプリで、Live2DとARを使ってみたところ、Live2DとARの組み合わせって面白いなぁーと思って作ってみました。
そこで、塗り絵がLive2Dで動いたら面白いんじゃないかなーと思って実験的に今回やってみました。
Live2DをARで表示する手法
UnityとVuforiaでAR
今回はUnityでVuforiaを使用してARを実現しています。
UnityでVuforiaを使用する方法については下記サイトを参考にするとよいかと！
【３０分でできる】Unityで簡単にARアプリを作る - キリンを召還するブログ。
Live2DモデルをARで召喚する
1. Live2Dを表示
まずはここから。Live2Dさんの参考に
Unityでグリグリ動かしてみよう - Live2D Cubism 2 マニュアル
2. ARCameraにLive2Dモデルが写り込むように調整する
ARCameraが真下に向いたカメラなので、Live2Dモデルも真上を向くように調整しましょう
サイズも結構小さいので100倍ぐらいしてもいいかも
3. Live2DモデルのOn/Off
VuforiaがRendererのOn/Offで表示切り替えを行っているので、Live2DモデルのOn/Offができない
対策1: 仮のRendererを持たせて、Updateでチェックし、Onならモデル表示、Offならモデル非表示に
対策2: DefaultTrackableEventHandlerのOnTrackingLost()、OnTrackingFound()でLive2D用の処理を追記
対策1、対策2でもどっちでもいけそうですが、どっちも微妙な処理ですね。。自分はとりあえず対策1でやっています
(12/8 0:50 追記)DefaultTrackableEventHandlerの拡張してコールバックの処理に記載する形が良さそうです。自分もそっちの形式に切り替えます。
4. Live2DでARできる
あとは仕様次第で色々やりましょう！
塗り絵ARはどうやっているか
まだ作り途中な感じなので、簡単な流れだけ
1. ARマーカー認識
2. ARマーカーの四隅の座標をスクリーン座標に変換
3. スクリーンの切り抜く形が正方形であれば取得成功
→ ホモグラフィ使って台形でもいけなくもなさそうですが、一旦正方形縛りで
4. スクリーンからテクスチャ切り抜き
5. 切り抜いたテクスチャと元画像のアルファを比較してテクスチャを合成して生成
→ Live2Dでは透過が絶対必要な箇所があるのでそのまま使えないので合成してます
6. Live2Dモデルに合成したテクスチャを反映
7. Live2Dモデルで塗り絵できる！
FUKUWARAIの今後の発展
パソコンなしでLive2Dを楽しめるので色々発展できそうなような
・Live2D初心者でも構造が楽しみながら構造を簡単に学べるツールとしてやってくとか
・子供が楽しめる塗り絵ARにするとか
・将来的にはLive2Dのモデルをアナログで気付いたらできてた！みたいな感じまでできたらいいなぁ
他にも色々やりたいことが浮かんでるので、来年のAward(あるかは不明ですがが)も何か作りたいですね！
明日はLive2D Advent Calendar 9日目で神吉さんになります！
