たぬの技術のメモ帳

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

【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などでご連絡くださいませ。

 

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