Making UI That Looks Good In Unity

I spend a lot of time thinking about and working with UI in my career it's one of my favorite parts of game design because it's often one of the most complicated things to get right in a game especially in the simulation strategy genre or a lot of the game systems and mechanics end up I really like the way that unity has designed the majority of their UI tools if you've ever had to code your own UI solution before I think you'll agree that there's a real benefit to being able to visually see how your user interface looks without needing to run it in a build every time it's easy to make adjustments and move things around and for the most part what you see is what you get however like a lot of things in unity it can feel pretty half-baked at times there are a lot of common features in their UI system that are either missing completely I mislabeled and confusing or just flat-out don't work very well at all if you've seen the tab system or UI tweening video here on the channel you'll know exactly what I'm talking about so as well as addressing some of that today there's also a couple of pointers I feel that I can give when thinking about designing the UI system for your game hi there I'm Matt and welcome to game dev guide in this video we're going to take a look at some of the best practices I like to abide by when designing a UI in unity we're going to look at how we can make sure that our UI is visually pleasing by defining a strict set of colors to use well then explore unities UI layout system and how some of the components work together and finally we'll explore how we can build our own blur panel component to use within our UI when we think about what's good or bad in terms of a user interface I think we're often referring to color style and consistency a lot of people think that it's really difficult to design a good looking UI and while I will in no way claim to be a user interface artist I think there are some fundamental concepts you can use to take your UI from looking terrible to good with just a small amount of forethought one of the best things you can do is look at where to draw inspiration from regarding other UI designs take a look at some of the interfaces you like from the games you play and figure out what works and why you like it and maybe look at what doesn't there's really two main trends of UI style we can look at the flat UI design which we'll see in games like The Sims 4 planet zoo or hitman then there's the more diegetic approach placing the UI design within the style of the narrative or universe of the game I'm usually attracted towards a more flat color scheme rather than anything super stylized mostly because I think there's a lot of tried-and-tested design rules that have proven to look good in this style so it's a lot easier to make things look good without a dedicated UI artist I find that it's very easy to go for a stylized look and end up alienating your user through obfuscation or misjudged design ideas so for the sake of this video and because I think many of us are without the luxury of a bespoke UI artist I'm going to be focusing on working with a more traditional flat UI design style before I get started designing a UI for my game I like to think about the specific color palette I'm going to use regardless of the style you go for you need to understand some basic color theory if you want it to look good do not just randomly select colors for different elements and mishmash them together hoping for the best this is one of the easiest ways for you to design an absolutely terrible user interface there are already tons of great resources out there on understanding color theory if you're looking to learn more about the topic and why it matters across more than just your UI I highly suggest watching the understanding color video from Andrew price over at blender guru he covers a lot of the concepts of color theory and how it can make or break the difference between good and bad looking arts by creating color palettes and restricting the amount of colors used in your user interface you can easily generate a sense of consistency and conformity within your game in general a strict color palette not only gives users a nicer time when looking at all that information but it can also help you guide your players more easily through specific points of interest within your interface itself fortunately there are plenty of tools online you can use to find and develop a color scheme for your user interface the color palette picker from material IO is great if you're looking for various options and shades palette on is also great and gives you lots of options if you're looking to explore different groups of colors but my personal favorite especially when it comes to choosing UI colors is flat UI colors calm it's a little unlike the other color palette tools as it doesn't just give you a single color palette that works instead it offers a very limited selection of around 20 colors that work well together in different combinations so it gives you a little bit of room for variation within different parts of your user interface I'm obviously going to go with the British palette here we can save these colors for quick access in unity let's grab any component with a color property and use the drop-down to create a new library we can choose to save it in our preferences so it's usable across projects but let's make sure it's saved in this project sorry goddess of where it's open we have access to these colors and let's simply copy and paste the colors from the tool and store them in our color library if I quickly mock something up here even with very little effort or care you can see how by sticking to only a few predefined colors it's easy to make something look reasonably good so with our style decided and color palette ready it's time to start putting some UI together and building some tools I really like the tile base flow of the menu in a game like hitman or thoughts of horizon so it could be really fun to try and replicate something like that for this demo and see if we can put our own little spin on it I'm styling with a backdrop of this low poly City screen I've built a little random movement script here that causes the camera to randomly drift throughout the scene I always think a little bit of motion on a menu screen is nice so this should do the trick without being too distracting the first thing I like to do is block out and set up the canvas space so let's start by creating the canvas for our UI then let's add an image component and tint it black with a slight alpha let's have it stretch to fill the canvas using the anchor preset tool in the rect transform if we hold shift and alt we can set the anchors and pivot simultaneously and let's name this panel we're going to want to divide up our screen into two sections for our menu we need a top bar for our tabs and then a grid area underneath it for each of the options for the tabs let's create an empty child to our panel here this is going to be the frame and hold our menu so let's just scale it up to a nice size when we're designing you I will often be using combinations of layout group components these are components that were searched through the children of a game object and try to make them fit within its rect transform as best as possible the four main components you'll find yourself using frequently on the horizontal layout group the vertical layout group the layout elements and the content size fitter if you've ever tried to use the grid component dear viewer you wouldn't be asking me that question the four main components are the secret to building UI layouts in unity now they're often incredibly confusing to understand when you start using them but once you get familiar with them you'll find it much faster and easier to put menus together the best way to think about these without groups are as nested elements of rules on how a parent and its children should be arranged we want this menu to have a header element and a body underneath it so we want to add a vertical layout group to our object here then let's add to image objects as children as you can see if we edit our spacing here we've now got two images stretched to fit two rows the top row is our first element and the bottom row is a second let's take a look at what our layout group is doing there's two sets of boxes checked here control child size and child force expand these labels are really confusing and actually not that helpful so let's take a look at them in a bit more detail to see if we can better understand how they work let's disable the child control size check boxes for now we'll come back to those in a bit the child force expand toggle will stretch any children to fill the spaces of its parent bounding box so these two images are distributed evenly to fill the space if we select the elements and scale them down notice how they remain spaced apart if we then duplicate them notice how the element will try to keep them contained within itself essentially this button adds extra spacing between the children to best fill a specific direction if we disable this toggle notice how our elements will simply stack rather than trying to distribute themselves evenly we should use the child force expand toggle whenever we want the children to fill and space themselves inside of its parent okay so with that understood let's take a look at how the controlled child size toggle works essentially this toggle says use a layout element to control my size if we enable the height control of our frame here notice how the height stretches to evenly fill the space and if we duplicate the image again the space and sizing of the elements are distributed to fill the frame if we disable the child force expand toggle notices how our image is now disappear if we look the height on their rect transforms is now zero so when the child force expand and the control child size toggles are enabled the vertical layout group will control the size of its children when the expand toggle is disabled however the layout group looks for a layout element on the to get its data size from if it can't find one it'll cause the height to be zero this is where the layout element components come in a layout element component tells unity how a specific game object should be displayed within a layout group and allows for specific areas of our layouts to have more priority than others if we add a layout element to our image and enable the min height we can now see our images again if we then set the preferred height on our bottom element notice how it will be the only one to fill the extra space or stop when it reaches the boundary of its parent when inside a layout group the layout element will assign the min height to both children it will then iterate through the children again and try to get the child as close as it can to its preferred height with the remaining space the flexible size setting is the relative amount of additional available space the layout element should fill relative to its siblings I've not really ever used this effectively but there you go I usually find a combination of min and preferred size settings suit most of my layout needs with all that in mind you should now have a better understanding of the relationship between the layout components and how we can start building out our menu we want to stretch our layout out to fill its container so we'll enable both sides and expand controls on our layout group the first element will be our header so let's name it header and give it a min size of about 75 then let's tell our other box to fill the remaining space of our layout group by setting its preferred height to as high as possible our group will then lay out the min space of our header and assign the rest of the available space to our body area notice too if we change the size of our frame here the layout adapts best to fit the new size by pairing combinations of layout groups and our elements like this you should be able to create complex menus that look good and consistent across different sizes and resolutions speaking of which if we edit our game view to display a different resolution notice how our panel size doesn't resize this is because we're currently set to keep the canvas at a constant pixel size I usually prefer to target a specific resolution whenever I'm designing so let's make sure that the canvas scalar is set to scale with screen size now whenever we change or resize the panel our canvas will adjust accordingly we can use the width height slider to better control how the scaler prioritize the canvas size but I usually keep it set to prioritize the screen width so we're nearly ready to start laying out our menu elements but there's one last thing I really want to do first this background is a little distracting and just darkening it behind our UI doesn't look too great either one of my favorite features of modern UI is the ability to blur out the background each time a panel pops up in Unreal Engine this is built into that UI system unfortunately though in unity there's no support for out-of-the-box so we're going to need to build a similar component that does this for us you may or may not know already but we can actually assign materials to our image component in unity this means that we can use some shader magic to achieve the effect ourselves by writing a grant pass shader it is worth quickly pointing out this current solution will only work using the built-in renderer pipeline this technique we're going to use requires a cool in a shader to grab a texture from the camera as the shader is being rendered this result means that every individual instance of the shader will also cause a call to the camera the new render pipelines in unity don't support that anymore for performance reasons which is fair enough but it makes it a lot more complicated now to do something like this I've tried finding a workaround and reaching out to unity about this but as it stands there's no easy way to stack and blur UI in the new render pipelines it's been quite frustrating for me because this is a UI feature I use a lot and so i've actively been avoiding the new pipelines until this is figured out if it ever changes and a similar grab pass type solution gets added I will be sure to update you literally as I record this unity have released a new update to the universal render pipeline to support a feature called camera stacking unfortunately it still looks like it's going to make this technique a bit more complicated to pull off as you might need a new camera for each UI element you want to blur which doesn't really sound ideal but that might be a good enough workaround for you so I've posted a link in the description below to an example from unity that might help you with that I'll export myself and may make a video in the future if I can figure out a clean way to achieve the same effect in the new render pipelines anyway with that cleared up let's make our grab pass blur shader the traditional way let's create a new shader in our project and open it up we're going to use a basic Gaussian blur for our shader which is achieved by essentially sampling the screen from the center and moving the pixels in a given direction from an axis so we need to perform three processes on the shader to get our blur to work we're going to grab the screen texture and blur it across one axis then grab it again and blur it across the other and we'll mix it with our texture and color on our component to get the final result at the top of our shader we'll set our main properties the only property we really need to define for this is a blur radius amount I usually keep the range between 0 & 4 because anything greater than that looks a bit too aggressive and causes visible artifacts then we'll do our first pass this will be our initial grant pass due to some potential platform dependencies that grab pass texture may render upside-down so we use this simple define here on our vertex shader to flip it the right way up in our Frank shader we'll define a method could blur pixel will perform our operation of moving pixels around our first pass will be a horizontal blur so we'll move the pixels along the x-axis relative to our size and by the deviation defined in our method then we'll basically repeat this code and do the exact same thing in a second part of the image just offsetting along the y axis instead finally we'll add a third pass that grabs the texture and color information from our image component let's pop this onto a material and drop it into our image to see how it works in a bit more detail if we open up the frame debugger we can get a step-by-step look at how this works you can see that the shader grabs a snapshot of the screen blows it one way then grabs it again and blows the result the other direction before applying the color on the component also if I head into our image component and select a source sprite you can see that we can even apply other images as a background here and if we adjust the transparency a bit we can still maintain the camera blur underneath so this shader gives us a lot of flexibility when it comes to UI I know too many of us shaders are sometimes a bit of black magic and can be a little difficult to get your head around so if you're in the game dev guide discord I'll be sharing the shader for you over there just follow the link in the description below the great thing about the ground pile shader and why the render pipeline changes bother me so much is that if we were to add an additional UI element such as a confirmation dialog or a prompt of some sort a blur shader will blur other canvas elements behind it we get stacked blurring and it's a really nice feature in modern UI knowing that we're going to want to use this elsewhere on our UI it's worth defining some default behaviour for it and making our own component so let's create a new script code blur panel in here will extend from the image component let's also make sure that there's a canvas group on a game object so we can fade it in and out then we'll add a property to define if we want the script to animate will also add a float for time and a float for delay then in our on enable method because the image component runs in the editor we'll have to check if the application is playing and set the float size on the material so we'll just tween the value from 0 to 1 and pass in our settings on the controller here I'm using lean tween which is one of my personal favourite tweening libraries but you should be able to do this yourself or write a co-routine if you wish well then just need to define our custom blur method - this will fade the canvas and increase the blur on our shader at the same time now if we look in the inspector in unity we have a slight problem none of the properties from our custom component here are showing up this is because we've extended from the image component and the image component in unity has a custom editor so we need to write our own custom editor to get our properties to show we'll make a new folder called editor and create a new script called blur panel editor and define it as a custom editor for our blur panel script we want the same functionality as our image script but with access to some additional options for our blur functionality so rather than write out a whole custom editor we'll just extend from the image editor class we'll draw out the default GUI and then add the property fields of our blur panel and make sure the changes get saved now we can see our options in the inspector gray the last few things to do are just to set the script up so that it has some default properties right now our component doesn't use our blur material when we first add it and it starts off fully white we can select the script in the editor and define the UI blur as the default material on this component while we're here let's also add a nice icon for it then in the script itself let's add a reset method and set the color to a slightly transparent black let's also add the script to the UI section of our component menu and now whenever we add the component to a new game object we get a nice default black panel I think we know a really good point to finally start designing the UI layout for our menu however this video is already rather lengthy though so I think we'll have to save that one until next time hopefully you've already got a better understanding of some of the ways you can approach designing your UI as well as some of the concepts behind how unity standard UI system works if you've enjoyed this video be sure to hit the like button and let me know your thoughts down below if you want to see the next part where I approach actually laying out the menu and using some of the color combinations from our palette here as well as me explaining why the grid system is terrible and providing a much better alternative be sure to hit the subscribe button so you'll know when that's up and if you're new to the channel and want to see some more videos like this consider checking out some of the others that are on screen now as always thank you very much for watching and I'll see you again next time you

Channel: Game Dev Guide

Views: 358,652

Keywords: unity, learn, games, gamedev, how to, making games in unity, tutorial, unity tutorial, learning unity, unity3d tutorial, programming, making games

Id: HwdweCX5aMI

Length: 18min 6sec (1086 seconds)

Published: Mon Feb 17 2020