Building Runtime UI with UI Toolkit In Unity

Поділитися
Вставка
  • Опубліковано 12 січ 2025

КОМЕНТАРІ • 113

  • @tiredlocke
    @tiredlocke 9 місяців тому +15

    Unity UI design is one of those areas I have almost entirely ignored for years. As a former web developer, presentation was kind of my bread and butter but working with Unity's UI tools felt so archaic. "Can't I just do this??" I never looked at UI Toolkit. Need to go give it a try now...

  • @ermilburn02
    @ermilburn02 9 місяців тому +7

    Hearing these changes from older versions has me excited to check out UI Toolkit again. I last used it when custom elements required a lot of work, so seeing how easy it is now makes me want to come back and try it again.

  • @ShadyKoala
    @ShadyKoala 9 місяців тому +7

    that was a lot to digest but down the line it's going to be super helpful, thanks

  • @pandaengine
    @pandaengine 9 місяців тому +8

    Thanks for this video! In my work I made a text data binder that we use everywhere for bindings, but it needs so many boilerplates and performance degrades over time if the variables increase too much. This kind of reflection workflow is very fascinating to me. Can’t wait to use UI Toolkit in production!

  • @PatrickJacquemont
    @PatrickJacquemont 9 місяців тому +9

    Exactly what I was looking for, thank you :)

  • @MiRoDevYT
    @MiRoDevYT 9 місяців тому +5

    This video couldn’t have come at a better moment!

  • @Wobling
    @Wobling 9 місяців тому +6

    This dropped at a great time!

  • @Haze_E1
    @Haze_E1 2 місяці тому

    I just tried to use the toolkit and holy moly its a learning curve didnt help the tutorials in the docs had an error, this video was great thanks gonna subscribe and see if I can find some more on your channel haha

  • @bazzboyy976
    @bazzboyy976 9 місяців тому +2

    Really informative and well structured video. You forgot to mentioned that layouts are handled 100000x better in UIToolkit! That alone is enough to make me want to use it more.

  • @ItsMeHelel
    @ItsMeHelel 9 місяців тому +5

    Please do more tutorials on the UI Toolkit! There are - of course, since it's very new - almost 0 out there for 2023.2+!

  • @yoavhortman9837
    @yoavhortman9837 3 дні тому

    This video is so well done, thank you!!

  • @MatthewChowns
    @MatthewChowns 9 місяців тому +2

    This video might just tip the scale for me towards using UI Toolkit now. Thanks!

  • @shun6284
    @shun6284 17 днів тому +1

    Nice tutorial, you got a new subscriber here.

  • @esmeestevens4018
    @esmeestevens4018 4 місяці тому

    I'm currently studying a bit of html and css at school again, and I usually really dislike working with css, but this opens up so many new pathways for me! It's really interesting to see how to UI Toolkit works, makes me feel a little more motivated to work on my CSS skills :)

  • @brodakarat6340
    @brodakarat6340 4 місяці тому +2

    Ui toolkit supports world space now. You render the panel to a render texture, then use a material. You then do define the screen to panel space function using a camera screen point to ray, and observe the UV of the hit point

    • @restushlogic5794
      @restushlogic5794 3 місяці тому +1

      There is new method thos in App UI. Check it out.

  • @lejocarry
    @lejocarry 9 місяців тому +1

    Really nice video showing why UI Toolkit is powerful !

  • @l.halawani
    @l.halawani 9 місяців тому +1

    Perfect, just what I was looking for.
    Please more!

  • @karole5646
    @karole5646 9 місяців тому +2

    Thanks for this video! UI toolkit seem pretty cool with editor too, hope you make a video about it in the future

    • @GameDevGuide
      @GameDevGuide  9 місяців тому +1

      My Live Sessions on GraphView explores the editor version in detail if you're interested in learning more there.

  • @Luciphear
    @Luciphear 5 місяців тому

    Oh wow, this is perfect. I was thinking I have to sub and noticed I already am subbed, lol. Cheers!

  • @JLHammeren
    @JLHammeren 9 місяців тому

    AINTNOWAY I just had a game jam last weekend doing UI with UITK for the first time xdd Could've used this vid then! Awesome though, keep the content flowing

  • @johannes8485
    @johannes8485 9 місяців тому +2

    this is perfect. thanks!

  • @larstheglidingsquirrel4109
    @larstheglidingsquirrel4109 9 місяців тому

    4:43 Although 'world space UI' is not supported, there is another approach that can be used for things like floating health bars, item names and so on. (1) Create normal UI in screen-space. (2) Move it every frame to follow a 3D object.
    Of course, this is not suitable if your UI really has to belong in the 3D scene (imaging a computer screen) because it is not blocked by 3D objects and always facing the camera. But for health bars, item names, waypoint markers and so on you often want that.
    For those of you interested, I created a video comparing these two approaches on my channel.

  • @noodle-eater
    @noodle-eater 9 місяців тому +3

    Nice just in time, I start to give up using UI Toolkit

  • @immortalsun
    @immortalsun 2 місяці тому +1

    10:06 Please tell me how you got this search bar in the new game object drop-down!

  • @tofuutekken123
    @tofuutekken123 9 місяців тому +4

    As a web developer I find referencing ui elements with ids and classes to be far more practicle than adding references.
    It's true that names can change, but it's far less annoying to deal with than losing references to objects when copying objects or moving them around. Having to expose dozens of variables to the inspector and manually drag/drop them is also pretty annoying.

  • @Hersatz
    @Hersatz 5 місяців тому

    Been playing a lot with UI toolkit to make commercial tools for over a year.
    It is my definitive best UI tool to use.
    - It's quick to design visuals.
    - It naturally separates visuals from logic.
    - It's far more intuitive to handle when you get the gist of it than either UGUI or Unreal's UI system.
    The only real drawbacks at this point is the lack of worldspace, the abysmal documentation, the, more often than not, terrible default VisualElements, and the monstruosity that is the UXML factory (although as you showcased there is a big change for that last one, so yay!).

  • @prosource7067
    @prosource7067 9 місяців тому +2

    Perhaps a little off topic.
    In my free time I study the Custom Editor, the Draw property and the editor window. I've heard about the Odin plugin but haven't used it. Have you used this plugin yourself? If yes, could you please answer my questions:
    1. Somewhere in one video or article it was said that Odin is able to replace almost completely the writing of the Custom Editor, is this true?
    2. In what cases will Odin not be able to do what is possible in the Custom Editor?

  • @mikhailhumphries
    @mikhailhumphries 9 місяців тому +3

    I must learn ui toolkit, new Input system and shader graph... when will it end😢

  • @omg33ky
    @omg33ky 9 місяців тому

    Im currently experimenting with this and one thing that would be nice is basically the way WPF handles references from cs files to (in their case xaml, here umxl) the ui code like you can give an element in the ui an ID and then just access that element without querying first. This would require some closer linking of uxml and cs since the cs file would have to know about the uxml file somehow.
    This brings me to another point.
    Creating custom elements has been greatly improved like you said, one area where its still lacking is if you want to design custom controls with uxml and c# code. For that you have to load the uxml file in the cs file and clone the tree onto the own element.
    This process is annoying, error prone and has some limitations.
    For example you would need another uxm file wrapping around your custom element when you want to use it directly in a UI Document since that need a uxml file (or you make your own custom loader script but thats also annoying).
    Another thing that is a bit weird with cusom elements is namespaces inside uxml. You can define them but if your item is called the same as your namespace it gets weird and you might have a lot of time spent figuring out why some stuff is not working.
    Thats just some of the things i struggle with, there are more but overall i still prefer this over everything we had before.
    In my personal project i worked around some of the stuff i mentioned by writing my own attributes and generators etc. that make some stuff for me, but i would really appreciate some good support from unity directly.

  • @zethbox8619
    @zethbox8619 14 днів тому +1

    Last time I tried UI toolkit it felt extremely lacking in features. I heard that new updates were made for it on Unity 6, does anyone know how it is now?

  • @WarpLemon
    @WarpLemon 3 місяці тому

    Thanks for the video. Very interesting to learn about the new features coming to UI Toolkit. The one thing that I would like to get your opinion on is about performance. What do you reckon has the best performance? UI (Canvas) ou UI Toolkit?

  • @benjamingerd4703
    @benjamingerd4703 6 місяців тому

    Great video, thanks!
    How did you implement the repeating background (orange squares) in your main menu, please?

  • @Gamez4eveR
    @Gamez4eveR 28 днів тому

    tutorial for forms (with multiple text fields, selectors, sliders, etc) please

  • @BrandanLee
    @BrandanLee 9 місяців тому +3

    A SIMPLE UI, makes UI Toolkit seem viable. A realistic and sophisticated UI that requires serious design and art assets, is where it falls apart and reveals it's another half baked alpha test.

  • @castlecodersltd
    @castlecodersltd 6 місяців тому

    Great video, thanks 🙂 Does it have any impact on FPS and have you tried using a controller with it rather than a mouse?

  • @narf0339
    @narf0339 9 місяців тому

    How do you know if the mouse pointing at a button ? To prevent mouse event that supposed to happen on a button goes to gameobject behind the button(raycast).

  • @michakhh
    @michakhh 8 місяців тому +1

    I often build applications based purely on the user interface, with multiple states or pages. So far, each page is either a panel or a separate canvas with a view class that is notified by a StateModel/Manager. What would something like this look like with UIToolkit? A UIDocument for each view? Or a visual element for each view? This whole root.Q() addressing seems a bit unsuitable for that.

    • @MarkC88
      @MarkC88 8 місяців тому +1

      I've been messing around in the same boat. I have no real experience to speak from so I've no idea if it's a good approach but I've just been making a different visual tree asset for each page and swapping that out on a single UI Document. It works, I guess, for now. But I'd like to see examples of how to do it right.

  • @Lunte2
    @Lunte2 2 місяці тому

    the hover event is not working when i move a button on hover. it then flickers between states when im at the border because i dont hover the button then. any workaround for this? like a hover box over it that triggers the button to move?

  • @forbiddenbox
    @forbiddenbox 9 місяців тому

    May you please make more?

  • @muhammedemen5122
    @muhammedemen5122 9 місяців тому

    great job, thanks for tutorial. It looks very useful except Runtime Data Binding. just that things you writed in progressbar script looks a little bit complicated.

  • @ukonnra6438
    @ukonnra6438 22 дні тому

    As a Web dev (and a game dev maybe), this workflow makes me feel at home 🤣, I still insist this layout + styling + logic seperation is the best solution for a UI design

  • @yirorojo2833
    @yirorojo2833 Місяць тому +3

    Many of the things he does are not explained, like when he adds the menu to the panel and a rectangle magically appears in the middle of everything

    • @happysito
      @happysito Місяць тому

      Basically, he just added another container, and to explain why it's in the middle, he also mentioned that it wasn't a CSS tutorial but he would still leave the CSS resource in the description.
      He only used flex to center it and didn't do anything else.

  • @delboye101
    @delboye101 8 місяців тому

    It still feels like the toolkit has a long way to go but this guide was excellent. It really should have been a priority to be able to set the elements as game objects automatically but, eh, there's the roadmap for you.

  • @francoismcneil6817
    @francoismcneil6817 3 місяці тому

    when I add the [UxmlElement] attribute it can't resolve it (namespace not found) although i have included "using UnityEngine.UIElements;"... I've already tried deleting the packages cache. Am I missing something obvious ?
    Here's the copy/paste of the actual class.
    -----------------
    using UnityEngine;
    using UnityEngine.UIElements;
    [UxmlElement]
    public partial class Timer : VisualElement { }

  • @Fralleee
    @Fralleee 9 місяців тому

    What asset is it at 9:57?

  • @simoncodrington
    @simoncodrington 7 місяців тому

    The lack of a world space implementation is an absolute deal breaker for me (and it's been continually brought up in forum threads and the roadmap, there's no ETA yet on when that's coming)
    Be keen to see how tooltip improves over the next few years though

  • @miracle2190
    @miracle2190 9 місяців тому +1

    how did you get that new menu when you right click? Is it new with unity 6?

    • @GameDevGuide
      @GameDevGuide  9 місяців тому

      As mentioned in the video, this is unity 2023.2.

    • @miracle2190
      @miracle2190 9 місяців тому +1

      @@GameDevGuide im in 6000.0.0b13 I guess they removed it, thanks for the help.

  • @starbuck3980
    @starbuck3980 5 місяців тому

    Dont understand how works the new UI. I added a Progress bar and i cant modify any of the style properties of the child objects, all are greyed out

  • @joll98
    @joll98 8 місяців тому

    does UI Toolkit works with safezones/ mobile notches ?

  • @hakim.hambali
    @hakim.hambali 5 місяців тому

    I'm new, can I please have github link for this ? because I try copied the codes in the C# script and it contains error

  • @FUnzzies1
    @FUnzzies1 9 місяців тому

    Is there a possibility you look into doing this with pure C# or building the UI with a UXML/C# hybrid?

    • @GameDevGuide
      @GameDevGuide  9 місяців тому

      Yeah so you can totally build the entire thing that way if you want. That's my approach to a lot of the editor tooling I build. You can see examples of this in my recent live sessions on Graph View.

  • @tigerspidey123
    @tigerspidey123 7 місяців тому

    do we need unity 2023.2 for the latest UI toolkit package, it's very confusing you keep saying it is 2023.2, or package can be separated from the actual unity version?

    • @Smoky-78-v3c
      @Smoky-78-v3c 6 місяців тому

      You need 2023.2, its not a separate package, but part of the core editor.

  • @hitarthpadaliya2621
    @hitarthpadaliya2621 9 місяців тому +18

    What I liked about the Unity UI was its OOP based approach. Hear me out. CSS and JS are powerful in their own rights, but nothing beats OOP based UI framework when it comes to adding something procedural or automated. Your game has a long list of attachments to be added. Sure, just hook them into a ScriptableObject or DataAsset and the system will handle on its own. This is possible to some extent in CSS and JS based languages but they are nowhere near as powerful as they are in OOP UI. For the ease of use, I think UI Toolkit is fine (except for boilerplate). But when it comes to extending for a massive game, I think it would fall apart very quickly. Hopefully, Unity UI still stays around while UI Toolkit gets better and better. Also, praying that UE5 UI system gets better.

    • @LtdJorge
      @LtdJorge 9 місяців тому +3

      I think OOP puts a limit to scalability. Doing UI with Unity UI for a AAA game would make me go insane. Declarative > pocedural/imperative any day

    • @hitarthpadaliya2621
      @hitarthpadaliya2621 9 місяців тому +1

      @@LtdJorge I highly respect your opinion. I think it depends more on the person, what they feel comfortable working with rather than the language model itself.

    • @MassimoRough
      @MassimoRough 9 місяців тому

      You don’t need to use editor at all to work with Ui toolkit, just creating the buttons in code and using the styles. Counts as oop?

    • @LuukDomhof
      @LuukDomhof 9 місяців тому +1

      Try NovaUI, it has the "OOP" workflow but it crazy performant, and the underlying systems are put together really well.

    • @ihsankaya1865
      @ihsankaya1865 8 місяців тому

      ​@@LtdJorgeIn which perspective? Visual or coding?

  • @immortalsun
    @immortalsun 2 місяці тому

    Does this only apply to 2023, not 2022 Unity?

  • @daredeflon662
    @daredeflon662 8 місяців тому

    Can someone please tell me how can i make the elements not "stack" on top of each other in the builder? I would like th be independent and movable, even if i were to overlap them, just like in old UI

    • @GameDevGuide
      @GameDevGuide  7 місяців тому

      Set the position to Absolute instead of relative. 🙂

    • @daredeflon662
      @daredeflon662 7 місяців тому

      @@GameDevGuide Thank You!

  • @stas_khavruk
    @stas_khavruk 9 місяців тому

    In the early mid of video you have leave resources for flex, but I cannot find them...

  • @yeo3955
    @yeo3955 9 місяців тому

    Does anyone knows what the game on the first second of video? With leonis planet...

  • @joll98
    @joll98 8 місяців тому

    1:11 which game is that

  • @Guedez1
    @Guedez1 9 місяців тому +1

    Can't bind Entities?

    • @akaHarvesteR
      @akaHarvesteR 9 місяців тому

      Why would you expect that two different packages made for a professional grade piece of industry software, developed by the makers of the software themselves, should be compatible with each other?

  • @adventuretuna
    @adventuretuna 9 місяців тому +3

    Video idea: recreate the Persona 5 UI using UI Toolkit
    Great video. Gonna show this to the people in the office.

  • @urzytkownikYT
    @urzytkownikYT 9 місяців тому

    Cool video but honestly im not convinced for web style technologies for UI in games. Unity UI system has its problems (dumb api, needs cumbersome workarounds, poor interfaces support) but still seems enough for simple games.
    What does UI Toolkit bring for real?
    I dont mean simple scale animations or anchoring. What about some UI panels stack system? Or tabs management, better layouts system? maybe some considerable performance boost?

  • @luizthiagosouza5377
    @luizthiagosouza5377 9 місяців тому +1

    I wonder how viable it is to use UiKit

    • @Wobling
      @Wobling 9 місяців тому

      Timberborn was built using it, so it's certainly usable in production and that's quite a UI heavy game.

    • @GameDevGuide
      @GameDevGuide  9 місяців тому

      It was also using the old version. Which is an absolute feat 😂 This newer version is much easier to work with by comparison

  • @felipeticov
    @felipeticov 9 місяців тому

    LET'S GOOOOOOOOOOOOOOOOOOO

  • @abara7591
    @abara7591 9 місяців тому

    but what about performance? is ui toolkit more performant than unity ui?

    • @Equisdeification
      @Equisdeification 9 місяців тому

      Yes, much more, the UI toolkit editor can lag a little bit if there are many many elements, but the runtime speed is much better

    • @Briezar
      @Briezar 9 місяців тому +1

      it's arguably more performant in exchange for the learning curve and verbose coding. Honestly speaking, most of the time, UIs aren't the bottleneck of a game so I wouldn't use performance as a benchmark to measure UIToolkit vs UGUI.

  • @SigmaZer0
    @SigmaZer0 Місяць тому

    Thanks for the high-production-value video and convincing me to not use UI Toolkit.

  • @akaHarvesteR
    @akaHarvesteR 9 місяців тому +2

    Unity UI has been the bane of my existence for the last 10 years or so.
    I'm right with you when you said you eventually gain that 'arcane knowledge', and you can get stuff done with it... But it is never a fun or enjoyable experience by any means.
    The main drawback for me is that unlike the old IMGUI, the prefab based workflow means your UI design work is decoupled from programming... Until you then need to control the UI components, so you still have to write binding scripts.
    So the argument that uGUI doesn't require coding just went out the window, and I _guarantee_ by the time you are r done writing the script, you _will_ hit play before remembering to assign the inspector references.
    Also, the layout system with its endless barrage of anchors and rectangle containers might seem good at first, as it appears to solve the most complicated part of working with IMGUI... But that also turns out to be false. It ultimately highly complicates the process of creating even simple setups, by imposing this layouting puzzle that you _must solve_ for each and every new element. It never gets easier or less prone to errors.
    Then the final little death for me, is styling. It's painful enough to create even basic animated bits, but wait until you then decide your project needs a reskin.
    The new toolkit seems like a step in a better direction... But like everything else that comes out of unity in the last 10 years, it's still a total-replacement, forget-everything-you know new paradigm... Which is still a work in progress, so you'd have to be mad to choose that for a large multi year project.
    I'm not going down that road again, oh no. Unet was bad enough.
    I will have a look at Coherent though 👍

    • @GameDevGuide
      @GameDevGuide  9 місяців тому +1

      I used Coherent on a couple of projects I worked on back in the day and uh... Let's just say forcing UI to render via an HTML wrapper on top of your runtime wasn't without its issues 😂

    • @akaHarvesteR
      @akaHarvesteR 9 місяців тому

      @@GameDevGuide That is a good point.
      I do miss the old ongui sometimes. It wasn't great, and leaked memory like a sieve, but it was pretty quick to put something together, and being immediate-mode, your layout _is_ the binding already.
      I've been looking at a package called Noesis GUI, which looks very interesting (I'm looking for any way out of uGUI by now). Not sure if you or anyone has had any experience with it to give a 'veteran' opinion.

  • @ShcherbynaM
    @ShcherbynaM 9 місяців тому

    Me: Was using UIToolkit for 4 years in runtime and stopped using unity after 2023 events.
    Unity: Well since you've stopped using our game engine we start to implement new features there, like "partial" class support.

  • @drewdowsett
    @drewdowsett 9 місяців тому

    CabsOfCHaos ;) I see you.

  • @dman-tm
    @dman-tm 10 днів тому

    Mumbo Jumbo? is that u?

  • @JustATempest
    @JustATempest 9 місяців тому

    This looks a lot like WPF (Windows presentation framework)

    • @NadjibBait
      @NadjibBait 9 місяців тому

      There's a actually a WPF for Unity, it's called Noesis, and it's miles ahead of UI Toolkit...

  • @DavidMann10k
    @DavidMann10k 2 місяці тому

    Thanks for the advice to just avoid it on versions < 2023.

  • @Kalahee
    @Kalahee 5 місяців тому +1

    This goes way too fast I had to slow it at 75%. Even then I had to rewind regularly because what is going on is too quick and the explaination too late.

  • @thiagosoares7414
    @thiagosoares7414 Місяць тому

    As a former web dev, I prefer control things with default UI. UI Toolkit seems to be another world and too much effort

  • @zORg_alex
    @zORg_alex 3 місяці тому

    My problem with this UI Toolkit is that it's extremely user unfriendly. I want to be able to use it like I was using VS with WPF, meaning I have a code editor and visual designer and I am able to either make some changes in code or in designer. And usually I just code, because I'm too lazy to learn where are those stupid buttons. Those things just slow down. I can't make changes to one thing and copy to all other elements. It shows me the resulting code, but I can't edit it. It's as raw and unusable as it was 2 years ago. Or how much time has passed? Bunch of butthurting crap.

  • @64bit-Slash
    @64bit-Slash 9 місяців тому

    but is it really at the point? ugui addons and things that you still cant't do with ui toolkit.. I mean its still a subpar spec to css3 they ain't bothered with a lot of things css3 actually does and that can be done with ugui with addons with ease.... data tables anyone?" It "has no World Space UI (WIP), no depth ordering (planned), UI masking (planned), Grid layout, UI effects like gradient, glow, blur etc, SVG support, the list goes on. " ...exactly.. Unity snail time pace timeline of replacing old feature tech with new feature tech is just ridiculously slow

  • @nourgaser6838
    @nourgaser6838 9 місяців тому

    First 😮 (edit: I'll actually watch the video not just a useless comment here 😅)

  • @h2w..
    @h2w.. Місяць тому

    The unity ui toolkit is yet anither piece of shit from unity team.