【Unity】MeshEffectsを使って、Vroidモデルに武器を持たせて動かし撮影しよう！
「Unity アセット真夏のアドベントカレンダー 2021 Summer!」 10日目の記事です。
9日目はkakoさんの「ShapesでDOTweenのすゝめ」です。
明日はAmeoさんの「Curvyを使って３D横スクロールステージを作ろう！」です。
はじめに
プロジェクトの作成から「MeshEffects」を導入し、Vroidモデルに武器を持たせ動かし、撮影する方法を紹介します。
※Vroidモデルは他のモデルに変更することも可能です。
はじめまして、Unity等を使って自主制作アニメーションをしている、たぬと申します。
- はじめに
- 1.「MeshEffects」の概要
- 2.「プロジェクト」の作成
- 3.「MeshEffects」の導入
- 4. デモシーンの確認
- 5. 「Post Processing」の導入
- 6. Vroidモデルの導入
- 7. モーション、エフェクト、武器の確認・設定
- 8. デモシーンでの再生
- 9. Recoderで撮影する
- おわりに
本記事では次のとおりの環境下で行います。
※Unity初級者向けを想定しております。
- Unity 2019.4.16
- Mesh Effects 1.4.1
- UniVRM-0.66.0_39d5（Vroidモデルを使用する場合）
- Post Processing Stack 3.0.3
- Recorder 3.0.1
1.「MeshEffects」の概要
リッチなエフェクトが簡単に実装できてしまう、素晴らしいアセットです。
以下、公式の動画になります。
かっこいいですね。
こういったことを自分の好きなモデルできないものかと考えてしまいます。
「MeshEffects」なら、そんな願いをすぐ叶えてくれます。
アセットストアの「MeshEffects」のページを見ておきましょう。
このパッケージには 21 のメッシュエフェクトが含まれています。
注：アップグレードする前に、古いバージョンのパッケージを削除する必要があります。
URP と HDRP には、プロジェクトフォルダに含まれているインポートパッチが必要です。Unity 2019.2.19f 以降で利用可能な URP および HDRP レンダリング
PC / コンソール / Motules / VR に対応しています。
2D スプライトでは動作しません
PC デモ
モバイルデモ
- 購入後そのまま使用可能（ドラッグアンドドロップのみ）
- どんな色もワンクリック
- 実際のメッシュサイズに対するエフェクトスケール
- 「メッシュレンダラー」と「スキンメッシュレンダラー」で動作
- デモシーンには（アニメーション / キャラクター / 武器 / 環境）が含まれます
重要！Unity3d はサブメッシュ当たり 1 つ以上のマテリアルはサポートしません。正しく機能させるには、サブメッシュを分割する必要があります。
（AssetStoreからの引用文）
とありますように、
・２１種類のメッシュエフェクト
・Built-in RPに加え、URP と HDRP で使用可能
・PC / コンソール / Motules / VR に対応
Timeline上でモーションやエフェクトに手を加えたり、テクスチャを変更することで大きく表現の幅が広がり、ゲーム内でのカットシーンでも活躍することでしょう。
2.「プロジェクト」の作成
3Dを選択し、お好きなプロジェクト名を入力してください。保存先を選び、作成をクリックしてください。
本作業では、レイアウト下記のように配置しています。レイアウトが設定については、次をご参照ください。
右上から「2by3」を選択します。
上記のようになれば、成功です。
3.「MeshEffects」の導入
AssetStoreのウィンドウを表示させます。
検索から「MeshEffects」を入力、検索してでてきたものをクリックすると
※記事作成時にセールだったため、価格が半額で表示されています（20210730）。
「Import」画面がポップアップされますので、「Import」をクリックしてください。購入されてない方は購入してください。
「Import」をクリックしてください。すぐに「Import」されますので、完了までしばらくお待ちください。
4. デモシーンの確認
1.AssetStoreの画面はいらないので、Sceneに切り替えます。
2.プロジェクトのファイルが見づらいので〇を「←」によせておきます。また、レイアウトを微調整していきます。このあたりはやりやすいようにお好きにしてください。
3.「Impot」に成功していると、「KriptoFX」というフォルダができているはずなので、
「KriptoFX」→「MeshEffect」と開きます。
4.「PC_Demo」を選択します。
「Please read the readme :) 」とのことなので、ReadMeを読んでおきましょう。
今回の記事で必要な部分の要点をまとめますと 、
・正しく動作させるには"\Assets\KriptoFX\MeshEffect\PostProcess Profile.asset"を導入して、デモシーンのようにします。
・EffectのPrefabをエフェクトをつけたいオブジェクトにドラッグアンドドロップします。次に、設置したメッシュオブジェクトの"PSMeshRendererUpdater"の "Update Mesh Renderer"をクリックします。
そうすると、パーティクルとマテリアルが自動でオブジェクトに追加されます。
まず、さっそく再生ボタンをクリックして、プレイしてみましょう。
エフェクトが適応された剣を振り回す男「Character(Clone)」と球「TestSphere(Clone)」が表示されるはずです。
左側の赤〇部分で、色の変化やエフェクト２１種類をプレビューできますので、お試しください。
この状態では問題があります。
一度再生をやめて、ヒエラルキーの「PostProcessing」を選択してください。
ScriptがMissingとなっていますので、「PostProcessingStack」を導入することで、解決します。
「PostProcessingStack」は、画面に様々な変化を与えてくれる機能です。
※詳しく知りたい方は下記URLをご参照ください。
5. 「Post Processing」の導入
1.「Window」→「PackageManager」を選択します。
左上の部分がUnityRegistryになっていることを確認し、検索タブに「post」と入力します。
上記のように表示されているのを確認し、「Install」をクリックします。
ScriptがMissingが「Post-processVolume」と表示されるようになっています。
ConsoleにErrorが出続ける場合があります。次のように対応してください。
「NullReferenceException: Object reference not set to an instance of an object.
UnityEngine.Rendering.PostProcessing.AmbientOcclusion.IsEnabledAndSupported.」のErrorが出た場合の対処法
ヒエラルキーから「Camera」→「Camera」を選択、「Post-processLayer」を「RemoveComponent」します。
「AddComponent」で「Post」と入力し「Post-processLayer」を追加し、
1.「Layer」に「Default」を一時的に設定します。
2. 「Anti-Aliasing」に「SMAA」を設定します。
スペックや状況に応じて設定してください。スペックが低い場合は「FXAA」をおすすめします。
それぞれの設定は下記のとおりになっています。
- Fast Approximate Anti-aliasing (FXAA) - モーションベクトルをサポートしないモバイルとプラットフォーム向けの高速アルゴリズム。
- Subpixel Morphological Anti-aliasing (SMAA) - モーションベクトルをサポートしないモバイルやプラットフォーム向けの、高品質だが低速のアルゴリズム。
- Temporal Anti-aliasing (TAA) - モーションベクトルを必要とする高度な技術。デスクトップとコンソールプラットフォームに最適。
次にヒエラルキーにある「PostProcessing」→「Post-processVolume」を「RemoveComponent」します。
「AddComponent」で「Post」と入力し「Post-processVolume」を追加します。
プロジェクトの「MeshEffect」内にある「PostProcess Profile」を「None（PostProcess Profile）」にドロップ＆ドラッグします。
「Is Global」にチェックをいれましょう。
成功すると、赤まるのColorGradingとBloomが追加されます。「AddEffect」をクリックすると、他のエフェクトが追加できますが、今回は追加せずにいきましょう。
※いろいろ弄りたい方は、下記URLをご参照ください。ほかアセットでも追加できますので、ぜひ色々なポストプロセスを楽しんでください。
※参考にさせていただいたもの
6. Vroidモデルの導入
Vroidモデルを導入するために、UniVRMを導入します。
モデルを、アセットストアやMixamo等で導入する方はアセットストアから適宜Importしてください。
下記URLの最下部にある、
「UniVRM-0.66.0_39d5.unitypackage」を導入します。ダウンロードし、デスクトップ等に保存したら、
画面上から「Assets」→「ImpottPackage」→「CustomePackage」を選択します。
先ほどダウンロードした、「UniVRM-0.66.0_39d5.unitypackage」を選択して、
「Import」します。
上記の３つのフォルダが追加されます。
続いて、モデルを保存するためのフォルダを作成します。
プロジェクトの「Assets」上で右クリック→「Create」→「Folder」を選択します。
「NewFolder」というフォルダが作成されますので、とりあえず、「Vroid」と命名しておきます。
あらかじめ「VroidStudio」等から、モデルをVRM形式でエクスポートしておきます。
なお、今回はHulaFlatWorks様の衣装をお借りしております。
※VroidStudioでのモデルの説明ついては下記をご参照ください。
「Vroid」フォルダを選択した状態で、
エクスポートしたVRM形式のファイルをドラッグアンドドロップします。
Importに時間がかかりますので、しばらく待ちます。成功すると下記のようにファイルが生成されます。
青い箱のPrefabの「YB_Gospan」をヒエラルキーにドラッグアンドドロップします。
そうすると、下記のように表示されるはずです。
一度シーンを再生してみましょう。
「Tポーズ」を取ったモデルが画面に表示されれば、Importは成功しています。
7. モーション、エフェクト、武器の確認・設定
ではここから、デモシーンのようにキャラクターのように武器を持たせ動かしたいと思います。
一度再生してみて、デモシーンのキャラクターがどのような振る舞いをしているのか、「Inspector」を見てみましょう。
アニメーションシステムをコントロールしている「Animator」という「Component」の「Controller」に「Anim1」というものが設定されています。
また、「ME_AnimatorEvents」のなかの、
「EffectPrefab」に「Effect1」
「SwordPrefab」に「Dragonblade」
が設定されています。それぞれをクリックしてみましょう。
「Effect1」
1～21のエフェクトのPrefabが「MeshEffects＞Prefabs＞PCDemos」に格納されているがわかりました。
「Dragonblade」をクリックするとシーン上に選択された状態になり、「MeshEffects＞DemoResources＞Prefabs」に格納されていることがわかりました。
順にこの３つをモデルに配置すれば、同じようなことができそうです。
では、やってみましょう。
モーションの設定
プロジェクトの「MeshEffects＞DemoResources＞Animation」を開きます。「Animator」Windowが表示されます。
「Anim1」
「Anim2」
のように設置されています。
「Anim2」を元に新たな「Controller」を作成します。
「Anim2」を選択した状態で、「Ctrl+D」を押して、ファイルを複製します。
「Anim3」が生成されます。そこに、AnimationClipファイルである「SwordRotating 1」をドラッグアンドドロップします。
以下のようになります。
橙色の「idle」の上で右クリックをします。
「MakeTansition」を選択します。
→が表示されますので、「SwordRotating 1」を選択し、上記のようにつながった状態にします。
ヒエラルキーの「YB_Gospan」を選択し、インスペクターの「Animator」の「Component」を確認します。
「Controller」が「None」になっていますので、●をクリックして、「Anim3」 を選択します。
選択後、再生してみましょう。
このように、Animationの矢印が遷移し、Game画面で剣を振り回す動作「SwordRotating 1」をしていれば、「Animator」の「Controller」の作成は完了です。
このように、AnimationClipを追加していけば簡単にモーションを追加していけれます。アセットストアには無料有料の様々なモーションがおいてありますので、ぜひチャレンジしてください。
なお、本記事投稿日時点で、アニメーションアセットが無料（2021/08/16まで）になりますので、ぜひ入手されることをおすすめします。
クーポンコードの入力をくれぐれをお忘れないようにしてください。
【パブリッシャーセール ＆ 期間限定 無料化アセット】
— AssetSaleLove @汗人柱 (@AssetLove) 2021年8月2日
テーマ「アニメーション」
格闘、魔法使い、剣戟、銃、弓など戦闘モーション全品50%オフ
各パブリッシャーから計3アセット分の無料プレゼントあり！
🎁引き換えコード：ANIMATE2021https://t.co/FxGgBa4RM1
期間：8月16日 15:59頃まで#Unity pic.twitter.com/VOSZkQAKuL
Animatorの詳しい使い方については下記をご参照ください。
「ReadMe」の文字も必要ないと思いますので、ヒエラルキーからチェックを外しておきます。
武器の配置
プロジェクトから「dragon」と検索し、「Dragonblade」のPrefabを見つけ、
「YB_Gospan」の「Root」から順に開いていき「J_Bip_R_Hand」 に「Dragonblade」をドラッグアンドドロップします。
「Dragonblade」が離れた位置にありますので、
PositionをすべてXYZの値を0にします。そうすると、以下のように表示されます。
Tポーズを取ったモデルの右手（「J_Bip_R_Hand」）の上に剣が載っているかたちになります。
一度、再生をしてみましょう。
武器がそのまま右手首あたりの上のままあった状態で、モーションが再生されているので、隣のキャラクターのように剣を握っているようになりません。
では、剣を握っているように微調整をしていきます。
アバターの身長や腕の長さで位置はかわってきます。
右手の親指の下あたりに剣の柄がくるといい感じに握ってくれます。以下、本アバターにおいての数値です。
PositionやRotation、Scaleを使って修正してください。
一度、再生して、
しっかり握れていることを確認します。
エフェクトをつける
長い道のりでした。大変お疲れ様です。
では、本記事の目的であるエフェクトをつけましょう。
ご自分の好きなエフェクトを1～21の中からお選びください。
私は火遊びが大好きなので、「effect7」を選びます。
「MeshEffects＞Prefabs＞PC Effects」からお好きなEffectを「Dragonblade」にドラッグアンドドロップします。
ヒエラルキー上の「Effecr7」を選択し、
インスペクター上の「PSMeshRendererUpdater」の「MeshObject」に「Dragonblade」をドラッグアンドドロップします。
そして、「UpdateMeshRenderer」をクリックします。
成功すると、剣から火を出てきます。
お選びいただいたEffectごとでシーンに再生されるものは変わります。
8. デモシーンでの再生
では、シーンを再生してみましょう。
Colorを弄ることで炎の色をかえることができます。
蒼炎というものをやってみたかったので、青色にして、再生してみます。
以上、お好きなようにカスタマイズしてエフェクトを楽しんでください。
EffectのPrefabのなかのパーティクルなどを弄ることで、より細かな演出に拘ることができます。
パーティクルシステムについては下記をご参照ください。
9. Recoderで撮影する
せっかく武器も持てて、モーションできたのに綺麗に撮影ができなければもったいないですね。
参考：
撮影をしてみましょう。
1.「Window」→「PackageManager」を選択します。
2.「Recoder」と入力し、「Install」を選択します。
3.しばらくImportの時間がかかりますので、待ちます。完了したら、PackageManagerを閉じます。
4.「Window」→「General」→「Recorder」→「RecorderWindow」を選択します。
5.「Recording Mode」を「SingleFrame」に変更します。
6.「ImageSequence」を選択します。（Movieを選択すれば動画も撮影できますが本記事では割愛いたします）
7.OutputResoulutionを選択します。FHDを選択します。
8.FormatをJPGからPNGに変更します。
9.初期設定では、保存されるファイルの名前は「image<Take><Frame>+Wildcards.png」で保存されます。
保存先は、プロジェクトのあるフォルダにRecordingsというフォルダが作成され、保存されます。
※変更したい方は変更してください。
赤●のところをクリックすると保存先が開くことができます。
10.シーンビューのFreeAspectをクリックし、「（Recordings resolution）（1920x1080）」に変更します。
11.再生します。GameWindowを大きくして撮影しやすくします。ひとまずこの状態で、撮影してみます。
12.「STARTRECORDING」をクリックすると、その瞬間が撮影されます。
先ほどの赤〇をしている保存先のフォルダを開いてみて、確認してみましょう。
左上のUI操作の部分も撮影されています。
それは「Source」が「GameView」になっているため、「GameView」そのままが撮影されてしまいます。
色々な方法で解決できますが、今回は「Source」を変更することで解決します。
「Caputure」の「Source」を「TargetedCamera」に変更します。
もう一度「STARTRECORDING」をクリックします。
無事にUIがなくなったものを撮影することができました。
以上、カメラの方向の調整、いらないものを消したりして、ベストショットを撮ってくださいね。
※暗すぎる場合は下記の「Directional light」の「Intensity」を調整してください。
おわりに
以上で、「MeshEffects」を使って、Vroidモデルに武器を持たせて動かし撮影しよう！は終わりになります。
長く細かな作業、大変お疲れ様でした。少しでも皆様の制作のきっかけになれば幸いです。
今回の記事だけでは、カメラが狙ったように動かせない、モデルの動きとタイミングがあわない、静止画だけじゃなくてアニメーションを作ってみたい方向けに、
執筆いたしましたので、引き続きご覧ください。
ぜひ様々な制作を楽しんでください。
お読みいただきありがとうございました。
Unity等を作って、自主制作アニメ「おかえりの柳橋さん」や色々な作品をTwitterやYoutubeで発信しておりますので、こちらも見て頂ければ幸いです。
では。
