Official Share your UI Toolkit projects

UPDATE: it's out on the Asset Store now! https://assetstore.unity.com/packages/tools/gui/onejs-221317

I made a Scripting Engine for Unity that allows you to use Typescript and JSX. Using Preact to drive UI Toolkit is quite amazing. This will be heading to the Asset Store

 

I've been building a MarkdownElement for UIToolkit in the Editor, powered by xoofx's awesome Markdig library, for use in many of my projects. Currently compatible with Unity 2018-2022

 

Could you please explain why Queries should be in OnEnable instead of Awake? Most example I have seen online put the queries in Awake. According to the Unity Manual, OnEnable is called immediately after Awake. Is it that the Visual Tree Asset is not instantiated until OnEnable?

 

Making a channel-packer editor tool using UTK and GraphView, still early but promising

 

Hello, here are some of my editor tools built with UIToolkit:

PlayableGraph Monitor

A PlayableGraph monitor tool just like Graph Visualizer.




Asset Quick Access Tool

 

Allows store android keystore between sessions, without manual input everytime.
Keystore data will be autocomplete on build stage
GitHub

 

I am going to convert UI from UGUI to UITK.
I use Localization and Zenject package at the same time before.
So I make a small project to reproduce same function when I use UGUI, Localization and Zenject.
I write a custom visual element to send Zenject signal to trigger other visual element to display image and description.
And use Localization to localize description text.

 

Hi,

sorry to bump this thread by replying to my own message, but just want to showcase the new Rosalina feature, which is the possibility to create UI bindings and scripts for Unity's EditorWindow !
All you have to do is set the "editor-extension-mode" to "true" in the UXML definition or check the "Editor Extension Authoring" checkbox in UI Builder:



This will generate the following UI binding script:

Code (CSharp):

1. // <autogenerated />
2. using UnityEditor;
3. using UnityEngine;
4. using UnityEngine.UIElements;
5.  
6. public partial class CustomEditorWindow : EditorWindow
7. {
8.     public Button SampleButton { get; private set; }
9.  
10.     public void CreateGUI()
11.     {
12.         VisualTreeAsset asset = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/...");
13.         VisualElement ui = asset.CloneTree();
14.         rootVisualElement.Add(ui);
15.         SampleButton = (Button)rootVisualElement?.Q("SampleButton");
16.         OnCreateGUI();
17.     }
18.  
19.     partial void OnCreateGUI();
20. }

Then you can override it and control how the window opens by creating a UI Script (with a right click on the UXML file and select "Generate UI Script" under the "Rosalina" menu item) :

Code (CSharp):

1. using UnityEditor;
2. using UnityEngine;
3. using UnityEngine.UIElements;
4.  
5. public partial class CustomEditorWindow : EditorWindow
6. {
7.     [MenuItem("Window/My Custom Editor Window")]
8.     public static void ShowWindow()
9.     {
10.         EditorWindow.CreateWindow<CustomEditorWindow>("My Custom Editor Window!");
11.     }
12.  
13.     partial void OnCreateGUI()
14.     {
15.         SampleButton.clicked += OnSampleButtonClicked;
16.     }
17.  
18.     private void OnSampleButtonClicked()
19.     {
20.         Debug.Log("Hello world!");
21.     }
22. }

Final result when clicking on "Window -> My Custom Editor Window":


Check out the documentation on GitHub : https://github.com/Eastrall/Rosalina#editor-window


Eastrall

 

You should post this in the Timeline forum : the Graph Visualizer is completely outdated and your tool should be useful to many

 

As a project to learn UI Toolkit I decided on simply replicating Game Dev Tycoon. It is essentially a GUI game, and a lot of fun too and not one of those ewwwwww mobile cash-grab pseudo-games (aka what DragonCrashers replicates). I know this is where the money is, but I'm more after where the fun is.



