Official Share your UI Toolkit projects

Hi @antoine-unity and the rest of the unity staff

My project, coming soon to the asset store, is a Localisation and Text management system tool for unity

My UI philosophy was to make the tool look like it belongs in Unity, and so the users would already feel familiar with the tool. I mirrored the package manager, and took design incites from the prefab workflow to create a natural feeling product. I also wanted to only use built in resources, rather than create my own, which gives a little more Unity look&feel




And for the people who use Light theme, uss variables made styling no that easy too


I also mirrored the tag/layers styles for my user customisable settings

Frankly it was a little difficult to mirror Unitys UI/UX and I would like to see it improved, but i think i did a pretty good job.

Sorry that my images are not terribly exciting

 

Hi, we are developing a game called Medievalien and we decided to use UI Toolkit (it was UI Elements when we started) for all our UI endeavors.

Menu UI:

Animated:

Path selection (UI Toolkit: Top & bottom bar + Map container + Right description and button):

Inventory management:

Animated:

Action gameplay (healthbars, bottom left hud, minimap on the right)


Merchant:

Animated:

Blacksmith:


Blacksmith reforge with a prototype animation:

I don't know if this goes against forum rules - please tell me if it does - shameless plug to store page:
https://store.steampowered.com/app/1372220/Medievalien/

We just uploaded our first feature trailer too in the Steam page, so keep a look at it!

 

I have been working on a fairly customizable animated inspector "replacement".


New


Original

 

Unity editor window for UML-type class diagram app.


Mobile version.


State machine property drawer.


Folds up nicely.

 

I've just released version 0.1.0 for Graphene, an open-source framework & component-kit for UI Toolkit, inspired by web frameworks such as React or Angular.

I'd appreciate any feedback, and the project is open for collaborators!

https://forum.unity.com/threads/gra...amework-component-kit-feedback-wanted.984659/

 

Working on a DOTS Tween library with Timeline (Subscenes/Entities + GameObjects).
#BTween
Hopefully coming soon but in the meantime, a quick sneak-peek:


I also use UITK for a clean Dropdown menu for #BTagged (u3d.as/1ZsW):

Thanks for all the teams hard work and more importantly, communication & forum participation - UITK is awesome!

 

I didn't want to be limited by having rectangular windows or requiring somebody else to draw "frames" for me, so I instead of taking 10 minutes to draw a simple shape in Photoshop, I built a whole mesh-based vector library that calculates the vertices for various shapes. I am now experimenting with integrating it with UI Toolkit. Here's the result.


On the left is the game view of the 3D window / dialog aligned to the camera with UI toolkit controls overlaid on top. On the right, just to show that it is in fact a 3D object and not a texture.
The controls are automatically positioned based on anchor locations provided by the 3D window metadata. It is also possible to style the different elements of the 3D window, such as the top bar.


This way I can draw the shapes of the various controls in say Illustrator (which I am much more versed in) and import them using SVG using my library into my project. Hopefully this will provide a bit of variety and interesting shapes for the UI.

 

To test the speed of UI Toolkit I made a map of the 2019 Canadian Election results show how people voted in each constituency. So that is 33K of hexes that are generated from data at run time or turned on/off to switch map view. Not a method I would use in production but good for a speed test. Here are the Webgl Versions. Spoiler: UI Toolkit is much faster.

Uit Toolkit http://ryuuguu.com/unity/Electoralgrams/ElectoralGramV0_1_1/

uGUI http://www.ryuuguu.com/unity/Electoralgrams/BasicCanada/index.html

[edit added video of app]
The text sizing in UIToolkit is not so nice but hopefully, in the 2021.1 release it will look nice.

 

You're a man to follow. Also, is there any way to enable having multiple tags per component? I'd want to save an memory and I am assuming each component is a full-blown monobehaviour with all the unecessary data they typically come with.

