Shader Graphに対応したUnity UIについて、ユニティ・テクノロジーズ・ジャパンが紹介動画を公開

Shader Graphに対応したUnity UIについて、ユニティ・テクノロジーズ・ジャパンが紹介動画を公開

2024.02.21
ニュースUnity
この記事をシェア!
Twitter Facebook LINE B!
Twitter Facebook LINE B!

この記事の3行まとめ

  • 2023.2 Tech StreamでUnity UIがShader Graphに対応、ユニティ・テクノロジーズ・ジャパンが紹介動画を公開
  • ボタンなどのUI部分に対して、シェーダーを用いた演出を加えられるようになった
  • 画像とボタンが配置されたシーンを例に、モザイク処理や光のアニメーションなどを追加する様子が紹介されている

ユニティ・テクノロジーズ・ジャパンは2024年2月5日(月)、YouTubeでUnity UI が Shader Graph に対応! UI 用シェーダーを作ってみよう!と題した動画を公開しました。

2023.2 Tech Streamでは新たにUnity UIにShader Graphが適用できるようになりました。これにより、ボタンなどのUI部分にシェーダーを使った演出を加えることが可能です。

公開された動画では、例として画像とボタンが配置されたシーンが用意。ボタンは光るアニメーションが適用されており、画像のほうは四隅が丸くマスクされ、モザイク処理がかけられています。これらの処理にShader Graphが使われています。

動画の29秒時点から、サンプルについて紹介されている

Unity UIにおけるShader Graphは、従来のShader Graphと同様に操作できます。なお、Vertexの操作ができないなどの細かな違いがあるほか、Unlitを前提としているため、光源を用いたアニメーションはできないとのこと。

動画の1分40秒から、Unity UIにおけるShader Graphの実際の作り方

Unity UIにおける既知の弱点としては、マテリアルプロパティをアニメーションさせられない制約があります。

動画では、スクリプティングで対応するか、サードパーティ製のソリューションを利用するなどの解決法が推奨されています。

動画の2分32秒から、制約・注意点について。簡単なスクリプトの例も確認可能

動画内では、実際に動作が確認されているサードパーティのアセットとして、「Animate UI Materials」の紹介も行われています。

詳細は、動画をご確認ください。

YouTube動画『Unity UI が Shader Graph に対応! UI 用シェーダーを作ってみよう!』

関連記事

ホロライブ・白上フブキさんが主役のアクションゲーム『FUBUKI』はどのように作られた?開発者とパブリッシャーにインタビュー
2025.07.04
Unity・UEなどでアニメを作るハッカソン「アニメ×ゲームジャム UE in 京都」、7/26(土)より開催。参加申込は7/21(月)18時まで
2025.07.01
Unity 6の最新レンダリング機能を駆使したMMORPG『Pantheon: Rise of the Fallen』開発者インタビュー、Unity公式ブログで公開
2025.06.30
Unity 6.1のレンダリング最適化機能を一挙紹介。「Project Auditor」正式対応や、GPUパフォーマンスを向上する「Deferred+」など
2025.06.27
Unity 6.2 Beta最新バージョン「Unity 6000.2.0b7」リリース。ユーザー端末から実行中アプリのパフォーマンス状況を情報収集・診断が可能に
2025.06.27
UE5.6/Unity 6で作った“同じゲーム”の実装を比較できる。無料サンプルプロジェクト『Parrot Game Sample』、Epic Games協力のもとリリース
2025.06.25

注目記事ランキング

2025.06.30 - 2025.07.07
VIEW MORE

連載・特集ピックアップ

イベントカレンダー

VIEW MORE

今日の用語

プロパティ(Property)
プロパティ 英語で「資産」や「属性」を意味する。 一般的に対象の持つ属性・性質などを表す。例えば、画像ファイルにおける、容量やファイル形式、解像度などの情報。 3DCGツールやゲームエンジンにおいては、各オブジェクトのふるまいを決める個別の設定項目を示すことが多い。
VIEW MORE

Xで最新情報をチェック!