【Unity】Cinemachineでディゾルブ(dissolve)を実装する方法!!Timelineで簡単制御

どうも、コニーです

 

この記事では

UnityのCinemachineでディゾルブを実装する方法を解説します！！

 

最近ゲームエンジンが様々な分野で使われ始め、Unityで動画を作るという機会も増えてきました

そこで多くの方はCinemachineをTimelineで制御しながら撮影しているのではないでしょうか？

 

私もよく使っているのですが１つ大きな不満がありました

それは

 

Cinemachineのカメラブレンドはカットかスクロールしかできないことです！！！！

表現方法が少なすぎるんじゃーーーーーー！！！！

 

ということで今回は表現方法を増やすべく

Timelineで簡単に実装できるディゾルブの作り方を画像付きで解説してきます

 

前半では実装のやり方を、

後半では

・ディゾルブが難しいとされる理由
・実装で使う技術
などについて解説します

【Cinemachine】ディゾルブ(dissolve)をTimelineで実装するやり方

早速お待ちかねのディゾルブ実装方法の解説です

今回はシンプルなオブジェクトを撮影していきます

今回のやり方は大きく以下の4つの手順で構成されています

1. MainCameraをバーチャルカメラで操作する
2. 新規カメラを作成しRenderTextureに出力する
3. バーチャルカメラにStoryboardを設定する
4. StoryboardのAlpha値をアニメションさせる

 

多分この記事を読んでいる方はある程度Timelineになれていると思うので、Timelineの設置などの説明は省きます

そこは今回関係ないですからね（笑）

それでは詳しく見ていきましょう！！

1.MainCameraをバーチャルカメラで操作する

まずは特にひねりもなくMainCamera(以下MC)用のバーチャルカメラを設定していきましょう

 

Cinemachineを導入してMCにCinemachineBrainコンポーネントを加えます

 

そしてTimeline上でCinemachine用のトラックをつくります

 

そして好きなアングルでバーチャルカメラを設置し、Cinemachineトラックにぶち込んでいきます

 

 

 

これで準備は完了です

2.新規カメラを作成しRenderTextureに出力する

ここからようやくディゾルブの本格的な実装に入っていきます

今回は2つのカメラの映像をディゾルブで切り替えるので、もう一つカメラを作成します

 

バーチャルカメラではなくリアルのカメラなので

Hierarchyウィンドウで右クリック→Camera

で新規カメラを作成してください

 

ゲーム画面を開いている方はカメラ表示が切り替わって驚くかもしれませんが、正常なので大丈夫です！

新しく作ったカメラをRenderCameraと名前変更します
（以下RC）

 

そしてこのRCに映る映像をテクスチャに出力する作業をします

一見難しそうですが、UnityにはRenderTextureという機能があり簡単に実装できます

 

プロジェクトウィンドウで

右クリック→Create→RenderTextureを選択します

 

これでRenderTextureが作成できました！

名前をDS_RTと変更します

 

そして先ほど作ったRCとDS_RTを接続します

 

RCのインスペクターでCameraコンポーネントを見ます

そこからOutput→OutputTexureを選びます

 

右の二重丸をクリックして先ほどのDS_RTを選択すると

RCに映ったものがDS_RTに出力されます！！

 

この手順を踏まえると先ほどのカメラの変更も元に戻っているはずです

3.バーチャルカメラにStoryboardを設定する

そしてこの3つ目がディゾルブの肝です

 

CinemachineのStoryboard機能を使ってDS_RTを画面に表示させていきます

Storyboardはバーチャルカメラのインスペクターから設定できます

 

まず1つ目のバーチャルカメラで

Extensions→Add Extension→Cinemachine Storyboard

を選択します

 

するとインスペクターにCinemachine Storyboardの欄が追加されます

そこでShowImageをクリックしDS_RTを選択します

 

 

これでゲーム画面ではMCの動画の上にDS_RTが表示されるようになりました！！

 

もう一つのバーチャルカメラでも同様の作業をしてください

※RenderTextureも同じものを使ってください

4.StoryboardのAlpha値をアニメションさせる

さていよいよ最後の作業です

先ほどの時点で実はディゾルブはほとんど完成しています

 

StoryboardにはAlpha（つまり透明度）という欄がありますが、これをいじくればディゾルブっぽいことができます

 

あとはAlpha値をTimelineで操作できるようにすれば完成です

 

そのまえに今はDS_RTのサイズが画面と合っていないので調整していきましょう

今回は画面サイズを1920×1080として合わせていきましょう

プロジェクトウィンドウでDS_RTを選択し、Size欄で数値を変更します

 

 

これでサイズを画面と一緒にできました

 

いよいよAlpha値をTimelineで制御する方法を紹介します

今回はバーチャルカメラをそれぞれAnimationClipで操作して実装します

 

まずはプロジェクトウィンドウで

右クリック→Create→Animation

でAnimationClipを作成します

 

今回は2つのクリップで操作するので同様の作業を繰り返し、それぞれに『DissolveIn』『DissolveOut』と名前を付けます

 

DissolveInは1つ目の、DissolveOutは2つ目のバーチャルカメラを操作するクリップにしていく方針です

 

ここでバーチャルカメラごとにAnimatonトラックを作ります

バーチャルカメラを選択しながらTimelineにドラッグ&ドロップ、そしてAdd Animation　Trackです

 

※RecorderTrackはUnityRecoderのやつなので無視してOKです

 

そうしてできたトラックに先ほどの2つのクリップを入れていきます

ここの間隔とかはまぁ適当に！！

 

