たぬの技術のメモ帳

Unity、Vroid、3DCGとかのこと書いていきます。

【ZEPETO】ZEPETOのワールドで、iOS・Android環境でテストをする方法【Unity】

本記事はZEPETOでワールドをアップロードし、テストまで行った方向き及びAndroidユーザーのテスター向けの記事となります。

 

ワールドクリエイターのたぬ(ZEPETOID:tanuh)です。

 

ZEPETOでUnityワールドを作成する際に、審査する前にテストワールドをアップして実機でチェックしなければなりません。

 

また、ZEPETOでのモバイル実機でのワールドテスト環境に困っているという方が何名もいらっしゃったこと、Androidの方にテスターをしてもらう際に困っていたので記事にしました。

 

 

 

 

ZEPETO Studio

「テスト接続リンクをコピーする」をクリックするとクリップボードに、

 

[zepeto://gamesystem/pretest/~~~~~~~~~~]のURIがコピーされます。

 

これをiPhoneなどのiOS端末では、

ZEPETO内のDMで送るとURIが有効になり、下線が引かれておりテストワールドに入ることができます。

しかし、Android環境では現状有効になりません(2022/12/06現在)。また、iOS端末でもDMをわざわざ送るのは面倒です。

まとめますと、

 

  1. Android環境下ではURIが有効にならない(BlueStack、GooglePixel7にて確認)
  2. DMを開放しなければならない。
  3. またはサブアカウントにわざわざ送らなければならない。

 

という問題があります。

 

ではどのように対応すればよいでしょうか。

1.URIを扱えるアプリで起動させる。

DeepLink Executor

DeepLink Executor

  • Mihye Lee
  • 開発ツール
  • 無料

apps.apple.com

アプリストアからインストールして下記のように、

Testの□内に、先程の「zepeto:」のURIをコピーして、貼り付けます。

 

「done」を押すとZEPETOが起動して、テストワールドに入室できます。

なお、ZEPETOで作業中である場合はワールドに強制的に入室するので注意が必要です。

ほかの方を入室したい場合はテスター登録をしてください。

公式ガイドページ「ワールドをテストする」を参照してください。

studio.zepeto.me

play.google.com

インストールして、起動します。

「test:~」の部分をコピーした「zepeto:」に書き換えます。

「GO TO URI」をタップするとZEPETOアプリが起動して、ワールドに入室します。

 

なお、ZEPETOで作業中である場合はワールドに強制的に入室するので注意が必要です。

 

ほかの方を入室したい場合はテスター登録をしてください。

公式ガイドページ「ワールドをテストする」を参照してください。

studio.zepeto.me

 

 

2.iOS端末の人に招待してもらう

非常に面倒ですが、iOSでDMでどなたかが入室し、ワールド内から招待することで、Android端末の方でも入室することができます。

ただし、テスター登録がないと入室ができませんので、事前にテスター登録をするようにしておきましょう。

 


おわりに

以上、テスト環境を快適する方法、iOS端末でもAndroid端末でもテストする方法になります。

 

ワールドで公開する際に複数デバイスでの確認は必要になってきますので、必ずするようにしましょう。

 

 

ほか、Unity初心者向けでUdemyでワールド制作講座を発売してますので、ぜひご覧いただければと思います。

t.co

 

Twitterでいろいろ呟いてます。

では。

twitter.com

 

 

【Unity】ClusterでVroidモデル等のスカートが飛び出る方法を防ぐ方法

はじめに

はじめまして、Unityでアニメとか色々作ったりしてるたぬです。

 

ClusterはQuest2に対応したり、アバター制限解除したりとすごい発展してますね。

 

アバターの「座る」という動作も導入されており、VroidStudioからすぐに出力したものでは、きちんと設定してなければ下図のようにスカートが盛り上がってしまい、恥ずかしかったり、はしたない思いをすることになってしまいますね。

 

 

f:id:tanuh_yy:20220109152944p:plain

 

今回は特にアセットを追加せずにUnityのみで、修正する方法をご紹介したいと思います。

 

 

f:id:tanuh_yy:20220109153104p:plain



解決方法

スカートをコライダーで挟む方法です。

f:id:tanuh_yy:20220111163203p:plain

ほかにも色々手段がありますが、今回はこの方法を紹介いたします。

 

前提

本画面はUnity2020.3.23です。

UnityですでにVRMモデルなどを導入されたことがある方向けに書かせていただきます。

 

VRMモデルの導入の仕方は、

tanuh-yy.hatenablog.com

に記載してありますので、ご覧ください。

 

なお、今回はUniVRM v0.61.1 をUnityに導入しておきます。

上記の記事で導入しているUniVRM v0.66でも動作はしておりますが、Cluster公式の見解は次の通りです。

f:id:tanuh_yy:20220109152545p:plain

https://clusterhelp.zendesk.com/hc/ja/articles/360029465811-%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%A2%E3%83%90%E3%82%BF%E3%83%BC%E3%81%AE%E5%88%B6%E9%99%90

 

Unityで編集したいモデルをドラッグアンドドロップする

SpringBoneの設定を開く

VroidモデルのSpringBoneの設定はモデルのPrefabsの「secondary」にありますので、それを開きます。

f:id:tanuh_yy:20220109154555p:plain

パラメータについて、VirtualCast様より引用

 

Stiffness Force
剛性です。もとに戻る強さを設定します。

Gravity Power
重力の強さです。

Gravity Dir
重力の力の向きを設定します。

Drag Force
抵抗です。強くすれば動きが鈍くなり、弱くすれば軽くなります。

 

 

virtualcast.jp

 

 

※簡単な修正な仕方として、Gravity Powerをあげるだけである程度修正もできます。

 

どんな状態か確認してみましょう。

「DrawGizmo」にチェックをいれておきます。

f:id:tanuh_yy:20220109162254p:plain

再生ボタンを押します。

f:id:tanuh_yy:20220109161359p:plain


「Collider」のHitRadiusのスライダー動かしてみましょう。下図のように大きさがかわります。このサイズも適宜変更しましょう。

f:id:tanuh_yy:20220109162135g:plain

ほかのパラメータも弄ることで、動作を確認できますので、適宜確認してきましょう。

 

※黄色の球が出現しない方は、「DrawGizmo」にチェックをいれておきましょう。

f:id:tanuh_yy:20220109163200p:plain


一度再生をやめましょう。

 

再生中の値をそのまま維持する方法

f:id:tanuh_yy:20220110222816p:plain

通常、再生中にコンポーネント等の値を変更し、停止すると再生前の値にもどります。

f:id:tanuh_yy:20220110223026g:plain

 

毎回メモ等するのは面倒ですので、一つのコンポーネントだけの値をコピーする方法をメモしておきます。

なお、アセットやスクリプトを導入し、エディター拡張をすることで、再生中の値を維持したりすることができます。

また、Unityのバージョンごとで操作や出てくるウィンドウなどに差異がありますので、ご注意ください。

 

本画面はUnity2020.3.23です。

 

再生中に維持したい値が設定できたら、「VRM SpringBone」の赤点のあたりを右クリックし、「Copy Component」をクリックします。

f:id:tanuh_yy:20220110223955p:plain

動画

f:id:tanuh_yy:20220110223607g:plain

 

次に停止し、

f:id:tanuh_yy:20220110224215p:plain

値が元に戻ってることを確認します。

f:id:tanuh_yy:20220110224317p:plain

「Paste Component Values」をクリックします。コンポーネントの値だけをペーストします。

f:id:tanuh_yy:20220110224500p:plain

以上で、再生中の値をペーストすることができます。

 

「Collider」の「ColliderGroups」を見てみる

f:id:tanuh_yy:20220109163445p:plain

「Collider」の「ColliderGroups」のElement0を選択し、「J_Bip_L_UpperLeg」をクリックして、開いてみましょう。

f:id:tanuh_yy:20220109163902p:plain

「J_Bip_L_UpperLeg」の「VRM SpringBoneColliderGroup」には、左腿のに3つのピンク球が設置してあります。

これが「Collider」で、スカートと接触の判定を行っており、めり込みを防止しています。この「Collider」がスカートを突き抜けるとスカートから足が飛び出たり、パンツが見えたり色々まずいことが起きてしまいます。

 

逆にこのコライダーを綺麗に設置できれば貫通を防止できるわけです。

 

今回は座った際にスカートが飛び出る、浮かぶのを防止したいので、スカートを「Collider」で挟みます。

 

「Collider」の追加の仕方

f:id:tanuh_yy:20220109170045g:plain


「Element2」をクリックして、下の「+」マークをクリックします。そうすると「Element2」が複製されます。複製されたものが。「Element3」となります。

一つでも一応効果がありますが、しっかりと止めておきたいので、

f:id:tanuh_yy:20220109170753g:plain

 

3つ追加しておきます。

f:id:tanuh_yy:20220109170931p:plain

f:id:tanuh_yy:20220109170900p:plain

 

同様に右腿も追加します。

f:id:tanuh_yy:20220109171035p:plain

 

VRMでエクスポートする

f:id:tanuh_yy:20220109192800p:plain

ヒエラルキー上でモデルを選択し、上のメニューからエクスポートします。

f:id:tanuh_yy:20220109192934p:plain

問題なければ次のように表示されます。エクスポートをクリックしてください。

 

 

f:id:tanuh_yy:20220109193209p:plain

今回のコライダーの入れ方では、スカートの後ろ部分にコライダーを追加していないため、上図のように椅子につきぬけてしまいます。

 

コライダーをいれ過ぎるとスカートのひらひら感がなくなってしまうのでほどよく、好みで入れるとよいと思います。

 

スカートの後ろ側をコライダーで挟んだり…と解決法は色々あると思いますので、ぜひ色々試行錯誤してください。

 

 

 

追加編 足までコライダーをいれる

f:id:tanuh_yy:20220109194643p:plain

ヒエラルキー上からモデルの「J_Bip_L_LowerLeg」を選択します。

「AddComponent」をクリックして、「VRM SpringBoneColliderGroup」を追加します。

f:id:tanuh_yy:20220109194938p:plain

f:id:tanuh_yy:20220109195714p:plain

コライダーが追加されます。前回と同じように、「+」をクリックしていきます。

f:id:tanuh_yy:20220109200145p:plain

アバターのサイズに準じて、コライダーを追加してください。

ちなみに、私のアバターの「柳橋さん」は身長が140cmちょっとです。

 

右膝にも追加します。

面倒なので、コピーしてやります。

f:id:tanuh_yy:20220109200402g:plain

VRM SpringBoneColliderGroup」の右端にある「」をクリックして、「CopyComponent」をクリックします。

次に、ヒエラルキー上から「J_Bip_R_LowerLeg」をクリックし、赤点のある部分で右クリックをし、「PasteComponentAs New」をクリックします。

f:id:tanuh_yy:20220109200753p:plain

動画

f:id:tanuh_yy:20220109200932g:plain

 

コライダーリストに追加する

これで終了ではありません。作成したコライダーをSkirtのコライダーリストに追加しないと、判定をしてくれません。

f:id:tanuh_yy:20220109201354p:plain

初期設定では、上記のとおり、Upper_legの二つしかありません。「+」を2回押して、

f:id:tanuh_yy:20220109201620g:plain

先ほど作成した「J_Bip_L_LowerLeg」「J_Bip_R_LowerLeg」をリストに追加しましょう。

f:id:tanuh_yy:20220109201931g:plain

 

追記 参考値など

アバターの体型、スカートの形状で大きくことなりますが、参考までに私の設定した値などを記載しておきます。

 

通常座り

f:id:tanuh_yy:20220112232618p:plain

足組

f:id:tanuh_yy:20220112232452p:plain

寝ている状態

f:id:tanuh_yy:20220112232702p:plain

 

f:id:tanuh_yy:20220112232824p:plain

 

コライダーの入れた状態 厳密にいれてません。

f:id:tanuh_yy:20220112232930p:plain

f:id:tanuh_yy:20220112233004p:plain

おわりに

お読みいただきありがとうございました。

SpringBoneを色々工夫することで様々な表現ができるようになります。

スカートの動きだけではなく、髪の貫通防止などもありますので、ぜひチャレンジしていただきたいと思います。

 

皆様の快適で素敵なClusterライフをお送りいただけるように願っております。

 

私はUnity等を作って、自主制作アニメ「おかえりの柳橋さん」や色々な作品をTwitterYoutubeで発信しておりますので、こちらも見て頂ければ幸いです。

 

www.youtube.com

twitter.com

 

使わせていただいた衣装

クレイスSHOP様

crais.booth.pm

【Unity】ノーコードでTimelineとCinemachineでVroidモデルを動かしてアニメーション作ろう!

 

f:id:tanuh_yy:20210816204145g:plain

本記事を読んで作れる作例です 

 

Unity アセット真夏のアドベントカレンダー 2021 Summer!20日目の記事です。

※2022年1月24日修正

 

19日目はゆーじさんの「DOTweenProで文字テキストのアニメーション【TextMeshPro】」です。

21日目はxrdnk さんの「Feel を使ってみよう【Unityアセット真夏のアドカレ】 - デニッキ!」です。

 

はじめに

 はじめまして、Unity等を使って自主制作アニメーションをしている、たぬと申します。 

 

本記事はノーコードでVroidモデル等を動かし、カメラを設置してアニメーションを作成する方法を紹介します。


なお、プロジェクト作成、武器、エフェクトまでは、

tanuh-yy.hatenablog.com

 

前回までをご覧ください。

 

 

 

本記事では次のとおりの環境下で行います。

Unity初級者向けを想定しております。

 

  1. Unity 2019.4.16
  2. Mesh Effects 1.4.1(必須ではないが、エフェクトを導入したい方は導入してください。また武器に関してもMeshEffectsに入っているものを今回は使用します。詳しくは前回の記事をご覧ください。)
  3. UniVRM-0.66.0_39d5(Vroidモデルを使用する場合)
  4. Post Processing Stack 3.0.3
  5. Recorder 3.0.1
  6. Cinemacine 2.6.9
  7. Timeline 1.2.17
  8. Default Playables 1.8
  9. Melee Warrior Animations(※あるいはお好きなモーションパック)
  10. All Sky (※Skybox、背景を変更したい方)

笑門来福メガバンドル」のご紹介

f:id:tanuh_yy:20220124190554p:plain2022年1月24日より笑門来福メガバンドル」が開催されております。

本記事では「Roaringバンドル」に入っている「Melee Warrior Animations」を使用してます。

単品で約25ドルしますが、メガバンドルで購入すると、Melee Warrior Animations」も含まれて、43.99ドルで色々なアセットが入ってるのでとてもお得です。

f:id:tanuh_yy:20220124190912p:plain

アセット一覧

本記事で使うアセットを紹介してまいりたいと思います。

リッチなエフェクトが簡単に実装できる「MeshEffects」

前回の記事でも紹介させていただきましたが、リッチなエフェクトが簡単に実装できてしまう、素晴らしいアセットです。

 

片手剣から両手剣、そして二刀流のモーションが入ってる「Melee Warrior Animations」

試してみたい方は無料版を導入してみてください。本記事では、有料版を使い説明させていただきます。なお、冒頭でもご説明しておりますが、笑門来福メガバンドルを購入した方がお安いです。

一発で背景(Skybox)が変えれる「Allsky」

かっこいい夜空の下で炎の剣を振り回したい!そんな方におすすなのが、

Skyboxを多種多様に変えられるすごい便利なアセットが「Allsky」です。

よくわからないという方はこれもFree版がありますので試してみてください。

 

 

アセット導入等の下準備

 というわけで、下準備をしてまいりましょう。「Timeline」はすでに導入されているので、「Cinemachine」を導入します。

docs.unity3d.com

他のUnityのバージョンをお使いの方はPackageManagerの方から導入してください。

 

 1.「Window」→「PackageManager」を選択します。

f:id:tanuh_yy:20210811163112p:plain

2.左上の部分がUnityRegistryになっていることを確認し、検索タブに.「Cine」と入力し、「Cinemachine」を「Import」します。

f:id:tanuh_yy:20210811172108p:plain

3.Importが完了したら、PackageManagerを閉じて、次にアセットを導入します。

「AssetStore」を開いて、検索してください。導入するものは、

 

「Default Playables」

Timelineを拡張するアセットです。

f:id:tanuh_yy:20210811172918p:plain

f:id:tanuh_yy:20210811172958p:plain

 

「Melee Warrior Animations」

モーションパックです。

※手持ちのモーションパックまたは自作したい方などは省略してください。

なお、無料でお試ししたい方は、

assetstore.unity.com

を導入をおすすめします。

 

f:id:tanuh_yy:20210811173410p:plain

「Import」します。

 

「Prefabs>Vroid」というフォルダを作成します。

f:id:tanuh_yy:20210811174531p:plain

f:id:tanuh_yy:20210811180023p:plain

ヒエラルキーにある「YB_Gospan」を作ったフォルダーにドラッグアンドドロップします。

f:id:tanuh_yy:20210811180210p:plain

OrigunalPrefabかPrefabVariantを作りますか?と聞かれてますので、今回は「PrefabVariant」を選択します。

 

※Prefabについては下記をご参考ください。

qiita.com

 

f:id:tanuh_yy:20210811180439p:plain

「YB_Gospan Variant」が生成されます。


シーンを作る

「File→NewScene」でシーンを作ります。

f:id:tanuh_yy:20210811174326p:plain

YB_Gospan Variant」をヒエラルキードラッグアンドドロップします。

Vroidの導入武器の導入の仕方は前回の記事をごらんください。)