Ultimately, I want to be able to design mangement game GUIs which are only suitable for desktop screens, since you'll have a lot of lists, graphs, stats, financial sheets, and so on.

 

I made a setting menu with UITK.
Still use Localization and Zenject together.

 

I've made a debugger for my drop manager tool Loot

 

We recently created NewGraph a data-oriented node graph solution for Unity powered by UIToolkit (UIElements). It is based on the idea to visualize complex data structures as graph networks without having to modify already established data classes, except adding [Node], [Port], [PortList] and [SerializeReference] attributes to all classes that should show in the Graph View.


Link to GitHub project

Features

• WYSIWYG. A port connecting to a node in the graph is a real reference to the object in your graph .asset
• Good performance even with many nodes as this is built upon the new retained UIToolkit UI system.
• create visual data oriented networks based on your custom [Serializable] data classes simply by adding attributes.
• Fully serialized dynamic lists of ports with the [PortList] attribute.
• Customize data visualization with [GraphDisplay]: Display a field inside the graph, side inspector or both views.
• Full support of Unity's native Undo/Redo stack.
• Support for Utility Nodes that can be created to help organize your specific graph business.
• Copy & Paste even across graphs.
• No child ScriptableObject mayhem! A graph asset will hold all your data in one single scriptable object.
• Cyclic references and complex reference chains are natively supported with the use of [SerializeReference] attribute.
• No reliance on the now deprecated Experimental.GraphView. Everything was written from scratch or is based on maintainable code.
• Keyboard shortcuts, a searchable context menu, default UtilityNodes like CommentNode, GroupCommentNode, a extensively commented code base and more...

Wiki
See the Wiki for installation & usage instructions.

Changelog
See the Changelog for current updates!

 

You mean like in UML?
Is that data then modifiable in the graph, or does the graph only show the data scheme? Or does it even allow generating code?

 

Yes the data is modifiable, think UML but operating on instances of your class. It is not meant to generate code but you might very well implement code generation based on you nodes in an additional step. It's a different way to look into the instances of your [Serializable] classes, structs and fields. It was designed especially for complex data structures like Mission Systems, Quest Systems, Dialog Systems or anything where one would benefit from visually seeing the references one class has to another.

 

Happy to share my latest project I've been working on.
It'll be a new asset for the AssetStore and is called Databrain. I made it completely from scratch with the new UIToolkit.
It basically consists of a main data management editor and can be expanded with add-ons.

Main editor


Logic add-on (High level visual scripting node editor)


- Made from scratch without the deprecated GraphView.

Techtree add-on


Stats add-on


Localization add-on


It's still under development but I plan to release it very soon.
For more information check out the website here:
https://databrain.cc

Additionally I want to say that I love creating editor tools with the new UIToolkit! I made quite a lot of tools with IMGUI and was very sceptical at first. But now I don't want to go back

 

Those panels look really good. Very polished.

 

I made this simple shape gen for UIToolkit to test the new vector api


You can download it here
https://github.com/breadnone/UTKShapeGen-Custom-Shapes-Editor-For-UIToolkit

 

I present you a new asset named "UI Toolkit Component", which was originally a feature designed for my game under development.

This asset allows you to use UI Toolkit with components using a selector similar to the stylesheets of the UI Builder. The attachment of elements to components is done dynamically, and most of the CSS pseudo-classes are usable on the selector. It is also possible to apply stylesheets when an element is attached to a component, and to use events related to the value and state of the element, such as changing the text of a "Label", clicking a "Button" or selecting a "RadioButton" in a "RadioButtonGroup".

Here is an example of how to integrate the Localization package with UI Toolkit without needing any coding knowledge:

You can find it here: https://assetstore.unity.com/packages/slug/239489

 

✨Introducing Icons Finder in Unity, with UIToolkit.

Forget about importing png icons and finding them, NOW, Instantly load any open source icons to your game UI, or editor UI with Icons Finder.

