【Unity 2Dゲーム入門】URPではじめて2Dゲームを作る(5/7)

Post Processingでエフェクトをかける

Posted by 51n1 on 22 Nov, 2022

もくじ

1. Unityで2Dゲームを作る
2. 2Dゲーム用ドット絵を作成する
3. ドット絵をUnityにセットアップする
4. Visual Scriptingでノンコーディング
5. Post Processingでエフェクトをかける
6. WebGLでゲームを出力する
7. First 2D Game WebGLデモ

Post Processingの基本設定

Post Processingはスクリーンに描画される前の映像にフルスクリーンフィルターとエフェクトを適用する処理になります。いわゆる写真編集アプリでフィルター加工する処理と同様のものと言えます。UnityでPost Processingを使う目的の1つとしてBloom(発光)エフェクトの存在があります。とても簡単に効果的な発光エフェクトをかけることができます。

Universal Render Pipeline(URP)のPost Processingは標準機能としてURPに統合されました。そのためPost Processingの設定は以前に比べるとだいぶ簡単になりました。Unity 2022.1.22f1のURPのバージョンは13.1.8です。Post Processingの詳しい解説は下記の公式マニュアルを参照すると良いです。

Unity Manual: Post-processing in the Universal Render Pipeline

それでは、URPにおけるPost Processingを設定します。まず最初にMain CameraのCameraコンポーネントのパラメータである「Rendering > Post Processing」のスイッチをオン(チェック付)にしておきます。このチェックボックスのチェックを付けておかないとPost Processingのエフェクトが有効にならないので注意です。( 5.1)

Hierarchyウィンドウで右クリックして「Volume > Global Volume」を選択してGlobal Volumeゲームオブジェクトを追加します。( 5.2)

5.1 Setting Post Processing

5.2 Creating Global Volume

追加したGlobal VolumeのInspectorからVolumeコンポーネントのProfileの「New」ボタンをクリックして新規でGlobal Volume Profileを作成します。次に「Add Override」ボタンをクリックして任意のエフェクトを追加し設定します。( 5.3)

僕が追加したエフェクトとそれぞれの設定内容を以下に紹介します。上から順にエフェクトを重ねています。設定内容は適当なのであまり参考にならないかもしれません。エフェクトなしのスクリーンショットを最初に掲載しておきます。( 5.4)

5.3 Global Volume Profile

5.4 Screen with No Effect

Lens Distortion

Lens Distortionはレンズの歪み効果をシミュレートしたエフェクトです。( 5.5, 5.6)

5.5 Lens Distortion Setting

5.6 Screen with Lens Distortion

Vignette

Vignetteは画面の4隅に影を追加するフィルタエフェクトです。色の調整も可能です。( 5.7, 5.8)

5.7 Vignette Setting

5.8 Screen with Vignette

Bloom

発光効果を与えるフィルタです。Bloomを使ってSpriteを発光させるには発光させたいSpriteにホワイト(明度の高い)のピクセルを描いておく必要があります。( 5.9, 5.10)

5.9 Bloom Setting

5.10 Screen with Bloom

Tonemapping

Bloomを追加した場合は、Tonemappingを入れておくと良いです。Bloomによる発光処理を落ち着いた自然な光の感じにしてくれます。( 5.11, 5.12)

5.11 Tonemapping Setting

5.12 Screen with Tonemapping

Film Grain

昔のブラウン管の画面のようなちらつきを再現してくれるエフェクトです。ちらつき具合はゲーム実行中じゃないと分かりにくいかもしれません。レトロなゲームには相性の良いエフェクトでしょう。( 5.13, 5.14)

5.13 Film Grain Setting

5.14 Screen with Film Grain

Chromatic Aberration

レンズの色収差を発生させて画面に色ずれを起こさせるフィルタです。やりすぎるとわざとらしい感じになるエフェクトだと思いますが、個人的には面白い絵にはなるので好きなエフェクトのひとつです。( 5.15, 5.16)

5.15 Chromatic Aberration Setting

5.16 Screen with Chromatic Aberration

Light 2D

Post Processingだけでなく、Light 2Dも追加してみます。今回はシンプルにGlobal Light 2Dを追加して、画面全体に光を当ててみたいと思います。Global Light 2Dは3DプロジェクトのDirectional Lightと同じようなLightオブジェクトです。

Hierarchyウィンドウで右クリックし、「Light > Global Light 2D」を選択して、Light 2Dゲームオブジェクトを追加します。( 5.17)

Light TypeはGlobalであることを確認し、Colorをピンクにして、Intensityを1.75にします。( 5.18)

5.17 Creating Global Light 2D

5.18 Light 2D Setting

Material設定

Light 2Dの光が反映されない場合は、MaterialがSprite-Defaultの可能性があります。Sprite-Lit-Defaultにすると光の効果が見えるようになるはずです。URPのプロジェクトでSpriteをシーンに追加した場合は通常Sprite-Lit-Defaultになると思います。もしURPではないプロジェクトで作成したSpriteだった場合、URP向けのMaterialを作成して対象のSpriteに適用する必要があるかもしれません。

Projectウィンドウで右クリックし「Create > Material」で新規マテリアルを作成し、名前を適当にSprite-Litとかにします。デフォルトでShaderにはURP 2DのSprite-Lit-Defaultが設定されていると思います。それをそのままLight 2Dの光が反映されていないSprite RendererのMaterialとして設定します。( 5.19)

完了

Global Light 2Dは画面全体に光が当たるのでカラーフィルターみたいな役目になります。Post ProcessingとLight 2Dを追加して設定した画面が下記のスクリーンショットになります。絵作りとしては完成です。Post ProcessingとLight 2Dを使えば、なかなか味のある2Dゲームの画面が作れます。( 5.20)

5.19 Creating Global Light 2D

5.20 Screen with All Effects