f:id:tanuh_yy:20210811180830p:plain

そして、再生します。シーンビューで寄っていくとこのようなかたちで表示されます。

f:id:tanuh_yy:20210811181831g:plain

一旦、この状態でシーンをセーブをしましょう(Ctrl+S)。

 

3.「Timeline」を表示させます。

「Window」→「Sequencing」→「Timeline」

f:id:tanuh_yy:20210811182108p:plain

 

このように表示されます。ちょっとやりづらいので移動させます。

f:id:tanuh_yy:20210811182244p:plain

「Timeline」のタブをUnity全体の下のあたりにドラッグアンドドロップします。

f:id:tanuh_yy:20210811183228p:plain

このようなレイアウトにします。


5.次に「Melee Warrior Animations」のデモシーンを確認します。

f:id:tanuh_yy:20210811183536p:plain

「Assets>Kevin Iglesias>Melee Warrior Animations」の「Melee Warrior - Demo Scene」を開きます。
※FREE版では異なる部分があります。

f:id:tanuh_yy:20210811184247g:plain

かっこいいモーションがいっぱいありますね。デモシーンの一覧を見て、どんなアニメーションを作りたいかぜひ考えておいてください。

とりあえず一つを確認して、どこになにが格納されているか確認しておきましょう。

f:id:tanuh_yy:20210811190411p:plain

