ImageやText(TMPも)を装飾するUIEffectがv5になってさらに使いやすく&強力に！【Unity】【uGUI】

この記事でのバージョン
Unity 2022.3.32f1
UIEffect 5.0.0

はじめに

以前、UIEffectという無料(MIT License)で公開されているアセットを使って、

画面全体をディゾルブ(トランジション、フェード)させて切り替える方法を紹介しました。

そのUIEffectにv5が出ていたので、今回はその紹介です！

ちょっと触った感じ、さらに使いやすく強力になっているようでした。

(原文は英語なので、ChatGPTでの翻訳を載せておきます)

UIEffect v5の主な特徴
UIEffectはすぐに使える！：インスペクターでパラメーターを調整するだけで、簡単にエフェクトを適用できます。
豊富なエフェクトの組み合わせ：グレースケール、ぼかし、ディゾルブなど、複数のフィルターやパラメーターを組み合わせてUIを装飾できます。
効率的なシェーダービルド：使用中のシェーダーバリアントのみがビルドされるため、ビルド時間が短縮されます。
URP/HDRP/VR対応：URP、HDRP、VR環境に対応しています。
ランタイム＆エディタープリセット：ランタイムとエディターの両方でプリセットが利用可能です。
TextMeshPro対応：TextMeshProに対応しており、やタグもサポートしています。
UIEffectReplicaコンポーネント：エフェクトを複製し、複数のUI要素に一括適用できます。
UIEffectTweenerコンポーネント：エフェクトの再生、停止、一時停止、再開を制御できるTweenerコンポーネント。
AnimationClipサポート：AnimationClipを使用してエフェクトのアニメーションを制御できます。
v4互換コンポーネント（オプション）：最小限の変更で簡単にアップグレードできるv4互換コンポーネントがオプションで利用可能です。

上記のディゾルブ以外にも色々なエフェクトがあり色々な場面で重宝するので、

uGUIを使うゲーム(つまりほぼ全ゲーム)は導入をオススメします。

ちなみにWeb GLのデモもあるので、

とりあえずこれを見れば何が出来るのか分かるかと思います。

なお、記事中では以下のアセットを使っています。

Clean & Minimalist GUI Pack｜2D GUI｜Unity Asset Store

導入と使い方

まずは導入からですが、お馴染みのPackage Managerを使います。

+ボタンからAdd package from git URL...を押し、

https://github.com/mob-sakai/UIEffect.git?path=Packages/src

と入力してAddを押せば、

導入完了です。

なお、TextMeshProでも使いたい場合は、TextMeshPro SupportもImportしましょう。

あとはエフェクトを付けたいImageやTextにUIEfffectというコンポーネントをAddするだけ。

自由にエフェクトを設定する事はもちろん、

Loadから設定を読み込む事も出来ます。(Save As Newから自分の設定を保存することも可能)

例えばBurnという最初からある設定を読み込むと以下のような感じに。

ちなみにコードからの操作も出来ます。

using Coffee.UIEffects;//UIEffectを使うのに必要

var effect = GetComponent<UIEffect>();

//設定(プリセット)読み込み
effect.LoadPreset("Dissolve");

//設定値(トランジションの倍率)の変更
effect.transitionRate = 1.0f;

こんな感じで簡単に色々なエフェクトを追加する事ができます。

UIEffectTweenerとか気になる機能もあるので、別途記事を書くかもしれません。書きました。

---