執筆: イチクマ

はじめに

ゲーム開発などで長時間モニターを見ながらのデバッグは辛い歳頃になりました。

最近、Unityのお仕事でPost-Processingを使う機会がありましたので、デバッグ用に調整できるようにしてみようと思い立ちました。

これで少しは目を守れるかな。

この記事の内容

Unity再生中にUIを調整してPost-Processingを動的に変更させます。
Post-Processingの導入や詳細については割愛しています。

以下参考にさせていただきました。

【Unity】ポストプロセシング(Post-Processing)を使ってプロ級の画面に

用意するもの

・Unity(2019 3.15f1)
・Post-Processingのインストール

手順

Post-Processingを準備

早速UnityでPost-Processingの準備をしていきます。

まずはPost-Processingを使えるように[Package Manager]からインストールします。

メニューから[Window] > [Package Manager]を選択します。

表示されたウィンドウ左の一覧から「Post Processing」を選択します。
ウィンドウ右下にある[Install]を選択します。
これで機能が有効になるので、あとはカメラ等設定をしていきます。

Sceneにある適当なカメラに「Post-process Layer」コンポーネントを追加します。

追加した「Post-process Layer」にLayerを設定します。
今回は画面全体に対して行いたいので適当に追加したレイヤーを選択します。

Hierarchyから「Create Empty」を選択し、新らにGameObjectを作成します。

作成したGameObjectに「Post-process Volume」コンポーネントを追加します。

追加した「Post-process Volume」の以下を変更します。

・Layerをカメラの「Post-process Layer」に設定したものと同じものに変更します。
・画面全体に影響を与えるため「Is Global」にチェックを入れます。
・「Profile」>「New」を選択して、「Post-process Volume Profile」を作成します。

Profileを作成すると「Add effect…」が表示されるので、適宜ボタンを押して、使用したいものを追加していきます。

今回は「Color Grading」と「Bloom」を追加しています。

UIの配置と連動

Post-Processingの準備ができたので、次に動的に変更するUIを配置していきます。

今回パラメータ変更に使うのはスライダーにしました。
テキストは編集項目とスライダーの値を表示するために2つ用意します。

Hierarchyから[UI] > [Slider]を選択してスライダーを追加します。
同じく[UI] > [Text]を選択してテキストを追加します。
適宜見た目を調整して上の図のようにします。

あとはスライダー、テキストともにスクリプトからアクセスできるようにし、スライダーの値が変わった際などに、テキストに値を反映させます。

以下がコードの抜粋です。

    [SerializeField] Slider SliderPrm1 = null;
    [SerializeField] Slider SliderPrm2 = null;
    [SerializeField] Slider SliderPrm3 = null;
    [SerializeField] Slider SliderPrm4 = null;
    [SerializeField] Slider SliderPrm5 = null;
    [SerializeField] Slider SliderPrm6 = null;

    [SerializeField] Text SliderValueText1 = null;
    [SerializeField] Text SliderValueText2 = null;
    [SerializeField] Text SliderValueText3 = null;
    [SerializeField] Text SliderValueText4 = null;
    [SerializeField] Text SliderValueText5 = null;
    [SerializeField] Text SliderValueText6 = null;

    void Update()
    {
        SliderValueText1.text = SliderPrm1.value.ToString();
        SliderValueText2.text = SliderPrm2.value.ToString();
        SliderValueText3.text = SliderPrm3.value.ToString();
        SliderValueText4.text = SliderPrm4.value.ToString();
        SliderValueText5.text = SliderPrm5.value.ToString();
        SliderValueText6.text = SliderPrm6.value.ToString();
    }

参考ではUpdateでテキストを変更していますが、スライダーの値が変わった時(On Value Changed)が無難かと思います。

スライダーの最大、最小値は変更したいパラメータの範囲を指定します。

今回は以下を調整可能なパラメータとしましたので、それぞれ範囲に合った最小、最大値に値を変更します。

Color Grading

・Temperature(-100 ~ 100)
・Tint(-100 ~ 100)
・Saturation(-100 ~ 100)
・Brightness(-100 ~ 100)
・Contrast(-100 ~ 100)

Bloom

・Intensity(0 ~ 20)

UIの値から動的にPost-Processingを変更

UIでパラメータ変更の準備ができましたので、

最後に変更した値を動的にPost-Processingに反映させていきます。

パラメータ変更用の各種スライダーに呼び出し関数を登録していきます。

まずは適当なスクリプトに呼び出し関数を用意します。

用意した関数をスライダーの On Value Changed に設定します。

呼び出し関数では Post Process Volume を参照して、

スライダーの値を適宜反映させるパラメータに設定します。

以下がコードの抜粋です。

    [SerializeField] PostProcessVolume PPvolume = null;

    public void OnChangedConfigParam()
    {
        ColorGrading cg = PPvolume.profile.GetSetting<ColorGrading>();
        cg.temperature.value = SliderPrm1.value;
        cg.tint.value = SliderPrm2.value;
        cg.saturation.value = SliderPrm3.value;
        cg.brightness.value = SliderPrm4.value;
        cg.contrast.value = SliderPrm5.value;

        Bloom bloom = PPvolume.profile.GetSetting<Bloom>();
        bloom.intensity.value = SliderPrm6.value;
    }

あとは再生中に変更したいパラメータをスライダーにて調整するのみとなります。

以下実行サンプルとなります。

まとめ

今回はUnityでPost-Processingを動的に変更する方法を紹介しました。

起動時にスクリプトで調整する方法はいくつかあったのですが、動的な変更についてパッと見つからなかったので、試してみました。

デバッグ用途としてはシンプルな方法だと思いますので、目を大切にしたい方のお役に立てばうれしいです。

関連リンク