一番左奥の連続で切っている奴が使い勝手が良さそうです。

上記の画像のようにヒエラルキー上の「Attacks」を選択し、インスペクター上の「Animator」の「Controller」の「2H@Attacks」をダブルクリックしてみましょう。

f:id:tanuh_yy:20210811190138p:plain

そうすると、上記のようにAnimatorWindowが開かれ、「Attack01」~「Attack04」まで遷移していることがわかりました。

 

このように気になるモーションはチェックし、メモでもしておきましょう。

 

6.次にTimelineの保存用のフォルダーを作っておきます。

f:id:tanuh_yy:20210811184835p:plain

7.ヒエラルキー上で右クリック→「CreateEmpty」を選択します。

f:id:tanuh_yy:20210811185000p:plain

「GameObject」が作成されるので、SwordAttacksTimeline」と名前を変更しておきます。

f:id:tanuh_yy:20210812151457p:plain

変更後、ヒエラルキー上の「SwordAttacksTimeline」を選択した状態で、画面下部のTimelineWindowにて、「Create」をクリックします

保存先を尋ねられますので、先ほど作った「Timeline」のフォルダに任意の名前をつけて保存をしておきましょう。

f:id:tanuh_yy:20210812151646p:plain

このように、シーケンサーが表示されます。

以上が下準備となります。 

 

Timelineを使って動かしてみよう

さっそくTimelineでモデルを動かしていきたいと思います。「SwordAttacksTimeline」を選択し、Timeline上のいらないものを削除します。下記のように選択して、右クリックをして、「Delete」を選択してください。

f:id:tanuh_yy:20210812151759p:plain

 

ヒエラルキー上の「SwordAttacksTimeline」選択しながら、「YB_Gospan Variant」をTimeline上にドラッグアンドドロップして、「AddAnimationTrack」を選択します。

f:id:tanuh_yy:20210812152240g:plain

次にAnimationClipを追加します。

プロジェクトの中から、

「Assets\Kevin Iglesias\Melee Warrior Animations\Animations\TwoHandedLong」の中の「2HLong@Attack01」の「2HLong@Attack01」AnimationClipを選択します。

 

AnimationClipは三▲」のような水色アイコンがついているものです。

 

f:id:tanuh_yy:20210816224746p:plain

インスペクターに右部に次のように表示されているのを確認してください。

FPSが30であることを確認してください。

違った場合でも動作しないこともないですが、Timeline上でずれや支障を来たす場合があります。

 

※なお、Mixamo等のモーションサイトやBlenderから経由してBVH等をFBX形式でモーションを導入する場合も、Blender上でFPS30にして導入することをお勧めします。

f:id:tanuh_yy:20210812153218p:plain

確認ができましたら、

f:id:tanuh_yy:20210812160916g:plain

「2HLong@Attack01」のAnimationClipを「YB_Gospan Variant」トラックの上にドラッグアンドドロップして、クリップを左につめます。

そして、再生キーを押します(あるいはスペースキー)で動くことをシーン上で確認してください。

 

続いて何個かのアニメーションクリップを追加していきます。

 

f:id:tanuh_yy:20210812163349g:plain

お好きなもの足していってください。TwoHand以外でもOneHandでもかっこいいものがいっぱいあります。

ひとまず、私は以下の構成したいと思います。

f:id:tanuh_yy:20210812163828p:plain

以下の画像をご覧ください。

f:id:tanuh_yy:20210812163746p:plain

前回の記事では、ワンハンドを想定していたものだったため、ツーハンドの武器のモーションでは、ズレが生じます。

こういった問題は早めに解決します。

様々な修正方法がありますが、Timeline上で解決していきたいと思います。

f:id:tanuh_yy:20210812165059g:plain

ヒエラルキー上で「Dragon」と入力し、「Dragonblade」を見つけ出します。そしてTimeline上にドラッグアンドドロップして、「AddAnimationTrack」を選択します。

 

シークバーが一番左端にあり、0になっていることをしっかり確認しておいてください。

f:id:tanuh_yy:20210812174032p:plain

ここの数字の「0」は現在のフレーム数を表しています。シークバーと連動しており、この位置がGameWindowとシーンビューを表示します。

 

次にTimeline上の「Dragonblade」トラックを選択し、

赤い●録画ボタンをクリックします。上記のように、シークバーが左端にあり、0が表示されていることを確認してください。

②その後にトラック上の「Dragonblade」をクリックすると、

ヒエラルキー上の「Dragonblade」が反応しますので、クリックして、インスペクター上の「Dragonblade」録画状態がなります。この位置を変えたりすると反映されるようになります。

f:id:tanuh_yy:20210812172126p:plain

動画ではこのようになります。

f:id:tanuh_yy:20210812170113g:plain

 

ここから微調整をしていきます。

Timeline上での剣(オブジェクト)の微調整

剣のサイズが小さいので大きくし(ScaleのXYZを1.1に変更)、

f:id:tanuh_yy:20210812172403g:plain

剣の下の丸い部分に右手が来るようにします。左手も持てるようにします。

f:id:tanuh_yy:20210812173524p:plain

 

f:id:tanuh_yy:20210812173859p:plain

再度、Timeline上の「Dragonblade」トラックを選択し、①赤い●録画ボタンをクリックし録画を終了します。録画が終わると、トラックの赤色が消えます。

f:id:tanuh_yy:20210812174834g:plain

シークバーを動かしてみましょう。

問題なさそうですが、重大な設定を忘れておりますので、設定をします。

 

TimelineのFrameRateの設定

プロジェクト上から保存したTimelineをインスペクター上に表示させます。

そうするとFrameRateが「60」になっています。AnimationClipのが
「30」で、TimelineのFrameRateが「60」だと不一致を起こし、問題が起こりますので、「30」に変更します

f:id:tanuh_yy:20210812175549p:plain

f:id:tanuh_yy:20210812175941p:plain

60と30では、このように総フレーム数が半分になります。

 

FPS、FrameRateってなんなの?って具体的な説明は割愛させていただきますが、ひとまず一致させてください。

修正しておかないとErrorが出る可能性があります。

 

FPSなどにご興味のある方は、下記をご覧ください。

なお、録画時に「Recoder」で、録画のFPSを変更することもできます。

 

nvr.bz

jennic.com

 

AnimationClipとTimeline上での編集の仕方

さて、その場にいても面白くないので、せっかくなので疾走してから切る動作、同じ切るモーションも少し変えてみたいですね。

f:id:tanuh_yy:20210812181533p:plain

邪魔なトラックは右に寄せておきまして、

「Assets\Kevin Iglesias\Melee Warrior Animations\Animations\TwoHandedLong\Movement」から「2HLong@Sprint01 - Forward」「2HLong@Sprint01 - Forward [RM]をトラック上にドラッグアンドドロップしてみて再生してみましょう。

 

※多くのモーションアセットに歩く走る等のモーションにはRootMotionありなしのものが同封されていますので、その都度、演出したいものを選んでください。

 

f:id:tanuh_yy:20210812181918g:plain

このRMとはRootMotionを意味します。

詳しいことは下記にあります。

docs.unity3d.com

 

最初がRMなし、次RMありです。

 

RMなしは、その場で走っており、移動する距離を自分で設定しなければならない。

RMありは、その場から走って一定量を移動している。

 

つまり、RootMotionがあるものはAnimationClipに移動の距離が記録されており、それが再生されます。

よりわかりやすくするために並べてみましょう。

 

f:id:tanuh_yy:20210812183418p:plain

Timeline上の「YB_Gospan Variant」を選び、Dupulicateを選択します(Ctrl+D)。

 

次に、

ヒエラルキー上の「YB_Gospan Variant」を選び、Ctrl+Dを押して、複製します。

②「YB_Gospan Variant (1)」が作成されます。

③Timeline上の3段目のところに「YB_Gospan Variant (1)」をドラッグアンドドロップします。次に、「2HLong@Sprint01 - Forward」のAnimationClipをクリックして、インスペクター上に表示させます。

f:id:tanuh_yy:20210812183933p:plain

最後に「✙」をクリックしてみてください。シーンビュー上に下記のように表示されます。そして、PositionをX軸に移動させて、再生させてみます。

f:id:tanuh_yy:20210812185033g:plain