Please correct me if I am wrong, or if this feature is in the works or I simply haven't noticed it's already there, or it's not a good idea for some reason. Considering this for my next purchase. Looks extremely promising thus far.

 

Thanks @dannyalgorithmic - happy to answer any questions (though might be better to take this over to https://forum.unity.com/threads/released-btagged-guids-per-gameobject.962844/ or the discord I just setup). The brief answer is the default is indeed one monobehaviour per tag but it'd be easy to extend to an array of tags (all source code given and the property drawers work fine with arrays). I'll consider adding this to the package but given how easy it should be to extend and I'd say dubious gains, maybe not just yet. My expectation is that if you have that level of performance concern (counting Monobehaviours), DOTS & subscenes will absolutely be the way forward for you and the tags work great with that workflow (but I appreciate maybe not right now). Cheers!

 

I am always quite concerned about memory footprint. How is the performance relative to using something like GameObject.FindObjectByTag()?

 

I started using the new UI Toolkit last week and decided to build this (very simple) interface generator for components. It groups serialized members and methods (for organization) and exposes actions for invoking methods from the editor (for game mode iteration).
Import the git repo (https://gitlab.com/quickytools-open-source/unity-auto-interface) in package manager. There is a basic sample for rolling a ball to knock pins over. The pins group has an action to reset pins and the ball has an action to roll the ball.

 

I made a post a while back about tags that you might find interesting. Using scriptableobjects as tags in an array lets you have as many as you want.

https://forum.unity.com/threads/som...ls-getcomponent-scriptableobject-tags.940575/

I found that comparing a scriptableobject tag vs normal Unity tag is at least twice to three times as fast.

Code (CSharp):

1.     ElapsedMilliseconds / 1000f and ElapsedTicks / 100f.
2.     Test1: Comparison using: go.tag == "value";
3.     Test2: Comparison using: go.CompareTag("Value");
4.     Test3: Comparison using: go.GetComponent<>().Equals(value);
5.     Test4: Comparison using: go.GetComponent<>().field == value;
6.     Test5: Comparison using: ScriptableObject: go.HasTag(tagObject);
7.    
8.     [Log] [12:26:02]
9.     Test1 time: 0.041ms (4116.13 ticks) Count: 100000
10.     Test2 time: 0.022ms (2216.14 ticks) Count: 100000
11.     Test3 time: 0.025ms (2581.18 ticks) Count: 100000
12.     Test4 time: 0.025ms (2552.7  ticks) Count: 100000
13.     Test5 time: 0.011ms (1110.6  ticks) Count: 100000
14.  

I created a new system for my waypoints/pathfinding that lets me take the ScriptableObject tags that I have applied and either use them as normal tags on Unity GO's , or for objects that get converted to entities, they act as a way to add Component Data and Component tags to the entities when they are created by seeing which ScriptableObjects were on the GO at the time of conversion. It's a really nice way to go.

 

Though I appreciate the performance logs in the extremely, what I mean to ask is, is the dynamic searching through the scene (fetching) for an object with a BT Tag faster, as in "do you have to traverse the scene hierarchy in an time/resource inefficient way like how it seems to when using Unity Tags.

 

@dannyalgorithmic not wishing to hijack this thread I've written up a more technical post and recent progress here:
https://forum.unity.com/threads/released-btagged-guids-per-gameobject.962844/#post-6510483
Hopefully it answers some of your questions! Hopefully you also find it of interest @MostHated but it looks like you have a solution you're happy with. Happy to continue geeking out on SOs over there!
Now, bring on the UI Toolkit showcases please! I want to see me some more UI goodness! Thanks to all who have posted so far .

 

I have been working on an animation library of base animation helper methods, premade sequences, etc, in which I finally got around to putting together some examples and what not.
https://github.com/instance-id/elementanimationtoolkit

I am working on adding more new complete "ready-made" animated element types, such as the AnimatedFoldout seen above, and there are a few "on-hover" animation types, such as the "HoverBorderPulse" seen below. I am going to keep adding to it as I go along.

 

I have a minimalist setup with the UI Toolkit. I'm pretty happy with being able to do a flex layout and use a CSS like styling. Well done UI Toolkit dev team.

I've not spent too much time trying to "pretty" it up. I'm waiting for the package to mature, options to become available, and getting closer to release of my game. I'm hopeful there will be more styling options available in the future beyond borders and background.



Edit: I just saw the post on TextCore being added, this is exactly what I was waiting for!

 

Making tools for procedural + user defined elements that combines IMGUI workflow with web principles. The end goal is to have a framework in which it is painless to create complex user interfaces for apps.

 

Hi,
I am making a node based Database designer and SQL Query Builder to add to my SQL4Unity Database Asset.

I am struggling a little due to the lack of documentation and the breaking changes between 2018, 2019 and 2020 so a little assistance would be nice



this is the Tables designer section which is now about 100% for 2018 and 90% for 2019,2020

 

I'm nearing completion on a Tag-based "Asset Browser" as a design-time replacement for the Project window.

Its UI is entirely built in UIToolkit:




I'm impressed with the number of items that can be handled with reasonable performance - scrolling with 10k items is perfectly fine. I went through a bunch of variations before landing on the approach that seems the best; I spun up a test harness/app here with all the various approaches I tried. Definitely interested if anyone can find a faster approach for both resizing and scrolling.

I hope to have the Asset Browser up on the store soon.

1/11 update: It's available! Built fully in UIToolkit with full source code in the package.

 

I have been working on SnakeRoyale for quite some time and I have just released a new version with the UI rebuilt using UI Toolkit.
Although there are still some features missing and some things have that "pre-release feel", it is amazing to finally be able to build UI with XML and USS!
Coming from a web development background, this is so much easier for me.
It's a lot easier to share the design and styling of elements across different screens and to tweak them afterwards even after you've done the data binding and event hookups.
I am a solo dev, but I could imagine that it would also be a lot easier to have several persons working on different parts of the game when the UI can be made like this.

First step was to rebuild the UI to use UI Toolkit. Next step will probably be to redo the styling, since I'm not completely satisfied with the looks right now (not UI Toolkit's fault though!).

Looking very much forward to features like gradients, animation via USS and shadows (both text and box).

Check out the game for yourself at https://snakeroyale.io/ and in the screenshots below.

Welcome screen:


Lobby:


Create new room:

In game:

 

Can some of you please share a sample project for UI Toolkit, I've been having a really hard time finding any resources for anything above basic Editor UI

 

I put some of the stuff I've made to help when creating editors with UIToolkit in a free/open package: https://github.com/OscarAbraham/UITKEditorAid
It has fancy stuff like reorderable list and editable labels, some elements to make things like managed references work, and other utility elements, classes and extensions.

I want to make a thread for it; I feel like it would go well under the UIToolkit forum, but I don't know if it's supposed to go under Assets and AssetStore. Does anyone know where it should go? Thanks in advance

Here are some images:

 

I have ported my player from UGUI to UI Toolkit and it works well

It can be downloaded here, the version of UIToolkit is expected to be released in a few days, and I have started the final debugging/optimization phase

https://play.google.com/store/apps/details?id=com.CabinIcarus.IcMusicPlayer

 

WinForms style modals and popup - functioning almost completly identical to Winforms "Dialog" components in their stack. Completly Pooled. Docking/Anchoring, and supports loading and pooling commonly used layouts. Maximizing, collapsing to title - etc.



And they can be awaited on in coroutines:

Code (CSharp):

1.              
2. yield return ModalUtility.ShowAcceptCancel("Do You Like Cheese?", "Yes", "No")
3.     .WithTitle("Cheese")
4.     .OnResult(HandleDialogResult);
5.  

And support procedural layouts:

Code (CSharp):

1. // Inside coroutine:
2. yield return ModalUtility.ShowModal(CustomPopupFunction);
3.  
4. // Custom Layout
5. void CustomModalFunction(Modal modal)
6. {
7.     modal.SetMinSize(new Vector2Int(400, 200));
8.  
9.     modal.Add(new Label("Label"));
10.     modal.Add(new Label("Label"));
11.     modal.Add(new Label("Label"));
12.     modal.Add(new Label("Label"));
13.     var ve = new VisualElement();
14.     modal.Add(ve);
15.     ve.style.flexDirection = FlexDirection.Row;
16.      
17.     var bt2 = new Button(() =>
18.     {
19.         ModalUtility.ShowAboutDialog();
20.     });
21.     bt2.text = "Show About";
22.  
23.     var bt3 = new Button(() =>
24.     {
25.         ModalUtility.ShowAcceptCancel("Did you want to eat pie?");
26.     });
27.     bt3.text = "Gimme Food";
28.  
29.     ve.Add(bt2);
30.     ve.Add(bt3);
31.  
32.     modal.AddCloseButton();
33. }

 

I was in dire need of runtime dropdowns so I decided to create my own
It builds on Unity's DropdownMenu class and supports a multitude of different dropdown types.
The dropdown's VisualElements are pooled to keep allocations at a minimum.

They can be customized through USS to match the style of your game.

Feel free to use it and check out the samples here:
https://github.com/fabSchneider/fab.uitk-runtime-dropdown

 

Was amazed by a lot of the showcase above, I thought I would share mine here as well.

Pie menu with UI Toolkit, hahahah

Code (CSharp):

1. [PieMenu(path = "Selection/Object")]
2. public static void ObjectMode()
3. {
4.    ProBuilderEditor.selectMode = SelectMode.Object;
5. }
6.  
7. [PieMenu(path = "New PolyShape")]
8. public static void PolyShape()
9. {
10.    EditorApplication.ExecuteMenuItem("Tools/ProBuilder/Editors/New Poly Shape");
11. }

You can play around with it from here
https://github.com/BennyKok/unity-pie

Some pre-configured action for Pro Builder
https://github.com/BennyKok/unity-pie-probuilder

 

I chose UI Toolkit since I am building a game which will rely heavily on runtime tools for editing/modding and felt it might be better suited for building such interfaces. Here's a shot showing what the overall theme will look like. Will post more when more work around the editor tools are done.

 

I have finally finished writing User Injection + Fluent UITK API for Smart Inspector!

It now allows me to reliably extend any Inspector, however I want, in just a few minutes and a few lines of code!

github.com/neon-age/Smart-Inspector

 

Converted uGUI Menu system project to UITK. The original project was made for this Unite Europe 2017 talk.
Might be helpful to someone.
github.com/RunninglVlan/UnityMenuSystemWithUITK

 

I finally went though and tried to skin my minimalist UI setup. Being able to use style sheets really showed it's power here! Unfortunately, the current state of the builder still made it extremely challenging, and many of the updates were done in a text editor.

 

Like what?

 

What are you using to draw those red and green spline lines there in the timeline?

 

At the moment I just use MeshGenerationContext (https://docs.unity3d.com/Packages/c...yEngine.UIElements.MeshGenerationContext.html) and manually calculate each vertex. It's not a particularly nice way to work and I believe the UITK team are working on a vector API - I'll probably switch to that once they do.

 

Unity asset reference management utility working in background.

- Show dependencies and usages in inspector.
- Show dependencies and usages in EditorWindow.
- Warn when the asset is used by other asset will be deleted.
- Replaced references(guid based) before delete asset.

https://github.com/seonghwan-dev/AssetLens

 

I decided to get to work using Unity UI Toolkit. I used Unity 2021.2b16 through Unity 2021.2.7f1 to create a simulation into a Youtube Video.

Therefore, I present the UI Toolkit example titled Joystick Algorithm Simulation:

 

Hello !
I'm making a code generation tool for UI Documents. It generates a C# script using Roslyn based on a UXML template.
The main goal is remove the "boring" part of retrieving the document properties using the "Q()" methods, so the developers can focus on their logic instead. It gives a little feel of WinForm/WPF code behind.

Here the full presentation : https://forum.unity.com/threads/ros...for-ui-toolkit-documents-ui-elements.1222710/

Take for instance the following UXML template:

Code (html):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements"
2.         xsi="http://www.w3.org/2001/XMLSchema-instance"
3.         engine="UnityEngine.UIElements" editor="UnityEditor.UIElements"
4.         noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
5.         editor-extension-mode="False">
6.    <ui:VisualElement>
7.        <ui:Label text="Label" name="TitleLabel"/>
8.        <ui:Button text="Button" name="Button"/>
9.    </ui:VisualElement>
10. </ui:UXML>
11.  

Rosalina's AssetProcessor will automatically genearte the following C# UI bindings script:

Code (CSharp):

1. // <autogenerated />
2. using UnityEngine;
3. using UnityEngine.UIElements;
4.  
5. public partial class SampleDocument
6. {
7.     [SerializeField]
8.     private UIDocument _document;
9.     public Label TitleLabel { get; private set; }
10.  
11.     public Button Button { get; private set; }
12.  
13.     public VisualElement Root
14.     {
15.         get
16.         {
17.             return _document?.rootVisualElement;
18.         }
19.     }
20.  
21.     public void InitializeDocument()
22.     {
23.         TitleLabel = (Label)Root?.Q("TitleLabel");
24.         Button = (Button)Root?.Q("Button");
25.     }
26. }

Then you only need to create C# class like so to add your custom logic:

Code (CSharp):

1. using UnityEngine;
2.  
3. public partial class SampleDocument : MonoBehaviour
4. {
5.     private void OnEnable()
6.     {
7.         InitializeDocument();
8.         TitleLabel.text = "Hello world!";
9.         Button.clicked += OnConfirmButtonClicked;
10.     }
11.  
12.     private void OnButtonClicked()
13.     {
14.         TitleLabel.text = "Button clicked";
15.     }
16. }

To avoid extra work you can generate a UXML bindings and UI scripts by right-clicking on a UXML template file in your assets view and go to "Rosalina" sub-menu

Roadmap : https://github.com/Eastrall/Rosalina/projects/1

GitHub repo: https://github.com/Eastrall/Rosalina


Eastrall

 

Thank you for your feedback! I'll make the change and write that down on the README.md

 

Interesting solution! We've solved the same issue a bit differently by just having a BindableElement attribute that is then bound using reflection and the id of the item. Your solution is obviously even more comfortable

 

We've just open sourced our internally used scss package: https://forum.unity.com/threads/editor-scss-importer-library.1233940/

 

This is a chess position editor made with the new input system and UI Toolkit. There are a few minor changes to do but the mechanics work, switching from keyboard/mouse to gamepad is automagically detected. That was a lot of work and I have encountered many bugs but in the end I think the result was worth it.

 

It took a lot of work, but this is the first thing I do with UI Toolkit. It is a skin store:


You can change the colors of each body part. This was particularly hard to do because UI Toolkit is hard to extend due to lots of internals


You can purchase skins for each body part, all going to playfab

 

We're making a serious surgical simulation with job system and UIToolKit. We really like the way UIToolKit works.

 

DSA, XRay,Interventional Surgery.

 

Big thanks to everyone who has helped out with all my UI Toolkit questions over the last few months.

I thought I'd upload a gif of a game I'm working on that takes place in a fake operating system. At the moment I can create accounts, install applications (only one app exists right now which is installed automatically), pop open windows, resize them, move them around. I recently got the taskbar to work too, so you can minimize the windows to it and then restore it later.

Despite my occasional frustration with UI Toolkit, I've been having an absolute blast using it. I don't know how I lived without USS before . Between the new localization database, addressables and UI Toolkit, it really seems like Unity is in a great spot lately.