[unity+post processing v2]文字だけに発光効果をかけたい

Post Processing の Bloom(発光)効果が 3 度の飯より好きなんですが、複数カメラを使っていると「かけたくないものにまでかかってしまう」事がありました。

具体的に見てみましょう。

下の「SCORE 92345678」と書かれた部分を、赤みを持った光らせ方にしたいとします。
Cube、ゲージ(みたいなもの)、文字でそれぞれカメラは別になっています。
Cube > ゲージ > 文字 の順でカメラを描画していきます(最後に文字カメラ)。

たとえこの文字だけレイヤーを分け、そのレイヤーだけにポストエフェクトをかけたとしても…。

このように、文字より前に描画されたものは、一緒にエフェクトがかかってしまいます。

いやいや、カメラ1つにしなよ。重いでしょ?

こんな声が聞こえてきそうですが、Cube は Cube で別のポストプロセスしたいという重度のポストプロセスマニアです。そこは譲れないとして。

個人製作には、ほんとお手軽で画面の品質を上げてくれる、神のようなエフェクトです > Post Processing

では、文字を一番先に書けば Cube やゲージは影響受けないんじゃ! というのは確かにそうなのですが、今度はスコア文字が背景の後ろに入り込んでしまいます。本末転倒です。

そこで、文字の部分だけ別のレンダーテクスチャとして先に描画しておき、後で Raw Image として抽出する方法を考えます。
ちょっとややこしくはありますが、ヒエラルキー上でオブジェクトをポンポン追加&設定するだけなので、ソースコードが嫌いな人でも可能な方法です。

ソースコードを書かずに(ノーコード)、思ったようなゲームを作るというのはかなり難しい(私には無理)ですが…。
この程度の事がノーコードで出来るだけでも、時代は進歩しました。すごい。

カメラを作成

スコアを表示するためだけのカメラを作成します。
他の UI と区別をつけるために、UITop という Layer を作成し、それを使用します。
(この UITop はかなり多くの箇所で設定しますが、1つでも間違うとスコアが表示されなくなるので注意してください)

  • Tag は Untagged
  • ClearFlag を Solid Color
  • BackGround はとりあえず R:0 G:0 B:1 A:1。範囲をわかりやすくするためこうしましたが、上手くいったら RGBA: 0 に。
  • Layer CullingMask を UITop
  • Depth を -10

Depth はメインカメラよりも若い数字にしておけば、-10 以上で OK かもしれませんし、逆にむしろもっと小さくする必要があるかもしれません。プロジェクトに合わせてください。

  • Post Process LayerPost Process VolumeAdd ComponentPost ProcessingWindow - Package Manager で先にインストールする必要があります)
  • Bloom Add Effect
  • Profile New を押して作成
  • その他はオレンジ部分を変更。(Color で赤っぽい光にしている)

Canvas を作成し、その中に Text Mesh Pro で文字を入れる

カメラの中(青色の部分)に納まるように文字を入れてください。
なお、Canvas や Text Mesh Pro の Layer は UITop にしておくこと(そうしないと表示されない)。
Canvas Layer を設定すると、その下のオブジェクトを一括変更できて便利。

Yes を選ぶと一括変更

大きさは 800 x 200 にしました。(画面全体は 1920 x 1080 としています)

この時点では普通に文字が表示されているはずです。

メインで描画するためのカメラやオブジェクトを配置

次に、メインカメラと 3Dオブジェクトや、光の影響を受けさせない 2D などを描画してください。
今回サンプルで作成したメインカメラはこんな値でした。

後は Cube なりゲージなり、適当に配置します。(もちろん、同じものでなくて構いません)
この設定により、先ほどのスコアはメインカメラに潰されて、一旦表示が消えてしまいます。

メインカメラに文字カメラの表示内容を合成する

文字カメラの表示内容をテクスチャとして、メインカメラで 2D 表示します。
次のように設定してください。

加算マテリアルの作成

  • Create > Material(New Material が生成される)
  • Shader Legacy Shaders/Particles/Additive

Render Texture の作成

  • Project に Create > Render Texture(New Render Texture が生成される)
  • New Render Texture のサイズを 800 x 200 に
  • Score Camera の Target Texture を作成した New Render Texture

Raw Image の設定

  • メインカメラ側に、UI > Raw Image を、表示される Canvas 内に作成
  • Width:800、Height: 200
  • Texture を先ほど作成した New Render Texture
  • Material を先ほど作成した New Material

Score Camera の設定

  • ColorRGBA: 0 に戻す(戻さなくても表示はされますが、色が凄い事になっているかも)
文字だけ光っている

これで完成です。

完成と、問題点

全部影響受けちゃった版
完成版

無事文字を光らせることができましたが、このアプローチは加算マテリアルがブルーム効果を高めている点に注意してください
ブルーム以外のポストエフェクトでもすんなり応用が利くかというと、そうでもないでしょう。

また、Render Texture や Post Process など、低スペックな機器では上手く表現されない事もあると思います。光らせたいだけなのに、結構重そうですしね! でも、満足!

まま、そういった副作用があることを念頭に置いて、ご利用ください。

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA