tanaka's Programming Memo

プログラミングについてのメモ。

SpriteでBloomするSpriteGlow

みんな大好きBloomをスプライトやUIでもできるようにしてくれるSpriteGlowというアセットがあります。

github.com

アセットストアではなくGitHubでMITライセンスで公開されています。

あっという間にできますので設定方法をまとめておきます。

目次

手法

このアセットは、スプライトの画像の周りにBloom用のHDRの縁を描画します。Bloom効果自体は、PostProcessing StackやMK Glow Freeといった既存のポストプロセス機能を利用するという経済的(?)な手法です。

下準備

Unity2018.2.20での作業手順を示します。

組み込みたいプロジェクトをUnityで開きます。ここでは、ユニティちゃん 2Dデータのコインを光らせてみたいと思います。同様に作業をする場合は、UNITY-CHAN! OFFICIAL WEBSITEからユニティちゃん 2Dデータをダウンロードして、プロジェクトにインポートしておいてください。

インポートが完了したら、UnityChan2D/Demo/Scenes/World 1-1シーンをダブルクリックして開いておきます。

ポストプロセスの設定

PostProcessing StackV2やMK Glow Freeをプロジェクトにインポートします。Bloomだけ使うならMK Glow Freeの方が手順が楽です。Vignetteなど他のエフェクトも使いたい場合はPostProcessing Stack V2にするとよいでしょう。

MK Glow Freeの場合

MK Glow Freeはこちらからインポートできます。

インポートしたら、Main CameraにMKGlowスクリプトをアタッチしておきます

f:id:am1tanaka:20190612143100p:plain
MKGlowスクリプトをアタッチ

これ以降の調整は、SpriteGlowを組み込んだあとに行います。

PostProcessing Stack V2

PostProcessing Stackについてはこちらに手順をまとめています。

記事に従ってBloomが動作するように設定してください。

SpriteGlowを設定する

SpriteGlowパッケージをインポートする

GitHubリポジトリーを開いて、必要なパッケージをダウンロードしてインポートします。

  • 以下を開きます

github.com

  • README.mdの最初の方にありますSpriteGlow.unitypackageのリンクをクリックして、パッケージをダウンロードします
  • ダウンロードしたSpriteGlow.unitypackageをドラッグして、UnityのProjectウィンドウにドロップして、インポートします

光らせたいオブジェクトへの設定

光らせたいオブジェクトに設定を加えます

  • Sceneウィンドウで光らせたいコインをクリックして選択します

f:id:am1tanaka:20190612143802p:plain
光らせたいオブジェクトを選択

  • ProjectウィンドウからSpriteGlowフォルダーを開いて、SpriteGlowEffectスクリプトをドラッグして、Inspectorウィンドウにドロップして、アタッチします

f:id:am1tanaka:20190612144039p:plain
スクリプトをアタッチ

以上で、スプライトの周りに白い枠が描画されるようになります。

f:id:am1tanaka:20190612144133p:plain
Glowが描画される

あとは、Bloomの効果が発揮されるようにHDR設定をします。

HDR設定

  • HierarchyウィンドウからMain Cameraをクリックして選択します
  • InspectorウィンドウのCameraコンポーネントにあるAllow HDR設定にチェックを入れます

f:id:am1tanaka:20190612144341p:plain
CameraのHDR設定

この段階で光った場合は、調整作業に進んでください。光ってない場合はGraphicsのHDRを有効にします。

  • Editメニューをクリックして開いて、Project Settings > Graphicsを選択します
  • InspectorウィンドウのUse Defaultsのチェックを外します
  • Use HDR設定が3か所あるので、チェックを入れて有効にします

f:id:am1tanaka:20190612144913p:plain
HDR設定

以上で輝き始めます。MK Glow Freeの場合は以下のようになりました。

f:id:am1tanaka:20190612144451p:plain
光った(けど光り過ぎ)

あとはちょうどよい光り方になるように調整します。

MK Glow Freeの光り方を調整する

MK Glow Freeは、Post Processing Stackに比べて強めに光る感じです。MKGlow自体の調整を加えておきます。

  • Hierarchyウィンドウから、Main Cameraをクリックして選択
  • InspectorウィンドウのMK Glowコンポーネントから、Intensityの値を小さくします。0.25ぐらいがちょうどよさそうでした

f:id:am1tanaka:20190612145654p:plain
MKGlowの調整

f:id:am1tanaka:20190612145734p:plain
光るアイテム

他のパラメーターも変更して、何が変わるか確認してみてください。

オブジェクト側の調整

オブジェクト側でも光り方を調整できます。

  • 調整したコインをクリックして選択します
  • InspectorウィンドウのSprite Glowコンポーネントで、光り方を調整できます

f:id:am1tanaka:20190612145913p:plain
Sprite Glowスクリプト

まとめ

以上です。PostProcessの設定に慣れていれば、あっという間に使えると思います。HDRだけ加えてくれるというのがスマートですね。お手軽にBloomが使えて、Bloom好きには堪らないアセットです。

記事の中の画像はUnityちゃん2Dデータを利用しました(コインがプレハブじゃなかったのは誤算でした^^;)。

ユニティちゃんライセンス

この作品はユニティちゃんライセンス条項の元に提供されています

参考URL