そうすると、最初のモーションだけ、X軸に「0.9」移動していたのに、戻ってしまいました。

f:id:tanuh_yy:20210812185649g:plain

これは、次のAnimationClipで、再び「ClipTransformOffsets」の値がゼロになっているからです。

 

f:id:tanuh_yy:20210812185812p:plain

AnimationClip上で右クリックをして、「Match Offsets To Previous Clip」を選択すると、前の座標を引き継いで動作をしてくれます。

 

上記のTimeline上では、

「Match Offsets To Next Clip」を選択すると、選択しているClipの次のAnimationClipのPosition「0,0,0」を引き継いでしまうので、XYZの値は「0」になります。

 

詳しくは下記にマニュアルがあります。

docs.unity3d.com

f:id:tanuh_yy:20210812190335g:plain

面倒なので、一括して「Match Offsets To Previous Clip」を選択します。

再生すると次のとおり最初のアニメーションクリップのX「0.9...」を引き継いだモーションになっていきます。

f:id:tanuh_yy:20210812190542g:plain

「Match Offsets To Previous Clip」をしていない1トラック目は、3クリップ目(Attack01)で原点に戻ってしまいますが、

「Match Offsets To Previous Clip」をした2トラック目は、Positionを引き継いでいます。

 

これで、一個一個の前のクリップの位置を微調整しなくても済む場合が多くなります。

 

さて、「Attack01」をもう少し素早い動きにしたいですね。

しかも二回ぐらい突いてみたいと思います。

f:id:tanuh_yy:20210812190958g:plain

トラック上の「2HLong@Attack01」を選択し、インスペクター上でSpeedMultiplierを「2」にすると、AnimationClipの再生速度が2倍になります。そして、そのClipを右クリックでDuplicateをして、Clipを並べてみましょう。

f:id:tanuh_yy:20210812191454g:plain

このように、2段突きが可能となりました。

個々のSpeedMultiplierを変更していくことで、メリハリのある攻撃が作ることができます。また、同じAnimationClipを違うものに見せていくこともできます。
SpeedMultiplierの値を「0.5」などにするとスローになりますので、ぜひ試してみてください。

 

では、この時点で一度再生してみましょう。

f:id:tanuh_yy:20210812192408g:plain

AnimatorのController

Effectもあって良い感じですが、すべてのClipが再生し終わったあとになんだか見覚えのあるモーションをしています。

※前回の記事の設定をしてない方はすっ飛ばしていただいて、インスペクター上のモデルのAnimatorのControllerを「None」にしてください。

f:id:tanuh_yy:20210812192815p:plain

犯人は、AnimatorのControllerの「Anim3」です。

そこに、AnimationClipファイルである「SwordRotating 1」がTimelineの再生が終わった後に再生されてますので、クリックして、Deleteキーで消して「None」にしておきましょう。

f:id:tanuh_yy:20210813155122p:plain

 

 

シーンビュー上ではよいですが、肝心なGameWindowではすごく遠いですし、

映したいものを写せてないです。

 

そのために、Cinemachineの設定して、かっこよく撮っていきたいと思います。

 

※なお、RootMotionの詳しい内容は下記をご覧ください。

gametukurikata.com

Cinemachineでカメラを設置してみよう

Cinemachineとは?

簡単に言うと、すっごい便利で多機能なカメラです。

では、さっそく設置してまいりましょう。

 

シーンビューの位置をモデルが正面からきっちり入る感じにしておきます。

なぜなら、その”位置、方向”にカメラが設置されるからです。

f:id:tanuh_yy:20210813143012p:plain

上のメニューから、「Cinemachine>CreateVirtualCamera」を選択します。

f:id:tanuh_yy:20210813143329p:plain

と上記のように、「CM vcam1」が追加されます。インスペクターをみると、「CinemachineVirtualCamera」というコンポーネントが追加されています。

 

また、シーンビューでも赤い枠が表示されています。

 

GameWindowにも変化がでています。遠目にはわかりづらいですが、背中を写していたものが、「CM vcam1」に写しているものを写すようになり、モデルが正面を向いています。

 

次に、ヒエラルキー上の「MainCamera」を確認にしましょう。

f:id:tanuh_yy:20210813144038p:plain

「Cinemachine」から「CM vcam1」のようなカメラを追加していくと自動的に「MainCamera」に「CinemachineBrain」が追加されます。

 

※Brain、脳という名前のとおり、関連づいた「Cinemachine」オブジェクトを制御するコンポーネントです。大きな設定はここで行います。しっかりと把握されたい方は下記をご覧ください。

learn.unity.com

 

ヒエラルキー上で「SwordAttacksTimeline」を選択して、Timelineを表示させ、Timeline上の空いてるところで右クリックをし、「Cinemachine Track」を選択します。

f:id:tanuh_yy:20210813144926g:plain

赤色のChinemachineTrackが追加されますので、そこにヒエラルキー上から「CM vcam1」をドラッグアンドドロップして、左に詰めておきます。

 

次にヒエラルキー上のMainCameraを、Timeline上のCinemachineTrackの「None」のところにドラッグアンドドロップします。

f:id:tanuh_yy:20210813154702p:plain

ここの部分が「None」だと反映されません。

なお、複数のカメラを管理する時はよくここが「None」になってる場合がありますので、チェックしてください。

 

では、一度再生してみましょう。

f:id:tanuh_yy:20210813160308g:plain

正面の位置で再生されていますね。

ずれていてもあとで調整できますので気にせず進みましょう。

 

再生中でも保存する機能「SaveDuringPlay」

f:id:tanuh_yy:20210813160604p:plain

インスペクター上にある「CM vcam1」の上の「SaveDuringPlay」にチェックが入っていることを確認してください。

これにチェックがあることで、再生中のカメラの変更が保存されます。

では実際に試してみましょう。

f:id:tanuh_yy:20210813161157g:plain

再生したら、Timeline上の「CMvcam1」クリップをクリックしましょう。

そして、細かな項目を調整していきましょう。

Field Of View(視野角)

インスペクター上にある「Lens」のField Of View(視野角)、以下FOVを「60」から「19」にします。そうすると、一気に近づいたように見えます。

カメラ自体は近づいてはいないのですが、FOVの数値を下げると近づいたように見え、上げると遠くに見えます。

 

具体的には下記をご覧ください。

gameisbest.jp

 

一度再生を止めてみましょう。

f:id:tanuh_yy:20210813162324p:plain

変更されたFOVの値が「19」で保存されています。

また、再生をしてみましょう。次にカメラの位置を変えてみましょう。

PositionとRotation

PositionのXYZをそれぞれ移動させてみましょう。

カメラのPositionとRotationを再生中に好きに変えることができます。

f:id:tanuh_yy:20210813163030g:plain

次にRotationです。

f:id:tanuh_yy:20210813163652g:plain

基本的にPosition、Rotation、FOVを抑えておけば、カメラの設置には困らないと思います。

最初にカメラの位置がずれてしまった方はだいたいの位置をあわせておくとよいでしょう。

 

では次にカメラを増やしたいと思います。

カメラの複数設置とBlendについて

せっかくなので疾走している姿を撮影したいと思います。

正面からではわかりづらいですね。

 

一度再生は止めておきます。

f:id:tanuh_yy:20210813164441p:plain

Timeline上のシークバーを、走っているAnimationClipのところに移動させておきます。

 

その状態で、シーンビューで横から見えるようにしておきましょう。設置してある「CM vcam1」が横から見えるはずです。

f:id:tanuh_yy:20210813165000g:plain

上のメニューから、「Cinemachine>CreateVirtualCamera」を選択します。新たに「CMvcam2」が設置されます。シーンビューに上記のようにカメラの四角形の枠が表示されれば成功になります。

 

ヒエラルキー上のTimelineを選択してみると以前と変わっていません。

なぜならCinemachineトラックに「CMvcam2」をクリップとして追加してないからです。

そのため、次の操作をします。

f:id:tanuh_yy:20210813165523g:plain

CinemachineTrackの「CMvcam1」を選択して、クリップを左に寄せて縮めます。そして、ヒエラルキー上の「CMvcam2」をCinemachineTrackトラックにドラッグして走っている分だけ縮めます。

f:id:tanuh_yy:20210813170045g:plain

走っている様子がよくわかるようになりました。

では、次に切るモーションの時に、左のモデルの顔が切れているのが残念ですので、もう一つカメラを追加していきます。

 

ちょうど、「CMvcam1」が近くにあるので利用しましょう。

ヒエラルキー上の「CMvcam1」を選択して、Ctrl+Dで複製します。「CMvcam1(1)」が生成されます。

次に、Timelineを選択して、「CMvcam1(1)」をCinemachineTrackにドラッグアンドドロップします。

f:id:tanuh_yy:20210813170523g:plain

 

一度再生してみましょう。

f:id:tanuh_yy:20210813170850p:plain

このようになっており、同じカメラを複製しているのでクリップを追加しても切れたままです(※静止画です)。

 

カメラの微調整を行っていきます。 

f:id:tanuh_yy:20210813171520g:plain

ひとまずPositionこのように修正しておきます。

