How To Make UIs without frustration | Unity Beginner Tutorial
HTML-код
- Опубликовано: 18 июн 2024
- 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
![Game Manager - Controlling the flow of your game [Unity Tutorial]](/img/1.gif)
I really appreciate the simplicity of this UI framework approach!
Thanks a lot!
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!
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)
This would make a great series. Learned a lot
Right on time, im planning on making ui based games as my first games to practice, so this is helpful.
Excellent! Glad it helps :D
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.
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)
This is cool. Never thought about making them all prefab full stretch.
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!
Thanks! I am glad you liked it. That’s fair for the music. I’ll see to add some more variations next time :D
That was great! Thanks for the insight.
Can't wait for the Logic video to pop up!
Please make that part 2 you mentioned. This UI system is amazing!
Alright :D
where the video at broski @@this-is-gamedev 👀
It’s in progress. In between Unity drama going on :D
This video helps me a lot ,Thanks man
Awesome!
today I learned, thanks : )
Yes, we need the next video please. 🙌
Working on it 🪄
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
};
}
Thanks! Oh true, I forgot about that ContextMenu trick! Very nice indeed.
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 :(
Finally some advanced coding tutorial. I will definitely need this to learn. 🍷
Have fun :D
Très bon tuto, merci !
Merci! Je suis content que ça plaise!
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.
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
Holy ****. This video is gold.
Thanks! Appreciate it! 🤯
Super video merci beaucoup !
Merci!
Impressive👍
The most important take-away from the video, if you take nothing else, is at 3:25 :)
this is awesome
Thanks!
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.
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.
@@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.
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?
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.
awesome video. And love the accent
Thank you! 😃
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?
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.
Damn, i found diamonds
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?
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
@@this-is-gamedev thank you! Will do! Can’t wait for the next episode, keep up the awesome work! 😊
Thanks! Part 2 is already out :D
is the code for this available on github?
Now, I have no excuse for not learning how to make a UI.
Go go go
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.
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 ^^"
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 🥲
love the video
are you using warcraft 3 background music? also cool tutorial
I don’t think so ?! All music is either from YT library or is in the public domain.
@@this-is-gamedev i see, XD it sounded really similar but i wasn't sure, thanks tho!
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
Thanks for the feedback! Part 2 is out, yes.
You have plans to use UI Toolkit?
Not now, as the feature set is smaller than the standard UI system. But I might still do a tutorial one day :D
Here I thought I finally knew how to make UI and I don't know shit. Thank you
Glad it helps! UI is tough -.-
Moar
Why can't these types of concepts just be built into the editor?
It gives more options to developers to develop the system as they want but on the downside, everything is basic and needs more work :(
@@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
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?
nevermind. i am being stupid. he showed it for about 2 seconds xD
A bit fast yes 🫣
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.
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.
Ah yes~ Let's overoptimize first, and then never release the project.
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
Check if all the references are set in the inspector?