この記事はUnity #2 Advent Calendar 2018の20日目の記事です。今は21日だって！？それは本当かい！？まさか遅刻したのに間に合った事にしたのかい！？

前回はがむ (@gam0022) | Twitterさんの[Unity] カスタムシェーダーでTextMeshProに独創的な演出を加えるという超エモい記事でした。

自分のターンではCinemachineを使用して、カットシーンや動画撮影でよくあるような構図について色々と書いてみます。

動画の構図
- 構図には黄金のルールがある
CinemacineはカメラのIK
Cinemachineで構図を作る
感想
関連

動画の構図

動画撮影について勉強すると、よく出てくるのが「構図」という話です。ショットを決める上で、画面の何処に何を置くか…という話は基礎的な話で、多くの映画はこの構図をある程度意識して作られているみたいです。実際、映画を構図を意識してみると、確かに意識していそうな配置の事が多いです。

構図には黄金のルールがある

ルールは結構色々なものがあります。

一番有名なのは、三分割法（rule of thirds）です。これは非常に多くの動画や写真のチュートリアルとしても紹介されており、デザインの基礎として扱われている物です。これはゴールデンルールとすら言える物で、本当に多くのデザイン系資料の基本とされています。

等間隔に引いた水平線と垂直線2本ずつにより画面を9等分（上下・左右方向にそれぞれ3等分）すると仮定し、それらの線上、もしくは線同士の交点上に構図上の重要な要素を配置すると、バランスが取れて安定した構図が得られるというものである

f:id:tsubaki_t1:20181220222806j:plain — Unite 2016 : ホンモノ志向のVR空間づくりより

インスピレーションという点では、下のムービーは自分のお気に入りです。

https://vimeo.com/180724989vimeo.com

また左右対称（symmetry）も有名です。特に奥行きを表現する上で、よく見る構図です。

他にも色々と法則はあります。例えば対象をハイアングルで撮るかローアングルで撮るか。画面内の物をバラバラに置くかバランス良く置くか。奥行きをどう表現するか、もしくは表現を意図的に潰すか。180度の原則や被写界深度で何処まで表現するか。

f:id:tsubaki_t1:20181220225158j:plain — ローアングルとハイアングルで印象が若干変わる

勿論、常に同じ構図で作るのは退屈なのでルールを破る事は推奨される事でしょうが、それは「ルールを把握した上であえて破る」という話です。料理の基礎も出来てないのにオリジナルレシピを作っても大して美味しくないように、偉大なるルールがあるならば、それに乗るのは良い事でしょう。

何にせよ、問題なのは「何処に何を表示するのか」という話です。特に焦点を当てるキャラクターを何処に置いて、その上でどのように表示するのか。そういったものをCinemachineで色々とやってみました。

CinemacineはカメラのIK

先日、SIGGRAPHにてCinemachineはカメラのIKという言葉を聞き「なるほどな」となりました。

カメラは多くの場合取りたい構図を考えたら、良い感じの位置を探して、被写体の位置に合わせてカメラの向きやレンズの種類を切替えて良い感じの構図を作成します。それに対してCinemachineでは、撮影したい被写体の位置と大きさをまず決めて、その後にカメラの位置を決めます。被写体の位置のまま、意味のあるカメラアングルを後で探す事が出来るのは、割と面白いです。

例えば普通のカメラの場合、多くの場合で便利なのはSceneViewでカメラを動かし、良い感じの位置を見つけたらショットを取るというアプローチでしょう。

f:id:tsubaki_t1:20181220230610g:plain — カメラを普通に移動した場合

Cinemachineの場合、対象を良い感じの位置に配置して、その後にカメラの位置を調整します。下の画面では左上の半分はキャラクターで覆う事を事前に確定しておき、その上でカメラの良い感じの構図を探します。

f:id:tsubaki_t1:20181220230907g:plain — Cinemachineで構図のセットアップ

Cinemachineで構図を作る

さっそくCinemachineで構図の云々をやってみます。

対象を画面の何処に置くのか決める

まずCinemachineのLook Atで、フォーカスを当てる対象を決めます。これで対象を追跡するようになるので、あとは青い線の中心をドラッグ＆ドロップして、フォーカスする対象を画面の何処に配置するのかを決めます。

f:id:tsubaki_t1:20181220231339j:plain

フォーカスすべきキャラクターが何処に表示されるのか決まっているなら、カメラはかなり自由に色々な位置に動かせます。例えば映画でよくある肩なめショット（OTS）は、とりあえずキャラクターの後ろにカメラを移動すれば良いので非常に楽に実現出来ます。

f:id:tsubaki_t1:20181221000135p:plain — 手前にキャラを置くことで距離感を出す

FOVを変えての調整も楽なので、かなり楽しいです。大きすぎるとゆがみますが、距離感が出て勢いが出ます。

f:id:tsubaki_t1:20181221103210j:plain — キャラクターは同じ配置だがFOVが大きく違う場合。広いと勢いが出る

三分割法を使って、何処に置くか決める

画面の何処に配置するのかを決めるのに便利なのは、上で紹介しているような三分割法のルールです。これは単純に画面を三分割した画像を用意して、Cinemachine.Storyboadにセットするだけです。ホットスポット（線の交差点）に目や顔といった力のある物を置いておくだけで良いので、楽です。

この時、AspectをStreatch To Fitに指定しておくと、画面比率によらず三分割してくれて楽です。

また、場合によっては、絵コンテ的な物を貼り付けるのでも良いです（本来はそういう使い方）。同じような構図の絵コンテを作成し、同じような構図の絵を何度も流す事で、以前のショットとの対比を出す等も面白そうです。

f:id:tsubaki_t1:20181220231638j:plain — 画面を三分割するように線を引く

画面のどれぐらいの割合で表示するか決める

大きさも決まっているなら、Cinemachine.Follow Zoomを使用します。これは被写体をどのくらいの大きさまで表示するかという物ですが、逆を言えば常に同じ大きさで表示されます。

f:id:tsubaki_t1:20181221101431g:plain — 距離を変えても、画面の占める面積は変わらない

ただしFOVを変化させているので、絵が変形したり背景が変化する点には注意が必要です。例えば下の2枚は、FollowZoomを使用してカメラの距離を変更しているものです。若干キャラクターの幅が変わった他、背景の表示量が変化しています。特にクローズショット（近くで撮影）の場合は画角を広く撮る事が一般的だと思いますが、それはアニメ調の表現と相性が悪いので注意が必要です。