Timeline上で再生してみましょう。

f:id:tanuh_yy:20210813172035g:plain

いいかんじになってきましたね。

ちょっとキャラクターの表情が最後見えないのが残念です。

そういうときに役に立つのがBlendです。

Blend

ではTimelineおよびCinemachineの魅力的な機能、Blendについて説明してまいりたいとおもいます。

公式の説明は以下をご覧ください。

docs.unity3d.com

次のようにします。

f:id:tanuh_yy:20210813172556g:plain

ヒエラルキー上の「CMvcam1(1)」を選択して、Ctrl+Dで複製します。「CMvcam1(2)」が生成されます。

次に、Timelineを選択して、新しくできた「CMvcam1(2)」をCinemachineTrackにドラッグアンドドロップします。

f:id:tanuh_yy:20210813172954g:plain

では、再生して調整してまいりましょう。

f:id:tanuh_yy:20210813173947g:plain

「CMvcam1(2)」をコピーしただけなので、特に変化はありません。

下記のようにPositionを変更して、近づいてみます。

f:id:tanuh_yy:20210813174907g:plain

Timeline上でよくするミス

私がTimelineの編集中よくするミスですが、

 

シークバーの位置と選択されているクリップが一致しておらず、ほかのクリップの数値を変更して、大変な目にあいます。

おそらく、これから作業に入る方にはなにを言っているのかわからないかと思いますが、

 

シークバーの位置がそのままGameWindowおよびシーンビューに反映されますが、Timeline上の選択しているクリップのインスペクター上で見ているものは必ずしも一致しません。

具体的には下記のとおりに、シークバーは16にあり、GameWindow、シーンビュー共に16のカメラとモーションを出力しています。しかし、Timeline上のClipは「2H~」を選択しており、編集できてしましますので、ご注意ください。

f:id:tanuh_yy:20210813175739p:plain

 

 Blendの比較

では、Blend前のものを見ましょう。

f:id:tanuh_yy:20210813180501g:plain

 

Blendします。

Blendの仕方は下記のとおりに、BlendしたいClipを選択し左か右に伸ばしてどこまでBlendするか編集していきます。

f:id:tanuh_yy:20210813180742g:plain

では、再生してみましょう。

f:id:tanuh_yy:20210813181124g:plain

シーンビューも共に見ながら見てください。

二つのカメラの情報がBlendされています。

具体的には、

f:id:tanuh_yy:20210813181420p:plain

f:id:tanuh_yy:20210813181500p:plain

TransformのPositionが上記のようにXYZが移動し、カメラが切り替わるようになっています。このBlendをうまく使うことで様々な画角を作り出すことができます。

せっかくなので、Cinemachineの素晴らしい機能を紹介したいと思います。

 

ブレを作り出す「Basic Multi Channel Perlin」

選択したインスペクター上のNoise から Basic Multi Channel Perlin を選択してください。

手ぶれ機能や揺れや衝撃を再現するものです。

f:id:tanuh_yy:20210813182315g:plain

docs.unity3d.com

 

「6D‗Shake」

f:id:tanuh_yy:20210813183123g:plain

「Handheld_normal_mild」

f:id:tanuh_yy:20210813183205g:plain

6種類ほどのプリセットがあり、自分でも独自のプロファイルが作れますので、細かく設定したい方は作ってください。今回は「Handheld_normal_mild」を使用してみます。

 

では、ここまできたものを再生してみましょう。

f:id:tanuh_yy:20210813183538g:plain

良い感じになってきました。そのほかCinemachineの機能にはLookAt等便利な機能もありますので、ご興味のある方は下記をご参照ください

 

nopitech.com

 

録画前の仕上げ

さて、だいたいかたちになってきましたが、ここから録画前の仕上げしていきたいと思います。

まず、二人いるモデルを一人にしましょう。

f:id:tanuh_yy:20210816164438p:plain

無くしたいトラック上で右クリック、「M」のMuteを選択し、再生されないようにします。そうすることで、再生されないようにできます。

失敗したと思ったBlendやクリップの組み合わせでも後から考えるとよかったな~と思うことがありますので、一度トラックごと複製しておいて保存してミュートしておいてもよいでしょう。

 

f:id:tanuh_yy:20210816164609p:plain

ミュートにしても、モデルは消えません。なぜならヒエラルキー上のモデルは残っていますので、モデルの表示を消しましょう。

「YB_Gospan Variant」のチェックを外し、「YB_Gospan Variant(1)」のみを表示します。

f:id:tanuh_yy:20210816165036p:plain

では再生して確認してみましょう。

f:id:tanuh_yy:20210816165546g:plain

一人になったことですっきりしましたね。

しかしせっかくのエフェクトがあるのに、明るいのは残念です。

 

背景の変更

背景を暗くする方法

Skyboxを使わずに暗くしたいという方は次のことをしてください。

f:id:tanuh_yy:20210816171235p:plain

ヒエラルキー上の「MainCamera」から「Camera」のコンポーネントの「ClearFlags」を「SolidColor」に、変更します。

f:id:tanuh_yy:20210816171517p:plain

「ClearFlags」の下にある「Background」をお好きなの色に変更してください。ひとまず真っ黒にしましょう。

 

 再生しましょう。

f:id:tanuh_yy:20210816172234g:plain

いい感じになってきましたが、なにか忘れていませんか?

 

アンチエイリアスの設定とポストプロセスを導入しておりません。

では、導入していきましょう。 

なお、Skyboxを変更するつもりがない方は次項を飛ばしてください。

 

Skyboxを変更する

かっこいい夜空の下で炎の剣を振り回したい!

そんなあなたに、11ドルでSkyboxが200種類以上。簡単に風景が変えられるすごい便利な「Allsky」です。

Free版もありますのでぜひ試してみてください。

 

f:id:tanuh_yy:20210818173756p:plain

AssetStoreから「AllSky」を「Import」します。なお、AllSky+200の場合は約3.9Gありますので、休憩でも取ってお待ちくださいね。

f:id:tanuh_yy:20210818182001p:plain

「Window」→「Rendering」→「Lighting Setting」

f:id:tanuh_yy:20210818182131p:plain

f:id:tanuh_yy:20210818182305p:plain

お好きなのをお選びください。

f:id:tanuh_yy:20210818182654p:plain

MainCameraの「ClearFlags」が「Skybox」になっていることを確認してくださいね。 

PostProcessとAnti-aliasing

ポストプロセスを導入されてない方は前回の記事をご覧ください。PackageManagerから導入できます。

tanuh-yy.hatenablog.com

 

 「AddComponent」で「Post」と入力し「Post-processLayer」を追加し、

f:id:tanuh_yy:20210816173155p:plain

 

f:id:tanuh_yy:20210816173424p:plain

「Layer」「Default」を一時的に設定します。 

「Anti-Aliasing」に「SMAA」を設定します。

スペックや状況に応じて設定してください。スペックが低い場合は「FXAA」をおすすめします。

 

それぞれの設定は下記のとおりになっています。

  • Fast Approximate Anti-aliasing (FXAA) - モーションベクトルをサポートしないモバイルとプラットフォーム向けの高速アルゴリズム
  • Subpixel Morphological Anti-aliasing (SMAA) - モーションベクトルをサポートしないモバイルやプラットフォーム向けの、高品質だが低速のアルゴリズム
  • Temporal Anti-aliasing (TAA) - モーションベクトルを必要とする高度な技術。デスクトップとコンソールプラットフォームに最適。

 creator.cluster.mu

docs.unity3d.com


 次にヒエラルキー上で右クリックで、「CreateEmpty」を選択し、「GameObject」を作成します。

f:id:tanuh_yy:20210816173636p:plain

そのGameObjectを選択して「AddComponent」で「Post」と入力し「Post-processVolume」を追加します。

f:id:tanuh_yy:20210816173849p:plain

 

MeshEffects導入済みの方は次の通りです。

f:id:tanuh_yy:20210816174203p:plain

前回使用したPostProcessProfileをそのまま流用します。プロジェクトの上記のフォルダから、ドラッグアンドドロップしてください。そうすれば設定完了です。

なお、「Is global」のチェックは忘れないでください。

 

そうでない方はご自分で設定しなければならないです。

f:id:tanuh_yy:20210816174418p:plain

「New」をクリックして、プロファイルを作ります。

f:id:tanuh_yy:20210816174523p:plain

好みが非常に左右されますので、お好きなとおりにやっていただくのが一番です。また、その時々で最適なポストプロセスは違うと考えています。

 

ですので、上記のとおり「AddEffect」をクリックして、ポストプロセスを追加していってください。

※参考までに私が作ったものを掲載しておきます。

f:id:tanuh_yy:20210816175059p:plain

f:id:tanuh_yy:20210816175212p:plain

 

では、再生してみましょう。

f:id:tanuh_yy:20210816175418g:plain

よくなってきてますね。ですがもっと見せ場が欲しい!そう思ってしまうのは私だけでしょうか。

 

そんな方がいましたら、Timelineの素晴らしい機能「TimeDilationTrack」の出番です。

これは最初に導入した、「DefaultPlayable」に搭載されているものです。

