VRChatでキャラの色を動的に変えるアニメーションを作成する[VRChatアバター改変のすすめ その3]
はじめに
本記事は前々回からの続きです。
既読を前提とする部分が含まれるため、一読していただけますと幸いです。
VRChatアバターにアニメーションを大量に設定するのに必要な知識とか機能のまとめ - TKSPのUnity関連ブログ
VRChatで物を取り出すアニメーションを作成する - TKSPのUnity関連ブログ
髪の毛の色を動的に変える
髪の毛の色を変えるためにまず、素材を準備していきます。
白い髪の毛テクスチャを用意する
使用しているアバターの髪の毛のテクスチャが存在すると思うので、そちらをデスクトップにドラッグ&ドロップでコピーできます。
その後、コピーしたテクスチャを右クリックし、プログラムから開くでフォトを開きます。
編集と作成メニューから、編集、調整で色を一番左にして保存します。
これを画像が白っぽくなるまで繰り返します。
完成した白黒(灰?)画像を作業フォルダに(Textureフォルダとか作っておくといいかも)入れます。
マテリアルを用意する
元のアバターのMaterialを探します。
マテリアルには、Mesh Rendererがコンピューターに描いて欲しい材質の情報が詰まっています。(金属？木材？光る？透明？などの情報)
①をクリックすると、対象のマテリアルがProjectに表示されると思うので、それをctrl + dで複製し、F2で名称を変更します。(自分はnero_hair_matにしました)
①をクリックして見つからない場合は自分で探してください。この場合、Element 0に入っている「tex2」の文字を入力すると引っ掛かります。
(Project内の素材が多すぎると①をクリックしても自動で移動しないことがあります)
複製したマテリアルを、作業フォルダに移動させてください。
マテリアルに画像を適用する
- マテリアルを選択
- インスペクターを固定
- テクスチャを設定
- 人によってテクスチャを入れる場所、量が変化します。ネロちゃんはUnityちゃんToonシェーダーでした。
- インスペクターの固定を解除(2の逆)
マテリアルをアバターに適用する。
2つ方法があります。どちらもやっていることは同じです。お好きな方で。
- Mesh rendererで適用する
- Scene画面で適用する
この子の場合はしっぽと耳も同じマテリアルなので変えておきます。
アニメーションファイルを作成する
作業フォルダにHairColorフォルダを作成し、color_red,color_blue,color_greenのアニメーションを作成します。
BlendTreeファイルを作成する
普通はコントローラー上で直接作成するのですが、コピーができたほうが、後ほどいろいろとはかどるのでSDKからコピーします。
vrc_CrouchingLocomotionを複製し、名称をhair_colorに変更して、作業フォルダに移動してください。
コピーしたブレンドツリーの項目をすべて削除します。
- 選択
- 選択
- 削除(大丈夫か聞かれるのでDeleateを押す)
- 削除を繰り返す
全部消すと以下のようになります。
FXLayerを編集する
前回作成したFXLayerにHairColorLayerを追加し、歯車マークからWaightを1にします。
ParametersにfloatでHairColorを追加します。
先ほど作成したBlend Treeを初期Stateとして登録します。
- hairColorLayerを選択
- hair_colorをドラッグ&ドロップ
- stateを選択
- Write Defaultsを外す
ブレンドツリーの設定を行う
- 1Dに変更
- HairColorに変更 -> FXLayerで指定したfloatのパラメータが表示される
- Listに3つ追加
Motionに先ほど作成したアニメーションを設定します。
Thresholdを0~1にします。
これで、HairColorが0の時はred,0.5の時はblue,1の時は緑になります。
また、FXLayerにblend Treeが登録されているので、そこに設定されているアニメーションも編集できるようになります。
色を変更するアニメーションを作成する
前回の復習です。
最初に、アバターのアニメーションを編集できるようにコントローラーに登録してから、編集したいアニメーションを選択し、録画ボタンです。
髪の毛のオブジェクトを選択し、Mesh Renderer のMaterial色を変更します。
この際、Projectのフォルダにある素材の方を直接触らないように注意してください。
今回は髪の毛だけを変えるため、しっぽや耳の色は同じ素材を使用していますが、変化していないことが確認できるかと思います。
HairについているSkind Mesh Rendererの色を赤に変更するKeyが打てていることが確認できます。
前回書きましたが、大事なことなのでもう一度書きます。
Unityのアニメーションは、「物体の特性に値を上書きする」だけです。
やってることが分かれば何も怖くない。
同様にblueとgreenも作成します。
録画で作成しても良いですが、単純なキーなのでコピペして編集でも大丈夫です。
動作確認
- アバターを選択
- Game開始
- 再生されていることを確認し、ダブルクリックで中へ移動
- 選択
- 赤い矢印をドラッグ
- 色が変わっていることを確認
- HairColorが0~1で変化していることを確認
- Game終了
色が変わりました！
BlendTreeがrgbを混ぜてくれています。
今回はアニメーションの配置が等間隔(0, 0.5, 1)だったので、赤と青の中間の場合は(r,g,b,a)=(0.5, 0.5, 0, 1)になるため、紫になります。
欲しい色があったら0~1の範囲で後で追加しましょう。
動作確認が済んだらControllerは外しましょう。
VRChatで動かすための準備
いつものやつです。
動作することは確認したので後はVRChatで動くようにするだけです。今回で三回目ですね。
Expression ParameterにHairColorを登録
Menuに登録
Radial Puppetについては後で解説します。
Paramater Rotationの方にHairColorを設定してください
アップロード
Materialの変更で赤いエラーが出ていた場合は(赤いエラーだけ)Auto Fixしてください。
動いた！
Radial Puppetについて
Paramater スティックメニューを開いている間はOn(1),閉じている間はOff(0)
Paramater Rotation 0~1の範囲で0.01刻みに値を変更する(0%~100%)
耳の色も変更する
HairColorFolderと同じ場所にEarColorフォルダを作成します。
次にHairColorFolderの中身を複製するのですが、下記の方法で複数選択した後にctrl + dで複製を行うと簡単です。
複数選択方法
複数選択の方法は2つあるので使い分けてください。
ctrlを押しながらクリックで複数選択-> 間をあけることができる。
Shiftを押しながら対象の範囲の上部分と下部分を順番にクリック -> 一度にたくさん選択できる
また、ctrlの方法は既に選択しているものを選択から外すことが可能なため、Shiftで選択してから、いらない部分をctrlで外すなどの合わせ技ができます。
Hairと同じような状態にする
ctrl + d で複製
複数選択した状態で選択されている素材の一つをドラッグ&ドロップすると一緒に移動できます。便利。
アニメーション名が被ってしまうので「部位_色」に変更します。
名称変更はF2ですね。Earも対応しましょう。
earのblend treeに紐づいているアニメーションを修正します。
Hairでやったことと同じようなことをやる。
- Layere追加
- Weight変更
- Parameters追加
- Blend Treeをドラッグ&ドロップ
- State選択
- Write defaults を切る
- controller設定
- earのアニメーションを編集してるか確認
- コピペしたのでearのキーが全部hairになっているため削除(一番上のキーが全体になるので、右クリックからDelete Keys)
- 録画ボタンとかを駆使して耳の色が変わるアニメーションキーを打つ(さっき髪でやった)
- プレビューで確認可能
- 色が変わってるか確認
- プレビューOffの時
- 元に戻ってるか確認
- 青と緑も作る
- controller外す
- Expression Parameters登録
- Menuに登録
- 忘れてました。Blend Treeに紐づいているパラメータ変更
完成！
X軸とY軸を持つBlend Tree
Blend Treeの作成
しっぽの色を変更するアニメーションを例に説明します。
VRChatのfloatの範囲は-1.00~1.00なのですが、そちら活用する方法の一例です。
2D Freefrom Directional の Blend Treeを作成します。
これは、X軸とY軸を-1.00~1.00の範囲で持つBlend Treeです。
今回は黒と白のアニメーションも作成し、いい感じの位置に置いて動作確認をしました。
きれいに混ざりましたね。
本来は色を混ぜるために使うものではないです。
この方法では一部の色が表現できません。(黄色とか)
また、余分にパラメータを消費します。
パラメータに余裕のない方や、指定した色だけで変更したい方は 1D のBlendTreeにたくさんの色変更アニメーションを登録した方が良いです。
パラメータを余分に使っていいという方は、こちらの方法でアニメーション作成の手間を省くことができます。
VRChatで表示
いつも通りのパラメータ追加
Two Axis Puppetを選択
Two Axis Puppetの説明
Parameter 開いてるときOn(1),閉じているときOff(0)
Parameter Horizontal 横に-1.00~1.00の範囲で変化させる
Parameter Vertical 縦に-1.00~1.00の範囲で変化させる
アップロードして確認
自由に色を変更することができますね。
このメニューを、別のことに応用できないかを模索してみてください。
ちなみにデフォルトのLocomotionLayerではアバターの移動方向をX(左右),Z(前後)として、移動方向のアニメーションを混ぜて表現しているみたいです。
終わりに
以上、キャラの色を動的に変えるアニメーションの作成方法の解説でした。
次はWorldにオブジェクトを配置するギミックの作成をしてみたいなと考えています。
頑張って土曜日までには投稿したいです。
