PostProcessingとAnimationで暗転・フェードイン演出をつくる

PostProcessingを利用すると、画面全体に色味の変化などのエフェクトが掛けられます。

また、エフェクトの強さをAnimationで変化させることもでき、暗転やフラッシュなどの演出をつくることもできます（実際に使っている例がこちらの記事でも紹介されています）。

今回は画面の暗転を例に、Post ProcessingとAnimationを組み合わせるテクニックを紹介します。

Post Processingの設定

※Post Processingの基本的な設定方法についてはこちらの記事でも紹介しています。

まずはPost Processingを設定しましょう。

Hierarchyを右クリックするか、上部メニューのGameObjectを選択して「3D Object>Post-process Volume」を作成します。
作成したPost-process Volumeのレイヤーを「21: PostProcessing」に変更してください。
- ※「21: PostProcessing」が一覧にない場合はレイヤーを作成してください。Cluster World Toolsを使うと必要なレイヤーを簡単に設定できます。
また、Post-process Volumeコンポーネントの「Is Global」のチェックボックスにチェックをつけてください。

作成できたら、続いてエフェクトの設定をしていきます。

Profileの「New」ボタンを押して、設定ファイルを新規作成します。
Profileを設定すると、Add effectというボタンが表示されます。
- ボタンを押してUnity>Color Gradingを追加してください。
- Color Gradingの「Color Filter」にチェックを入れて有効化してください。
- Color Filterのカラープロパティで真っ黒を選択します。

プレビューを実行してみましょう。画面が真っ黒になっています。
このときPost-process VolumeのInspectorでWeightの値を変化させると画面の明るさが変化します。

このままアップロードすると視界が真っ黒なままになってしまうので、一旦プレビューを終了し、Weightの値を0にしておいてください。

上で紹介したWeightの値をAnimationで変化させることで暗転演出をつくることができます。

※Animationの使い方はこちらの記事なども参考にしてください。

画面下部のProjectウインドウを右クリックしてCreate>Animationを選択し、新規Animationファイルを作成します。ファイル名はBlackOutとしましょう。
作成したAnimationファイルをHierarchyのPost-process Volumeにドラッグアンドドロップしてください。

続いてAnimationウインドウを開きます。ウインドウが開いていない場合は上部メニューのWindow>Animation>Animationを選択してください。
Post-process Volumeを選択すると、Animationウインドウを編集できるようになります。
- Add PropertyからPost-process Volume>Weightを追加してください。
  - 0フレームの位置でキーフレームを作成し、Weightの値を0にします。
  - 再生位置を移動し、30フレームの位置で同様にキーフレームを作成して、こちらは値を1にします。
  - もう一度再生位置を移動して、60フレームの位置にキーフレームを作成、値を0にしてください。

これで0.5秒かけて暗転し、その後0.5秒で元に戻るようになりました。
プレビューを実行すると、始まった直後に暗転します。

こちらを、ボタンを押したときなどのタイミングで暗転するようにしていきます。

Animatorウインドウで右クリックして、Create State>Emptyを選択します。
- 作成されたNew Stateのパネルを右クリックし、Set as Layer Default Stateを選択してください。
続いてAnimationウインドウの左上でParametersタブを開き、+ボタンからTrigger型のパラメーターを追加します。パラメーター名はPlayとしてください。
さらに、Any Stateのパネルを右クリックして、メニューからMake Transitionを選択し、矢印をBlackOutに繋ぎます。
- この矢印をクリックで選択し、InspectorでConditionsに項目を追加します。追加した項目に「Play」が選択されていればOKです。
- また、同じ矢印のInspectorで「Has Exit Time」のチェックを外しておいてください。

次はボタンを押すとAnimator上のAnimationが切り替わる仕組みをつくります。

まずはボタンをつくります。

Hierarchyを右クリック、または上部メニューのGameObjectからCreate Emptyで新しい空のオブジェクトを作成します。名前は「BlackOutButton」としてください。
- BlackOutButtonを右クリックし、子オブジェクトとして3D Object>Cubeを作成します。CubeのScaleを調整してボタンとしてちょうどいい大きさにしておきます。
BlackOutButtonのInspectorでAdd ComponentからInteract Item Triggerを追加します。
- Interact Item Triggerの+ボタンで項目を追加し、Targetを「Global」、Keyを「BlackOut」、Valueを「Signal」としてください。

Post-process VolumeのInspectorに戻り、Add ComponentからSet Animator Value Gimmickを追加します。
- Set Animator Value GimmickのTargetを「Global」、Keyは「BlackOut」、Parameter Typeを「Signal」にして、先ほどのInteract Item Triggerと一致させます。
またAnimator Parameterは「Play」として、Animatorに設定したパラメーターと一致させます。

ここまでできたらプレビュー、またはアップロードして確かめてみましょう。ボタンを押すと暗転します。

始めから画面が真っ黒になってしまう場合は、Post-process VolumeのWeightの値を0にしてください。

暗転に合わせたタイミングでギミックを発動してみましょう。
Timerを使うと時間差でトリガーを発行することができます。

Hierarchyに新しい空のオブジェクトを作成します。名前はWarpSystemとしてください。
WarpSystemのInspectorで、Add ComponentからGlobal Timerを追加します。
- Targetを「Global」、Keyを「BlackOut」、Delay Time Secondsを「0.5」とします。
  - ※暗転演出の長さを変えるときは、Delay Time Secondsの値をAnimationでWeightの値が1になる時間に合わせた秒数にしてください。
- Triggersの+ボタンで項目を追加し、Keyを「Warp」、Valueを「Signal」に設定します。

続いて、同じくWarpSystemにWarp Player Gimmickを追加します。
- Targetを「Global」、Keyを「Warp」とします。
Hierarchyにもうひとつ新しい空のオブジェクトを作成し、ワープ先の位置に設置します。
- Warp Player GimmickのTarget Transformにこのオブジェクトをドラッグアンドドロップして設定します。