時間を操作する「TimeDilationTrack」

f:id:tanuh_yy:20210816175745p:plain

空いてるトラック上で右クリック「TimeDilationTrack」を選択します。

f:id:tanuh_yy:20210816175947p:plain

白いトラックが追加されますので、さらにこのトラック上で右クリックをして「AddTimeDilationClip」を選択します。

f:id:tanuh_yy:20210816180145p:plain

白色のTimeDilationClipを選択し、赤線を引きましたTimeScaleをご覧ください。

「1」と入力されています。これを「2」にしてみましょう。

f:id:tanuh_yy:20210816181100g:plain

上記の動画ではコマ飛びしていてTimeDilationClipに入った部分が2倍速になってることがわかりづらいですが、

これでTimeline上の全体の時間の速さが操作できます。

便利な反面、全体の時間の速さがかわってしまうというのは困ることもありますので、要所で使っていくことをお勧めします。

また、CinemachineTrack同様にBlendもできますので、Clip間同士の流れをなめらかにすることもできます。

f:id:tanuh_yy:20210816181657g:plain

TimeScaleを「0.3」から「2」にBlendしたものです。

このようにして、緩急をつけていくとメリハリのあるアニメーションになっていくはずです。

f:id:tanuh_yy:20210816183007p:plain

適度に追加していきます。

 

「Easy in Duration」と「Easy Out Duration」について

上記のように、急にTimeScaleが違うTimeDilationClipが来ると、画面の速さがかわってしまい違和感を抱きやすいです。

「Easy in Duration」と「Easy Out Duration」を使ってみましょう。

多くのトラックで使えますし、重要な働きをします。

f:id:tanuh_yy:20210816183603g:plain

□のClipが台形になりましたね。

詳しくは下記をご覧ください。

docs.unity3d.com

 

では、今まで例をあげた機能をつかって、仕上げをしていきましょう。

f:id:tanuh_yy:20210816192503g:plain

 

 

Recoderで撮影する

では、Recoderを使って動画を撮影しましょう。

途中までは前回の記事と同様ですので、導入済みの方は流しながらご覧ください。

 

 参考:

dkrevel.com

 

1.「Window」→「PackageManager」を選択します。

f:id:tanuh_yy:20210801215353p:plain

2.「Recoder」と入力し、「Install」を選択します。

f:id:tanuh_yy:20210801220249p:plain

3.しばらくImportの時間がかかりますので、待ちます。完了したら、PackageManagerを閉じます。

4.「Window」→「General」→「Recorder」→「RecorderWindow」を選択します。

f:id:tanuh_yy:20210801221038p:plain

 

 

ここから前回とは違う点になります。

「AddRecoder」をクリックして、「Movie」選択します。

f:id:tanuh_yy:20210816193025p:plain

5.「Recording Mode」を「FrameInterval」に変更します。

f:id:tanuh_yy:20210816193508p:plain

「Start」を、撮り始めたいフレーム、

「End」を、撮り終わりたいフレームまでに入力します。

 

今回は、「0」~「180」を指定します。

 

次に「Target FPS」を30にします。

※録画のFPSを変更されたい方はここを変更してください。よくわからない方は「30」のままにしてください。

 

「Image Seguence」のチェックを外します。

「Movie」にチェックを入れます。

 

「Capture」を「Tageted Camera」に変更しておきます。

「OutputResoulution」で解像度を変更できますが、今回は1920*1080のGameWindowの設定のままでいきます。

 

「OutputFile」も特に変更する必要もありませんが、保存先などを変更されたい方は「Path」の「...」をクリックして、変更してください。

初期設定では、「Recodings」というフォルダがプロジェクトフォルダに生成され「.mp4」で保存されます。

□→マーク部分で保存先を開くことができます。

f:id:tanuh_yy:20210816194349p:plain


では、撮影を開始しましょう。

「STARTRECODINGS」をクリックで再生され、撮影が開始されます。

再生と同時に録画をしますのでパソコンに負荷がかかります。

 

f:id:tanuh_yy:20210816194659p:plain


撮影が終了したら、再生を止めて、ファイルを確認しましょう。

f:id:tanuh_yy:20210816194948p:plain

「Movie_001.mp4」ができあがっていたら、無事撮影は終了です。

 

大変お疲れ様でした。

 

では、出来上がった動画を見ていきましょう。

 

youtu.be

 

炎を切る感じがよいですね。

 

 

最後に使用アセットの紹介です。

2022年1月24日より笑門来福メガバンドル」が開催されております。とにかくお得なのでおすすめです(2022年2月8日まで)。

 

 

・エフェクト

・モーション

Free版

・背景

 

Free版

 

おわりに

長く細かな作業、大変お疲れ様でした。

TimelineやCinemachineの機能は無限大です。

 

ぜひ、他のアセットと組み合わせり、独自のアニメーションを撮影してください。

 

皆様のアニメーションを楽しみにしております。

 

お読みいただきありがとうございました。

 

 

私はUnity等を作って、自主制作アニメ「おかえりの柳橋さん」や色々な作品をTwitterYoutubeで発信しておりますので、こちらも見て頂ければ幸いです。

 

twitter.com

 

www.youtube.com

 

なお、記事を見てアニメーションを作ったよ!って、言ってくださるとすっごい喜びますので、Twitterなどでご連絡くださいませ。

 

 では、またお会いできる日を楽しみしております。

【Unity】MeshEffectsを使って、Vroidモデルに武器を持たせて動かし撮影しよう!

 

f:id:tanuh_yy:20210803214702p:plain

 

Unity アセット真夏のアドベントカレンダー 2021 Summer!」 10日目の記事です。

 

9日目はkakoさんの「ShapesでDOTweenのすゝめ」です。

明日はAmeoさんの「Curvyを使って3D横スクロールステージを作ろう!」です。

 

はじめに

 

 

プロジェクトの作成から「MeshEffects」を導入し、Vroidモデルに武器を持たせ動かし、撮影する方法を紹介します。
※Vroidモデルは他のモデルに変更することも可能です。

 

 

はじめまして、Unity等を使って自主制作アニメーションをしている、たぬと申します。 

 

 

本記事では次のとおりの環境下で行います。

Unity初級者向けを想定しております。

  1. Unity 2019.4.16
  2. Mesh Effects 1.4.1
  3. UniVRM-0.66.0_39d5(Vroidモデルを使用する場合)
  4. Post Processing Stack 3.0.3
  5. Recorder 3.0.1

1.「MeshEffects」の概要

リッチなエフェクトが簡単に実装できてしまう、素晴らしいアセットです。

以下、公式の動画になります。

 

youtu.be

 

かっこいいですね。

こういったことを自分の好きなモデルできないものかと考えてしまいます。

「MeshEffects」なら、そんな願いをすぐ叶えてくれます。

 

アセットストアの「MeshEffects」のページを見ておきましょう。

 

 

このパッケージには 21 のメッシュエフェクトが含まれています。

注:アップグレードする前に、古いバージョンのパッケージを削除する必要があります。

URPHDRP には、プロジェクトフォルダに含まれているインポートパッチが必要です。Unity 2019.2.19f 以降で利用可能な URP および HDRP レンダリング

PC / コンソール / Motules / VR に対応しています。
2D スプライトでは動作しません

PC デモ
モバイルデモ

- 購入後そのまま使用可能(ドラッグアンドドロップのみ)
- どんな色もワンクリック
- 実際のメッシュサイズに対するエフェクトスケール
- 「メッシュレンダラー」と「スキンメッシュレンダラー」で動作
- デモシーンには(アニメーション / キャラクター / 武器 / 環境)が含まれます
重要!Unity3d はサブメッシュ当たり 1 つ以上のマテリアルはサポートしません。正しく機能させるには、サブメッシュを分割する必要があります。

(AssetStoreからの引用文)

 

 とありますように、

21種類のメッシュエフェクト

・Built-in RPに加え、URPHDRP で使用可能

PC / コンソール / Motules / VR に対応

 

Timeline上でモーションやエフェクトに手を加えたり、テクスチャを変更することで大きく表現の幅が広がり、ゲーム内でのカットシーンでも活躍することでしょう。

 

2.「プロジェクト」の作成

3Dを選択し、お好きなプロジェクト名を入力してください。保存先を選び、作成をクリックしてください。

f:id:tanuh_yy:20210729183029p:plain

本作業では、レイアウト下記のように配置しています。レイアウトが設定については、次をご参照ください。

 

freesworder.net

右上から「2by3」を選択します。

f:id:tanuh_yy:20210729183653p:plain

f:id:tanuh_yy:20210729183807p:plain

 

上記のようになれば、成功です。

 

3.「MeshEffects」の導入

AssetStoreのウィンドウを表示させます。

f:id:tanuh_yy:20210729184343p:plain

検索から「MeshEffects」を入力、検索してでてきたものをクリックすると

f:id:tanuh_yy:20210729184514p:plain

※記事作成時にセールだったため、価格が半額で表示されています(20210730)。

f:id:tanuh_yy:20210729184726p:plain

「Import」画面がポップアップされますので、「Import」をクリックしてください。購入されてない方は購入してください。