Learn more over at my tweet thread! https://twitter.com/BennyKokMusic/status/1675546561277984769

 

Twitter seems to be limiting traffic lately. I am unable to access your link as well.

 

https://github.com/BennyKok/unity-tailwindcss

This is the GitHub link

 

Coming back to ui toolkit because I like self inflicting pain.
And then I see this: https://assetstore.unity.com/packages/tools/gui/onejs-221317

Holy smokes! This is exactly what I thought I would get when I started using uitk! Has anyone here had any success with onejs?
@uDamian / @benoitd_unity can you guys just buy up this dude's project so we can use it standard in unity? If it works the way it looks, it might just save the awful experience that is UI in unity.

 

Well... I mean...




Maybe it's just me, but I think UI Toolkit is fantastic. Though, at the same time, I would rather slam my dongle in a car door than have to use typescript and any js framework.

 

What you choose to do with your dongle is entirely up to you my guy

But that highlighted section in your image is exactly the reason why I wrote my message. If some random person (people?) can implement hot reloading, proper component transformation to ui elements with support for tailwind, what is the unity team doing? When I first started tracking UITK back at Damiens speech in 2019 I was super excited. As you can guess, I no longer am.

Languages/toolsets each should be used according to their purpose, and they can improve or hinder your productivity. What I can say for certain is that Unity doesn't have a good track record with UI, and the web stack is purely based around UI. It is silly to look at the current state of web dev and pretend there is nothing to learn from it.

 

Writing the whole system so your asset can claim that they are doing anything.

Unity doesn't need another scripting language, C# is plenty good.

 

My UI Toolkit projects

UnityMvvmToolkit - brings data-binding to your Unity project
UnityWidgetsToolkit - create UI using widgets similar to Flutter's approach
UnityUxmlGenerator - generates "UxmlFactory" and "UxmlTraits" source code for a custom VisualElement

 

We've been using UI Toolkit for the last ~2 years in our (unreleased) game "The Tribe Must Survive".
Currently, we have a a Alpha Playtest going on Steam, so people can try it out for free.

I thought this would be a good opportunity to show how we use UI Toolkit.

If you want to join the Playtest, you are required to join our discord though:
https://discord.gg/TfzRNz4GK6

 

Am currently working on a new (paid) asset for shadows, glow and outlines (with animations).
UPDATE: Released now

Some Screenshots:​

The shadow in the image above is faked via a glow. Below you can see how a real shadow looks.


Glow and outline effects are added via Manipulators so the workflow can be none-destructive.

 

@BennyKokMusic Could this be made to work at runtime? Allowing users of my game to search and import icons?

 

Hey I really would like to know how you made editor windows inside editor windows. Thats what I am looking for actually and I been searching for a quite long time for it.

 

I'm also interested in this capability. One issue for me regarding the ability for a user to input and format text at runtime is that currently the TextField does not support rich text tags.

Here is a screenshot from the 2023.3 Unity manual:



I would love to know where this is at on the road map for coming in the future. I hope it IS coming soon!

Otherwise, if anyone has any suggestions for how to pull this off, I would appreciate it!

 

You are using Unity to create an app that is not a game? I am curious. Who is the intended target? Is this a productivity tool that will be available on App Stores? Will your app have user comments?

Thanks.

 

Should we still use On Enable? My code seems to work when I query everything in Awake.

Thanks.

 

Greetings. The app looks great.

Two questions if you don't mind:

May I ask why you used Unity for a non-game app? I am really thinking about using Unity to create a non-game app and so I am wondering if that's easy to do, is the file size very large, is it hard to do dialog or text input fields, etc.

Is your UI Toolkit version of the App now in the Google Play store?

Thanks.

 

Hi @ShokWayve,
I asked similar question, Here is the link:

 

Thanks. However, there was not a link. When you post the link I will follow it.

Thanks again.

 

Sorry my mistake

https://forum.unity.com/threads/can-we-get-use-uitoolkit-element-on-awake.1505780/

 

