はじめに
メリークリスマス、CyberAgent26卒内定者でゲームクライアントエンジニアとして入社予定のぬまちです。
この記事はCyberAgent26卒内定者によるアドベントカレンダーの24日目として投稿しています。クリスマスですね🎄
個人的にグラフィックス領域に興味があり、Unity6.3でUI ToolkitにCustomShaderが対応したとのことで、ちょっと遊んでみたという内容になっています。
使用技術
- Unity 6.3LTS (6000.3.2f1)
- Universal Render Pipeline 17.3.0
- Shader Graph 17.3.0
今回つくったもの
導入ということでかなり簡易的ですが、ボタンを押したらディゾルブで消えていくというものを作ってみました。ちなみに一切クリスマスとは関係ない表現です。
実装
1. UI BuilderでButtonを配置
VisualElement配下に適当なButtonを追加します。その後、いい感じにレイアウトを整えます。
UI Builder上での細かい配置手順などは今回割愛します。高橋 啓治郎さんの講演がすごくわかりやすいので参考にすると良いと思います。https://www.youtube.com/watch?v=GFxOCdHwWZA
2. テクスチャの設定
次にボタンのテクスチャを設定します。何でもよいです。ここで設定したテクスチャにディゾルブをかけていくので、見た目に影響してきます。
今回は燃えるような表現をしているので、紙っぽいテクスチャをネットから拾ってきました。
ButtonのInspector > Background > Imageにテクスチャセットします。
3. ShaderGraph作成
いよいよシェーダーの作成に移ります。
Projectウィンドウで右クリックし、Create > Shader Graph > URP > UI Shader Graphから作成できます。
今回作成したシェーダーの全体像はこんな感じになっています。
構成としては以下のようになっています。
1. テクスチャ入力部分（左上）
- Default Texture: 様々なテクスチャパラメータ（UVSet0、Tiling、TextureH、SSR（Add）、Erosion Tex0/1、Dissolve0/1）を持つテクスチャ群
- Render Type Blend: ブレンドモードの設定
2. ノイズテクスチャ生成（左側）
- Sample Texture 2D: ノイズテクスチャ（灰色のざらざらした画像）をサンプリング
- このノイズがディゾルブの境界パターンを決定
3. ディゾルブの境界制御（中央）
- Step ノード: ノイズテクスチャの値と閾値を比較し、白黒のマスクパターンを生成
- 複数のStepノードが使用されており、段階的なディゾルブ効果を作成
4. 境界線の色付け（右下）
- One Minus ノード: マスクを反転
- Subtract ノード: 2つのマスクの差分を取り、境界線部分を抽出
- Multiply ノード: 境界線にカラー（オレンジ色）を適用
5. 最終出力（右側）
- Fragment シェーダー: Base Color（基本色）とAlpha（透明度）に接続
- Vertex シェーダー: 頂点処理に接続
4. マテリアル作成と割り当て
シェーダーが完成したら新たにマテリアルを作成し、今作ったディゾルブシェーダーを割り当てます。
UI Builderへ戻り、ButtonのInspector > Material > Materialに作成したマテリアルをセットします。
5. ディゾルブアニメーション実装
ボタンを押したときのコールバック処理と、アニメーションを実装します。アニメーションにはDOTweenを使用しました。
public class DissolveButton : MonoBehaviour
{
[SerializeField] private UIDocument _uiDocument;
[SerializeField] private Material _dissolveMaterial;
private void Start()
{
var root = _uiDocument.rootVisualElement;
var button = root.Q<Button>();
button.clicked += OnDissolveButtonClicked;
}
private void OnDissolveButtonClicked()
{
_dissolveMaterial.DOFloat(1.0f, "_Threshold", 1.0f);
}
}
DissolveButtonをUI Documentがアタッチされているオブジェクトに取り付けます。UI Documentと作成したMaterialへの参照を忘れずに設定してください。
これで実装は完了です。実行してみましょう！
さいごに
今回の6.3アップデートでUI Toolkitを使う上での表現の幅がかなり広がったのではないでしょうか？まだまだ業界的にはuGUIを使っているケースが多いと思いますが、近いうちUI Toolkitの時代がやってくる気がしてます。