f:id:tanuh_yy:20210729185052p:plain

「Import」をクリックしてください。すぐに「Import」されますので、完了までしばらくお待ちください。

 

4. デモシーンの確認

1.AssetStoreの画面はいらないので、Sceneに切り替えます。

2.プロジェクトのファイルが見づらいので〇を「←」によせておきます。また、レイアウトを微調整していきます。このあたりはやりやすいようにお好きにしてください。

3.「Impot」に成功していると、「KriptoFX」というフォルダができているはずなので、

「KriptoFX」→「MeshEffect」と開きます。

4.「PC_Demo」を選択します。

f:id:tanuh_yy:20210729185734p:plain

 

f:id:tanuh_yy:20210729190358p:plain

 

f:id:tanuh_yy:20210729190745p:plain

「Please read the readme :) 」とのことなので、ReadMeを読んでおきましょう。

今回の記事で必要な部分の要点をまとめますと 、

・正しく動作させるには"\Assets\KriptoFX\MeshEffect\PostProcess Profile.asset"を導入して、デモシーンのようにします。

EffectのPrefabをエフェクトをつけたいオブジェクトにドラッグアンドドロップします。次に、設置したメッシュオブジェクト"PSMeshRendererUpdater"の "Update Mesh Renderer"をクリックします。

そうすると、パーティクルとマテリアルが自動でオブジェクトに追加されます。

 

まず、さっそく再生ボタンをクリックして、プレイしてみましょう。

f:id:tanuh_yy:20210729191214p:plain

エフェクトが適応された剣を振り回す男「Character(Clone)」と球「TestSphere(Clone)」が表示されるはずです。

 

f:id:tanuh_yy:20210729191608p:plain

 左側の赤〇部分で、色の変化やエフェクト21種類をプレビューできますので、お試しください。

 

この状態では問題があります。

一度再生をやめて、ヒエラルキーの「PostProcessing」を選択してください。

f:id:tanuh_yy:20210729193308p:plain

ScriptがMissingとなっていますので、「PostProcessingStack」を導入することで、解決します。

「PostProcessingStack」は、画面に様々な変化を与えてくれる機能です。

 

※詳しく知りたい方は下記URLをご参照ください。

docs.unity3d.com

 

creator.cluster.mu

 

 

5. 「Post Processing」の導入

1.「Window」→「PackageManager」を選択します。

f:id:tanuh_yy:20210729193810p:plain

左上の部分がUnityRegistryになっていることを確認し、検索タブに「post」と入力します。

f:id:tanuh_yy:20210729193958p:plain

f:id:tanuh_yy:20210729194202p:plain

上記のように表示されているのを確認し、「Install」をクリックします。

 

f:id:tanuh_yy:20210729194826p:plain

ScriptがMissingが「Post-processVolume」と表示されるようになっています。

 

 

ConsoleにErrorが出続ける場合があります。次のように対応してください。

NullReferenceException: Object reference not set to an instance of an object.
UnityEngine.Rendering.PostProcessing.AmbientOcclusion.IsEnabledAndSupported
.」のErrorが出た場合の対処法

 f:id:tanuh_yy:20210729202823p:plain

ヒエラルキーから「Camera」→「Camera」を選択、「Post-processLayer」を「RemoveComponent」します。

f:id:tanuh_yy:20210729203406p:plain

 「AddComponent」で「Post」と入力し「Post-processLayer」を追加し、

f:id:tanuh_yy:20210729203308p:plain

f:id:tanuh_yy:20210729204230p:plain

1.「Layer」「Default」を一時的に設定します。 

 

2. 「Anti-Aliasing」に「SMAA」を設定します。

スペックや状況に応じて設定してください。スペックが低い場合は「FXAA」をおすすめします。

 

それぞれの設定は下記のとおりになっています。

  • Fast Approximate Anti-aliasing (FXAA) - モーションベクトルをサポートしないモバイルとプラットフォーム向けの高速アルゴリズム
  • Subpixel Morphological Anti-aliasing (SMAA) - モーションベクトルをサポートしないモバイルやプラットフォーム向けの、高品質だが低速のアルゴリズム
  • Temporal Anti-aliasing (TAA) - モーションベクトルを必要とする高度な技術。デスクトップとコンソールプラットフォームに最適。

 creator.cluster.mu

docs.unity3d.com


 

次にヒエラルキーにある「PostProcessing」→「Post-processVolume」を「RemoveComponent」します。

f:id:tanuh_yy:20210729224726p:plain

 

  「AddComponent」で「Post」と入力し「Post-processVolume」を追加します。

f:id:tanuh_yy:20210729224938p:plain

f:id:tanuh_yy:20210729195703p:plain

プロジェクトの「MeshEffect」内にある「PostProcess Profile」を「None(PostProcess Profile)」にドロップ&ドラッグします。

f:id:tanuh_yy:20210729195750p:plain

 

f:id:tanuh_yy:20210729200711p:plain

「Is Global」にチェックをいれましょう。

 

成功すると、赤まるのColorGradingBloomが追加されます。「AddEffect」をクリックすると、他のエフェクトが追加できますが、今回は追加せずにいきましょう。

 

※いろいろ弄りたい方は、下記URLをご参照ください。ほかアセットでも追加できますので、ぜひ色々なポストプロセスを楽しんでください。

 

docs.unity3d.com

  
再生して、Errorが出ないことを確認してください。

 

f:id:tanuh_yy:20210729225418p:plain

 

※参考にさせていただいたもの

kamishirolab.com

 

6. Vroidモデルの導入

 Vroidモデルを導入するために、UniVRMを導入します。

モデルを、アセットストアやMixamo等で導入する方はアセットストアから適宜Importしてください。

下記URLの最下部にある、

github.com

f:id:tanuh_yy:20210730152450p:plain

UniVRM-0.66.0_39d5.unitypackage」を導入します。ダウンロードし、デスクトップ等に保存したら、

画面上から「Assets」→「ImpottPackage」→「CustomePackage」を選択します。

f:id:tanuh_yy:20210730152841p:plain

先ほどダウンロードした、「UniVRM-0.66.0_39d5.unitypackage」を選択して、

f:id:tanuh_yy:20210730153229p:plain

「Import」します。

f:id:tanuh_yy:20210730153439p:plain

上記の3つのフォルダが追加されます。

続いて、モデルを保存するためのフォルダを作成します。

プロジェクトの「Assets」上で右クリック→「Create」→「Folder」を選択します。

f:id:tanuh_yy:20210730152121p:plain

「NewFolder」というフォルダが作成されますので、とりあえず、「Vroid」と命名しておきます。

f:id:tanuh_yy:20210730153804p:plain

あらかじめ「VroidStudio」等から、モデルをVRM形式でエクスポートしておきます。f:id:tanuh_yy:20210730154443p:plain

なお、今回はHulaFlatWorks様の衣装をお借りしております。

hulaflat.booth.pm

※VroidStudioでのモデルの説明ついては下記をご参照ください。

vroid.com

 

「Vroid」フォルダを選択した状態で、

f:id:tanuh_yy:20210730154130p:plain

エクスポートしたVRM形式のファイルをドラッグアンドドロップします。

f:id:tanuh_yy:20210730154941p:plain

Importに時間がかかりますので、しばらく待ちます。成功すると下記のようにファイルが生成されます。

f:id:tanuh_yy:20210730155140p:plain

青い箱のPrefabの「YB_Gospan」をヒエラルキードラッグアンドドロップします。

そうすると、下記のように表示されるはずです。

f:id:tanuh_yy:20210730155539p:plain


一度シーンを再生してみましょう。

f:id:tanuh_yy:20210730160111p:plain

「Tポーズ」を取ったモデルが画面に表示されれば、Importは成功しています。

 

7. モーション、エフェクト、武器の確認・設定

ではここから、デモシーンのようにキャラクターのように武器を持たせ動かしたいと思います。

 

一度再生してみて、デモシーンのキャラクターがどのような振る舞いをしているのか、「Inspector」を見てみましょう。

f:id:tanuh_yy:20210730161529p:plain

アニメーションシステムをコントロールしている「Animator」という「Component」の「Controller」に「Anim1」というものが設定されています。

 

また、「ME_AnimatorEvents」のなかの、

 

「EffectPrefab」に「Effect1」

「SwordPrefab」に「Dragonblade」

 

が設定されています。それぞれをクリックしてみましょう。

 

「Effect1」

1~21のエフェクトのPrefabが「MeshEffects>Prefabs>PCDemos」に格納されているがわかりました。

f:id:tanuh_yy:20210730161810p:plain

 

「Dragonblade」をクリックするとシーン上に選択された状態になり、「MeshEffects>DemoResources>Prefabs」に格納されていることがわかりました。

f:id:tanuh_yy:20210730162042p:plain

 

順にこの3つをモデルに配置すれば、同じようなことができそうです。

では、やってみましょう。

 

 

モーションの設定

プロジェクトの「MeshEffects>DemoResources>Animation」を開きます。「Animator」Windowが表示されます。

 

「Anim1」

f:id:tanuh_yy:20210730165030p:plain

 

