😋

【宣伝】Unity向けのベクターUIライブラリを作成しています!【Unity-SDF-UI-Toolkit】

2025/01/05に公開

⚠️注意⚠️ 宣伝的な内容です!後々情報の更新もするかもしれない…

https://x.com/TLab22913171/status/1875610359194857823?t=PYNYfemYFwKDRH6hASMtcA&s=19

Unity向けのベクターUIライブラリUnity-SDF-UI-Toolkitを作成しています.結構前から作り続けているものなのですが,宣伝がてら記事を書いてみました.

https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit

どんなライブラリなの?

Unity-UI-Rounded-Corners機能強化版的な立ち位置を目指して作り始めました.「それなら新しくリポジトリなんて作らないで,プルリクエストを作って本家に持っていってみればいいじゃん?」という意見もあるかもしれませんが自分達(実は一人で作っているものではなく,もう一人のコントリビュータの方にかなり助けてもらっている現状です…)なりの構想で開発を進めているつもりです.見逃してください….

より多くの図形のサポート

比較的沢山の図形に対応しているのが一つの特徴です.本家にも備わっているQuadとその四隅それぞれの独立した丸角に加えて,CircleTriangle, Arcなどの基本形状,またSDFテクスチャSplineなどの少し複雑なシェイプにも対応しています.

アウトラインやシャドウの対応

これが本家と比較した一番の違いだと思います.本家はパフォーマンスを考慮してか,アウトラインは想定していないシェーダーの実装になっています.まあでも,Quadだけの場合はUIを2つ重ねてしまえばいいという部分もあると思いますが….ちなみにアウトライン対応のシェーダーの実装にはこちらの記事が大変参考になりました.どの位置をサンプリングしても物体との距離が正しく取得できるような(標準的な?)距離関数を使用することで,アウトラインに対応しています.この記事で紹介されている限りで,全てではないですが多種類の形状のサポートを行ったという感じです.


バッチレンダリング対応

これも大きな特徴の一つだと思っています.同じプロパティ値シェーダーを持つUIはマテリアルを共有することで可能な限りドローコールなどを減らす実装をしています.もう一人のコントリビュータの方に実装してもらった機能です(この方はこの機能だけでなく結構いろんなところで活躍してくれています).

https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit/pull/14

SDFテクスチャエディター

また,必要ないかもしれませんがSDFテクスチャを作成するための簡単なEditor GUIも実装しています.ベジエカーブを用いた図形の作成方式を採用していて,描画にペイントではなく,ベジエカーブを用いる利点は,ベジエカーブだけで多角形を任意のセグメント数で表現できる→それを距離関数を使って綺麗な(ガコガコ・歪みのない)SDFテクスチャとして簡単に焼き付けが出来るというところにあります.


ちなみに,SDFテクスチャエディターでは4点制御のベジエカーブを図形の作成に使用していますが,この4点制御のベジエカーブは数式的に距離を測ることが(自分には)難しく,こちらを参考に4点制御のベジエカーブから数式的に距離を算出可能な3点制御のベジエカーブへの変換をしたりしています…!

将来性は?

正直よくわかりません.今だとUnity公式のUI Toolkitもかなり推されていますよね!ただUnity-UI-Rounded-Cornersが根強い人気なことを考えると,SDFをベースにしたUIっていうライブラリそのものの方向性は間違ってないと思っています.

ともかく,実際に使ってくれる人が増えることを願うばかりです….フィードバックやリクエストなどが開発の1番のモチベーションになります!👇️気になった方はぜひ使ってみてください👇️

https://github.com/TLabAltoh/Unity-SDF-UI-Toolkit


最後に
ところでこういう記事ってツールの紹介にあたるのでカテゴリは本来あっち(Idea)なんでしょうか…?近い趣旨の記事を書いてる人はTechにしている印象がある…

Discussion