![見出し画像](https://assets.st-note.com/production/uploads/images/111857083/rectangle_large_type_2_82f697a8fb97e39282021c1379e84162.png?width=1200)
Unity 2023.2で、UIもShaderGraphでリッチにしよう【Unity/URP/ShaderGraph #ポケテク】
こんにちは!ポケラボのテクニカルアーティスト礒部です。
今回のポケテクは、最新のUnity(2023.2 Beta)に嬉しい機能が入ったのでそちらをご紹介していく内容になっています。
2023.2 beta に入った "UGUI Support for Shader Graph"
こちらのUnity Forumを見たところによると、
UGUI Support for Shader Graph
Shader Graph now has sub-targets for Canvas in both URP and HDRP. This means UI artists can create custom shaders for their UI elements using Shader Graph. This gives non-coders the freedom to define the overall look and style of UI elements, create animated UI effects, and define custom button states - all while using less texture memory.
こちらのフォーラムは2023.2のベータ版の内容であり、Canvas以下のUIをShaderGraphがサポートした、と書かれています。
今まではScreenSpace-OverlayなCanvasのImageなどでShaderGraphのマテリアルを利用すると、ただしくテクスチャを描画したりすることができませんでした。
さっそく2023.2.0b1をインストールし、試してみることにしましょう!
実装
Create画面が少し変わっていることに驚かされながらも、いつもの場所にCanvas Shader Graphの文字がありました!
![](https://assets.st-note.com/img/1690457744768-BzqAKCNQqW.png)
今回はこのようなシェーダーを組んでみました。
![](https://assets.st-note.com/img/1690457874867-lm89MK6GGA.png?width=1200)
UVをPolarCoordinatesノードで極座標に変換し、そのy成分を取り出してTimeを加算しつつ、Fractionノードに繋ぐことでこのように回転するグラデーションが得られます。
![](https://assets.st-note.com/production/uploads/images/111854261/picture_pc_c5bc7116e36b6a9b69a831560431d892.gif)
そちらを最後にHueノードにつないでいます。HueノードのRangeはNormalizedに変更しています。ためしにColorノードを差してみるとこのような効果が得られます。
![](https://assets.st-note.com/production/uploads/images/111854596/picture_pc_25e949a890d3b263bc37d53c7e7b59ba.gif)
UI用のシェーダーとしては、_MainTexというReference名にしたテクスチャをサンプルしてHueのInに差します。UI用のシェーダーですので_MainTexにImageコンポーネントなどでアタッチされている画像が渡されてくることになります。
こちらを元にマテリアルを作成し、Canvasの各モードで試してみましょう。
![](https://assets.st-note.com/production/uploads/images/111855050/picture_pc_9ef6dbcf39d3ddff9f6b37b324da25df.gif?width=1200)
各Canvasモードでただしく再生されていることがわかりますね!
さらにMaskコンポーネントでマスクもできることを確認できました。
![](https://assets.st-note.com/production/uploads/images/111855588/picture_pc_f8a245cda06cbe3ef2b574e8dfcdbf31.gif?width=1200)
この機能が使えるようになれば、もともとShaderGraphはエンジニア以外でもシェーダーを組めるようにすることを目標に設計されているツールですので、UIデザイナーがシェーダーをある程度試作して表現力を高めたり、UI用のシェーダーの仕様をキャッチアップする手間が省けたり… 多くのメリットがあるなと感じました。
2023.2のBetaは他にもShaderGraphの改善やグラフィック周りの変更が2022LTSと比較しても入っており、Beta版からいちはやくキャッチアップしておきたくなるような、素晴らしいリリースでした!
ポケラボでは3D関連職種をはじめ新規開発を一緒に推進いただける仲間を募集しています。少しでもポケラボに興味をもっていただいた方は、カジュアルなご相談からでも大歓迎なので、お気軽にご連絡ください!
株式会社ポケラボ 採用サイト
カジュアル面談をご希望の方はこちら