「Anim2」

f:id:tanuh_yy:20210730165126p:plain

のように設置されています。

 

「Anim2」を元に新たな「Controller」を作成します。

「Anim2」を選択した状態で、「Ctrl+D」を押して、ファイルを複製します。

f:id:tanuh_yy:20210730165632p:plain

「Anim3」が生成されます。そこに、AnimationClipファイルである「SwordRotating 1」をドラッグアンドドロップします。

 

f:id:tanuh_yy:20210730170204p:plain

以下のようになります。

f:id:tanuh_yy:20210730170516p:plain

橙色の「idle」の上で右クリックをします。

f:id:tanuh_yy:20210730170632p:plain

「MakeTansition」を選択します。

f:id:tanuh_yy:20210730170740p:plain

→が表示されますので、「SwordRotating 1」を選択し、上記のようにつながった状態にします。

 

 

f:id:tanuh_yy:20210730163155p:plain

ヒエラルキーの「YB_Gospan」を選択し、インスペクターの「Animator」の「Component」を確認します。

「Controller」が「None」になっていますので、●をクリックして、「Anim3」 を選択します。

f:id:tanuh_yy:20210730171921p:plain

選択後、再生してみましょう。

f:id:tanuh_yy:20210730172046p:plain

このように、Animationの矢印が遷移し、Game画面で剣を振り回す動作「SwordRotating 1」をしていれば、「Animator」の「Controller」の作成は完了です。

このように、AnimationClipを追加していけば簡単にモーションを追加していけれます。アセットストアには無料有料の様々なモーションがおいてありますので、ぜひチャレンジしてください。

 

なお、本記事投稿日時点で、アニメーションアセットが無料(2021/08/16まで)になりますので、ぜひ入手されることをおすすめします。

クーポンコードの入力をくれぐれをお忘れないようにしてください。

 

 


Animatorの詳しい使い方については下記をご参照ください。

light11.hatenadiary.com

 

「ReadMe」の文字も必要ないと思いますので、ヒエラルキーからチェックを外しておきます。

f:id:tanuh_yy:20210730172547p:plain

 

 武器の配置

プロジェクトから「dragon」と検索し、「Dragonblade」のPrefabを見つけ、

f:id:tanuh_yy:20210730174007p:plain



f:id:tanuh_yy:20210730174801p:plain

「YB_Gospan」の「Root」から順に開いていき「J_Bip_R_Hand」「Dragonblade」ドラッグアンドドロップします。

f:id:tanuh_yy:20210730175047p:plain

「Dragonblade」が離れた位置にありますので、

f:id:tanuh_yy:20210730175228p:plain

f:id:tanuh_yy:20210730175301p:plain

PositionをすべてXYZの値を0にします。そうすると、以下のように表示されます。

f:id:tanuh_yy:20210730175403p:plain

Tポーズを取ったモデルの右手(「J_Bip_R_Hand」)の上に剣が載っているかたちになります。

一度、再生をしてみましょう。

f:id:tanuh_yy:20210730175613p:plain

武器がそのまま右手首あたりの上のままあった状態で、モーションが再生されているので、隣のキャラクターのように剣を握っているようになりません。

 

では、剣を握っているように微調整をしていきます。

f:id:tanuh_yy:20210730180732p:plain

 

アバターの身長や腕の長さで位置はかわってきます。

右手の親指の下あたりに剣の柄がくるといい感じに握ってくれます。以下、本アバターにおいての数値です。

PositionやRotation、Scaleを使って修正してください。

f:id:tanuh_yy:20210730180827p:plain

一度、再生して、

f:id:tanuh_yy:20210730180934p:plain

しっかり握れていることを確認します。

 

 エフェクトをつける

 長い道のりでした。大変お疲れ様です。

では、本記事の目的であるエフェクトをつけましょう。

ご自分の好きなエフェクトを1~21の中からお選びください。

f:id:tanuh_yy:20210730182032p:plain

私は火遊びが大好きなので、「effect7」を選びます。

 「MeshEffects>Prefabs>PC Effects」からお好きなEffectを「Dragonblade」にドラッグアンドドロップします。

f:id:tanuh_yy:20210730182252p:plain 

ヒエラルキー上の「Effecr7」を選択し、

f:id:tanuh_yy:20210730182703p:plain

インスペクター上の「PSMeshRendererUpdater」の「MeshObject」「Dragonblade」をドラッグアンドドロップします。

 

そして、「UpdateMeshRenderer」をクリックします。

f:id:tanuh_yy:20210730183118p:plain

成功すると、剣から火を出てきます。

お選びいただいたEffectごとでシーンに再生されるものは変わります。

 

8. デモシーンでの再生

では、シーンを再生してみましょう。

f:id:tanuh_yy:20210730183505p:plain

f:id:tanuh_yy:20210730183611p:plain

Colorを弄ることで炎の色をかえることができます。

f:id:tanuh_yy:20210803214014p:plain

蒼炎というものをやってみたかったので、青色にして、再生してみます。

 

f:id:tanuh_yy:20210730184441p:plain

 

youtu.be

 

以上、お好きなようにカスタマイズしてエフェクトを楽しんでください。


EffectのPrefabのなかのパーティクルなどを弄ることで、より細かな演出に拘ることができます。

f:id:tanuh_yy:20210730184712p:plain
パーティクルシステムについては下記をご参照ください。

docs.unity3d.com

 

 

 

9. Recoderで撮影する

せっかく武器も持てて、モーションできたのに綺麗に撮影ができなければもったいないですね。

 

 参考:

dkrevel.com

 

撮影をしてみましょう。

1.「Window」→「PackageManager」を選択します。

f:id:tanuh_yy:20210801215353p:plain

2.「Recoder」と入力し、「Install」を選択します。

f:id:tanuh_yy:20210801220249p:plain

3.しばらくImportの時間がかかりますので、待ちます。完了したら、PackageManagerを閉じます。

4.「Window」→「General」→「Recorder」→「RecorderWindow」を選択します。

f:id:tanuh_yy:20210801221038p:plain

5.「Recording Mode」を「SingleFrame」に変更します。

f:id:tanuh_yy:20210801221353p:plain

6.「ImageSequence」を選択します。(Movieを選択すれば動画も撮影できますが本記事では割愛いたします)

f:id:tanuh_yy:20210801221525p:plain

7.OutputResoulutionを選択します。FHDを選択します。

f:id:tanuh_yy:20210801221751p:plain

8.FormatをJPGからPNGに変更します。

f:id:tanuh_yy:20210801221955p:plain

9.初期設定では、保存されるファイルの名前は「image<Take><Frame>+Wildcards.png」で保存されます。

保存先は、プロジェクトのあるフォルダにRecordingsというフォルダが作成され、保存されます。

※変更したい方は変更してください。

赤●のところをクリックすると保存先が開くことができます。

f:id:tanuh_yy:20210801222217p:plain

10.シーンビューのFreeAspectをクリックし、「(Recordings resolution)(1920x1080)」に変更します。

f:id:tanuh_yy:20210801222929p:plain

11.再生します。GameWindowを大きくして撮影しやすくします。ひとまずこの状態で、撮影してみます。

f:id:tanuh_yy:20210801223924p:plain

12.「STARTRECORDING」をクリックすると、その瞬間が撮影されます。

f:id:tanuh_yy:20210801224402p:plain

先ほどの赤〇をしている保存先のフォルダを開いてみて、確認してみましょう。

左上のUI操作の部分も撮影されています。

それは「Source」が「GameView」になっているため、「GameView」そのままが撮影されてしまいます。

f:id:tanuh_yy:20210801224149p:plain

色々な方法で解決できますが、今回は「Source」を変更することで解決します。

「Caputure」の「Source」「TargetedCamera」に変更します。

f:id:tanuh_yy:20210801224515p:plain

もう一度「STARTRECORDING」をクリックします。

f:id:tanuh_yy:20210801224714p:plain

 

無事にUIがなくなったものを撮影することができました。
以上、カメラの方向の調整、いらないものを消したりして、ベストショットを撮ってくださいね。

※暗すぎる場合は下記の「Directional light」「Intensity」を調整してください。

f:id:tanuh_yy:20210803214523p:plain

 

f:id:tanuh_yy:20210803214702p:plain

 

 

 

 

 おわりに

以上で、「MeshEffects」を使って、Vroidモデルに武器を持たせて動かし撮影しよう!は終わりになります。

 

長く細かな作業、大変お疲れ様でした。少しでも皆様の制作のきっかけになれば幸いです。

 

今回の記事だけでは、カメラが狙ったように動かせない、モデルの動きとタイミングがあわない、静止画だけじゃなくてアニメーションを作ってみたい方向けに、

 

tanuh-yy.hatenablog.com

 

執筆いたしましたので、引き続きご覧ください。

 

ぜひ様々な制作を楽しんでください。

 

お読みいただきありがとうございました。

 

 

www.youtube.com

  

Unity等を作って、自主制作アニメ「おかえりの柳橋さん」や色々な作品をTwitterYoutubeで発信しておりますので、こちらも見て頂ければ幸いです。

 

では。