UIElements

Unityエンジニアの大庭@ohbashunsukeです。 去年のUnityアドベントカレンダー2020でUnityの次世代UIシステムという位置づけのUI Toolkitについて執筆しました。 UI Toolkitを検証するモチベーション 僕は普段の業務でUI開発に携わっています。 基本はuGUIベースのPrefabワークフローでUIを作っていて知見は溜まってきました。 大抵の課題はuGUIで解決出来ると思っています。 一方Unityが公式で発表しているUIシステム「UI Toolkit」はHTML/CSSといったフロント技術からインスピレーションを受けた技術でuGUIとは全く違うアプローチ…

DoozyUI 参考 インストール サンプル スライド見ながら作る データベース UI作成＆設定 UICanvas UIView アニメーション設定 UIButton Sound ノード管理 GraphControllerをシーンに置く 完成 画面タップでUI出す UIDrawer UIPopup （おまけ）UnityのUIBuilder 最後に DoozyUI アニメーション付けたり、ノードでUI管理できる assetstore.unity.com 元が65ドルで70%オフで2335円だった bibinbaleo.hatenablog.com VRにも対応してるって Starting wit…

今回はUnityの小技というよりも、最近よく目にするエラーの対処方法についてのまとめです。詳しい原因や再現方法は不明なため対処法のみ簡潔にまとめます。自分用メモですが、似たようなエラーが出ている方は参考にしてみてください。 まとめ 環境 状況 対処法 再起動する Layoutの初期化 LibraryフォルダーにあるUIElementsフォルダの削除 AssetのReimport All まとめ 参考資料 まとめ 以下の方法で解決します。・Unityの再起動 (ほとんどの場合これで治る)・Layoutの初期化・LibraryフォルダーにあるUIElementsフォルダの削除・AssetのReim…

ボタンを押すと VisualElement を追加削除する EditorWindow のサンプルです uxml を利用しておらずすべてスクリプトだけで記述しています using UnityEditor; using UnityEngine; using UnityEngine.UIElements; public class SampleWindow : EditorWindow { [MenuItem("Window/Project/SampleWindow")] public static void ShowExample() { var wnd = GetWindow<SampleWin…

UIElements の Style 周りのパラメータを書き換える場合、Structなので直接値を変更できない そのため フォントサイズの変更であれば以下のように記述する必要がある var ve = new VisualElement(); var c = ve.style.fontSize; var c2 = c.value; c2.value = 12; c2.unit = LengthUnit.Percent; c.value = c2; ve.style.fontSize = c; そのため、楽にコーディングできるように拡張クラスを作成しました github.com これを利用すること…

UI Toolkit では experimental ですが、 Position や Rotation などを Tween させる機能があり ※ Version 1.0.0-preview.9 現状は Layout TopLeft Size Scale Position Rotation を Tween させることができます 動かし方 Position の場合 VisualElement.experimental.animation.Position を呼び出すことで Tween させることができます var box = new VisualElement(); // 時間の指定はms // …

この記事では、uxml を使わずにスクリプトを使って CustomEditor を作成する方法を記述します CustomEditor で UIElements を利用するには CreateInspectorGUI を override する必要があります using UnityEditor; using UnityEditor.UIElements; using UnityEngine; using UnityEngine.UIElements; public class UESampleBehaviour : MonoBehaviour { [SerializeField] private …

UIBuilder では VisualElement に独自の変数があった場合は Inspector に表示される Label の場合は Text の領域が表示され、変更することで表示される文字も変更される Name から Focusable までは VisualElement で定義されている変数なので、どの要素に対してでも表示される 独自変数の領域作成 パラメータを入力するためには UxmlTraits を内部クラスとして作成し UxmlStringAttributeDescription 等 の UxmlAttributeDescription が必要になります 現状対応している Uxm…

VisualElement を継承することで VisualElement を自作することができる 他にも BaseField<> BindableElement TextElement 等既存の要素を利用して作成することができる using UnityEngine.UIElements; public class SampleElement : VisualElement { } しかしこれだけでは UIBuilder の Library に表示されないため UxmlFactory を内部クラスとして作成する必要がある using UnityEngine.UIElements; namespa…

Unity2020.1から Runtime UIElements が利用できるようになったので導入と表示までをまとめる 利用できると言ってもまで Preview 版なので、デバッグUIに利用する分には問題無いが uGUI の代わりとしてはまだ使えなさそうでした 利用した Version UnityVersion：2020.1.10f UI Builder；1.0.0-preview.9 UI Toolkit；1.0.0-preview.9 導入 Runtime UIElements の導入は PackageManagerから行う 左上の「＋」より Add package form git UR…

はじめに みなさんエディタ拡張していますか？私はエディタ拡張という名前からかなり高度な知識が必要では？と初めは思っていたのですが、実際に触ってみると意外とシンプルだったと感じました。この記事ではインスペクターのエディタ拡張を扱い、以下の画像のよう見た目・操作性などのメリットをもたらす事ができます。 ScriptalbeObjectのインスペクター拡張特にScriptableObjectというデータを扱うアセットのインスペクターをエディタ拡張するとデータ管理が圧倒的に楽になりオススメですね。こういったインスペクター拡張の手順を紹介していこうと思います。またここではUIElementsではなく昔な…

github.com セットアップ UnityPackageManagerで「AnKuchen」をインストールします。 https://github.com/kyubuns/AnKuchen.git?path=Unity/Assets/AnKuchen UIのルートにUICacheComponentを追加し、Updateボタンを押します。 更新ボタンを押す処理をワークフローに合わせて自動化することをオススメします。 サンプル ボタンを取得 GameObjectから名前を指定するだけでコンポーネントを取得することができます。 UICacheの下に「HogeButton」が1つしかない場合、Hog…