How To Make UIs without frustration | Unity Beginner Tutorial

  Переглядів 25,753

This is GameDev

This is GameDev

День тому

Unity UI system can be difficult to work with. Here, we explore one way to build your own layer on top of Unity's UI. This can help you build bigger games.
★ Join the Kingdom:
/ discord
► The GameDev Website: gamedev.lu
········································
For the cool ones:
● Instagram: / gamedev.lu
● Twitter: / gamedevlu

КОМЕНТАРІ: 82
@manuRGamedev
@manuRGamedev 9 місяців тому
As a Game Technical Designer in a game very dependant from UI (75% of my work is UI implementation), this is the good way, and it took me months working only on UI and doing it the bad way, learning from mistakes (and suffering) to end discovering this pipeline by miself. Now, anyone who finds this video will know. Thanks! (why this video didn't appear before!?). Now, with a finished UI, I have used around 10-15 prefabs (+ specific cases and priners ) And yes, I DO ENJOY IMPLEMENTING INTERFACES! Good video!
@this-is-gamedev
@this-is-gamedev 9 місяців тому
Wow, thanks a lot for your comment! This is very much appreciated especially coming from an experienced technical designer! And no one seems to cover those more intermediate/advanced topics, which are scarier to make as it is most of the time based on personal preference. (Just a guess)
@SeanBotha
@SeanBotha 8 місяців тому
This would make a great series. Learned a lot
@mayaneko1094
@mayaneko1094 9 місяців тому
When does the frustration go away? 😅 I've a hard time to understand, how half the added things work, as they're just dealed with for a few seconds each before adding the next things. Feels more like an intermediate tutorial at this point than a beginner one, but i'll hang in there and will probably understanding after watching it a few more times.
@this-is-gamedev
@this-is-gamedev 9 місяців тому
Sorry if it goes a bit fast. Yes, I assume a little that you used Unity’s UI system before and know some of the components
@InterloopStudios
@InterloopStudios 9 місяців тому
Please make that part 2 you mentioned. This UI system is amazing!
@this-is-gamedev
@this-is-gamedev 9 місяців тому
Alright :D
@Basmage
@Basmage 7 місяців тому
where the video at broski @@this-is-gamedev 👀
@this-is-gamedev
@this-is-gamedev 7 місяців тому
It’s in progress. In between Unity drama going on :D
@JustGromski
@JustGromski 9 місяців тому
Right on time, im planning on making ui based games as my first games to practice, so this is helpful.
@this-is-gamedev
@this-is-gamedev 9 місяців тому
Excellent! Glad it helps :D
@JasonStorey
@JasonStorey 9 місяців тому
Great video. Couple of fun additions. Did you know that the Text mesh pro scene and ui version have a shared base class? this means you dont need to remember that long confusing name, whenever you want TMP text you can just write... TMP_Text! that type will let you drag it into the inspector field and use it normally. Also when it comes to themes/configurable scriptable objects, did you know if you make default themes etc you can actually drag them into the _script_ as in, select the script in the project view and assign it there, that way any time you add that script to a new object the theme variable will already be filled in for you ! for an extra layer for this I actually don't reference the theme but I reference a theme manager, so you never need to change the theme SO on any component ever, but the ui component subscribes to a change event in the SO and so when I assign a new theme in the Manager SO all other ones get automagically updated in real time! Looking forward to seeing your take on the Control layer.
@this-is-gamedev
@this-is-gamedev 9 місяців тому
Thanks! 🙏 those are all very good additions! Forgot about TMP_Text! It’s so much simpler. Yes, a theme manager certainly makes sense and makes reference tracking much more centralised and less prone to errors, and that was something I thought to consider for the control layer (as an example: theme changes based on special holidays)
@user-hm2is2ex9f
@user-hm2is2ex9f 4 місяці тому
This is cool. Never thought about making them all prefab full stretch.
@benjaminlehmann
@benjaminlehmann 2 місяці тому
That was great! Thanks for the insight.
@luckyknot
@luckyknot 7 місяців тому
Watching this at night with this classical music on background makes me sleepy... but what a fantastic tutorial for making a flexible, maintenable UI! Thanks for sharing your knowledge sir!
@this-is-gamedev
@this-is-gamedev 7 місяців тому
Thanks! I am glad you liked it. That’s fair for the music. I’ll see to add some more variations next time :D
@almualim93
@almualim93 8 місяців тому
Can't wait for the Logic video to pop up!
@swalscha
@swalscha 8 місяців тому
Très bon tuto, merci !
@this-is-gamedev
@this-is-gamedev 8 місяців тому
Merci! Je suis content que ça plaise!
@EdMakesGames
@EdMakesGames 8 місяців тому
today I learned, thanks : )
@cemalcanyldrm5609
@cemalcanyldrm5609 6 місяців тому
This video helps me a lot ,Thanks man
@this-is-gamedev
@this-is-gamedev 6 місяців тому
Awesome!
@renecura
@renecura 8 місяців тому
Yes, we need the next video please. 🙌
@this-is-gamedev
@this-is-gamedev 8 місяців тому
Working on it 🪄
@neinxxl1440
@neinxxl1440 8 місяців тому
Impressive👍
@spencer058
@spencer058 7 місяців тому
Damn, i found diamonds
@pogudesu
@pogudesu 9 місяців тому
Holy ****. This video is gold.
@this-is-gamedev
@this-is-gamedev 9 місяців тому
Thanks! Appreciate it! 🤯
@captainnoyaux
@captainnoyaux 8 місяців тому
you got some real interesting niche down there (I want to fill this niche but I never take the time to do so), high end / advanced concepts not just beginner code, too few address this topic unfortunately :(
@Basmage
@Basmage 7 місяців тому
is the code for this available on github?
@dxlorean2938
@dxlorean2938 3 місяці тому
Super video merci beaucoup !
@this-is-gamedev
@this-is-gamedev 3 місяці тому
Merci!
@halivudestevez2
@halivudestevez2 7 місяців тому
Finally some advanced coding tutorial. I will definitely need this to learn. 🍷
@this-is-gamedev
@this-is-gamedev 7 місяців тому
Have fun :D
@BoleeOfficial
@BoleeOfficial 8 місяців тому
Awesome, I hope we see a next video soon :D You can use [ContextMenu("Special Name")] before any public function to run it in editor, you can find the button in the component options btw. Here is the way I write Get functions with enum choices: public Color GetBackgroundColor(Style style) { return style switch { Style.Primary => primary_bg, Style.Secondary => secondary_bg, Style.Tertialy => tertiary_bg, _ => disable }; }
@this-is-gamedev
@this-is-gamedev 8 місяців тому
Thanks! Oh true, I forgot about that ContextMenu trick! Very nice indeed.
@DavidVille
@DavidVille 6 місяців тому
this is awesome
@this-is-gamedev
@this-is-gamedev 6 місяців тому
Thanks!
@satpiegaming6756
@satpiegaming6756 7 місяців тому
Really helpful video, thanks! For some reason my three containers aren't being coloured (not sure why), also my text isn't showing on the scene either. The two buttons added to the bottom container also aren't visible and are in the middle of the middle container. Any idea why these errors might be occurring?
@this-is-gamedev
@this-is-gamedev 7 місяців тому
Hard to say. There can be compilation issues (typo, etc). Check the console, then fix one thing at a time. First the containers then move on to the text, buttons etc. Make sure all elements are correctly parented in the hierachy
@satpiegaming6756
@satpiegaming6756 7 місяців тому
@@this-is-gamedev thank you! Will do! Can’t wait for the next episode, keep up the awesome work! 😊
@this-is-gamedev
@this-is-gamedev 7 місяців тому
Thanks! Part 2 is already out :D
@jeremyruizM42
@jeremyruizM42 9 місяців тому
Now, I have no excuse for not learning how to make a UI.
@this-is-gamedev
@this-is-gamedev 9 місяців тому
Go go go
@nikitasolodovnikov8150
@nikitasolodovnikov8150 7 місяців тому
What do you think about Doozy UI Manager? Is it a good tool with which you can create a UI based games? Can we follow you logic in Unity Visual Scripting addon?
@this-is-gamedev
@this-is-gamedev 7 місяців тому
I have my eyes on Doozy UI and will probably give it a try soon. I think it has a learning curve but you get the full layer on top of Unity UI system (animation, states, data binding, screen management, modal views etc). Yes, Visual Scripting can do the same.
@aominebryant8905
@aominebryant8905 8 місяців тому
awesome video. And love the accent
@this-is-gamedev
@this-is-gamedev 8 місяців тому
Thank you! 😃
@dreamisover9813
@dreamisover9813 2 місяці тому
This was great, for an area that often isn't that widely covered! One thing I noticed, the CustomUIComponent has a private Awake method, the subclasses have their Awake removed now - doesn't that mean the subclasses don't have their Awake called? I know the event methods work differently from regular inheritance because Unity just looks for them on a per-script basis, so I don't know if having a protected (virtual) Awake method on the CustomUIComponent would make it so that for the subclasses the same Awake is called as well.
@this-is-gamedev
@this-is-gamedev 2 місяці тому
Subclasses inherits from CustomUIComponent, so the parent’s Awake will be called. Overriding Awake in the subclass will not call anymore Awake in the parent, except if you add base.Awake(); If you don’t like or don’t want to remember calling base.Awake(), you could also add an abstract void Init, that is defined the the parent and each subclass has to implement it and so Awake is guaranteed to be called and Init will be called at the right time as well.
@dreamisover9813
@dreamisover9813 2 місяці тому
​@@this-is-gamedev Thanks! Since asking the question, I made some tests too and can confirm it too now, learned something new: Inherited behaviour does not have an explicit Awake defined: Base behaviour has a private Awake: Awake on subclass called Base behaviour has a protected Awake: Awake on subclass called Base behaviour has a protected virtual Awake: Awake on subclass called I figured it if was called if the method was private, it would be called in all other cases too but just wanted to make sure.
@sourenhigh8729
@sourenhigh8729 8 місяців тому
are you using warcraft 3 background music? also cool tutorial
@this-is-gamedev
@this-is-gamedev 8 місяців тому
I don’t think so ?! All music is either from YT library or is in the public domain.
@sourenhigh8729
@sourenhigh8729 8 місяців тому
@@this-is-gamedev i see, XD it sounded really similar but i wasn't sure, thanks tho!
@dan.urquhart
@dan.urquhart 2 місяці тому
how would you compare the advantages of a system like this with just using the UI Toolkit that unity provides with template xml and css equivalents?
@this-is-gamedev
@this-is-gamedev 2 місяці тому
The big difficulty with UI Toolkit is that it is not feature complete compared to the current system, hopefully they will finalise it by the end of the year according to their roadmap. But you can apply the same ideas, have small reusable UI components comprised of a template, a css and some view and controller class to give that element some functionnalities.
@takeshikajino342
@takeshikajino342 6 місяців тому
You have plans to use UI Toolkit?
@this-is-gamedev
@this-is-gamedev 6 місяців тому
Not now, as the feature set is smaller than the standard UI system. But I might still do a tutorial one day :D
@AlesterReads
@AlesterReads 20 днів тому
So I tried this today. Unfortunately I ran into some problems. When I change the padding data on my ViewSO and hit save this works well. For all other fields in ViewSO (colors in the ThemeSO and spacing) the values are only applied if my code reloads or if I trigger 'Init()' manually. Anyone got an idea what I'm doing wrong here or has a suggestion how to fix it? One thing I'm doing differently than in the video is that I use private fields with [SerializeField] and properties to acces them, but I don't think that is the cause of the error as I changed it to use public fields and the behaviour did not change at all.
@AlesterReads
@AlesterReads 20 днів тому
One thing I also noticed: It seems that changes to the padding are only registered, when I actually trigger a save of the scene or when the code reloads, but not when I manually trigger 'Init()'. I'm kinda confused ^^"
@this-is-gamedev
@this-is-gamedev 20 днів тому
I think I mentioned once that the refresh is tricky. I didn’t yet find a great solution to make it properly refresh automatically without too much custom code that literally monitors your SO changes and go trigger some update by itself 🥲
@user-uh6wn5yh4p
@user-uh6wn5yh4p 4 місяці тому
Great Tutorial but skipped some walkthrough steps that took me around an hour to figure out. If there is a part two I would love if you could move a little slower and show a little more instead of just cutting between stuff assuming I know exactly what you did
@this-is-gamedev
@this-is-gamedev 4 місяці тому
Thanks for the feedback! Part 2 is out, yes.
@johnsartain4160
@johnsartain4160 4 місяці тому
Why can't these types of concepts just be built into the editor?
@this-is-gamedev
@this-is-gamedev 4 місяці тому
It gives more options to developers to develop the system as they want but on the downside, everything is basic and needs more work :(
@johnsartain4160
@johnsartain4160 4 місяці тому
@@this-is-gamedev maybe you could post a asset on the store for the tools you mentioned in the video? I don't want to spend the day working on making the UI look good when it should just be easy to work on out of the box just like every other tool
@RLLLx
@RLLLx 8 місяців тому
love the video
@euden_yt
@euden_yt 9 місяців тому
Moar
@placeholder6280
@placeholder6280 2 місяці тому
am i the only one who is missing that scriptable object ViewSO code? he didnt even show it. he just creates it via right click right away with no context or ANY information?
@placeholder6280
@placeholder6280 2 місяці тому
nevermind. i am being stupid. he showed it for about 2 seconds xD
@this-is-gamedev
@this-is-gamedev 2 місяці тому
A bit fast yes 🫣
@0tiii
@0tiii 6 місяців тому
so this video is 3 month old but does not use UI Toolkit with which you can basically build reusable components and do just that (^) in a way more declarative way using a web-derived way? Can someone explain to me why to do the approach from this video instead? I am really curious, not just hating.
@this-is-gamedev
@this-is-gamedev 5 місяців тому
UI Toolkit still does not cover everything that the standard UI does. No world-space support, no meshes, and animation driven through code is a pain as far as I know. With UIToolKit, you might end up with 2 UI systems depending on your game’s needs.
@Mystikael
@Mystikael 3 місяці тому
Here I thought I finally knew how to make UI and I don't know shit. Thank you
@this-is-gamedev
@this-is-gamedev 3 місяці тому
Glad it helps! UI is tough -.-
@gladiko2364
@gladiko2364 6 місяців тому
Ah yes~ Let's overoptimize first, and then never release the project.
@hansfritz6026
@hansfritz6026 7 місяців тому
after the changes of approx 06:28 im getting : NullReferenceException: Object reference not set to an instance of an object UI_Framework.View.Configure () (at Assets/UI Framework/Scripts/View.cs:44) UI_Framework.View.Init () (at Assets/UI Framework/Scripts/View.cs:31) UI_Framework.View.OnValidate () (at Assets/UI Framework/Scripts/View.cs:54) UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr, Boolean&) and i did save and even closed and reopened but still that exception also the colors of the 3 image game objects are not visible i have to set the alpha of all 3 to a very high number for them to show up but when i hit play the alpha is set to 1 again and i have to manually set it back to a higher number so that they become visible Edit: when i set the the alphas in the themeSO that was created then during runtime they image components become visible but the behavior is still different than in the video im using unity 2022.3.6 btw
@this-is-gamedev
@this-is-gamedev 7 місяців тому
Check if all the references are set in the inspector?
How to make UIs without frustration | Part 2 | Unity Tutorial
10:57
This is GameDev
Переглядів 3,7 тис.
How to Get a Developer Job - Even in This Economy [Full Course]
3:59:46
freeCodeCamp.org
Переглядів 1,8 млн
ОДИН ДОМА #shorts
00:34
Паша Осадчий
Переглядів 2,7 млн
BMW просто издевается над нами! Силы на исходе…
1:34:41
ИЛЬДАР АВТО-ПОДБОР
Переглядів 3,5 млн
Get started with UI Toolkit in Unity
12:29
Sasquatch B Studios
Переглядів 12 тис.
Unity UI Toolkit in 5 Minutes
5:47
MadCat Tutorials
Переглядів 109 тис.
Unity | How to make a simple AI Navigation System - 2023
8:55
DarkWing
Переглядів 11 тис.
Unity UI that WORKS  and doesn't Suck - Nova UI
10:11
One Wheel Studio
Переглядів 33 тис.
IF-ELSE like never before | Beginner to Pro
7:58
This is GameDev
Переглядів 863
How to Manage Your Menus [Unity Tutorial]
13:40
Comp-3 Interactive
Переглядів 20 тис.
Custom VisualElement for Unity UIToolkit ✨unity uitoolkit tutorial
22:38
Build a beautiful 3D open world in 5 minutes | Unity
5:57
spaderdabomb
Переглядів 291 тис.