STYLYでPost-Processing Stackを使う

STYLYでUnityのPost-Processing Stackを使う方法を解説します。

本記事ではPost-Processing Stackおよび、Playmakerを使用します。

はじめに

STYLYでは、Filter機能により画面の雰囲気を変えることができます。

STYLY Filters

しかし、こだわり始めると自分でPost-Processingの設定を細かく調整したい場合も出てくると思います。

自作のPostProcessing Profileを使用したい場合はPlaymakerを使えば可能です。

Unityのサンプルプロジェクトを公開しています。

https://github.com/styly-dev/STYLY-Unity-Examples/tree/master/Assets/STYLY_Examples/SetPostProcessing

Post-Processing Stackについてはこちら、高橋啓治郎氏の講演資料をご参照ください。

準備

まず、STYLY-Unity-ExamplesリポジトリをGitHubからクローンまたはZipでダウンロードしてください。

https://github.com/styly-dev/STYLY-Unity-Examples

入手したプロジェクトをUnity 2017.4.xで開き、SetPostProcessingシーンを開いてください。

\Assets\STYLY_Examples\SetPostProcessing\SetPostProcessing

SetPostProcessing Scene

Post-Processing StackとPlaymaker(有料)をインポートします。

Post-Processing Stack

https://assetstore.unity.com/packages/essentials/post-processing-stack-83912

Playmaker

https://assetstore.unity.com/packages/tools/visual-scripting/playmaker-368

Unityエディタを実行すると、PostProcessが設定されます。 雰囲気がガラッと変わりますね。

Use Post Processing Stack

SetPostProcessing使用方法

  1. 設定したいPost-Processing Profileを用意する。
  2. SetPostProcessing(Upload to STYLY)プレファブを選択し、Set Post Processing FSMのPost Processing Profileへ設定する。

    How to Use SetPostProcessing

  3. Unityを実行して指定したPostProcessing Profileが反映される事を確認する。
  4. UnityPluginを使ってSetPostProcessing(Upload to STYLY)をSTYLYにアップロードする。

 

使用上の注意

使えないProfile設定

PostProcessing Profileの設定の中にはSTYLYやVRに適さないProfile設定があります。

STYLYの設定により使えないもの(Forward Rendering/MSAA有効のため)

  • Fog:deferred Rendering Pathでないと使えない。
  • Antialiasing:Fast Approximate Anti-aliasingのみ使える。Temporal Anit-aliasingは使えない。
  • Screen Space Reflection
VRに適さないもの
  • Depth Of Field
  • Motion Blur
  • Chromatic Aberration:画面端に向けて色収差を出す効果。VRではあまり効果がない。
  • Grain:画面にノイズをかける効果。VRではおすすめしない。
  • Vignette:画面の周辺を黒くぼかす効果。VRではおすすめしない。

シーンにSetPostProcessを複数配置しない

同じシーンに複数のSetPostProcessを配置すると競合します。

また、STYLYのFilter機能とも競合するので使わないでください。

Playmaker解説

ここからは、Set Prost Processing FSMについて解説します。

Set Post Processing FSMをPlaymakerEditorで開いてください。

Variable説明

camera ポストプロセス適用先のMainCameraを取得し格納する
Post Processing Profile Post Processing Profileファイル
PostProcessingBehaviourCamera Cameraに設定するPost Processing Behaviourコンポーネント

 

Variables

  Inspectorにチェックを入れる事でPlaymaker FSMのControlsに表示されます。

Playmaker Editorを開かずに値を設定したり参照できるので便利です。

 

Variablesへ任意のコンポーネントを追加する方法

ちょっと戸惑ったので解説。

例えばPostProcessingBehaviourを追加したい場合、まずVariable TypeをObjectとして追加する。

  追加後、Object Type>UnityEngine>PostProcessing>PostProcessingBehaviourを選択する。

PostProcessingProfileも同様の方法で追加します。  

State、Action説明

States & Actions

実行するとSetPostProcessing状態へ遷移し、以下のActionを順に実行します。

  1. Get Main CameraでMainカメラを取得してcameraへ格納
  2. Add ComponentでカメラにPostProcessingBehaviourコンポーネントを追加。同時にPostProcessingBehaviourCamera変数に格納。Remove On Exitにチェックを入れる事で、終了時に自動削除されるようにします。
  3. SetPropertyで設定したいPost Processing Profileを設定する。

Unityで実行してPostProcessingProfileが実行される事を確認してください。  

STYLYでPostProcessingStackを使用する方法および、PlaymakerFSMの解説は以上です。