
おしゃれなエフェクトをUIに付けたい!
本記事の内容
・いい感じのUIをエフェクトの作り方解説記事のまとめ
目次
Imageの加工
トランジッション(画面切り替え)、ボタンやImageの加工
とりあえずUI関連にエフェクト付けたいときは、こちらをありがたく毎回使わせていただいています!
GitHub


GitHub - mob-sakai/UIEffect: UIEffect is an open-source package that allows you to intuitively apply...
UIEffect is an open-source package that allows you to intuitively apply rich UI effects directly from the Inspector or via code. Combine various filters, such a...


上記のような加工が出来ます。特にボタンなどにShinyを入れたりすると、金属な感じが出ます。


他にも、ディゾルブ表現、トランジッション表現も可能だったりします。万能!!
UIエフェクト


こんな感じのアイテム獲得時に出る後光エフェクトなどを作りたいとき以下の記事が参考になります。
プロのUIデザイナーの方のこちらの作り方解説通りに作ればそれっぽくなります(解説放棄)
ゲームUI演出




Unity_Particleの作り方(初心者用)
パーティクルは細かい粒子を放出するシステムで、使い方を覚えるとパーティクルシステムで様々な表現ができるようになります。 パーティクルを作ってみる Hierarchyで右ク...
そもそもUIにエフェクトってどうやって表示するの?という人はこちらの記事参照。
あわせて読みたい




UnityでUIにエフェクト(パーティクル)を表示する方法
UIにエフェクトを掛けてリッチなUIを作りたい! 本記事の内容 ・UnityでエフェクトをUIに表示する手順※URPの利用を前提とした解説をしています 【UIにエフェクトを表示...
カメラエフェクト
レンズフレア


UIとはまた別なのですが、ついでに紹介。
太陽が照りつけているシーンなどでよく見るこのレンズフレア機能ですが、Unity標準で用意されています。こちらの記事で解説されています。
はなちるのマイノート




【Unity】URPでレンズフレア(Lens Flare)を実装する(Unity2021.2以降利用可) - はなちるのマイノート
はじめに 公式の動画を見ていたところURPで利用可能なレンズフレアの紹介をされていて、面白そうだったので試してみました。www.youtube.com公式ドキュメントにはURP 12 (U...
テキストを加工していい感じにする方法
こちらの記事を参照。
あわせて読みたい




UnityでTextMeshProを使ってテキストをリッチに加工する
テキストを盛っておしゃれな文字を表示したい! 本記事の内容 ・TextMeshProで文字を加工する手順・TextMeshProで出来る文字加工例(アウトライン、ベベル、枠線、影付...
コメント