アニメーションとか全くわからんお兄さんがVRchatでオリジナルのボクセルアバターをまばたきさせる。

U @ebleco

まぁ、コイツにさっきの目を閉じたテクスチャを貼り付けて、顔の中から出てきたり顔の中に収納されたりの動きをさせれば、見事まばたきが出来るわけです。 そんなわけで、こいつにもマテリアルを設定します。 さっきの「マテリアル」タブの『+』を押しましてー。例によって『新規』を押します。 pic.twitter.com/BNnkWJMKpk

拡大

U @ebleco

で、この新しく出来たマテリアルを選んでおいて、「割り当て」を押すと、テクスチャも何も設定されてない灰色のすっぴん甚だしいマテリアルが割り当てられるので、顔から飛び出してる方の顔面が灰色になります。 pic.twitter.com/lkVc6kS6o7

拡大

拡大

U @ebleco

なお、この際に、顔が灰色にならない人は、３Dビューの表示モード（シェーディングとか言うらしいがお兄さんはいまだによくわかっていない）が『マテリアル』じゃなくて『テクスチャ』になってる恐れがあるので、確認してみるといいかも。

U @ebleco

で、このマテリアルにテクスチャを設定するぞー、って事で、 例によって「テクスチャ」押しましてー「新規」押しましてー で、もうさっき目を閉じた顔のテクスチャは作ってあるので、「開く」を押して、目を閉じた画像ファイルを選びます。 すると、「思ってたんと違う―！」って見た目になります。 pic.twitter.com/nbXGdDWAOC

拡大

拡大

拡大

拡大

U @ebleco

何かこいつ変な一色になってんぞって事で、「UV/画像エディター」の方の、本体のバニーちゃんの画像の名前の書いてある所の左の写真みたいなマーク押すじゃん？ で、さっきの目を閉じた方の画像選ぶじゃん？ ……あ、はいはい、そういう事ね、完全に理解したわ。（理解してない） pic.twitter.com/2NyBLWiMfe

拡大

拡大

U @ebleco

「なら、同じようにスマートUV投影したったらええやん、わからんけどいけるやろ」って話なので、３Dビュー側でそのようにします。 「やったぜ」という見た目になったのがこちらになります。 pic.twitter.com/wesvTrZarT

拡大

拡大

U @ebleco

でー、もう後はコイツが、こんな感じで顔の中から出たり入ったりすればまばたきしてるように見えるわけだ。 緑色の矢印引っ張っていい感じの位置に持ってきたのがこちらになります。 一応、編集モードとオブジェクトモード切り替えて、おかしくないか確認しておきましょう。 pic.twitter.com/z5YqYqfIWr

拡大

拡大

U @ebleco

はーい、じゃぁ一旦、この目を閉じた顔の表情差分は、緑色の矢印引っ張って頭の中にしまっちゃいましょうねー。 pic.twitter.com/RkDyjSBAbV

拡大

U @ebleco

というわけで、ここからはUnityに持っていってアニメーション作るのに必要な『シェイプキー』とやらを設定していきます。要するに、今のこの『頭の中に表情差分を収納した状態』を基本として、まばたきしたい時だけ『さっきの顔が表面ギリギリまで出てくる』という状態が必要なので、覚えさせます。

U @ebleco

まず、tab押してオブジェクトモードにしましてー。 この「オブジェクトデータ」とやらのタブを押します。 シェイプキーとやらの項目が居やがったので、とりあえず「+」押してみます。 「ベース」とやらが追加されました。これが『基本の形』です。 pic.twitter.com/EA9pK63koF

拡大

拡大

拡大

U @ebleco

まぁ、もう大体解ってきた感あると思うんですが、 もう一回「+」を押すとシェイプキーが増えるので、こいつの名前をダブルクリックして、何かわかりやすい名前に変えて、『まばたきした状態』をこれから覚えさせます。 pic.twitter.com/YlvIZdXI9P

拡大

拡大

U @ebleco

で、このシェイプキーとかいう機能、「ベース」以外のシェイプキーを選んでいる時に行った操作は、そのシェイプキーにしか適応されないという便利機能なわけですよ。つまり、今から例のまばたきした顔を頭の中から引っ張り出してくるんだけど、ベースはそのまま、この『まばたきした顔』だけ変更出来る

U @ebleco

と、いうわけで、『まばたきした顔』の方をしっかり選択して、そのようにします。 tab押して編集モードにしてから、マテリアルタブに行きましてー、例の頭に収納したマテリアルを選択しましてー。 例の緑色の矢印で引っ張り出します。 pic.twitter.com/dozE3k32ZZ

