UIEffectを使ってuGUIにエフェクトをかけてみる

はいどーもこんにちはニートです。
本日はUIEffectなるアセットの紹介をしようと思います。
いくつかのブログでも紹介されていたのですが「インポートしてはい終わり」みたいなのが多かったので、備忘録がてら簡単な使い方も書いていきますよ。

UIEffectってなに

みなさんシェーダーって使ったことありますか。
僕は全然使えません。
uGUIは他のシェーダー、例えばSprite用のシェーダーと同じものは使用できない(うまく動かない)とかあるみたいで、uGUIに対してエフェクトをかけるのにめっちゃ苦労していました。
そこで見つけたのがこの「UIEffect」です。
これを使うと、シェーダーを書かなくてもカッコイイエフェクトを簡単に適用することができます。
ちゅーわけで以下のサイトからDLしてインポートしといてください。
https://github.com/mob-sakai/UIEffect
全体としてどのようなエフェクトがあるのかは、WebGL Demoを見るとわかりやすいのではないかなと思います。

使い方

インポートが終わったら、シーンのヒエラルキーにuGUIのImageを貼り付けてみてください。
するとCanvasが自動で付与されると思います。
Unity5.6以上を使用している場合、このCanvasオブジェクトのCanvasコンポーネントにあるAdditional Shader ChannelsをTexCoord1に変更してください。

お次は先ほど貼ったばかりのImageオブジェクトのSourceImageをお好きな画像に変更してください。
僕はUIEffectに同梱されているユニティちゃんを使用します。

ここまでで下準備ができたので、あとはお好みのコンポーネントを貼り付けるだけです。
コンポーネントの種類についてはGitHub上の「Available effects」の項目をご覧ください。
色々とありますよ。
ここではUIShinyを使ってみます。
コンポーネントを適当にいじると、以下の画像のように光った感じが出せると思います。

インスペクタの値を適当にいじって遊んでみてください。

スクリプトから制御する

今回使用したUIShinyコンポーネントの場合、例えば「どのタイミングでテカテカ光らせるか」をスクリプトから制御したり、各種インスペクタの値をスクリプトから操作したい場合があると思います。
というわけでそれもやってみましょう。

まずはUnityChanEffectorというスクリプトを作成して、Imageオブジェクトに貼り付けてください。
中身は以下のような感じ。

簡単にコメントもつけていますが、一応まとめておきます。

・Coffee.UIExtensions名前空間をusingしとくと便利
・エフェクト用のコンポーネントは他のコンポーネントと全く同じように取得できる
・Zキーでキラッと光る
・Xキーでエフェクトの効果を変更

インスペクタの名前と一対一で対応しているので(全部は確認してませんが)、操作もやりやすいですね。

UIEffectCapturedImageで画面をキャプチャする

UIEffectには画面をキャプチャする機能もあるのですが、キャプチャ方法で詰まったのでメモがてらUIEffectCapturedImageの使い方を書いておきます。

まずは先ほど設置した画像に加え、普通の2DSpriteを設置してください(uGUIではない)。
僕はUIEffectに付属していた赤いボタンを設置しました。

それからCanvasの子オブジェクトとして、適当に何かを設置してください(中身はなんでもいい)。
そのオブジェクトにUIEffectCapturedImageコンポーネントを貼り付け、ToneModeをGraysclaeにして、あとはお好みでブラーを設定したりしてみてください。

UIEffectCapturedImageコンポーネントを貼り付けたオブジェクトに、今度はScreenCaptureというコンポーネントを貼り付けます。
中身はこんな感じ。

コメントの通りですが、Cキーで画面をキャプチャして、Vキーでそのキャプチャした画像を解放します。

ここで動かしてみてください(Cキーでキャプチャ)。
すると……。
uGUIで設置した画像は何の変化もなく、なぜかSpriteの方だけグレースケールされていると思います。

これの原因が一体なんだと調査した結果、どうも問題はCameraだったようです。
MainCameraはそのままにして、UICameraというカメラを作ってください。
UICameraのClearFlagsはDon’tClearで、位置もMainCameraの邪魔にならないように適当な数値(100,100,100とか)にしてください。
あとはCanvasのRenderModeを「ScreenSpace-Camera」にして、RenderCameraをUICameraにします。

これで実行すると、うまくグレースケールされるはずです。
うまくいかない場合、UIEffectCapturedImageコンポーネントを貼り付けたオブジェクトがCanvas内で一番下になっているかどうかを確認してみてください。

終わりに

UIEffectCapturedImageの仕様を把握するのに時間がかかってしまいましたが、それ以外はかなり直感的で使いやすいかなと思いました。
オススメのアセットです(ちなみに作者さんは日本人っぽいです)。

あと気になってるアセットは「Fungus」ですかね。
これもそのうち使ってみたい……(これも作者さん日本人っぽいです)。

ほなそんな感じでまた。

フォローする