How To Make UIs without frustration | Unity Beginner Tutorial

if you feel frustrated with unity's UI system then this video is for you we are going to build a system on top of unity's UI system and use that system to build more complex uis you will not only learn a few things about unity's UI system but you'll also learn how to build a stronger foundation and get less frustrated hopefully on Twitter or X I should say there was a clean code discussion that exploded some time ago and there were arguments like hey is a leaked source code of the original Far Cry shows that bad code can still make a million dollar franchise and that was entertaining for sure now what does clean code have to do with building user interfaces in unity well 99 of UI related tutorials here on YouTube are teaching you game Jam level code you know it compiles it looks kind of nice but somehow it's still frustrating to maintain and to extend and in other words it's fragile now how do we bump it up how do we go to the next level and actually enjoy building UI hey what are you doing you cannot just enjoy building uis that's not possible who when Joe is building your eyes it is possible let me show you maybe I'll believe if I see it by the way still until the end of the video because I have some great resources to help you build killer uis so I think that unity's UI system like many other systems is slightly just slightly misunderstood what does every tutorial do you put the UI together create a controller for the UI the controller handles the data and updates a UI and that's it this is just enough to learn how the UI system itself works I don't think this is the way to build your dream game because well everyone seems to hate that aspect of game development somehow you always end up with a messy hierarchy that you never want to touch ever again instead I believe that you should be building your own UI framework this means that you create a layer on top of unity's UI system and then use that layer in your actual game to build more complex device let me show you how it looks like and then we are going to implement one version of that Unity gives us components like image button text as well as components for controlling the layout like vertical layout group layout element content sized fitter and a bunch more all elements of the UI have a rack transform and it's up to us to build a user interface with all those things now just like a typical web framework we will prepare new elements that we can quickly assemble to build complex interfaces here's a list of what we could have a view one style could be a header a body and a footer a few pre-configured containers that allows us to easily order things horizontally or vertically a scrollable container for example buttons an element for different text like titles headers and bodies and maybe other special elements like a row cards or whatever every new element is a prefab they each have a custom script and are all configured using scriptable objects what's also special and pretty cool is that each element will be made in isolation you will see what I mean at the end you will have a small collections of elements that you can then reuse to build your actual use interface this is the ID let's Implement one basic version and there is an emphasis on one basic version because there are many ways to do that all right and no matter what technique you use building uis takes a lot of time so take it as a disclaimer here we are in one of the latest Unity 2022 LTS versions let's start by creating a new canvas and I like to change the UI scale mode to scale with screen size and then change the reference size to full HD the first element that we are making is a simple view open the anchor presets and with shift and alt we make the stretch in all directions let's create a new script that we call view as well and already put it on our view game object this view will have some containers organized vertically so let's add a vertical layout group we will control the padding in a different way for now we will take the control child size next we add our containers for that I will use an image component so we see what's happening right click UI then image we want a container top container Center container bottom I'll change the color of each so we see their sizes now we want the center container to take more space than the other two we can achieve that by adding a layout element and enable flexible height there we can increase the value to something like 5 and now this element will take 5 times more space than the other ones let's just create a second script that we call view so for scriptable object and we are ready to write some code let's build a small skeleton we will keep a reference to the scriptable object that we will write later that object will hold the data how this component should configure itself then let's grab a reference to each container we take the game object to keep this pretty General we don't know yet all the things we want to do with it then we know they each have an image component so we will also store a reference to those as well as a reference to the layout group then we will Define three methods setup configure and init which will just call the two other methods in awake we will call init and this will be kind of the structure for every script that we write in setup we just grab all references that we need for the configure method we will do that after view so first let's make our scriptable object view so we start small alright for the moment we will install the padding and the spacing if you check unity's documentation you will see that the padding is of type racked offset which is really useful that's it for that now we can write our configure method to read the values from the scriptable object and configure the layout group now a small trick when you change a value and want the UI to update you have to mark the component as dirty there are few ways to do it and as a first step we can Implement an on validate method that will be called in the editor only this is triggered when something changes or when you hit save and as a bonus if you have Odin inspector you could make the init As A Button as well so you can manually trigger it it is really cool back in unity let's drag and drop the references then in the data folder right click and let's create a new view so asset we can link that one up as well now instead of editing the layout group directly we can set the value in the scriptable object the values will automatically sync because of the own validate method now sometimes the UI will not update you need to make sure it refreshes or that it knows that it's dirty as I said there are a few ways to to do that and fix this scriptable objects are really useful to share data for uis we can define a theme object that will store some colors that way we can have consistent colors across all our elements let's create a new theme so and Define some colors a primary color for the background and one for the text we do the same for a secondary one and a testy one and why not add a default color for disabled elements this theme so will be added to all other scriptable objects this means we update the viewerso to have a theme finally in the configure method of the view we we can read the color values to colors different containers let's save and in unity we can create a new theme asset Define some colors make sure the alpha is at 1 because by default it's zero now we can add the team to the view asset alright if we change some colors and force some updates it will recall itself awesome the last step is to drag and drop the view into our prefab folder this view is now done for now it's basic but it's a good start next up let's create some text we can hide the view with this small eye icon and let's create a new empty game object that is going to be a text title it will stretch in all Direction you will see why later then we add a text component as a child it will also stretch fully the text will be bold and the alignment set as middle those values could also be set with a scriptable object it will make by the way for most elements we create an empty Parent Game object because this will allow us to easily add padding for example now let's create two scripts text and text as text goes on the game object and let's now write some code starting with a scriptable object we will take a reference to the theme because we will color the text based on that then for this demo let's configure the font and the size that's all for now the text Will Follow the same structure as a view class we will have an init method that we call on awake and on validate and if you think that we could avoid duplicating code by creating a common class you are absolutely right and we will do that afterwards for now we keep a text as a reference and a private reference to the text component which uses text mesh Pro u g UI regrabs a reference in the setup method and we configure by setting the font and the size for the color I keep it commented out because I would like to show you another ID I'll create a new script and make this a pure c-sharp enum it will have three possible values primary secondary or tertiary what I want to do is allow a style configuration on the text so you can say this text is primary this one is secondary Etc the style is used to decide what color to use we pass this style to the theme and the theme gives us back the right color final step is to update the theme so script with the two new methods want to get the background color and want to get a text color based on this type back to Unity we create a text so asset I'll call the first one title set the size to 75 choose a font and set the theme now select the text game object and drag and drop the text asset in place with a drop down we can choose a style easily alright make this a prefab and that's ready as well let me delete it from the scene and show the view again look by creating our UI elements in isolation we can assemble them and they will behave correctly remember that the title was stretching in all Direction and if I drag and drop it into the top container of my view look at this magic it stretches in all directions just like we set it up this is great this means that creating UI elements in isolation is a viable method I can add to another container it will respect its configuration this is pretty cool but we are not done I still have a few things to show you first Improvement we will create a new class that all our future components will derive from let's call it custom UI component it will have the code that was duplicated in our view and text classes this can be an abstract class so we can't just use these directly we write our awake method init and on validate setup and configure needs to be handled by the implementation of that class so we can Define them as abstract as well now we should do some small refactoring The View class will extend our custom UI component and this will give us a few errors those are the changes we have to make remove the awake and the init and the on validate make setup and configure as public override and that's all we should do the same changes on the text class now it's super clean so far so good make sure you like this video And subscribe if you want more original Game Dev content I'll repeat it this is one version of building a layer on top of unity's UI system alright let's move on let's do a button and we will finish off with a few quick components that do not even require a code again we build it in isolation create an empty game object this time we will keep it as a size that is fixed like 220 times 70. we add a real Button as a child and I like to change the Sprite to perfect square so that all Corners are sharp for the width and height we can make it slightly smaller than its parent so 200 times 50 this creates some small padding around and that's pretty much it we keep it very simple for this tutorial let's create a button script and at that point I realized that button is not a great name because it conflicts with a standard UI button so I renamed it to custom button and maybe it would be a good idea to prefix every class with something you need like TIG view TIG button and so on anyway as always the script goes on the parent and let's write some code we extend custom UI component and starting implementing the methods in setup we grab a reference to the button and a reference to the text as public fields we can have the theme the style and as an example we can add a UI event for the on click event if you saw my other video about building the ultimate event system you know we can use that everywhere in here I do not use it on purpose here because now we just focus on exploring how to create your own layer on top of unity's UI system and how that could look like but feel free to extend it with the other event system in configure we can change the color of the button for that we have to take a copy of the color block we can't just modify directly we just set the background and the text color and finally we Define a public on click method that invokes our own event on the top alright we set the theme we can set the style and last step is to connect the buttons on click event to our script that way we avoid having to fiddle with the children in our components good this is a primary button make it a prefab and done we can create variants right click create prefab variant call it button tertiary for example change the style and that button is also ready to use alright as a final part of this video we are going to build a few reusable components to help you build a bit more complex uis since we have scriptable objects it's very easy to create new configurations we can define a text asset for titles that we already have let's do one for headers that one will have a smaller font and one for bodies that will be even smaller once done we can create prefab variants of the text object and assign the corresponding asset very easy then let's create a new container to help us organize our UI create a new game object make it stretch and let's say that this will be a component to have columns so we add a horizontal layout group and either we go ahead and create a script to manage it or for this example we just configure it directly rename it as container column and save it as prefab to use it it's simple drag and drop it into another container and then put your object inside here I will put two buttons inside and actually I want it aligned differently so I will change the prefab and it will update our UI alright next one is fun let's make a container for scrollable Content it stretches in all Direction and as a child we will add a scroll review again make it stretch the content is where we put our stuff in and if the content extends the size of the view we will be able to scroll this means that the content should have the correct size which is not straightforward in unity but there is a trick for visualizing how it will work I will add an image and make a bunch of duplicates on the content I will add a vertical layout group so that we have rows so if I play it will not scroll correctly the reason is that the content is not taking the size of what it actually contains we could resize it by hand but what if you fill the content at runtime this will not work so here's the solution on content add a Content size fitter and set the vertical fit to Preferred size now it will automatically adjust we can also deactivate the horizontal scrolling and now it's crossed correctly save it as a prefab and we can test it in our view if you drag and drop it into the center container it will fill the space and behave as expected the main advantage of this approach is also the main disadvantage you need to plan things in advance and the further you go the less flexible you become once you start nesting prefabs and prefab variants it will become increasingly difficult to change how basic elements work and this is not easy to explain and to show because you will simply reach a point where you'll be like oh I have to redo this stuff but overall it's a good approach to quickly build new views and most importantly keep things consistent across your entire application now we just covered the most basic aspect of the first layer that's where we create our own Lego pieces the next layer is to implement the logic that will actually control all the data that will be displayed by the user interface so this video is to kind of take the temperature of the room and see if you like it or not and if you do let me know because then I will prepare the next part of this system for another video by the way on my Discord server there is an inspiration section with links to certain resources that can really help you build killer uis feel free to pass by discuss about gamedev and share what you are building the link is below as always thank you very much for watching I'll see you next time and now go work on your game thank you

Channel: This is GameDev

Views: 25,410

Keywords: make my dream game, how to make a game, made with unity, game devlog, gamedev vlog gamedev, indiegamedev, game dev, indie gamedev, indie game, unity 3d, unity3d, game development, make a game, tutorial, guide, game engine, unity hub, blender 2.8, blender 3.0, blender 3, madewithunity, iOS, Android, mobile game, smartphone game brackeys, thomas brush, jason weimann, jonas tyroller, dani, danidev, blackthornprod gamedev, unity, install, how to, install unity

Id: oOQvhIg0ntg

Length: 16min 57sec (1017 seconds)

Published: Mon Jul 31 2023