I wrote a longer post here but I'm making a digital drawing/painting app for iPad, using UIToolkit for the (WIP) UI:



I'm using a layer on top of UniRx to do data binding which has worked fairly well for me, but honestly UIToolkit needs better mobile support (I had to write my own drag/drop reordering lists and scroll acceleration, among other low level stuff) and better stock controls. Otherwise I do think UIToolkit is a big step up from UGUI, for my tastes. Please keep improving it!

 

yeah it's missing alot of things you can find with ugui in controls

 

Thank you!

 

Been asking for a way to group Unity components in the Inspector for a while since my design approach is so SOLID based, my classes are very small and no class does both decide and perform.
Well finally I am making one myself, all in UI Toolkit. It is very simple (like most of my code), just groups which means hides/shows components in the Inspector and allows you to edit component inside the GROUP itself. Went for a minimalistic style (recurring theme I know).



All code in my github if anyone wants to use/fork/etc.. go for it.
https://github.com/bittinkerer/unity-componentgroups

 

Hi, it's still WIP, but I can show you a sneak peak from our upcoming game (multiplatform, crossplay multiplayer, it's in free to pre-order now at App Store). Except the some prototype or ingame debug UIs, we used UI Toolkit everywhere. We created many custom elements (more robust buttons, carousel fields, form elements, popovers, modals, tab views, badges, tags, progress bars, etc) implemented some custom ways with new Input System's gamepad navigation, etc. We're using 2021 LTS atm, and will probably direclty update to 2023/6 LTS when it released (We had some problems in our custom elements and events in 2022 LTS when we tried, so we skipped for the moment in the name of a stable game).

BTW, I am considering to release some of our custom UI Toolkit elements in our GitHub (for free, of course); but I am not sure if this will be interesting for you. Some of the elements are:
- Sprite Animation Element (takes a list of sprites and plays them in customizable cycle types and frame rates),
- Animation Element (we needed a thing like css keyframes, so we're looping within a list of classes),
- Skewed Element (I actually shared in this forums, but it's a little complex from that version),
- Localizer Element (yes, Unity Localization),
- TextField placeholder maybe? (hmmmmm, it's a bit our project specific, but I can make it independent)

I know, some of them are coming in 2023 LTS, but not for 2021 or 2022.

Here's are some gifs from the game (I wish I could add more; but soon it'll be released, and I have to go back to work right now =D)

 

Created a free Tailwind-like UI framework for UI Toolkit. For those who aren't familiar with utility class frameworks, ZoboUI comes with a bunch of ready-to-use USS classes like `bg-red-100` which makes the background of a VisualElement a light shade of red, or `text-sm` which makes a Label have a small font size. And if you wanted to change a Button's background color when hovered, you would add a class like `hover_bg-blue-800`, which would give it a dark blue color, but only when it is hovered. You can always add custom values if needed.



It has significantly improved how I build UIs with UI Toolkit since I'm no longer managing a bunch of USS files and creating custom selectors and classes for each element. I used it to see if I could re-create the skin customization menu from The Last of Us Part 2, for example, leveraging UI Toolkit templates for reusability :

 

Still very early days of my inventory / equipment system.

 

I just released a (paid) asset store package that simplifies creating "floating UI" like health bars, text labels and waypoint markers. It essentially moves screen space UI created with UI Toolkit so that it follows a 3D object. Also, it comes with a very flexible positioning system and additional features like hiding or modifying the UI when the 3D object is occluded.

► https://u3d.as/3dGC [Launch sale, 30% off]

 

Client-server tooling:

Edgegap containerization+deployment mgr


SpacetimeDB WASM deployer tool


SpacetimeDB "reducer" tool that gathers all cloud functions + parses their syntax, allowing triggering cloud calls with syntax hints

 

Hi folks,
I've created a tool for auto-sizing labels if you need it, check it out on GitHub.