この記事ではSTYLYでPostProcessingを使用する方法を紹介します。 前回の記事でワープ移動できるようになったので、ワープしたときにPostProcessingを適用する仕組みを 作っていきたいと思います。 ここではPlaymakerとPost Processing Stack を使用します。
![Warp_PP_fin - STYLY PostProcessing完成画像](https://styly.cc/wp-content/uploads/2018/10/Warp_PP_fin.jpg)
PostProcessing完成画像
サンプル
STYLY GALLERYからサンプル空間を体験できます。
記事で紹介しているUnityプロジェクトのダウンロードはこちらからできます。 WarpSystem_Sample
Maincameraを取得する
https://styly.cc/ja/tips/use-post-processing-stack-with-styly_afjk_postprocessingstack/ ↑コチラの記事でSTYLYでPostProcessing Stackの使い方が紹介されています。 使い方は記事の通りに進めていきます。 PostProcessingを適用するメインカメラを取得します。 Get main Cameraで取得してそれをMaincameraに格納します。
![Post_01 - STYLY MainCameraの取得](https://styly.cc/wp-content/uploads/2018/10/Post_01.jpg)
MainCameraの取得
Post Processing behaviorの追加
Add ComponentからPost Processing behaviorを追加します。
![Post_02 - STYLY Componentの追加](https://styly.cc/wp-content/uploads/2018/10/Post_02.jpg)
Componentの追加
新たにPostProcessingCameraという変数をObject型で作ります。
![Post_03 - STYLY 変数を作る](https://styly.cc/wp-content/uploads/2018/10/Post_03.jpg)
変数を作る
Object型をさらに変更していきます。 PostProcessingからPostProcessingBehaviourを選びます。
![Post_04 - STYLY 変数の型を変更](https://styly.cc/wp-content/uploads/2018/10/Post_04.jpg)
変数の型を変更
Add Componentができました。
![Post_05 - STYLY Add Componentの設定](https://styly.cc/wp-content/uploads/2018/10/Post_05.jpg)
Add Componentの設定
Set Propertyの追加
Set Propertyを追加します。
![Post_06 - STYLY Set Propertyの追加](https://styly.cc/wp-content/uploads/2018/10/Post_06.jpg)
Set Propertyの追加
新たにPostprocessingProfileという変数をObject型で作ります。
![Post_07 - STYLY 変数の追加](https://styly.cc/wp-content/uploads/2018/10/Post_07.jpg)
変数の追加
PostprocessingProfileの型をPostProcessingProfileに変更します。
![Post_08 - STYLY 変数の型を変更](https://styly.cc/wp-content/uploads/2018/10/Post_08.jpg)
変数の型を変更
Inspectorにチェックを入れてインスペクタから設定できるようにします。
![Post_09 - STYLY Inspectorにチェックを入れる](https://styly.cc/wp-content/uploads/2018/10/Post_09.jpg)
Inspectorにチェックを入れる
Target ObjectにPostProcessingCamera Propertyにprofile Set valueにPostProcessingProfileに設定します。
![Post_10 - STYLY Set Propertyの設定](https://styly.cc/wp-content/uploads/2018/10/Post_10.jpg)
Set Propertyの設定
Post-Processing Profileの作成
![Post_11 - STYLY Post-Processing profileを作成](https://styly.cc/wp-content/uploads/2018/10/Post_11.jpg)
Post-Processing profileを作成
ここではBloomの効果だけを設定してました。 インスペクタにエフェクトの設定をしたPostProcessing Profileを指定します。
![Post_12 - STYLY Inspectorに割り当て](https://styly.cc/wp-content/uploads/2018/10/Post_12.jpg)
Inspectorに割り当て
これでトリガーを押してワープしたときにPostProcessingが適用されるようになりました。 ですがこのままだと終わった後もずっとPostProcessingが効いたままになってしまいます。 チェックカメラのステートでPostProcessingのコンポーネントをデストロイして始まるときにはエフェクトを消すようにします。
![Post_13 - STYLY Check Cameraの時に削除](https://styly.cc/wp-content/uploads/2018/10/Post_13.jpg)
Check Cameraの時に削除
ただこれだと他のシーンをプレーするときにカメラがPostProcessingを持ったままになってしまうのでギャラリーのサンプルシーンでは 左コントローラのトリガーでPostProcessingをオフにできるようにしてあります。
STYLY Editorで配置する
瞬間移動を体験するためにかなり離れた場所にワープポジションを設置しました。
![Post_14 - STYLY STYLY Editorで配置](https://styly.cc/wp-content/uploads/2018/10/Post_14.jpg)
STYLY Editorで配置
この距離でも一瞬で移動することができます。 UnityからSTYLYにアセットをアップロードする方法 記事を読む この記事ではSTYLYでPostProcessingを使用する方法を紹介しました。 いろいろ作り込んでいくと特定の場所や特定のタイミングでエフェクトをかけたい時があると思います。 うまく使えるとVRシーンがより魅力的に演出できると思います。 メインカメラは他のシーンを見るときも共通なのでPostProcessingが適用されたままだといろいろ困ります。 一旦消すようにした方が良さそうです。
※STYLYに登録していれば、PC上で本TIPSの動作確認がすぐに行えます。 まだ未完了の場合、新規登録を行ってから再度、本ボタンをクリックしてください。