UI Toolkit - Dragon Crashers (Unity 2022 LTS update) walkthrough | Tutorial

  Рет қаралды 17,575

Unity

Unity

Күн бұрын

In this video, we’ll explore the updated for Unity 22 LTS UI Toolkit Dragon Crashers sample. This project showcases how to create some common game interfaces using UI Toolkit and UI Builder.
In this new version, you can learn how to create responsive UI to different device orientations, usage of the mobile SafeArea API and more best practices for UI.
Download the project from the Unity Asset Store: assetstore.unity.com/packages...
Learn more in our e-book:
User interface design and implementation in Unity - resources.unity.com/games/use...
Timestamps:
[0:00] Intro
[00:34] Quick tour of the UI
[02:10] Styling UI elements
[02:55] Flexbox layout
[03:38] Theme Style Sheets (TSS)
[04:53] Safe area
[05:50] Custom Elements

Пікірлер: 79
@james_coleman
@james_coleman 7 ай бұрын
Wilmer Lin is one of the best teachers on the Internet! Full stop.
@ThwackStudio
@ThwackStudio 7 ай бұрын
Tutorial is difficult to analize. but ui toolkit is awesome!.
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
checkout the ebook too, has a section introducing initial concepts
@lemetamax
@lemetamax 7 ай бұрын
Remind me to learn the UI toolkit 3 years from now. I'm not ready to go into css just yet.
@bonzero
@bonzero 7 ай бұрын
the Unity ebook for UI artists can help
@unnamer345
@unnamer345 7 ай бұрын
Most likely in a 3 years it still will be in development
@surakshaajith4223
@surakshaajith4223 7 ай бұрын
I have already used UIToolkit in my project and it surely consumes time when compared to canvas ui but it's flexible. But dynamically handling things is not straight forward and consumes time adding. Adding custom entry to Listview, handling it is complex or adding custom single instance ui to scrollview and handling each element like button click of each element in scroll view was also difficult in the older update. I am looking forward to see what the upcoming update are and for more improvements in UIToolkit.
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
keep an eye on the Unite 23 talks posted in the Unity channel, and look out for the UI Toolkit one, great stuff coming soon
@hamidrezakaramian5274
@hamidrezakaramian5274 7 ай бұрын
This Tool really need a plugin for convert Figma to this
@AIGameMonster
@AIGameMonster 7 ай бұрын
It really took me a long time to get used to it at first. The default layout wasn't very intuitive for quickly dragging and moving elements to the desired position.
@simoncodrington
@simoncodrington 7 ай бұрын
Great video from you guys. Along with this overview of the updated sample project, I think having a deep dive series showing how you've set these UI elements up would be highly appreciated. Creating responsive / adaptive UI elements has been painful in Unity for years so showcasing examples of how you've made it work here (plus some extras you could showcase in future videos) would be very handy, for example creating a new popup UI bound to a button that shows some stats (that appear visually different when on portrait or landscape etc) We need even more content from you guys showing exactly how YOU would use UI Toolkit so we as developers can see the best approaches and roll them into our games
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
the sample was reviewed by the Unity UI team so it's a good example of project structure and UI organization
@lordfrazao1026
@lordfrazao1026 7 ай бұрын
I liked Unity's approach to using a UI system similar to web development but I think that for console and PC games it leaves something to be desired. For example navigating the UI using a gamepad. How is the interaction of the UI Toolkit with the Input System? I'd love to see something related to this in the future.
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
Check the sample Happy Harvest, we have the input system working with UI Toolkit and we have keyboard controls as well to handle inventory selection etc
@blitzkreig4887
@blitzkreig4887 7 ай бұрын
Wilmer Lin is back..
@IamDA2799
@IamDA2799 Ай бұрын
2:06 penjelasan penggunaan UXML dan USS di UI builder pada game ini 2:36 apa saja skrip UXML yg dibuat 2:47 USS 2:54 UI toolkit. Membuat dan mengatur layout 3:14 prototipe halaman menu 3:26 pada UI toolkit samples. Menggunakan C# script 3:38 penggunaan TSS(theme style sheet). Untuk meletakkan kumpulan gaya(misal:menggunakan tema untuk mengaktifkan/menonaktifkan elemen dekoratif musiman) 3:49 misal jika ada event2 tertentu yg temanya berubah2, sehingga perlu asset dekoratif tambahan yg ditampilkan 4:05 juga bisa untuk membuat tampilan vertikal (portrait) dan horizontal (landscape) pada layar, menggunakan script TSS 4:41 perlu juga melakukan ini. Untuk melakukan penempatan yg cocok untuk asset dekoratif 4:51 penggunaan fitur safe area. Untuk menghindari ujung tampilan asset pada layar menjadimemiliki celah. Misal game berjalan pada device yg layarnya besar 5:03 dibelakang layar a.k.a di engine, tampilan asset seperti ini 5:06 skrip safe area 5:23 pola pengisisan berulang untuk menutupi edges dari asset yg kurang memenuhi 5:52 membuat efek visual elemen pengisian bar (misal:level/health/wealth/dsb) 6:00 skripnya. Bikin skrip ini untuk membuat dan memadukan tampilan asset. Kan nanti dia muncul di library sebagai skrip, kemudian hrs didrag ke hierarchy untuk memunculkan aset 6:22 demo
@ggwp8618
@ggwp8618 7 ай бұрын
Does any 1 knows if this game is optimized for mobile devices? I want to learn some URP mobile optimizations
@CESRex21
@CESRex21 7 ай бұрын
SAME 😫😫😫😫😫
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
we ran the sample on mobile devices, few years old devices with no problem at all. UI Toolkit is performant
@ggwp8618
@ggwp8618 7 ай бұрын
@@eduardooriz2715 ok bro thanks
@Csumbi
@Csumbi 7 ай бұрын
is there a reason why I should use this as an artist without programming knowledge instead of the existing Canvas system?
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
performance, scalable (when you have very complex interfaces, this system is much better, check the Unity Timberborn case study), collaboration (artists and programmers can work on UI toolkit in parallel without conflicts of working in the same prefab, it's also better for version control)
@nhanimaah786
@nhanimaah786 7 ай бұрын
No absolute reason. The people who are saying that ui toolkit is more performance are clueless and have not used the system. Ui toolkit is absolutely bad and half baked. Another useless package from a desperate company.
@stefanradjenovic7672
@stefanradjenovic7672 7 ай бұрын
No reason. The old system is fine. People who are advocating for it arent mainly unity devs, so they are used to those other systems and dont wish to adapt and havent learn to utilize prefabs, scripting and in general untiy properly. If you wanna learn something like this learn proper css and html and do web design its way more useful.
@nhanimaah786
@nhanimaah786 7 ай бұрын
@@stefanradjenovic7672 no wonder the unity engine has become a laughing stock, no one wants to associate their game with this brand. You do not see epic game adopting this trash ui system because unlike unity, epic actually make games. Unity is spending time working on a useless UI system when their render pipelines need work.
@wrymen
@wrymen 7 ай бұрын
What about Localization? This is missing, and you cannot really release serious game without it. So the toolkit really seems like currently still an immature system unfortunately.
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
check out the Unite 23 talk about UI toolkit, there's some news about it
@BrontoKroxig
@BrontoKroxig 7 ай бұрын
What I like from Unity is that I can create front-side stuff without messing with CSS or something similar...please don't go full on this direction, can we keep both UI systems to be competent? ^^'
@kinnetikira
@kinnetikira 5 ай бұрын
Yup this CSS sucks
@joe_malott
@joe_malott 7 ай бұрын
Love this. Tons of developers know basic css and this is a welcome addition for those of us with developer experience outside of unity (which is a lot)
@timotheekamdem829
@timotheekamdem829 7 ай бұрын
Hello please how can I start making mobile game on unity ? I want to start from scratch using good habits... And master unity
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
we have a Unity ebook for game designers can could be a starting point
@timotheekamdem829
@timotheekamdem829 7 ай бұрын
please, how can I get it ?@@eduardooriz2715
@senser1o76
@senser1o76 7 ай бұрын
Still raw and not possible to include in enterprise projects
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
Just Dance 2024 was made with UI Toolkit, it's already used on enterprise projects
@senser1o76
@senser1o76 7 ай бұрын
🤣@@eduardooriz2715
@faycelayech8701
@faycelayech8701 7 ай бұрын
Unity's approach to using a UI system similar to web development but I think that for console and PC games.
@horn69x
@horn69x 7 ай бұрын
☕🗿
@rogercabo5545
@rogercabo5545 7 ай бұрын
*** does ants read this? *** If there are only a handful of people on this planet capable of creating a game in this style, why wouldn't they be able to design their own user interface? And !This! layout seems more suited for a PC rather than a mobile device, with many unused spaces, tiny icons, and small font sizes.
@eduardooriz2715
@eduardooriz2715 7 ай бұрын
it actually looks ok and readable on the actual mobile device in both portrait and landscape, tested on iPhones and iPads
@javipamp
@javipamp 4 ай бұрын
Too difficult for me. It is not intuitive.
@timotheekamdem829
@timotheekamdem829 7 ай бұрын
My English is not good sorry
@FalculoCornuto
@FalculoCornuto 2 ай бұрын
terrible, awful .. that demo is pure chaos
@timotheekamdem829
@timotheekamdem829 7 ай бұрын
Can I publish the game on the Playstore
@jihadrouani5525
@jihadrouani5525 7 ай бұрын
Of course not, and you have the audacity to ask...
@CESRex21
@CESRex21 7 ай бұрын
​@@jihadrouani5525I swear 😂😂😂
@timotheekamdem829
@timotheekamdem829 7 ай бұрын
😊☺️
@timotheekamdem829
@timotheekamdem829 7 ай бұрын
​@@jihadrouani5525 Hello please how can I start making mobile game on unity ? I want to start from scratch using good habits... And master unity
@khushalkhan83
@khushalkhan83 7 ай бұрын
Its just a vertical slice, complete it add more content to it. Just publishing a vertical slice will not bring you any success.
@aloyskent561
@aloyskent561 7 ай бұрын
Why don't Unity Develop a visual script Just as UE Blueprints. It will make UI more easier
@v0ltdev
@v0ltdev 7 ай бұрын
It already has
@bonzero
@bonzero 7 ай бұрын
Visual Scripting, pretty good I would say
@aloyskent561
@aloyskent561 7 ай бұрын
@@v0ltdev what is it called
@v0ltdev
@v0ltdev 7 ай бұрын
@@aloyskent561 visual scripting
@ayemakegame
@ayemakegame Ай бұрын
C# is already simple enough and is not full of troubles like Unreal C++, so Unity users are accustomed to using a more direct method when writing programs, writing directly.
@stefanradjenovic7672
@stefanradjenovic7672 7 ай бұрын
Why? It just looks much more complicated to do anything than regular Canvas UI. Is it just to please web developers? I bet it took you guys who made this tool insanely long to create this UI, which anyone proficient in Canvas UI would have done in 1,2 days. Not to mention its CSS but not CSS its HTML but not HTML. So even those who know those languages will still need to learn this specific language and details and tricks how to make things. Its ok to be an alternative, but in my opinion its terrible idea to make it default. Focus on Canvas UI and improve its performance, components, animations.
@AnthelmeDumont
@AnthelmeDumont 7 ай бұрын
This video didn't show it well, but the UIBuilder Window is pretty much the same as the Scene view when you are using "Canvas UI", you don't need to manipulate the code files at all if you don't want to, so no it doesn't take more time especially if you are doing everything in inline CSS. Of course, if you want to make everything clean, it might take longer but the possibility to make changes in a single CSS file that will be impacted across all your UI is worth it, at least for me.
@soyunbonus
@soyunbonus 7 ай бұрын
Yes, it's made to please web developers.
@stefanradjenovic7672
@stefanradjenovic7672 7 ай бұрын
​@@AnthelmeDumont I agree its worth it, if you are building web pages, and some apps. I never had a serious problem during game development. Usually its either a complete overhaul or a simple change, and of course a bit of smart prefab usage. What more is the prototyping speed proved hugely more useful to iterate through various UI fast to see how we feel and correct it. Unity is primarily a game engine, and games have different requirements than web and apps. Almost no UI is without animation and effects and things more often then not happen in some sort of sequence. I could go as far to say that even in CSS you will have to make the change in multiple places and override the main style for specific elements and so on as things develop. Its not easier its just the web way of doing things.
@AnthelmeDumont
@AnthelmeDumont 7 ай бұрын
I think your message shows me that you never tried UIToolkit/UIbuilder because you are talking about web vs game engine usages. UIToolkit is using css and html to build UI, but the UI Builder works the same as the UI Canvas like I already said and the sequencial animations will be also done in c# no matter what UI system you are choosing. I know it's cool to hate on web dev, but it's not because UIToolkit is using web tech that it isn't made for making game UI 😅
@AnthelmeDumont
@AnthelmeDumont 7 ай бұрын
Also it's only my opinion but UI prototyping should be made in a proper software, not in the game engine
@Yanus3D
@Yanus3D 7 ай бұрын
Pay to Win... disseise of modern games....
@leeoiou7295
@leeoiou7295 7 ай бұрын
I like how real professional game engines like Unreal do not adopt this lame method of creating UI. Unity is a game engine, not a website maker, spending time on this useless UI system when the engine is far behind is the reason unity loses users everyday. Which professional game dev will use this trash?
@stefanradjenovic7672
@stefanradjenovic7672 7 ай бұрын
Omg exactly! Nobody complains about Unreal also having a similar system to Unity Canvas UI. These problems and requirements only started appearing once Unity began branching into App Development.
@kinnetikira
@kinnetikira 5 ай бұрын
I was horrified at 2:10
@hldfgjsjbd
@hldfgjsjbd 5 ай бұрын
Crying about new and actually not bad features and/or alternative options is so funny
Breakdown of VFX Graph smoke portal sample | Unity
24:30
How To Monetize Your Game With NEW UNITY ADS Tutorial
17:04
Was ist im Eis versteckt? 🧊 Coole Winter-Gadgets von Amazon
00:37
SMOL German
Рет қаралды 32 МЛН
Я нашел кто меня пранкует!
00:51
Аришнев
Рет қаралды 3,4 МЛН
10 common mistakes with the Next.js App Router
20:37
Vercel
Рет қаралды 189 М.
Unity UI that WORKS  and doesn't Suck - Nova UI
10:11
One Wheel Studio
Рет қаралды 33 М.
UI Toolkit Primer - Build UIs like a Programmer
27:54
Tarodev
Рет қаралды 48 М.
A new way to generate worlds (stitched WFC)
10:51
Watt Designs
Рет қаралды 513 М.
UI Toolkit VS Canvas - Performance & Comparison
7:43
Freedom Coding
Рет қаралды 1,8 М.
Building Runtime UI with UI Toolkit In Unity
21:35
Game Dev Guide
Рет қаралды 30 М.
ChatGPT Just Learned To Fix Itself!
5:47
Two Minute Papers
Рет қаралды 92 М.
Новый Input System в Unity. С чем его едят?
23:55
ЯЮниор - Школа Разработки Игр
Рет қаралды 33 М.
Unity UI Toolkit in World Space
12:04
MadCat Tutorials
Рет қаралды 28 М.
skibidi toilet 75
3:52
DaFuq!?Boom!
Рет қаралды 26 МЛН
Я ВЫЖИЛ ПОСЛЕ НАПАДЕНИЯ ЕНОТА!
24:41
EdisonPts
Рет қаралды 1,4 МЛН
БАРЛЫҚ ГЕРОЙЛАР АСПАНҒА КЕТТІ (GTA V)
1:23:51
skibidi toilet multiverse 039 (part 1)
5:29
DOM Studio
Рет қаралды 8 МЛН