拡大

拡大

拡大

U @ebleco

目安としてはこんな感じ。 スーパーめちゃくちゃ少し出っ張らせてるので、一見するとテクスチャが貼り変わったようにしか見えません。 まぁ、別にここはそんなにこだわらなくても顔の中から外に出てきてれば見た目はあんまり変わんないと思う。 pic.twitter.com/e9bRvg0MGc

拡大

U @ebleco

でー、「オブジェクトデータ」のタブに戻りまして、ちゃんとシェイプキーが適用されてるか確認します。 「ベース」がこんな感じで、 「まばたき」の顔がこんな感じ。 やったぜ、って事で、コイツをいつものようにボーンと一緒にエクスポートします。 げへへへ、ここまで出来ればこっちのものよ。 pic.twitter.com/1J2AGklEeM

拡大

拡大

U @ebleco

と、いうわけで、いつものUnityでーす。 今回は、いつものfbxファイルとテクスチャに加えて、表情差分にもお越しいただきました。 あ、あと、Unityのプロジェクト名は、どうやら日本語で名前付けるとアップロードする時にバグるっぽいからそこだけ気をつけて。もう直ってるかも知れないけど。 pic.twitter.com/y53Pwnlsge

拡大

U @ebleco

で、マテリアルのフォルダの中身を見ると、さっき作ったマテリアルが増えてやがるので、いつものようにテクスチャを適用させます。 で、いつものようにヒューマノイドの設定とかしちゃったものとして話を進めまして、いよいよアニメーションを作っていきます。 pic.twitter.com/zIFKxdU3Jn

拡大

拡大

U @ebleco

で、このヒエラルキータブとやらにいつものようにモデルを突っ込んだのがこちらになりまして。 そのプロジェクト名の中のモデルの名前を選ぶと、こんな形になるわけですよ。 で、インスペクタータブとやらの中に『SkinnedMeshRenderer』の中に『BlendShapes』にさっき名前付けたシェイプキーが居ます。 pic.twitter.com/FGrYxxh2r1

拡大

U @ebleco

この数字を、0にすると全くシェイプキーが反映されてない状態で、100にするとシェイプキーに設定した状態になるわけです。 便利―。 あ、ここは説明の為に動かしただけなので0のままでいいですよー。 pic.twitter.com/sxXeA93eNs

拡大

拡大

U @ebleco

で、今からアニメーション作っていくんで、「Ctrl+D」でモデルを複製します。解りやすいように名前も変えておこう。 まぁ、ぶっちゃけここからは一番最初の動画見てくれれば出来ちゃうと思う。 pic.twitter.com/e0qCCTMBYG

拡大

拡大

拡大

U @ebleco

で、windowからアニメーションウィンドウ開きましてー。 そしたら複製した方のアバターの位置をわかりやすい位置に動かしまして―、そうすると、add　property押した時に例のシェイプキーと同じ名前のブレンドシェイプが居るわけですよ。それを+押して追加しましてー。 pic.twitter.com/brMsg2yOgk

拡大

拡大

U @ebleco

何故かポーズが変わったりするんだけど、どうせコイツはアニメーション作り終わったら消すので気にしなくていいです。 そんなわけで、適当な位置で「add keyframe」を押して、瞬きする動きを入れていきます。 具体的にはこんな感じで。 pic.twitter.com/9VOZzTOtHJ

拡大

拡大

拡大

U @ebleco

この時、目を開いたり閉じたりする動きは、１フレーム（１目盛）間隔で作らないと、シェイプキーが0から100の間をゆっくり動いてきちゃって、要するに顔が内側からゆっくりせり出してきちゃうので、注意が必要。 で、この間の部分のキーフレームの数字を100にします。 目閉じてますね。 pic.twitter.com/gcVahHY0Aw

拡大

U @ebleco

この４つ置いた点を 「0」→「100」→「100」→「0」の順番で動かすと、 「目が開いてる状態」から「目を閉じた状態」になって、それをちょっと維持して「目を閉じた状態」から「目を開いてる状態」に戻るというまばたきのアニメが出来がります。 まぁ、多分0.1秒間隔くらいでいいんじゃないかな。

U @ebleco

でー、一番後ろの点を２秒くらいの位置に動かしてー、全部の数字が問題ないか確認してー、「▶」の再生ボタンを押して、問題なくまばたきしてるようであれば、アニメーションは完成―。 お兄さんは目を閉じてる時間が0.1秒くらいにして、まばたきの間隔は2秒くらいになるように調整してます。 pic.twitter.com/UxePtHkoNW

拡大