0:00 Introduction 2:34 Code example 6:20 Overview of the UI Builder 11:25 How UIElements works at runtime 14:35 Anchoring 18:36 Extracting inline styles to a new class on the stylesheet 21:55 Adding visual feedback to the UI buttons using :hover and :active styles 23:06 Preview mode in the UI Builder 23:22 UIElements debugger 24:50 Adding the stats box and player list 31:15 Debrief 36:57 Q&A
It was adapted from nGUI, that's why (which was considered a step up from IMGUI). At the time, that was one of the most popular UI tools on the asset store, so Unity hired the author to adapt something similar for the engine.
When the UIElements Debugger was working even on the UI Builder itself, it gave me a chuckle, that was impressive. This whole thing is a step in the right direction.
yea me too. this is so mind-blowing. so friendly to UI/UX designers with web/app background. also the tools, layout, and functionality seem very very very well thought-out. debugging very similar to google chrome inspection too.
I agree. And this is also a UI system that is in line with industry standards so a lot of people will find themselves right at home AND it has by default all the strengths of other UI systems based on HTML and CSS. This is the way to go. THe other UI systems so far were ok ideas but this is really the way forward. This one is here to stay.
I was looking at crafting this myself although miniature version, automating layouts realtime through code like flutter, you guys have saved me a Huge load of work!. Great job Unity!!!.
What makes the existing UI so bad? I just used it for really basic stuff and never had much of an issue with it, but I've heard tons of bad things about it.
@@Chubzdoomer thats exactly the issue its for basic stuff... absolutely basic you had to use a bunch of programs like Photoshop to achieve something decent which is not that scalable if scalable at all
@@Chubzdoomer Design wise it got reasonable after 2018.4's new prefab system. (Of course I want the buttons to be the same one with different text) Performance wise, uGUI is an attempt to bake UI into Unity's GameObject concept. It is a massive tree of GameObjects trying to make each other behave in a way that's not just a simple classical transform hierarchy (that could be efficient with matrix operation). Turns out to be fitting round peg in a square hole. RectTransform, an invention that trying to fake classical Transform to think they are all a rectangle cause ripple effect on API design and performance. Components sometimes wants the sibling and not the child to adapt to each other (i.e. the "flex box" behaviour) where GameObject transform tree wasn't designed to efficiently enables that. Input handling is servicable enough since GraphicRaycaster did far more simpler check than even 2DPhysicsRaycaster, but still could be improved if we didn't rely on GO tree in the first place. Rendering is hard to optimize because it work together with shader that comes with Image component inside the tree. z-index when rendering is figured out by game object ordering, seems intuitive in some case this turns out to be painful. (Imaging a 3d card game where your hand usually be an overlapping cards horizontally, then you want the selected one to be on front but stay where it was horizontally. Now you can't because the game object ordering is already used for horizontal layout.) Lastly every little thing you do randomly cause or not causing layout rebuild (visible in the Profiler) of an entire tree. This is because the system is too relaxed as a GameObject, there are many possibility for outsider such as Animation/Playable Director/scripts to change any rect that affects multiple things. Overall I think UI is a unique problem and cannot be made generic and "Unity-native" by forcing them into GO. New one using Yoga open source layout engine that's designed for UI is already a good start.
Thousands of games and apps have been developed solely on the UI system or heavily relying on it with advanced features. There has been nothing I have not been able to do with the current UI system. Sometimes, it could be done easier, just easier.
@@fafase Yes you can do anything, but you have to be aware of shitloads of stuff to get good performance and you have to do much much more work in many cases, just simple thing like changing style of all buttons in project? With this you can do good looking UI pretty fast with few icons, with old UI you would need to prepare lot of stuff in photoshop or similar before even starting and you would never get to 1 drawcall for whole UI. It will be shittons easier to have coherent style, change stuff altogether and get good performance out of this UI system, It borows a lot from web and ui heavy app development tools and the reason is simple, they are trying to nail down most effeicient way how to create and control UI for decades already. Its whole different level really.
This is very nice! Finally, creating UIs in Unity seems like a pleasure! Two questions: 1. Does it support 3D objects in the UI? 2. How does it support animations?
@@uDamian How easy to impelment damage layer with popping numbers and messages all around screen like any RPG? From the video I can't see that possibility at all.
@@uDamian In other words, you expect all of us who don't write code to learn USS and code our animations. This is a reason not to adopt the system at all, for my team. We value artists building and animating UI.
Looks promising. What makes me very reluctant is that Unity has so many core systems that seem to be constantly scrapped (networking), reinvented (UI), or not really fully featured (terrain).
You'd have to check the performance hit, but animation should still be possible in code (the old-school, value-modifying way). It's just a question of how their renderer optimizations handle it.
@@uDamian Nice. I just watch the talk about UIForia.... It seems that it is exactly what UIElement will be, but more feature rich (animation, tween, c# code inside template, vector graphics).. Have you talk to the dev, maybe create a collaboration ?
right direction. but! 1) how to add animations? 2) what about localization 3) how to add 3D objects, how to configure the camera to display them 4) where are the paticles? 5) how to work with different materials? 6) how to work with lists. animated insert / delete / move Without all this, the library is just a beautiful toy
@@uDamian Hey I've downloaded the preview 2019.3 and 2020 versions hoping to be able to test the builder with in game UI but I couldn't find the panel renderer in there either Great talk btw
Where did the Panel Renderer magically came into the project? Am I missing something.. please enlighten me..
4 роки тому+2
Pretty cool Idea! Congrats! Hopefully, it gets to be fully useable soon. Right now without the Panel Renderer as part of the package seems too susceptible to errors.
Is this full project available anywhere? I've downloaded the samples from package manager, but you didn't really show at all how the code interacts with this system.
It would be great if they can expose an API to create custom USS styles (like CSS Houdini) using C#. That would make a lot of custom animation in C# portable and easy to migrate and maintain. One big plus for custom styles is that users won't have to wait for a certain CSS style to be adopted in USS; things could just be polyfilled.
It is amazing. I have been using other UI assets that have XML and CSS based options to build my UI. I am glad that it is supported natively by Unity. Obviously, it will take some time to support more features, but I am happy with the current state as well. Modular UI is finally not a dream!
@@lukass7156 Hi Lukas, not sure if you have found this yet. In package manager you need to select Advanced -> Show preview packages. Then it will show the UI Builder.
@@Pheidias73 yes, I installed the UI Builder from the Preview Packages. But when I want to add the "Panel Renderer", there is none in the component list.
Wow this is ridiculous! Great to see Unity pushing web-tech inside game development. This is going to make creating game UI's so much easier for everyone, and can finally leverage all the web developers and designers experience in the game industry. Nice!
If you look at the component icon it looks like a C# script, likely something that you currently have to code yourself (or at least find some source code online to implement)
Yes, it don't have any sense. Why they publish the Builder if you can't use it in your game until they release the rendering components ? what a poor releases planing
@@radenzito If you go to the sample UIElements project on Github, it has the UIElements Runtime Package. Unity's UIElements forum has a thread discussing their plans for releasing and how you can get access to the plugin.
Going back to not using the hierarchy is unfortunate. I get that you run it in your own hierarchy/system, but it is just more intuitive when you can visually see the structure for debugging purposes (major time sink...). Can your UI builder window have its own, authoritative hierarchy? I don't wanna do a V4 of the UI system...
As a webdeveloper now trying to make games i would love to see this released. I can't wait to get my hands on it. XML and CSS what more do we need :) I hope it will also support animations and stuff but this is great. I can't work with the current UI system.
Very excited about this new feature! But the current UI Builder package (at this time of posting) doesn't include Panel Scaler or Renderer, nothing is shown on the game screen. :( Using 2019.2 version and tried in the beta (since the demo is shown in that version) but to no avail. Guess we have to wait for it. Feels like candy without the sweetness here XD
I just copied the runtime folder from examples but I get weird results where child elements don't show text and colours are off from the builder, probably because builder code is newer!
I am using it in my project already because it is so nice. Currently using Unity version 2019.3 beta 8. To get it go into package manager and look into preview packages near the bottom find the package UI Builder.
@@andreigatina1846 I will be making a small video on how to download it, open it, and use some of it's features. Had a lot of people ask about it, so figured I would make a small video this week to just help out. A lot of people been mainly wanting to know about the binding data from scripts to the UI.> I will replay back to this message when the video is uploaded.
I am about to build a fairly complex and dynamic UI and I hope this is what I need! I've read in the docs that there might be bigger changes because it's still in the Beta. Can you elaborate on that?
This is great! I am trying this but not getting "Panel Renderer" component that you attached to the game object to render UI to screen. Using unity version 2019.3.0b10 . Please help with this.
@@philliphartford5576 - So as is, we can't recreate what he is doing here because we can't access the panel renderer component at all? Are we then stuck to building editor windows and such until 2019.3 release when we can put uielements in our game?
@@jesseleerader Yeah anything that required displaying or clicking game UI cannot be done yet but you can still create your UI now to test how it looks. I might have been misinformed but I believe 2019.3 is coming out by the end of this November.
For me personally, this is the most monumental upgrade I have seen since hopping on board the Unity train 7 or more years ago. I hate building UI, and that may be because of the default UI systems Unity has offered to date. Some of my projects demand user-created content, so lots of input and 'reflection' of properties/fields in custom classes that need to be serialized/deserialized and represented in the UI. So I try to make everything work programmatically where possible. The number of hacky workarounds and toil trying to create generic methods and clever patterns of inheritance and custom attributes and keeping track of UnityEvent listeners and delegates and so on has been maddening. I don't want to mess around with prefabs more than necessary, because much of what I want to do is not that complicated and from what I can tell this will solve much of my problems.
Looks like they've replicated the jquery way of writing ux, which we used 10 years ago in HTML. What about the angular way (declarative bindings between ui and backend)? That was a massive shift for web devs...
Great talk - I was skeptical, but this has made me a believer! Will the UXML & USS assets have Addressable support? Being able to set/update my themes remotely and/or per-platform (or per-graphics level, similar to Android's resource buckets), is pretty much the "missing link" here. The Builder will be welcome at design-time, but maintainability is key.
I think they were both wrong. You can easily implement your own 3d GUI both underneath and above Canvas. Don't know why they said you couldn't. For instance you can have a 3d animated title text in the game scene either above below or on a different camera layer entirely displayed on the scene. Although I understand from the UI builder guys response it's not a feature of UI builder but it is a feature of Unity itself that allows you to basically make anything you can imagine, don't think UI builder needs to implement that since it's not hard to just display elements like that without using UI builder. Opened up UI builder started making my title screen for my game. Text went black while I selected white text pretty frustrating. Hmm scaling the font size repaired the color to white.
So what's it called and how do you get it? Does it cost anything? Ah I have 2018.4.15f1 LTS installed, that's why I'm asking like this. Right then, upgrade unity editor to more recent version.
I had no clue how to set up UI Builder and show it in the Game view and how to setup panel renderer script for creating UI for games UI Builder version : 1.0.0-preview.3 Help me please setting up
...I don't get it UI Elements do not use GameObjects and Components, so that means the text is also not using TMPro. And it also means that UI Elements can really be screen-space only. UGUI made sense because the GameObject/Component workflow automatically worked for every scenario, albeit not perfect. UI Elements will look plain baffling if it'll try to dance around to achieve the same functionality of UGUI (tweening and world-space UI, for example). And do tell me how both UGUI and UI Elemnts are written in c#, generate meshes in the same way but UI Elements is magically faster by a margin. C# is *not* ideal for such a task simply because it's C#. Hot take: it should've been just an editor thingie.
It means at its core, UIElements is not built on GameObjects. That does not mean it can't be compatible or work well with them, or displayed in a 3D world. TMP for example, at the lower level is not built on GameObjects and yet, you can currently use it when making UI, either in Screen or World space. We'll make it work I promise!
@@benoitdupuis9610 will we get custom shaders support for UI elements on a per-canvas/per-element basis perhaps? That alone will be tremendously helpful.
Worries me that this isn't using the standard Editor concepts, having it's own heirarchy, inspector, library, scene window etc etc. I'm sure some things are nessacary but at the beginning he was talking about it is familiar and yet.. it's different.
It's basically 15yo Dreamweaver shoved into a Unity EditorWindow. If you have never used any design tools (Adobe anything, web/desktop UI), it can be daunting, but there are many tutorials out there that can help get you in the right frame of mind. The gotcha will be that web-pages don't render like games do - it will still take some testing & tweaking to see how to get the best performance out of this and still have the design-time benefits.
@@mandisaw There's nothing daunting about it. It looks just fine except for it's poor editor integration. As you said it appears "shoved" in a single editor window rather than being a part of the editor at large. I can't pull the preview window out and put it on another monitor or anything else I can do with the regular editor ui. I can only move the entire UI Builder window wholesale. Makes it feel like an asset designed by someone outside the Unity team.
@@blisterfingers8169 Ah, got it. Yeah, better Editor integration would definitely be welcomed. I would hope that as it moves through the Preview to Production pipeline, they open it up to more user-configuration.
You still kind of need to know how UI graphics differ from in-world graphics in terms of performance, layout, scaling, etc. This builder is great for leveraging web UI approaches/designers, but from a technical standpoint it's still important to understand that games are not rendered like web pages. At the end of the day, all the auto-layout and styling/themes get translated into something not unlike IMGUI.
I feel the same way. It's like "this is really cool, but I already invested so much time learning the current system and the idea of throwing all that away makes me sad".
@@joegshanahan Old knowledge doesn't get thrown away, it just gets recontextualized. I still use the regular expressions I learned writing Perl scripts 20+ years ago.
@@joegshanahan Yeah I think that's just the nature of tech though in the end.. You just got to stay light on your feet and try to learn as widely applicable concepts and skills as possible primarily, etc. I think at a certain point you have enough system literacy to be able to understand most parts of a new system based on prior knowledge.
@@AntonQvarfordt you're right, but I'm still not convinced by the ECS stuff - object oriented programming is just too nice to give up right now. This new UI stuff will probably be easier once I've learned it though.
can't wait for my grandchildren to be able to use this in production!
😂
😂😂🤣
👃👆
😂
0:00 Introduction
2:34 Code example
6:20 Overview of the UI Builder
11:25 How UIElements works at runtime
14:35 Anchoring
18:36 Extracting inline styles to a new class on the stylesheet
21:55 Adding visual feedback to the UI buttons using :hover and :active styles
23:06 Preview mode in the UI Builder
23:22 UIElements debugger
24:50 Adding the stats box and player list
31:15 Debrief
36:57 Q&A
Sticky this. Right now!
thanks, mate
This is blowing my damn mind right now. How can you go from the garbage we have right now to something so feature rich and beautiful.
Dang right! I was waiting for something like this for years! No more basic Unity UI.
It was adapted from nGUI, that's why (which was considered a step up from IMGUI). At the time, that was one of the most popular UI tools on the asset store, so Unity hired the author to adapt something similar for the engine.
@@catdevpete Just goes to show if you're good at what you do, you can literally change things for everyone for the better.
When is this going to be in Unity?
it s been one year and the UI editor still looks like garbage. I didn t hear it would come out in the next version? any news about that?
what a time to be alive!
When the UIElements Debugger was working even on the UI Builder itself, it gave me a chuckle, that was impressive. This whole thing is a step in the right direction.
Coming from web development, I really appreciate this new workflow.
Web turned mobile dev here - it's no Interface Builder, but I'll take 15yo Dreamweaver crammed into Unity over what we have now.
yea me too. this is so mind-blowing. so friendly to UI/UX designers with web/app background. also the tools, layout, and functionality seem very very very well thought-out. debugging very similar to google chrome inspection too.
same!
@@mandisaw LOL!
Massive improvement over current UI. Seriously great job guys!
This is what I've been wanting to have on Unity for years.
Go, Damian, go! You are doing such a great job! Thanks so much for helping me out at Unite!
That's amazing! It's not just a step forward, it's an entire leap ahead of existing UI development workflow in Unity.
I agree. And this is also a UI system that is in line with industry standards so a lot of people will find themselves right at home AND it has by default all the strengths of other UI systems based on HTML and CSS. This is the way to go. THe other UI systems so far were ok ideas but this is really the way forward. This one is here to stay.
Super interesting to see it live coding, wow ! Respect to Damian Campeanu the speaker it's not an easy exercise to do !
I was looking at crafting this myself although miniature version, automating layouts realtime through code like flutter, you guys have saved me a Huge load of work!. Great job Unity!!!.
It's time to become a Full Stack Unity Developer :)
that would be super hard unless your just talking about mostly unity specific stuff
Some people in the game industry only work on UI so go for it.
finally ,2020 and unity start to wakeup
This looks great! The existing UI is painful to use. Now it looks like a first class developer experience.
What makes the existing UI so bad? I just used it for really basic stuff and never had much of an issue with it, but I've heard tons of bad things about it.
@@Chubzdoomer
thats exactly the issue its for basic stuff... absolutely basic you had to use a bunch of programs like Photoshop to achieve something decent which is not that scalable if scalable at all
@@Chubzdoomer Design wise it got reasonable after 2018.4's new prefab system. (Of course I want the buttons to be the same one with different text)
Performance wise, uGUI is an attempt to bake UI into Unity's GameObject concept. It is a massive tree of GameObjects trying to make each other behave in a way that's not just a simple classical transform hierarchy (that could be efficient with matrix operation). Turns out to be fitting round peg in a square hole. RectTransform, an invention that trying to fake classical Transform to think they are all a rectangle cause ripple effect on API design and performance. Components sometimes wants the sibling and not the child to adapt to each other (i.e. the "flex box" behaviour) where GameObject transform tree wasn't designed to efficiently enables that. Input handling is servicable enough since GraphicRaycaster did far more simpler check than even 2DPhysicsRaycaster, but still could be improved if we didn't rely on GO tree in the first place. Rendering is hard to optimize because it work together with shader that comes with Image component inside the tree. z-index when rendering is figured out by game object ordering, seems intuitive in some case this turns out to be painful. (Imaging a 3d card game where your hand usually be an overlapping cards horizontally, then you want the selected one to be on front but stay where it was horizontally. Now you can't because the game object ordering is already used for horizontal layout.) Lastly every little thing you do randomly cause or not causing layout rebuild (visible in the Profiler) of an entire tree. This is because the system is too relaxed as a GameObject, there are many possibility for outsider such as Animation/Playable Director/scripts to change any rect that affects multiple things.
Overall I think UI is a unique problem and cannot be made generic and "Unity-native" by forcing them into GO. New one using Yoga open source layout engine that's designed for UI is already a good start.
Thousands of games and apps have been developed solely on the UI system or heavily relying on it with advanced features. There has been nothing I have not been able to do with the current UI system. Sometimes, it could be done easier, just easier.
@@fafase Yes you can do anything, but you have to be aware of shitloads of stuff to get good performance and you have to do much much more work in many cases, just simple thing like changing style of all buttons in project? With this you can do good looking UI pretty fast with few icons, with old UI you would need to prepare lot of stuff in photoshop or similar before even starting and you would never get to 1 drawcall for whole UI.
It will be shittons easier to have coherent style, change stuff altogether and get good performance out of this UI system, It borows a lot from web and ui heavy app development tools and the reason is simple, they are trying to nail down most effeicient way how to create and control UI for decades already. Its whole different level really.
This is very nice! Finally, creating UIs in Unity seems like a pleasure!
Two questions:
1. Does it support 3D objects in the UI?
2. How does it support animations?
@@uDamian How easy to impelment damage layer with popping numbers and messages all around screen like any RPG? From the video I can't see that possibility at all.
@@uDamian How to make it mobile friendly? does it have anchor tags?
@@uDamian In other words, you expect all of us who don't write code to learn USS and code our animations. This is a reason not to adopt the system at all, for my team. We value artists building and animating UI.
Looks promising. What makes me very reluctant is that Unity has so many core systems that seem to be constantly scrapped (networking), reinvented (UI), or not really fully featured (terrain).
Yeah, that is just awesome! It can actually bring me back to Unity!
I'm so fricking happy that I can use flex properties just like in standard CSS! 😍 That will help A LOT on building responsive UI!
This looks amazing. What about animation, tweens, etc.. ? Any build-in features ?
@@uDamian Nice! What about vector graphics?
You'd have to check the performance hit, but animation should still be possible in code (the old-school, value-modifying way). It's just a question of how their renderer optimizations handle it.
@@uDamian Nice. I just watch the talk about UIForia.... It seems that it is exactly what UIElement will be, but more feature rich (animation, tween, c# code inside template, vector graphics).. Have you talk to the dev, maybe create a collaboration ?
right direction. but!
1) how to add animations?
2) what about localization
3) how to add 3D objects, how to configure the camera to display them
4) where are the paticles?
5) how to work with different materials?
6) how to work with lists. animated insert / delete / move
Without all this, the library is just a beautiful toy
Yessss !!! my dream come true :-) THANKS FOR UNITY TEAM !!!!
I can't create add "pannel renderer" or "pannel scaler" or "Event System" what kind of component am I supposed to create?
same
@@ivopalchev same
Still same for me, maybe do you have any updates ?
Add this line to your manifest file. "com.unity.ui.runtime": "0.0.4-preview"
BRILLIANT! Can’t wait to play with this next time I open up Unity :D
Does anyone know where to find the panel renderer component? It's not there for me
@@uDamian Cool thanks for the reply, great talk too
@@uDamian Hey I've downloaded the preview 2019.3 and 2020 versions hoping to be able to test the builder with in game UI but I couldn't find the panel renderer in there either
Great talk btw
@@uDamian Any update on the first release? Unity 2019.3 is still delayed :/
Is this component public now? I can't find it.
@@CHAPI929292 where you able to find it?
Awesome experience! When web specs meets high performance game engine. Thanks Unity Team!
Good news for Unity Developers!
Where did the Panel Renderer magically came into the project? Am I missing something.. please enlighten me..
Pretty cool Idea! Congrats! Hopefully, it gets to be fully useable soon. Right now without the Panel Renderer as part of the package seems too susceptible to errors.
Is this full project available anywhere? I've downloaded the samples from package manager, but you didn't really show at all how the code interacts with this system.
Did you ever figure this out? Here I am ten months later struggling to find out how to interact with this UI in runtime.
@@CloudS3rf did you find the example ?
Do we know when it's gonna be ready?
The UI Toolkit 1.0 runtime is currently planned for Unity 2021.2 (they want to be part of the 2021 LTS)
@@Ptiteigne awesome! It's one of the most exciting features for me!!!
It would be great if they can expose an API to create custom USS styles (like CSS Houdini) using C#. That would make a lot of custom animation in C# portable and easy to migrate and maintain.
One big plus for custom styles is that users won't have to wait for a certain CSS style to be adopted in USS; things could just be polyfilled.
This looks sooo good. Can't wait!!!
I don't see the Panel Renderer Component. I used UI Builder to make a hud but idk how to display it.
Reminds me of Android Studio layout editor.
This is so great news, thanks for the effort guys!
It is amazing. I have been using other UI assets that have XML and CSS based options to build my UI. I am glad that it is supported natively by Unity. Obviously, it will take some time to support more features, but I am happy with the current state as well. Modular UI is finally not a dream!
I am not able to get the "Panel renderer" from add component
That is not until 2019.3, which at time of posting, is not released.
@@PandasHuggingPonies hm, I can't seem to find the component in Unity 2019.3.0b9 (the beta release). Are you sure it's there?
@@lukass7156 Hi Lukas, not sure if you have found this yet. In package manager you need to select Advanced -> Show preview packages. Then it will show the UI Builder.
@@Pheidias73 yes, I installed the UI Builder from the Preview Packages. But when I want to add the "Panel Renderer", there is none in the component list.
@@lukass7156 it will be included in the 2019.3 release. Beta version doesn't have it.
Wow this is ridiculous! Great to see Unity pushing web-tech inside game development. This is going to make creating game UI's so much easier for everyone, and can finally leverage all the web developers and designers experience in the game industry. Nice!
just installed the package but no PanelRenderer... am I missing something ?
same here. tried with several different editor versions. Cant seem to get UI builder stuff to work at all because of this.
@@vjanomolee Same here.
If you look at the component icon it looks like a C# script, likely something that you currently have to code yourself (or at least find some source code online to implement)
@@chickazama This is correct. It can be found on the github but I've chosen to just wait until it's fully implemented.
@@FullMe7alJacke7 where is the GitHub that you mention? I would really like to take a loot at it to test this out.
So 2019.3 is live and released, Panel Renderer and Panel Scaler are still unavailable.
Yes, it don't have any sense. Why they publish the Builder if you can't use it in your game until they release the rendering components ? what a poor releases planing
@@radenzito If you go to the sample UIElements project on Github, it has the UIElements Runtime Package. Unity's UIElements forum has a thread discussing their plans for releasing and how you can get access to the plugin.
@@Wandows95 Can you please post the link to this package here? I checked their Github, I couldn't find it.
@@Wandows95 mee too, can't find that package on the project. Can you please provide a link or more info about how to get it?
Hello, do you have any updates ? Have you found those Panels ? I still can't find them :(
where is this UI Builder ???
23:20 looks really cool!
Going back to not using the hierarchy is unfortunate. I get that you run it in your own hierarchy/system, but it is just more intuitive when you can visually see the structure for debugging purposes (major time sink...). Can your UI builder window have its own, authoritative hierarchy? I don't wanna do a V4 of the UI system...
As a webdeveloper now trying to make games i would love to see this released. I can't wait to get my hands on it. XML and CSS what more do we need :) I hope it will also support animations and stuff but this is great. I can't work with the current UI system.
Did you end up using it ? I'm a web dev too and I'm wondering if it'd be interesting to learn and use :)
Oh my sweet lord! That's so damn awesome!!!
CSS for unity UI. Yesssssss!
Very excited about this new feature!
But the current UI Builder package (at this time of posting) doesn't include Panel Scaler or Renderer, nothing is shown on the game screen. :(
Using 2019.2 version and tried in the beta (since the demo is shown in that version) but to no avail. Guess we have to wait for it. Feels like candy without the sweetness here XD
@@uDamian Ah I see, I didn't catch that part. Thanks a lot!
Will using custom shaders be possible?
This looks amazing, please don't limit it to a single drawcall, I don't want to be stuck on the old system.
Wow, giant improvement
damn this tool is so powerful
will you support importing CSS library in the future? like convert bs4.css into ucss file so we could all otherr css on internet
So when do we get React Native bindings?
와.... 신세계다, 역시 유니티 내장 UI를 써야 됩니닷 !!!
how are u moving from game screen to main menu ?? how to do that ?
When does PanelRenderer come out? V1?
I just copied the runtime folder from examples but I get weird results where child elements don't show text and colours are off from the builder, probably because builder code is newer!
12:55 Or you could just give everyone the dark theme :)
no, that's illegal
@@marshmallow_fellow They made it legal ^^
@@HAWXLEADER ikr, It's a miracle!
Does it support data binding (for example like WPF)?
Data Binding will be very useful , i also wish they add this in future.
Is it out?
If not when will it be released?
Excited!!
I am using it in my project already because it is so nice.
Currently using Unity version 2019.3 beta 8.
To get it go into package manager and look into preview packages near the bottom find the package UI Builder.
@@8BitsPerPlay How do you open the "UI Builder" section that he has open? The views that he works with are not available for me
@@andreigatina1846 I will be making a small video on how to download it, open it, and use some of it's features. Had a lot of people ask about it, so figured I would make a small video this week to just help out. A lot of people been mainly wanting to know about the binding data from scripts to the UI.>
I will replay back to this message when the video is uploaded.
@@8BitsPerPlay thanks bro
@@8BitsPerPlay Hey, did you manage to make the video?
Wow Nice
Can we Assign Shader And Material to UI Element? like glitch shader or RenderToTexture workflow
It looks great.
would love to see some performance comparison as well and how it handles animated elements.
Is there an equivalent software for this in Web Development? This workflow is amazing.
how about CSS transitions and animations? Are those also available?
Are there any recent tutorials on this tool?
This is a game changer!
Thank you, we needed this so much :)
I am about to build a fairly complex and dynamic UI and I hope this is what I need! I've read in the docs that there might be bigger changes because it's still in the Beta. Can you elaborate on that?
It is most likely just a disclaimer, that they are not responsible if your UI breaks due to updates.
This is great! I am trying this but not getting "Panel Renderer" component that you attached to the game object to render UI to screen. Using unity version 2019.3.0b10 . Please help with this.
The panel renderer component will be available when 2019.3 is released. Beta doesn't have it.
@@philliphartford5576 - So as is, we can't recreate what he is doing here because we can't access the panel renderer component at all? Are we then stuck to building editor windows and such until 2019.3 release when we can put uielements in our game?
@@jesseleerader Yeah anything that required displaying or clicking game UI cannot be done yet but you can still create your UI now to test how it looks. I might have been misinformed but I believe 2019.3 is coming out by the end of this November.
@@philliphartford5576 Thanks so much for the info! Can't wait to get playing with it.
Is this new technology stable and recommended for production apps yet?
For me personally, this is the most monumental upgrade I have seen since hopping on board the Unity train 7 or more years ago. I hate building UI, and that may be because of the default UI systems Unity has offered to date. Some of my projects demand user-created content, so lots of input and 'reflection' of properties/fields in custom classes that need to be serialized/deserialized and represented in the UI. So I try to make everything work programmatically where possible. The number of hacky workarounds and toil trying to create generic methods and clever patterns of inheritance and custom attributes and keeping track of UnityEvent listeners and delegates and so on has been maddening. I don't want to mess around with prefabs more than necessary, because much of what I want to do is not that complicated and from what I can tell this will solve much of my problems.
Any leads on how to create the Panel Renderer script to show the UI at runtime? Coming 100% from the old workflow I feel a bit lost.
Add this line to your manifest file. "com.unity.ui.runtime": "0.0.4-preview"
Has anyone tried this on mobile? What's the performance like vs the original Unity UI tools?
what 's the time we can use this to Develop the new Game ????
Is there an example of simple gui made using UIElements? All I have found is editor changes using it.
I've been wanting to implement a html engine to unity i can't believe this will be a native feature
Will it be possible to make animations with it aswell? For example like css' keyframes.
Is these a Add on?
Looks like they've replicated the jquery way of writing ux, which we used 10 years ago in HTML. What about the angular way (declarative bindings between ui and backend)? That was a massive shift for web devs...
where is the Panel scaler / Renderer? i can find them
2019.3
Great talk - I was skeptical, but this has made me a believer! Will the UXML & USS assets have Addressable support? Being able to set/update my themes remotely and/or per-platform (or per-graphics level, similar to Android's resource buckets), is pretty much the "missing link" here. The Builder will be welcome at design-time, but maintainability is key.
Will it be possible to load UXML at runtime !?
Very good presentation!
The information on this package needs to be updated!!!
You can use a atlas for images?
Hopefully the reduction of the use of the standard Unity UI in a lot of basic Indie games will be reduced thanks to this.
Incredible way of oversimplifying this tedious process. I really like where this is heading.
Wow! Now this gives my Unity UI experience a degree of web UI experience steroids.
This went fast but damn, looks cool! Need more tutorials for this!
Geez there really is no material to be found to learn this, besides it seems directed towards editor stuff...
I think they were both wrong. You can easily implement your own 3d GUI both underneath and above Canvas. Don't know why they said you couldn't. For instance you can have a 3d animated title text in the game scene either above below or on a different camera layer entirely displayed on the scene. Although I understand from the UI builder guys response it's not a feature of UI builder but it is a feature of Unity itself that allows you to basically make anything you can imagine, don't think UI builder needs to implement that since it's not hard to just display elements like that without using UI builder. Opened up UI builder started making my title screen for my game. Text went black while I selected white text pretty frustrating. Hmm scaling the font size repaired the color to white.
How do you add the UI Builder? I cant find it on the package manager
just found it! haha, its a preview package and it wasn't showing up on the package manager
What about particle effects?
What's wrong with canvas ?
Where is Panel Renderer ? can't find it
You need to import the package first
@@SidMakesGames just knew they havn't been releasing UIElements runtime package yet, PanelRenderer is not available for now
@@filodlin7997 I believe it is coming in next public release 2019.3 then
Although you can still try it in 2019.3 beta version
@@SidMakesGames no, nothing in 2019.3.b07
@@filodlin7997 Strange, i have option of importing UiBuilder in my package manager. Haven't imported it yet though
So what's it called and how do you get it? Does it cost anything? Ah I have 2018.4.15f1 LTS installed, that's why I'm asking like this. Right then, upgrade unity editor to more recent version.
Unity learn well from what Unreal did, well done
It seems to be more inspired on Web than Unreal.
Damn , it's about time.
I had no clue how to set up UI Builder and show it in the Game view and how to setup panel renderer script for creating UI for games
UI Builder version : 1.0.0-preview.3
Help me please setting up
solution find?
@@mnowling3286 Nope
What about media queries and the use of percentage instead of pixels or even responsive in general?
Where is the Panel scaler / Renderer? i can't find them
2019.3
...I don't get it
UI Elements do not use GameObjects and Components, so that means the text is also not using TMPro. And it also means that UI Elements can really be screen-space only.
UGUI made sense because the GameObject/Component workflow automatically worked for every scenario, albeit not perfect. UI Elements will look plain baffling if it'll try to dance around to achieve the same functionality of UGUI (tweening and world-space UI, for example).
And do tell me how both UGUI and UI Elemnts are written in c#, generate meshes in the same way but UI Elements is magically faster by a margin. C# is *not* ideal for such a task simply because it's C#.
Hot take: it should've been just an editor thingie.
It means at its core, UIElements is not built on GameObjects. That does not mean it can't be compatible or work well with them, or displayed in a 3D world. TMP for example, at the lower level is not built on GameObjects and yet, you can currently use it when making UI, either in Screen or World space. We'll make it work I promise!
@@benoitdupuis9610 will we get custom shaders support for UI elements on a per-canvas/per-element basis perhaps? That alone will be tremendously helpful.
@@Kolyasisan maybe not at launch but definitely something we want to support
@@benoitdupuis9610 thanks for the clarifications
Worries me that this isn't using the standard Editor concepts, having it's own heirarchy, inspector, library, scene window etc etc. I'm sure some things are nessacary but at the beginning he was talking about it is familiar and yet.. it's different.
It's basically 15yo Dreamweaver shoved into a Unity EditorWindow. If you have never used any design tools (Adobe anything, web/desktop UI), it can be daunting, but there are many tutorials out there that can help get you in the right frame of mind. The gotcha will be that web-pages don't render like games do - it will still take some testing & tweaking to see how to get the best performance out of this and still have the design-time benefits.
@@mandisaw There's nothing daunting about it. It looks just fine except for it's poor editor integration. As you said it appears "shoved" in a single editor window rather than being a part of the editor at large. I can't pull the preview window out and put it on another monitor or anything else I can do with the regular editor ui. I can only move the entire UI Builder window wholesale. Makes it feel like an asset designed by someone outside the Unity team.
@@blisterfingers8169 Ah, got it. Yeah, better Editor integration would definitely be welcomed. I would hope that as it moves through the Preview to Production pipeline, they open it up to more user-configuration.
I guess this is good, I just wish it was out before I extensively learnt the other two systems :P
You still kind of need to know how UI graphics differ from in-world graphics in terms of performance, layout, scaling, etc. This builder is great for leveraging web UI approaches/designers, but from a technical standpoint it's still important to understand that games are not rendered like web pages. At the end of the day, all the auto-layout and styling/themes get translated into something not unlike IMGUI.
I feel the same way. It's like "this is really cool, but I already invested so much time learning the current system and the idea of throwing all that away makes me sad".
@@joegshanahan Old knowledge doesn't get thrown away, it just gets recontextualized. I still use the regular expressions I learned writing Perl scripts 20+ years ago.
@@joegshanahan Yeah I think that's just the nature of tech though in the end.. You just got to stay light on your feet and try to learn as widely applicable concepts and skills as possible primarily, etc. I think at a certain point you have enough system literacy to be able to understand most parts of a new system based on prior knowledge.
@@AntonQvarfordt you're right, but I'm still not convinced by the ECS stuff - object oriented programming is just too nice to give up right now. This new UI stuff will probably be easier once I've learned it though.