Share your UI Toolkit projects

[antoine-unity]

Hello,

We would like to invite you to share the projects with the community.
Which kind of games, tools or application have you built with UI Toolkit ?
Are there any screen shots or videos you can show us ?

The development team is very curious to see what you’ve been doing, do let us know be responding to this post.

We would also like to take this opportunity to thank you for the feedback, comments and bug reports that you have sent us. This is much appreciated !

Cheers

[BinaryCats]

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

[b4gn0]

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: nearcookedindianspinyloach

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

Inventory management:

Animated: severeneedycopperbutterfly

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

Merchant:

Animated: grimynervouschuckwalla

Blacksmith:

Blacksmith reforge with a prototype animation:
spiritednastyfawn

I don’t know if this goes against forum rules - please tell me if it does - shameless plug to store page:

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

[MostHated]

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

New

Original

zigzageasyicefish

[Stardog]

Unity editor window for UML-type class diagram app.

Mobile version.

State machine property drawer.

Folds up nicely.

[LudiKha]

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!

[WIP] Graphene - Open Source Reactive UI + Component-Kit - Routing, Binding, Templates, Boilerplate

Hi y'all, I just released version 0.1.0 for Graphene - an open-source framework & component-kit built on top of Unity UI Toolkit! It's an early release, but stable and in production use for a game. At this point I'd love any feedback, and for people to join or contribute to the project! [image] About Graphene superconducts your creativity for efficiently building modern interactive UI for games. It takes care of the heavy lifting by providing a framework inspired by Web standards, right …

[Timboc]

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!

[willgoldstone]

Loving seeing these examples! awesome work folks, more!

[The-Wand3rer]

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.

[Ryuuguu]

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

Canada 2019 election

[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.

[dannyalgorithmic]

@Timboc

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!

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.

[Timboc]

@dannyalgorithmic

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 [Released] BTagged - GUIDs per GameObject 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!

[dannyalgorithmic]

@Timboc

Thanks @dannyalgorithmic - happy to answer any questions (though might be better to take this over to https://discussions.unity.com/t/807074 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()?

[quickytools]

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 (quickytools-open-source / unity-auto-interface · GitLab) 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.

[MostHated]

@dannyalgorithmic

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.

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/some-comparison-results-testing-comparetag-equals-getcomponent-scriptableobject-tags.940575/

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

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

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.

[dannyalgorithmic]

@MostHated

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/some-comparison-results-testing-comparetag-equals-getcomponent-scriptableobject-tags.940575/

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

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

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.

[Timboc]

@dannyalgorithmic not wishing to hijack this thread I’ve written up a more technical post and recent progress here:

[Released] BTagged - GUIDs per GameObject

Tech-post - in the name of Performance! So as a follow-up to this thread ( https://forum.unity.com/threads/share-your-ui-toolkit-projects.980061/#post-6507240 ), I thought I'd go into a bit of technical detail wrt how BTagged works and some ballpark performance figures for those interested. Note: All comments are wrt BTagged v1.3 which at the time of writing has yet to be fully tested & released but is coming soon. GameObjects First, a word on GameObject.FindObjectByTag() - it's fast! A na…

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 .

[MostHated]

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

fainthilariousangelwingmussel

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.

babyishdisgustingfrog

[skowroshima]

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!

[Nexer8]

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.