Search Unity

Unity Share your UI Toolkit projects

Discussion in 'UI Toolkit' started by antoine-unity, Sep 30, 2020.

  1. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    475
    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 likes this.
  2. BinaryCats

    BinaryCats

    Joined:
    Feb 8, 2016
    Posts:
    310
    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
    upload_2020-9-30_20-24-32.png
    Link1.gif
    upload_2020-9-30_20-39-45.png

    And for the people who use Light theme, uss variables made styling no that easy too
    upload_2020-9-30_20-45-5.png

    I also mirrored the tag/layers styles for my user customisable settings
    Settings.PNG
    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 :)
     
    Last edited: Sep 30, 2020
  3. b4gn0

    b4gn0

    Joined:
    Jul 26, 2019
    Posts:
    119
    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:
    upload_2020-10-1_17-31-0.png
    Animated:


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


    Inventory management:
    upload_2020-10-1_17-37-48.png
    Animated:


    Action gameplay (healthbars, bottom left hud, minimap on the right)
    upload_2020-10-1_17-41-41.png

    Merchant:
    upload_2020-10-1_17-42-55.png
    Animated:


    Blacksmith:
    upload_2020-10-1_17-46-2.png

    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! :)
     
    JG-Denver, tenukii, Cery_ and 32 others like this.
  4. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,117
    I have been working on a fairly customizable animated inspector "replacement".


    New


    Original


     
    Last edited: Oct 3, 2020
  5. Stardog

    Stardog

    Joined:
    Jun 28, 2010
    Posts:
    1,677
    Unity editor window for UML-type class diagram app.
    002.PNG

    Mobile version.
    cd.jpg

    State machine property drawer.
    001.PNG

    Folds up nicely.
    001_002.PNG
     
  6. LudiKha

    LudiKha

    Joined:
    Feb 15, 2014
    Posts:
    131
    one_one likes this.
  7. Timboc

    Timboc

    Joined:
    Jun 22, 2015
    Posts:
    191
    Working on a DOTS Tween library with Timeline (Subscenes/Entities + GameObjects).
    #BTween
    Hopefully coming soon but in the meantime, a quick sneak-peek:
    GIF 12-10-2020 16-21-09.gif

    I also use UITK for a clean Dropdown menu for #BTagged (u3d.as/1ZsW):
    GIF 12-10-2020 16-27-53.gif
    Thanks for all the teams hard work and more importantly, communication & forum participation - UITK is awesome!
     
  8. willgoldstone

    willgoldstone

    Unity Technologies

    Joined:
    Oct 2, 2006
    Posts:
    786
    Loving seeing these examples! awesome work folks, more!
     
  9. The-Wand3rer

    The-Wand3rer

    Joined:
    May 14, 2019
    Posts:
    26
    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.

    upload_2020-10-21_1-10-8.png
    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.
    upload_2020-10-21_1-13-24.png

    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.
     
  10. Ryuuguu

    Ryuuguu

    Joined:
    Apr 14, 2007
    Posts:
    365
    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.
     
    Last edited: Oct 22, 2020
  11. dannyalgorithmic

    dannyalgorithmic

    Joined:
    Jul 22, 2018
    Posts:
    86
    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 likes this.
  12. Timboc

    Timboc

    Joined:
    Jun 22, 2015
    Posts:
    191
    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!
     
    dannyalgorithmic likes this.
  13. dannyalgorithmic

    dannyalgorithmic

    Joined:
    Jul 22, 2018
    Posts:
    86
    I am always quite concerned about memory footprint. How is the performance relative to using something like GameObject.FindObjectByTag()?
     
  14. quickytools

    quickytools

    Joined:
    Aug 26, 2019
    Posts:
    19
    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.
     
    MostHated likes this.
  15. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,117
    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.
     
    dannyalgorithmic likes this.
  16. dannyalgorithmic

    dannyalgorithmic

    Joined:
    Jul 22, 2018
    Posts:
    86
    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.
     
  17. Timboc

    Timboc

    Joined:
    Jun 22, 2015
    Posts:
    191
    @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 :D.
     
    MostHated and dannyalgorithmic like this.
  18. MostHated

    MostHated

    Joined:
    Nov 29, 2015
    Posts:
    1,117
    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.

     
    Last edited: Nov 15, 2020
  19. exblade

    exblade

    Joined:
    Oct 14, 2018
    Posts:
    55
    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!
     
    Last edited: Nov 29, 2020
  20. Xenerade

    Xenerade

    Joined:
    Dec 10, 2017
    Posts:
    224
    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.
    upload_2020-12-6_16-20-59.png
     
  21. Steve_LasCasicas

    Steve_LasCasicas

    Joined:
    Mar 23, 2014
    Posts:
    57
    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

    upload_2020-12-9_18-10-10.png

    this is the Tables designer section which is now about 100% for 2018 and 90% for 2019,2020
     
    BennyKokMusic and benoitd_unity like this.
  22. jeffsim

    jeffsim

    Joined:
    Feb 3, 2016
    Posts:
    8
    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.
     
    Last edited: Jan 11, 2021
  23. EmKay

    EmKay

    Joined:
    Dec 12, 2012
    Posts:
    2
    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:
    01-StartMenu.png

    Lobby:
    02-Lobby.png

    Create new room:
    03-CreateRoom.png
    In game:
    04-InGame.png
     
  24. Ruchir

    Ruchir

    Joined:
    May 26, 2015
    Posts:
    706
    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:(
     
    LoicLeGrosFrere likes this.
  25. JuliaP_Unity

    JuliaP_Unity

    Unity Technologies

    Joined:
    Mar 26, 2020
    Posts:
    444
  26. oscarAbraham

    oscarAbraham

    Joined:
    Jan 7, 2013
    Posts:
    85
    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:
    EditableLabel.png DefaultReorderableList.png ListOfInspectors.png ManagedRefsList.png
     
    Last edited: Feb 6, 2021
    Timboc, Neonage, mariandev and 4 others like this.
  27. CabinIcarus

    CabinIcarus

    Joined:
    May 24, 2017
    Posts:
    71
    uMathieu, Midiphony-panda and Ruchir like this.
  28. MoruganKodi

    MoruganKodi

    Joined:
    Feb 11, 2015
    Posts:
    66
    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.

    upload_2021-3-5_10-33-43.png

    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. }
     
    Last edited: Mar 5, 2021
  29. FizzFab

    FizzFab

    Joined:
    Feb 19, 2018
    Posts:
    12
    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

    SimpleDropdown.gif
     
  30. BennyKokMusic

    BennyKokMusic

    Joined:
    Dec 22, 2016
    Posts:
    30
    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

    85.5.gif
     
  31. Leslie-Young

    Leslie-Young

    Joined:
    Dec 24, 2008
    Posts:
    1,109
    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.

    screenshot.png
     
  32. Neonage

    Neonage

    Joined:
    May 22, 2020
    Posts:
    213
    dujimache, tenukii, fherbst and 10 others like this.
  33. RunninglVlan

    RunninglVlan

    Joined:
    Nov 6, 2018
    Posts:
    124
  34. exblade

    exblade

    Joined:
    Oct 14, 2018
    Posts:
    55
    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.

     
  35. RunninglVlan

    RunninglVlan

    Joined:
    Nov 6, 2018
    Posts:
    124
    Like what?
     
    Last edited: Jul 28, 2021
    dujimache likes this.
  36. antoine-unity

    antoine-unity

    Unity Technologies

    Joined:
    Sep 10, 2015
    Posts:
    475
    Impressive! Having your feedback, maybe in a separate thread, would be really valuable to us. Also include which version of Unity, UI Builder and UI Toolkit you are using. Thanks in advance!
     
unityunity