第12回 Trail Rendererで軌跡を描こう トレイルレンダラー実装編
武器に限った話ではありませんが軌跡の演出っていいですよね。
アニメーションにも手を付け始めると手軽にきれいな演出を入れたくなるものです。
今回はきれいかつ負荷の軽い演出であるトレイルレンダラーを実装していきましょう。
~トレイルレンダラーって何?~
Trail Renderer(トレイルレンダラー)とはTrial(軌跡)を描画する機能のことです。
ゲーム制作などでは主に飛行機雲や船の波紋の表現などに利用されています。
第12回はこんな流れで進めていきますよ
~STEP1.軌跡を描くための武器を導入しよう~
通常のユニティちゃんには軌跡を描くための武器がありませんのでバトルコスユニティちゃんから武器を拝借しましょう。
公式サイトからunitypackageファイルをダウンロードしてください。
必要なのは武器だけなので武器を自作している、または別の武器を用意している場合はSTEP2まで読み飛ばして大丈夫です。
まずはいつものようにパッケージファイルをインポートしてください。
modelからバトルコスユニティちゃんを探し出してSceneに表示させます。
この時HierarchyにあるWepが武器の階層にあたるためバトルコスユニティちゃんの階層から引き離します。
ドラッグして階層から引き離そうとすると「データが壊れてしまうかもしれないけど大丈夫?」とunityが確認を取ってきますが大丈夫です。
Continueをクリックして続行します。
そして引き離したWepを第6回のお団子のように持たせたい手の階層の中に移動させます。位置調整も忘れずに。
この状態だと武器のメッシュデータはバトルコスユニティちゃんが持っているのでmesh_rootから武器のメッシュデータ(現在選択されているもの)も通常ユニティちゃんのmesh_rootに移動させてください。
このメッシュデータ移動を忘れてしまうとアップロードしても武器が表示されないため注意しましょう。
以上で武器の導入は完了です。
~STEP2.Trail Rendererの基本を設定しよう~
武器の導入が終了したら次は武器の中にあるboneにTrail Rendererを追加していきます。
同じComponentを追加したい場合は複数選択でまとめてしまうことができます。
shiftを押しながらHierarchy内部のboneをクリックしましょう、まとめて選択されるはずです。
まとめて選択されたらAdd ComponentからTrail Rendererをクリックします。
これで各boneにTrail Rendererが追加されました。
あとはここの数値を調整してオリジナルの軌跡を作り出していきます。
ちなみにこの時点では何も設定されていないためユニティちゃんを動かすと未設定の証であるピンクの軌跡が描画されます。
~STEP3.自分だけの軌跡を作ろう~
何も設定しなければピンクの軌跡になってしまう、のであれば描きたい軌跡を設定してしまいましょう。
まずは軌跡のベースとなるマテリアルを指定します。
今回は武器の軌跡ということでシンプルにDefault-Particleのマテリアルを使用します。
第8回でも使用した白いぼんやりとしたマテリアルですね。
ここでアセットストアで購入した炎のマテリアルを指定すれば軌跡は炎になります。
シェーダーが特殊なマテリアルを指定すれば特殊な軌跡(時間経過で色が変わるなど)に変化しますからここからオリジナリティが出せます。
ここからは軌跡の描画についての詳細な設定です。
Timeは軌跡の描写時間を表しています。デフォルトでは5秒経過すると自動的に描画を消すように設定されています。
Timeの数値を大きくすることで迷路ワールドの攻略に役立てる、ということもできそうですね。
しかし今回は武器の軌跡を描くためTimeは小さめの値にします。
Min Vertex Distanceは描画する頻度を表しています。どのぐらいの間隔で軌跡を描くか、ということですね。
この値が大きすぎると軌跡がカクカクになってしまいますし小さすぎるとぐにゃぐにゃしてしまいます。
2つの値を調整したら次はWidth、軌跡の幅を調整します。
これは第11回のアニメーションで解説したような時間経過で値を調節することができます。
画像では一秒間の間に徐々に0.5の軌跡の幅を0にする、という設定です。
幅を設定したら次は真っ白な軌跡に色をつけましょう。Colorの白枠をクリックすると別でウィンドウが開きます。
さらにそのウィンドウのスポイトマークをクリックするとお好みの色を調色することができます。
好みの色を作ると自動的にグラデーション加工されるので下にあるアイコンを使ってさらに好みのグラデーションに調整します。
グラデーションではなく2色にきっちり分けたい!という場合は右上のBlendをFixedに変更しましょう。
上にあるアイコンをクリックすることで色に透過処理を加えることができます。どの程度透過させるのかはAlphaの値を変化させて決めましょう。
また、この調色作業は合計で2色混ぜることが可能です。
今回は緑と黄色のグラデーションに設定しました。
実際に武器を振り回すとグラデーションのかかった軌跡が描画されているのがわかりますね。
あとは武器を取り出すアニメーションを作ってオーバーライドで取り出すだけでいつでも武器を振り回すことができます。
VRchat上で動作確認。しっかりと描画されていますね。
今回は武器に焦点を当てた解説になりましたが手足につけてフルトラッキングの芸をするもよし、目に赤い軌跡を仕込んで某モンスターの怒り状態を再現したりと表現は使い方次第で無数にありますから自分だけの表現を探してみてくださいね!