Building Runtime UI with UI Toolkit In Unity

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ต.ค. 2024

ความคิดเห็น • 96

  • @ermilburn02
    @ermilburn02 6 หลายเดือนก่อน +5

    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.

  • @pandaengine
    @pandaengine 6 หลายเดือนก่อน +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!

  • @tiredlocke
    @tiredlocke 6 หลายเดือนก่อน +4

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

  • @ShadyKoala
    @ShadyKoala 6 หลายเดือนก่อน +5

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

  • @PatrickJacquemont
    @PatrickJacquemont 6 หลายเดือนก่อน +8

    Exactly what I was looking for, thank you :)

  • @MiRoDevYT
    @MiRoDevYT 6 หลายเดือนก่อน +4

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

  • @Wobling
    @Wobling 6 หลายเดือนก่อน +6

    This dropped at a great time!

    • @Th3-Mast3rmind
      @Th3-Mast3rmind 2 หลายเดือนก่อน

      Dropped harder than my grades

  • @LordXyroz
    @LordXyroz 6 หลายเดือนก่อน +6

    UI Toolkit shows great promise, but it's missing some highly requested and imo needed functionality that Unity really needs to get a move on implementing. 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.
    This is by no means "Ugh, UI Toolkit bad", it's a great step forward. Web development is often very UI focused, so taking that direction with game UI is a smart choice. I have been using it through OneJS from the asset store and it helps with getting something basic up and running really fast once set up. OneJS use Jint (js -> C# interop) and custom C# code so you can write normal web code (js/ts, html and css) and uses native UI Toolkit underneath for rendering UI. (And has a v2 in the works with huge performance boosts among other things)

  • @esmeestevens4018
    @esmeestevens4018 หลายเดือนก่อน

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

  • @l.halawani
    @l.halawani 5 หลายเดือนก่อน +1

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

  • @MatthewChowns
    @MatthewChowns 6 หลายเดือนก่อน +2

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

  • @bazzboyy976
    @bazzboyy976 6 หลายเดือนก่อน +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.

  • @noodle-eater
    @noodle-eater 6 หลายเดือนก่อน +3

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

  • @ItsMeHelel
    @ItsMeHelel 5 หลายเดือนก่อน +2

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

  • @lejocarry
    @lejocarry 6 หลายเดือนก่อน +1

    Really nice video showing why UI Toolkit is powerful !

  • @karole5646
    @karole5646 6 หลายเดือนก่อน +1

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

    • @GameDevGuide
      @GameDevGuide  6 หลายเดือนก่อน +1

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

  • @johannes8485
    @johannes8485 6 หลายเดือนก่อน +2

    this is perfect. thanks!

  • @Hersatz
    @Hersatz 2 หลายเดือนก่อน

    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!).

  • @WarpLemon
    @WarpLemon 23 ชั่วโมงที่ผ่านมา

    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?

  • @JLHammeren
    @JLHammeren 6 หลายเดือนก่อน

    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

  • @tofuutekken123
    @tofuutekken123 6 หลายเดือนก่อน +3

    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.

  • @Luciphear
    @Luciphear หลายเดือนก่อน

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

  • @omg33ky
    @omg33ky 5 หลายเดือนก่อน

    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.

  • @brodakarat6340
    @brodakarat6340 26 วันที่ผ่านมา

    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 16 ชั่วโมงที่ผ่านมา

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

  • @prosource7067
    @prosource7067 5 หลายเดือนก่อน +1

    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?

  • @benjamingerd4703
    @benjamingerd4703 3 หลายเดือนก่อน

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

  • @castlecodersltd
    @castlecodersltd 2 หลายเดือนก่อน

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

  • @hitarthpadaliya2621
    @hitarthpadaliya2621 6 หลายเดือนก่อน +14

    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 6 หลายเดือนก่อน +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 6 หลายเดือนก่อน +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 6 หลายเดือนก่อน

      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 5 หลายเดือนก่อน

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

    • @ihsankaya1865
      @ihsankaya1865 5 หลายเดือนก่อน

      ​@@LtdJorgeIn which perspective? Visual or coding?

  • @michakhh
    @michakhh 5 หลายเดือนก่อน +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 5 หลายเดือนก่อน +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.

  • @delboye101
    @delboye101 5 หลายเดือนก่อน

    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.

  • @simoncodrington
    @simoncodrington 4 หลายเดือนก่อน

    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

  • @mikhailhumphries
    @mikhailhumphries 6 หลายเดือนก่อน +1

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

  • @larstheglidingsquirrel4109
    @larstheglidingsquirrel4109 5 หลายเดือนก่อน

    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.

  • @muhammedemen5122
    @muhammedemen5122 6 หลายเดือนก่อน

    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.

  • @felipeticov
    @felipeticov 6 หลายเดือนก่อน

    LET'S GOOOOOOOOOOOOOOOOOOO

  • @forbiddenbox
    @forbiddenbox 6 หลายเดือนก่อน

    May you please make more?

  • @narf0339
    @narf0339 5 หลายเดือนก่อน

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

  • @drewdowsett
    @drewdowsett 6 หลายเดือนก่อน

    CabsOfCHaos ;) I see you.

    • @GameDevGuide
      @GameDevGuide  6 หลายเดือนก่อน

      👀👀👀

  • @urzytkownikYT
    @urzytkownikYT 6 หลายเดือนก่อน

    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?

  • @adventuretuna
    @adventuretuna 6 หลายเดือนก่อน +3

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

  • @stas_khavruk
    @stas_khavruk 6 หลายเดือนก่อน

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

  • @BrandanLee
    @BrandanLee 6 หลายเดือนก่อน +2

    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.

  • @miracle2190
    @miracle2190 6 หลายเดือนก่อน +1

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

    • @GameDevGuide
      @GameDevGuide  6 หลายเดือนก่อน

      As mentioned in the video, this is unity 2023.2.

    • @miracle2190
      @miracle2190 6 หลายเดือนก่อน

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

  • @FUnzzies1
    @FUnzzies1 6 หลายเดือนก่อน

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

    • @GameDevGuide
      @GameDevGuide  6 หลายเดือนก่อน

      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.

  • @starbuck3980
    @starbuck3980 2 หลายเดือนก่อน

    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

  • @tigerspidey123
    @tigerspidey123 4 หลายเดือนก่อน

    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 2 หลายเดือนก่อน

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

  • @Guedez1
    @Guedez1 6 หลายเดือนก่อน +1

    Can't bind Entities?

    • @akaHarvesteR
      @akaHarvesteR 6 หลายเดือนก่อน

      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?

  • @joll98
    @joll98 5 หลายเดือนก่อน

    does UI Toolkit works with safezones/ mobile notches ?

  • @hakimhambalitech
    @hakimhambalitech 2 หลายเดือนก่อน

    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

  • @luizthiagosouza5377
    @luizthiagosouza5377 6 หลายเดือนก่อน +1

    I wonder how viable it is to use UiKit

    • @Wobling
      @Wobling 6 หลายเดือนก่อน

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

    • @GameDevGuide
      @GameDevGuide  6 หลายเดือนก่อน

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

  • @akaHarvesteR
    @akaHarvesteR 6 หลายเดือนก่อน +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  6 หลายเดือนก่อน +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 6 หลายเดือนก่อน

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

  • @yeo3955
    @yeo3955 5 หลายเดือนก่อน

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

  • @daredeflon662
    @daredeflon662 4 หลายเดือนก่อน

    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  4 หลายเดือนก่อน

      Set the position to Absolute instead of relative. 🙂

    • @daredeflon662
      @daredeflon662 4 หลายเดือนก่อน

      @@GameDevGuide Thank You!

  • @Fralleee
    @Fralleee 6 หลายเดือนก่อน

    What asset is it at 9:57?

  • @abara7591
    @abara7591 6 หลายเดือนก่อน

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

    • @Equisdeification
      @Equisdeification 6 หลายเดือนก่อน

      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 6 หลายเดือนก่อน +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.

  • @joll98
    @joll98 5 หลายเดือนก่อน

    1:11 which game is that

  • @JustATempest
    @JustATempest 6 หลายเดือนก่อน

    This looks a lot like WPF (Windows presentation framework)

    • @NadjibBait
      @NadjibBait 5 หลายเดือนก่อน

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

  • @ShcherbynaM
    @ShcherbynaM 6 หลายเดือนก่อน

    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.

  • @Kalahee
    @Kalahee 2 หลายเดือนก่อน +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.

  • @zORg_alex
    @zORg_alex 11 วันที่ผ่านมา

    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 5 หลายเดือนก่อน

    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 6 หลายเดือนก่อน

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