まゆの誕生日なのでまゆを召喚した

佐久間まゆの誕生日記念にちょっとしたARアプリを作ってみた話及びその感想です.

どのツールもほぼ使ったことなかったけどやってみるとなんとかなるもんだなみたいな感じでした.

ほぼ参考サイトリンク集みたいな感じです.

佐久間まゆ とは

アイドルマスターシンデレラガールズ*1に登場するアイドルの1人です.なんといってもかわいい.

f:id:zenmaibane:20170902171023p:plainf:id:zenmaibane:20170902171101p:plainf:id:zenmaibane:20170902171123p:plain

f:id:zenmaibane:20170905022701p:plain

愛が重いというか深いというか一見ヤンデレチックな性格をしてるんですけど知れば知る程誰よりも乙女だしめちゃくちゃいい子なのでみんな育ててください.

ヤンデレって聞くと包丁みたいなイメージありますけどそんな感じの子じゃないので.ちょっと愛が深いだけです.まゆすき.

作ったもの

旅行先でねんどろいどと一緒に写真を撮るみたいなのがよくあると思うんですけど,それをAR上でやりたいなぁと思いこのアプリを作り始めました.というのとフレデリカをARで表示させるアプリ*2を見てそれに影響を受けたというのもあります.

しぬほど画質が荒いのはサイズ変換なりgifに変換なりしようとしたときに劣化してしまったものなので気にしないでください.

f:id:zenmaibane:20170905152705g:plain

f:id:zenmaibane:20170907143349p:plain

f:id:zenmaibane:20170907143406p:plain

せっかく作ったので自分以外の人が動かしてるのとか見てみたいし配布とかしたいんですけど現在適用しているVuforiaの規約的に不特定多数に配布することができないのでご了承ください.(Twitterかなにかで関わりのある方でちょっと試してみたいなどあれば別途声をかけてください)

ちなみに動作環境はAndroid4.4以上でiOSには対応していません.

そしてリポジトリです

GitHub - zenmaibane/MayuSuki: まゆすき(佐久間まゆの誕生日記念に作ったARアプリ)

開発の流れ

しぬほどかわいいまゆのMMDモデル*3があったので当初はそれをお借りする予定だったんですけどUnityで扱う際に使うMMD4Mecanim*4の規約的に自分がやりたいことが出来そうになかったので諦めました.

なのでMagicaVoxelで自分でモデルを作ってBlenderでボーンとモーションつけてUnityにインポートしてVuforiaで召喚みたいな流れです.

下記動画が自分がやりたいことの8割くらいを包括してるのでめちゃくちゃ参考になりました.これ見れば大体なんとかなります.

www.nicovideo.jp

MagicaVoxel

3Dドットを組みたててモデルを作れるみたいなそんな感じのソフト.

voxel.codeplex.com

これを書いてる今現在ではバージョンが0.98.2なので(1に満ちてないので)ところどころ痒いところに手が届かなかったりしたんですけどちょっとなにか作るくらいならとても便利だと思います.

自分は以下の本を技術書典で買ってMagicaVoxelをいじってたんですけど,そうでなくとも検索すればそれなりに文献が出るので結構ありがたかったです.(とはいえ個人的にはこの本はとても助かりました)

miso-lab.booth.pm

MagicaVoxelでの人形キャラモデリングのやり方についてはだいたい下記参考記事でなんとかなりました.

github.dev7.jp

完全に自分の感覚でしかありませんがMagicaVoxelでキャラを作る際には,まず大まかに形を作ってからボクセルを削って引き算の要領でやるといい感じに出来たような気がします.最初から細かく作ろうとするとバランスが崩れるというか.

最初は21×21×21のサイズでまゆのモデリングをしてたんですけどどうもこのサイズで作るとなんともまゆっぽくなくて困ってました.(というのと最初のサイズで作ったモデルだと髪と腕が隣接していたのでボーンを入れる作業でちょっと面倒くさくなるのが嫌だった.)

なので全体のボクセルの大きさを変化させて(Scaleを2.0に設定して)単位ボクセル辺りの描画面積を小さくした後に修正を加えるとそれなりに近くなったかなと思います.ただ小さくするとその分頂点量が増えるわ,誤魔化しが効かなくなる分それはそれでモデリングが大変という側面もありました.

Blender

Blenderでやった作業については「開発の流れ」で挙げた動画でやってること以外にやったことがほぼないので省略します.

最終的にはユニティちゃんのモーションをかなりお借りしたので自分で作ったモーションは1~2個しか使いませんでした.ちなみにモーションを作成するに当たって参考にしたものは以下の記事です.かわいいモーションを作るのって難しい...

b00.sakura.ne.jp

Unity・Vuforia

主に躓いた点は過去記事にてまとめてあります.

zenmaibane.hatenablog.com

あとは作りたい機能の中にUIが映ってないスクショ(風景とモデルのみしか映ってないスクショ)を撮る機能があってどうやって実装しようかなと悩んでたんですけど先人の方々がすでに解決していたのでそちらを参考にしました.

qiita.com

これに加えてAndroidパーミッション設定とメディアスキャンを忘れなければいい感じに写真を撮っていけます.

メディアスキャンについては以下の記事を参考にしました.

blog.narumium.net

1つ注意点を挙げるとするならば参考記事ではScanMedia関数の引数がfileNameとなっていますが,文字通り本当にfileNameだけの文字列(例えば"hogehoge.png")を与えるとメディアスキャンに失敗します.なのでpathを含めた文字列(例えば"mayusuki/test/fuga/hogehoge.png")を与えるといい感じにいい感じできます.

ついでにせっかくARを使うのにカメラのフォーカス機能がないといい写真がとりづらいなぁと思ったので下記記事を参考にしてフォーカス機能を実装しました.コピペで終わった.ありがたや.

http://qiita.com/akanei_main/items/6bde438747fe116ef124qiita.com

問題点・やりたかったこと

本当だったら地面にモデルの影が落ちるようにしたかったんですけどどこかでミスってしまい光を当てると影やモデルがかなり変になってしまった.

f:id:zenmaibane:20170831144319p:plain

f:id:zenmaibane:20170831144334p:plain

恐らくBlenderで分割なり重複頂点の削除なりを行った際になにかミスってしまったんだろうということはなんとなく想像出来るけどまゆ誕生日までに時間が足りなかったので今回はこういうのが見えないように誤魔化す方向にしました.この辺はどっかのタイミングでちゃんとしてあげたい...!

というのとキラッ!満開スマイルのステップがめちゃくちゃすきなのであのモーションを作りたかったんですけどなんかかわいくならなくて断念したりもしました.

おわりに

とりあえずすきなキャラの誕生日に合わせてなにか作れてよかったなぁっていうのが1つです.いっつもこういうイベントは他の人が作ったもの見て「すげー」って言ってるだけだったので.

もう1つはモデリングとかボーンだとかってすごい難しい印象があって多分自分は触ることはないだろうなってずっと思ってたんですけど,今回のを通してとりあえず触りだけでも出来て良かったなぁと.「いや自分には無理でしょ」って思っててもやってみるとそれなりにそれなりな感じで出来るんだなという知見が得られました.こんくらいのクオリティだったら1週間半くらいで済むもんなんだなという感じで,知らないことを色々知れて楽しかったです.

あとはみんなシンデレラガールズを始めてまゆを育ててください.