MToonをフル活用して動くアクセサリーで優勝する

クラスター・UnityエンジニアのRDAGさんによる、アクセサリーの制作テクニック「MToonで動くアクセサリをつくる方法」の記事を転載します。元記事はこちら

お世話になっております。クラスター株式会社でUnityエンジニアをしているRDAGでございます。
clusterのアクセサリー機能、お楽しみいただけているでしょうか!?

個性をアピールしたり気分で付け替えたり、手軽にイメチェンを楽しめる機能です。Cluster Creator Kitからオリジナルのアクセサリーをアップロードすれば、自分だけのコーディネートを楽しむこともできます!

ところで、アクセサリーで利用できるシェーダーはMToonシェーダーとなっています。VRM標準シェーダーとしても有名なトゥーンシェーダーのMToonですが、実はテクスチャをアニメーションできるUVScroll機能をサポートしていることにお気付きでしょうか?

本記事ではUVScrollを活用して、ちょっと目立てるアクセサリーを作ってみます!アクセサリーのアップロード方法などは下記に記載がありますので、ぜひCluster Creator Kitを準備してお試しください。

テクスチャアニメーションでアピール

Blenderでササっとモデルを作ります。シリンダーの上下のフタの面を削除しただけのものです。

シンプルな輪っか。左はUV展開図(空間が余ってる)

ササッとテクスチャも用意して、

空間の余ったUVに合わせて作られた空間の余ってるテクスチャ

マテリアルを設定していきます。
シェーダーはVRM/MToonにして、Color/Texture/Lit Color, Alphaの欄に作ったテクスチャを設定します。
そしてインスペクター下部のUV Coorinates / Auto Animation / Scroll Xにいい感じの数字を入れます。
今回はRendering TypeをTransparentにして、Cull Modeをoffにすることもしています。

MToonの設定項目。UVScrollの設定は画面下のAuto Animation

モデルにマテリアルを設定すれば、これでアニメーションするオブジェクトが完成です!

AnimationClipなしで動くものがササッと作れました

Scroll Xの数字を調整して、お好みの速度を見つけてください。
ちなみにスクロール速度を確認するときはインスペクター下のマテリアルプレビューで再生ボタンを押すとお手軽です。

右上の▶を押すとPlayしなくてもUVスクロールしてくれる

Cull Modeをoffにしているので片面しかないモデルでも裏側を描画してくれるようになっています。
裏面から文字を見ることになるので左右反転していますが、もし裏面からも読める文字にしたいならCull Mode = backにして、裏面表示用のメッシュを作るのが簡単です。

輪っかのメッシュをコピーして法線反転、UVをちょっとズラして左右反転
裏面用のUVの所に反転した文字を描いておく
裏からも読めるようになった!

UVScrollは常に一定方向にテクスチャが移動しますが、UVの配置を工夫することで色々な表現ができると思います。

枠線を文字と逆方向に流す。枠線用のポリゴンを用意してUVを左右反転するだけ
アクセサリーとしてアップロードすればこの通り

テクスチャアニメーションでメッシュの表示を切り替える

ここからが本番です!ここまでで「UVScrollで透過テクスチャを移動させることができる」という事がわかりました。これを応用してメッシュの表示切替をやってみます。

ササッとCubeを作ってUVを細くする
半分透明、半分不透明のテクスチャを用意して
X方向にUVScrollさせるとモデルが点滅するように!

UVに沿って時間経過でモデルの表示を切り替える、という小技を使うと、UVやテクスチャを工夫することで色々な表現ができるようになります。
例えば……

細長いUVを縦に並べて
左から右にスクロールすることを前提にテクスチャを描いて
UVScrollを設定すれば完成!

このようにカウントする数字を作れます。
同じ原理で碁盤の目のように分割された板メッシュを使えばドット絵のアニメーションのような表現が、少しずらしたメッシュを順次表示していけばメッシュ自体のアニメーションのような表現が可能になります!

テクスチャの不透明部分を虹色で上書きすればゲーミング7セグに

アクセサリーを楽しもう

以上、UVScrollを使ったアクセサリー作成のアイデアでした!
MToonシェーダーはUVScrollはMaskでスクロールする範囲を制限できたり、normal mapやemmisionも動かせたり、MatCapを使うと面白い表現ができそうな気配があるなど工夫し甲斐がたくさんあります。

色々な設定をトライして、あなただけのアクセサリーを作ってみてください!
これは!というアクセサリーが作れたら商品登録もご検討ください(億万長者チャンス?!)

記事をシェアしてワールド制作を盛り上げよう!