ここからAnimationClipの中身を編集して、StoryboardのAlpha値をいじっていきます

 

まずはTimeline上のDissolveInをタブルクリックします

するとAnimationウィンドウが開きます

 

このウィンドウは1つ目のバーチャルカメラに関する数値を操作するためのものです

AddPropatyをクリックして下の写真のようにStoryboardのAlphaを選択します

 

これで後は好きな時間で数値を変更できます

今回はDissolveInを
最初：Alpha=0(非表示）
1秒後：Alpha=1(完全表示）
で設定します

 

同様にDissolveOutも
最初：Alpha=1
1秒後：Alpha=0
で設定します

 

さぁこれで完成です!!

実際に再生してみましょう！！

 

ディゾルブやーーーーーーー！！！！

というわけでディゾルブが完成しました

 

RCのアングルを変えればDS_RTの表示も変えられるので、好きなアングルを探してみてください

【Cinemachine】ディゾルブ実装の周辺知識

上記の解説で省いた技術的な説明をしていきます

今回は

1. Cinemachineでディゾルブができないとされる理由
2. RenderTextureのサイズ
3. Storyboardって何のための機能か

について書いていきます

気になったところをチェックしてみてください！

Cinemachineでディゾルブができないとされる理由

私がCinemachineでディゾルブをやろうとしたとき、そのやり方を紹介している人がほとんどいませんでした

 

その大きな理由は

Cinemachineはカメラの「位置や角度」を呼び出すシステムだからです

 

Timelineを動かしながらシーンを見るとわかるんですが、CinemachineはBrainが付いたカメラをバーチャルカメラの場所に移動させているんですね

 

つまり映像自体は1つしかなく、複数の映像を混ぜること（ミキシング）は想定されていないんです！！

公式のドキュメントでもそのことが言及されています

A Cinemachine blend is not a fade, wipe, or dissolve. Rather, Cinemachine Brain performs a smooth animation of the position, rotation, and other settings of the Unity camera from one Virtual Camera to the next.

出典:https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/manual/CinemachineBlending.html

 

これを日本語訳すると以下のようになります
（訳間違ってたらごめんなさい）

シネマシーンブレンドはフェードやワイプ、ディゾルブではありません。むしろシネマシーンブレインはあるバーチャルカメラから次のものへと位置や回転、その他のUnityカメラ設定を滑らかにアニメションさせるものです。

出典：https://docs.unity3d.com/Packages/com.unity.cinemachine@2.3/manual/CinemachineBlending.html

 

なのでふつうはこれを読んでディゾルブをあきらめるんですよね～

だからこそこの記事を書こうと思ったわけです（笑）

 

今回の方法は『結果的にディゾルブの表現ができた』というわけであって、『複数の映像を混ぜることができた』というわけではありませんのでそこは注意です

 

Unity公式が出してる『映画にもゲームにも使える強力なカメラ機能』というCinemachineのフレーズは間違っていません

しかしPremireProみたく映像編集できるかといえばまだまだというかんじですね

RenderTextureのサイズ

先ほどのやり方ではRenderTextureのサイズをサラッと決めましたが、人によって適したサイズは異なります

ここではその決め方によってちょっとだけ解説します

 

やってほしいのは『最終的にどの画面サイズで出力するか』をしっかりと決めておくことです

これをやらないとRenderTextureの端が合わず、違和感が出てしまいます

 

スマホの縦サイズに合わせるのか、YouTubeの規格に合わせるのかなどいろいろありますが検索してみてそのサイズを確認してください！

 

Timelineを使ってディゾルブを使っているということは動画を作っている方もいらっしゃるでしょう

その場合はYouTubeで使われている16:9の比率で良いと思います

 

パソコンのスペックにもよりますが

可能ならフルHDである1920×1080がお勧めです

 

Storyboardって何のための機能？

今回の実装で肝になるStoryboardについて解説します

 

この機能は本来

カメラアングルを決めるときに画像と比較しながら作業できるようにする機能です

 

事前にコンセプト画像があった場合、実際の画面とその画像を見比べますよね？

その作業を全部Unity上でできたら便利だよねってことで使われています

 

…ですのでまぁ、今回の使い方は特殊です（笑）

 

StoryboardはどうやらGame画面の上に画像を貼るかんじで表示される仕様のようですので割といろんな使い方ができそうですね！

 

実際に「こういう使い方便利だな」と思ったのは三分割法との併用です

画面を縦横3分割する線が入った画像を上から表示することで、いい感じの構図が作れるようになります

実際にやっている方のブログを紹介しておきます

>>>ラシュテールブログさん『【Unity】Cinemachineで撮影の構図を色々して良い感じにしたい』

 

ちなみにもしStoryboardが反映されないということがあれば、失敗例の記事を読んでみてください

もしかしたら解決するかもしれません

 

まとめ

というわけでCinemachineではできないとされたディゾルブを強引に実装してみました！！

意外とシンプルなやり方なので、応用も効きそうです

 

今後の改善点としては

・バーチャルカメラごとにアニメーショントラックを作るのがめんどい

・RCをCinemachineで操作するとバグる

・ちょっと画質が落ちる

・切り替えのタイミングがわかりにくい

とかですね

 

やはり若干の手間がかかるので、「ここぞ！！」というときに使うくらいがちょうどいいと思います

 

またこの方法を見つけるまでにぶつかったエラーや失敗例について解説をまとめた記事もd出すので読んでみてください

意外とCinemachineに制限があることがわかります

 

ただ表現の選択肢が広がることには違いないので、ぜひ動画制作で使ってみて下さい！！

ではまた！！