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

たった3ピクセルしかないボクセルモデルの目をぱちぱちさせるのに3日くらい掛かったので、むしゃくしゃしてまとめました。
15

----ここからunity2017用の追記----

U @ebleco

ああ、そうだ。お兄さんが前に書いた『ボクセルをまばたきさせる』っていうまとめですけど、VRchatで使うunityのバージョンが変わってレガシーが使えなくなっちゃったので、今はunityでやる事がちょっとだけ変わってるぞ。結局シェイプキーを設定しなきゃいけないのは変わらないのでunityまでは一緒。

2019-01-25 17:31:08
U @ebleco

で、「プロパティでレガシー使えなくなっちゃったけど、どうするの?」って話なんですけど、ここに「animator使ったったらええやん」っていうまとめがあるんで、これ見てどうにかしてくれ。 最新版(10/02時点)自動まばたきの実装【VRChat技術情報】 - VRChatパブリックログ jellyfish-qrage.hatenablog.com/entry/2018/10/…

2019-01-25 17:36:01

----ここまでunity2017用の追記----

U @ebleco

VRchatでオリジナルのボクセルアバターを瞬きさせたい問題。 Twitterでめちゃくちゃ色々教えてもらってチュートリアルめちゃくちゃ調べまくっても3日掛かったので、「ははーん、さてはこのゲーム、初心者がちょっと難しい事をやろうとした時に必要な知識が全然一か所に集積されてねぇな」って感じる。

2018-01-27 12:06:25
U @ebleco

と、いうわけで、ボクセルのアバターにまばたきさせる方法がわからなすぎてムカついたので、お兄さんなりにわかった事をまとめておこうと思います。

2018-02-02 22:29:07
U @ebleco

このまとめは「とりあえずこれ見たらオリジナルのアバターを作れたけど、もう後は何もかもわからん」みたいな人向けに作っていきます。 3Dとか全くわからんお兄さんがボクセルのモデルを雑に作る - Togetter togetter.com/li/1189219 @togetter_jpさんから

2018-02-02 22:32:02
サンフィッシュくまの @megakumadori

チュートリアルの更新が完了しました。 今迄目をつぶっていて大変申し訳ないと思っていた問題がだいたい解決しました。 熊野屋: 3DCG出来ない!でもVRChatでオリジナルアバターを作りたい人向けチュートリアル kumanoya.blogspot.com/2017/12/3dcgvr…

2018-01-07 18:50:57
U @ebleco

まぁ、何ならこのくまのさんの記事だけ見ればボクセルのアバターを作るまでは問題なく行けると思うので、別にお兄さんのボクセル講座とかはどうでもいいです。

2018-02-02 22:33:22
U @ebleco

まず、教えてもらったこの動画はめちゃくちゃ役に立った。「そうそう、こういうのやりたいの」っていう動画なので非常に助かる。 ただ、初心者はアニメーションウィンドウのプロパティ選ぶ段階で死ぬ。「俺のボクセルアバターには瞼とかねぇよ」ってなる。 youtube.com/watch?v=jrfx3v…

2018-01-27 12:08:58
拡大
U @ebleco

と、いうわけで、まず自作のボクセルアバターにblenderの段階で『瞬きする為のマテリアルとシェイプキー』を仕込む必要がある。 それはこの動画がめっちゃ役に立った。 youtube.com/watch?v=ZB2aXK…

2018-01-27 12:10:59
拡大
U @ebleco

で、今からどういう事がやりたいかって言うと、自作のボクセルをVRchatでまばたきさせる為に、『目を閉じた顔』をBlenderで作りまして、そいつをボクセルのアバターの顔の中から外へ、飛び出してるってわかんないくらいの距離で出したり入れたりします。 図にするとこういうのが出たり消えたりします。 pic.twitter.com/b3feEbz0O6

2018-02-02 22:40:58
拡大
U @ebleco

まぁ、マテリアルを貼り替えたりとかでもそれは出来るっぽいんだけど、一番手っ取り早い方法で行きます。と、いうわけで、まずは『目を閉じた顔』を作らなきゃいけないんで、もういっその事モデルを2体用意します。自分で画像用意出来る人は用意しちゃってもいいよ。 pic.twitter.com/Jrz7kM3Mk4

