7080 + 1

ゲームプログラミングの記事を書いてます。

【Unity】UIToolKitの機能だけでスマホみたいなフッターUIを作ってみる

UIToolKit の勉強中です。
UIToolKit は HTML+CSS を参考に作られています。
なので「既存の HTML+CSS の動画とか参考にすればいい感じのUIを作れるのでは?」と思いました。
できたのがこんな感じのスマホのようなフッターUIです。

参考動画は HTML+CSS で作られているものを見ながら作りました。
Magic Navigation Menu Indicator using Html CSS & Javascript | Curve Outside Effects - YouTube

アイコンはすべて icons8 からダウンロードしています。

改善点

添付 Gif の青丸のカーソルをちゃんと動かすことができなかったです。
EditorWindow のサイズが変わったときに追従させられなかった...

CSS との違いで苦戦したところ

PseudoClass(疑似クラス)

CSS に比べて対応しているものがかなり少ないです。今後増えてくれると嬉しいなと思いました。
USS (8種類)
Unity - Manual: Pseudo-classes

CSS (5,60種類くらい)
擬似クラス - CSS: カスケーディングスタイルシート | MDN

BorderRadius

USS と CSS で挙動が違います。ので、参考動画のような滑らかな曲線を作ることができませんでした。

参考