2018-02-02 22:44:00
拡大
U @ebleco

と、いうわけで、まずは目を閉じた方のバニーちゃんにBlenderの中にお越し頂きました。 必要なのはこいつの顔だけなので、今から顔だけくり抜いて展開します。 pic.twitter.com/VMUlFEenQ7

2018-02-02 22:46:18
拡大
U @ebleco

右クリックで選択しましてー、 tab押して編集モードにしましてー、 全選択されてたらA押して選択解除しましてー、 あと、選択モードを『面選択』にしておきます。 pic.twitter.com/jfrKCQuU94

2018-02-02 22:53:48
拡大
拡大
拡大
拡大
U @ebleco

でー、Shift押しながら必要な顔の部分を右クリックで選択していきます。 まぁ、俺たちは単純にまばたきさせたいだけなんで、目の周りだけでOKです。 pic.twitter.com/emZhDJVc71

2018-02-02 23:00:07
拡大
U @ebleco

そしたらー、「P」を押して―、「選択物」を押して、選んだところを分割しまーす。 分割するとどうなるかっていうと、tab押してオブジェクトモードにすると、こんな感じで別々に選択出来るようになるし、いつも足元に居る例の矢印の緑色の所引っ張ると、こんな感じに動かせまーす。 pic.twitter.com/4OsKb874pO

2018-02-02 23:03:28
拡大
拡大
拡大
拡大
U @ebleco

さーて、とりあえず今は顔のテクスチャがほしいだけなので、胴体部分には退場していただきまして、こいつをいつものようにスマートUV展開してしまいます。 ただ、顔だけに1024pxも必要ないので、とりあえず128x128くらいにしておきます。 pic.twitter.com/xgWeWYp36t

2018-02-02 23:07:34
拡大
拡大
U @ebleco

で、画像保存しましてー。 これで『目を閉じた時の顔』のテクスチャが保存出来ました。やったぜ。 と、いうわけで、今後は本体の方のバニーちゃんにBlenderへお越しいただきました。 何かUV展開とかボーンを付けたりとかは既に出来てる感じで話を進めます。 pic.twitter.com/4PLZxIrVXB

2018-02-02 23:13:02
拡大
U @ebleco

ここからはマテリアルをどうにかこうにかしていく作業なので、まず3Dビューの表示を「マテリアル」に切り替えます。 そうすると、「何じゃお前ぇぇええ!?」って見た目になるので、今からマテリアルとやらを設定していきます。 pic.twitter.com/SENJRkzmyM

2018-02-02 23:15:28
拡大
拡大
U @ebleco

じゃー、この右側に出てくるプロパティウィンドウとやらの『マテリアル』って所押しましてー、『新規』って所押します。そうすると、この灰色の物体と化したバニーちゃんにマテリアルとやらが割り振られます。 pic.twitter.com/lCxqMv9U0U

2018-02-02 23:22:28
拡大
拡大
U @ebleco

でー、このマテリアルにテクスチャの情報をブチ込んでやります。 この「テクスチャ」って所押しまして―、 「新規」って所押しまして―、 「▼画像」の所にある写真みたいなマークの所から、既に作ってあるバニーちゃんのテクスチャ選ぶと、こんな感じ。 まぁ、ここまでは本体のバニーちゃんの作業。 pic.twitter.com/mn3bbSSIOL

2018-02-02 23:28:05
拡大
拡大
拡大
U @ebleco

あ、ちなみに、マテリアルの名前はダブルクリックすると変更出来るんで、わかりやすい名前とか付けておきましょう。 pic.twitter.com/tYIViBkglV

2018-02-02 23:37:05
拡大
U @ebleco

で、いよいよ瞬き用のマテリアルを作っていきます。 さっきまばたき用のバニーちゃんを選んだ時と同じ部分を再び面選択で選びます。 選んだら、今度は分割するんじゃなくて、「Shift+D」を押すと複製されるので、そいつを緑色の矢印引っ張って動かすとこんな感じになります。 pic.twitter.com/TaSx7i1L2y

2018-02-02 23:41:20
拡大
拡大
拡大
U @ebleco

あ、複製する時に「Shift+D」だって言ったけど、その場で複製させたいから「Shift+D→Enter」って言った方がわかりやすいな。

2018-02-03 09:56:25