Making UI That Looks Good In Unity

Learn ways to improve your understanding of how to design UI in Unity!
URP Examples: github.com/Uni...
Understanding Color: • Understanding Color
Designing A Loading Screen: • Designing a Loading Sc...
Dynamic Depth of Field: • Dynamic Depth of Field...
Strategy Game Camera Controller: • Building a Camera Cont...
--------------------------------------------------------------------------------
Want to support the channel?
Get the GameDevGuide mug and other merch! ☕ - www.gamedevguid...
💡 Get One-Month Free of Skillshare Premium - skl.sh/MKR826
Use these links to grab some cool assets from the asset store:
Get the Must Have Assets! - assetstore.uni...
Free Unity Assets! - assetstore.uni...
New on the Asset Store! - assetstore.uni...
Top Paid Asset Store Packages - assetstore.uni...
Asset Store Partners - assetstore.uni...
--------------------------------------------------------------------------------
Socials and Other Stuff:
• Subscribe - www.youtube.co...
• Join the Discord - / discord
• Twitter - / gamedevguideyt
• Facebook - / gamedevguideyt
• Instagram - / gamedevguideyt

[@RugbugRedfern]

It's super hard to find resources on UI design in Unity, thank you so much for this!

[@nemiwa5032]

Oh, hi man!

[@epicmoments2049]

Even harder on roblox. I’m making a simulator but the ui has to be top notch

[@liloskiller365]

@@epicmoments2049 Roblox isn't good for developing it also takes a lot of money from the creators and uses lua its really not worth it

[@Dorbellprod]

Rug Bug Red Fer N!!!!

[@rickloyd8208]

Every half a year I am returning to this video to refresh my understanding what those force expend and child control sizes toggles are dong... I did dozens of UI elements but I always used to forget. Thanks for this great video ever created!

[@strezzkev]

For so long I have struggled with understanding dynamically scaling UI. It seems finally someone has the answers I'm looking for. Can't wait for part 2!

[@rutchjohnson]

Love this. Yes, we want to see the next chapter in UI and how to solve camera blur in the new render pipline. Thanks for all your hardwork! Especially in the clean editing of these videos.

[@jodalsgaard5792]

Using Cinemachine and Post Processing, you can switch to a virtual camera with depth of field added, that's been a pretty simple workaround for me. This might not have been possible when the video was released, but I prefer this to camera stacking for sure (at least in URP.) You just assign a post processing profile to the Cinemachine virtual camera you're using for UI, and then set the priority for that camera in your code when activating your UI.

[@ChipboardDev]

I've been working with Unity for years as a programmer both personally and professionally. Your video, this, right here, is the shit. I'm learning so much just within a few minutes of this video and cannot wait to apply these practices and newfound knowledge to my projects. Thank you, sincerely, for helping me no longer create shitty, slapped together UI designs, but rather works of art intended to guide the user in the proper direction using appealing colors and proper layouts.

[@GameDevGuide]

So glad to be able to help!

[@ThatAcc]

At the Grid component question and answer I laughed so so hard man.... exaclty what I thought, don't know how many hours I wasted trying to make that garbage component work properly. Great video. :)

[@GameDevGuide]

I have a feeling you're gonna love the next video! 😂

[@binaryparrot3352]

I have used the component for inventory systems before. Never had a single problem. I seriously don't understand why you guys hate it.

[@trevorkorber]

@@binaryparrot3352 thats because a grid component is used for object that "should" be layed in a grid pattern. Like an Inventory. However for something where each object may have slightly different dimensions it gets too finicky. Grid component has its uses in some place.

[@hayydn]

"I'm obviously going to go with the British Palette here" > Immediately calls the library UI Colors instead of UI Colours

[@GameDevGuide]

Force of habit now, as most libraries and references are in American English. 😂

[@hayydn]

@@GameDevGuide I feel you, makes me sad everytime resharper is like "u spelt that wrong" like sorry excuse me?

[@johanhelsing]

@@GameDevGuide Except for MonoBehaviour, for some bizarre reason.

[@elektra81516]

@@GameDevGuide You mean "English (Simplified)"

[@Hello-qg4yk]

Louis Greenland you mean "Proper English" Jk. None is "better" than the other but I prefer American

[@LupoNoBrain]

Jesus what a lifesaver..! Ive been working in frontend UI dev & design for almost a decade and just spent 5 hours or so trying to make the grid layout work... Whoever handled the UI topic at unity must have never used any design software or frontend web tech before. Thanks a lot for your videos, frustration is now gone. :D

[@kaiserslacht]

"Like a lot of things in Unity, it can feel pretty half baked at times" STRAIGHT UP FAX

[@Standbackforscience]

Finally, a UI guide from someone who understands how to make a real UI. Every other UI guide I've found does the most absolute basic things like how to render score in a corner.

[@gamesplusjames]

This was really great! UI in unity is usually one of those things that is always unexpectedly hard but these tips really help! One extra tip I've been told as well is to make sure to disable all the layout components once you are happy with your UI as they are constantly working as long as they are active, even if you're not changing anything :)

[@LonelyAwesomeWolf]

Oh god, finally! I finally understand those blasted layout grouping options! So damn confusing! Thank you!

[@innomin8251]

If I remember right, the "Flexible Width" and "Flexible Height" are modeled on the CSS Flexbox. So if you have two components, one is Flexible Height 1, and the other is Flexible Height 2, the one with "2" will take up twice as much room as the element with "1".

[@thatanimeweirdo]

Am a media designer that does the interface design for internal tools of my company. Love this video as it highlights the bigger parts that will save you a lot of time reworking your UI.

[@Lothrean]

I love how the "terrible color pallet" example literally is pretty up-to-date and awesome just 2 years later :D

[@ethnicsovereignty2369]

I can't put how much this helped into words. I'll only say that I was trying to keep all my elements aligned properly by using anchors

[@hasnainfareed8555]

Thanks man,you are among few rare channels who are teaching in depth.

[@vordrax1014]

I'm not entirely sure why this was just randomly recommended to me today, but I took a look and found it to be incredibly helpful and informative. Subscribed and looking forward to your future content.

[@Gildur01]

You showed so many small but important things in this video, it's incredible. Like the custom Editor, custom icon, usage of reset method etc. which all elevate the component to the next level.

[@danthesandman]

Flexible on Layout elements works like a "fill." Because you set the header to 75 and the main body to 999, ignoring any padding, once you make your panel higher then 1074(75+999) the body will stop expanding to fill. If you set the header to Preferred Height of 75 and the body to Flexible Height of 1 that means the header will fill 75 and the body will fill the rest no matter how high. If you added 2 bodies and gave them both a Flexible Height of 1 each then they will total 2 but have an equal share so fill evenly. This means that if you had 3 Body objects with Layout Elements and 2 of them had a Flexible Height of 1 but the other had a value of 2 then that means the total is 4 but one object fills half the area. By using the Flexible part you only need to set the Horizontal/Vertical layout group to Control Child Size and not Child Force Expand as they are expanding themselves to fill but with the option to control each ones 'importants'. I hope my rambling helps clear up Flexible.

[@cvnvr]

Bucket really nice explanation. When he said he didn’t use them at all and then provided an arbitrary number to the preferred height I was slightly perplexed. I find the flexible height attribute to be pretty invaluable and use it constantly.

[@really-america]

All your videos are very high quality, informative, clear, organised, interesting and have sound quality and music background levels that are perfect.

[@bunggo9914]

man, you deserved more subs, this is one of the best unity tutorial channel for sure.

[@nguyenhoangdung3823]

one of the most underrated channel on youtube about unity gamedev. keep up the good work. :D

[@nyscersul42]

Explaining the under-the-hood behaviour of the ui elements was real helpful, thanks!

[@DougFromTheBayou]

This is a great video but I have no idea why the shader code isnt posted anywhere? Its a real pain copying it from the video. Anyway here it is for future viewers: Shader "Custom/UIBlur" { Properties { [PerRendererData] _MainTex ("Texture", 2D) = "white" {} _Size("Blur Radius", Range(0,8)) = 3 } SubShader { Tags { "RenderType"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType"="Plane" "CanUseSpriteAtlas"="True" } Cull Off Lighting Off ZWrite Off ZTest Always Blend SrcAlpha OneMinusSrcAlpha GrabPass{ Tags{"LightMode"="Always"} } Pass { // horizontal pass Tags{"LightMode"="Always"} CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma fragmentoption ARB_precision_hint_fastest #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; }; struct v2f { float4 uvgrab : TEXCOORD0; float4 vertex : POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); #if UNITY_UV_STARTS_AT_TOP float scale = -1.0; #else float scale = 1.0; #endif o.uvgrab.xy = (float2(o.vertex.x, o.vertex.y * scale) + o.vertex.w) * 0.5; o.uvgrab.zw = o.vertex.zw; return o; } sampler2D _GrabTexture; float4 _GrabTexture_TexelSize; float _Size; fixed4 frag (v2f i) : Color { half4 sum = half4(0,0,0,0); #define BLURPIXEL(weight,kernelx) tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x + _GrabTexture_TexelSize.x * kernelx * _Size, i.uvgrab.y, i.uvgrab.z, i.uvgrab.w))) * weight; sum += BLURPIXEL(0.05, -4.0); sum += BLURPIXEL(0.09, -3.0); sum += BLURPIXEL(0.12, -2.0); sum += BLURPIXEL(0.15, -1.0); sum += BLURPIXEL(0.18, 0.0); sum += BLURPIXEL(0.15, +1.0); sum += BLURPIXEL(0.12, +2.0); sum += BLURPIXEL(0.09, +3.0); sum += BLURPIXEL(0.05, +4.0); return sum; } ENDCG } GrabPass{ Tags{"LightMode"="Always"} } Pass { // vertical pass Tags{"LightMode"="Always"} CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma fragmentoption ARB_precision_hint_fastest #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; }; struct v2f { float4 uvgrab : TEXCOORD0; float4 vertex : POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); #if UNITY_UV_STARTS_AT_TOP float scale = -1.0; #else float scale = 1.0; #endif o.uvgrab.xy = (float2(o.vertex.x, o.vertex.y * scale) + o.vertex.w) * 0.5; o.uvgrab.zw = o.vertex.zw; return o; } sampler2D _GrabTexture; float4 _GrabTexture_TexelSize; float _Size; fixed4 frag (v2f i) : Color { half4 sum = half4(0,0,0,0); #define BLURPIXEL(weight,kernely) tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x, i.uvgrab.y + _GrabTexture_TexelSize.y * kernely * _Size, i.uvgrab.z, i.uvgrab.w))) * weight; sum += BLURPIXEL(0.05, -4.0); sum += BLURPIXEL(0.09, -3.0); sum += BLURPIXEL(0.12, -2.0); sum += BLURPIXEL(0.15, -1.0); sum += BLURPIXEL(0.18, 0.0); sum += BLURPIXEL(0.15, +1.0); sum += BLURPIXEL(0.12, +2.0); sum += BLURPIXEL(0.09, +3.0); sum += BLURPIXEL(0.05, +4.0); return sum; } ENDCG } } }

[@MrGsafe]

Thanks

[@ademirbasegiojunior3025]

thank you bro

[@toancanh682]

A thanks from 2024

[@studyzen8836]

I already have a current UI, but I’m here because it’s so relaxing to watch good UI design.

[@Xerisis]

I know this is old, but I found a way using a post processing volume that uses a Depth of Field blur and enable/disable when opening the menu. Works pretty good. Not seeing any performance hit either. This works great for both URP and HDRP :-D

[@letterslayer7814]

this is my kind of school... some might find programming and general game development boring as hell but i love it

[@koresaliva]

Same

[@andreishulgach559]

Most of my SlimUI designs on the Asset STore are following a Flat style because of the same reasons you mentioned. You nailed it on the head, and it's great to come across someone else who is super passionate about UI especially inside of Unity. Also, an underrated part of this video is your UI blur shader. It's incredibly helpful for so many developers out there and what you covered in a couple of minutes is better than most tutorials have done in much longer.

[@SH-tk4lx]

I've toured around this channel for a little bit and i must say ... your content is super useful and entertaining, i think i'm looking at a big future youtuber, keep up the incredible work

[@isthiswil]

Wow, I have only watched 6 minutes, and I am already impressed. Thank you for also making me realise that taking inspiration from other games is very important too. I also love the tile effects shown in Forza :D. (I subscribed too).

[@Copybook]

I don't remember how many developers have recommended the video "Understanding Colors" by Blender Guru. He is a great artist

[@TheSoundofTanay]

Here's a tip - in order to design menus, buttons, etc. As wireframes and not final designs, use software like Figma and XD. These are great tools to prototype and showcase what you're aiming for.

[@JohnVanderbeck]

I know this is old, but one note I would make is be careful about scaling with WIDTH as in the world of increasing ultrawide monitors, you can often find your UI controls going off screen vertically.

[@northstar7978]

just find your channel. super useful. although I am using unity for about 8+ years professionally still I can grab some useful tips from your videos. good work. appretiated!

[@keniak1-g960]

Dude you are so incredible!, Continue like this, you deserve more views and subscribers dude, hope you are doing great!

[@martinfaucheux6598]

Really the best video I found out there to explain how to deal with Unity UI!

[@MTandi]

Holy crap, that makes much more sense. I've been using a ton of nested content size fitters and even made a custom script for them to forbid sizes with floating point.

[@riten]

You could blur the game view with post-processing for simpler results

[@caligis]

Thanks for this great video, I learned a lot! I have been stuck on my project, putting it off for a while. This video got me going again and I made my whole UI more responsive and scaleable

[@gamedevhq]

Excellent Quality! Well done!

[@RealGoOhm]

Only just found your channel but so glad I did such high quality productions and full of great concise information explained very clearly. I've subbed and I urge others to too this guy will go far!

[@aqwcom]

This channel is underrated.

[@teamchemistryrex]

Finally, a high quality Unity tutorial channel!

[@Harry_Holliday]

I just wanted to say thanks for your videos. I ran into them today and was surprised to see how small the channel is with how high quality your videos are. I was also surprised how few videos you have it just seems like such an experienced account. Keep up the great content and I'm looking forward to more :)

[@moosesnWoop]

Thanks a lot for the advice. Starting on the UI now for several games, needed some guidance and this provided it. Definitely will check out some of the resources.

[@notnanomercy]

U video style is great! Keep going and u will become a big KZbinr

[@kken8766]

I just found your channel yesterday and immediately I'm your fan. Great Work!!

[@gilleswalther5964]

I like that the video goes deep in the subject. Good job!

[@mikecu2249]

i LOVED that Grid Component part!! :D

[@SendarkWoW]

Definitely looking forward for more; as other comments have pointed out, it's incredibly hard to find good UI tutorials for Unity.

[@gorkemvids4839]

12:27 one quick solution pops up to my mind is, you can reach out to post proccesing module and ramp up blur when you open ui. So you don't do any shader magic on ui

[@OneSlavBoi]

this is extremely satisfying to watch and work with

[@jumpod9853]

Thank you so much for explaining the Layout Element !

[@miguel_franca]

Ma man, how do you not have like 300k subs? Your videos are amazing. I learn so much from them! They are allll sooo useful. Keep it up

[@mohammadsadeghlavaie5560]

About the blur image, Just blur the image you want to use with a software. then have both the blurred and normal image in your scene, just do a fade in/out animation on both, where the normal image fades out and the blurred image fades in. That's not dynamic obviously, but that solves the issue at least. For the dynamic blurring, there are shaders made with shader graph.

[@DougieBoy]

I just found your channel. I was hoping for more videos. :) Your videos are very good. Here's hoping you create a ton of amazing tutorial videos. There are so many tutorial ideas that would make for great videos.

[@eulen-mensch]

Really nice video, thanks! Just a quick note though, the term "diegetic" is usually used to refer to in world UI elements such as actual ammo counts on weapons or the life bar on the character's back in dead space. If I had to create two categories of game UI visualisation, I would go with flat and painted.

[@maarten1012TTT]

Me: What about the grid layout? Me 3 seconds later: Oh

[@binaryparrot3352]

Same, but I always use it. Sometimes even instead of vertical and horizontal, so I honestly don't get it.

[@TehSr0c]

I've actually managed to get it to work a couple of times. Compared to the number of times it hasn't worked tho...

[@MalrickEQ2]

@@binaryparrot3352 Yah, if you don't use grid, you must be kid.

[@JonahDominguez]

ive never had any issue with the grid layout component personally, but its the only one ive ever used so i dont have anything to compare it to i guess.

[@newbquesttv]

Great work on this video Matt! Really useful info here, particularly the detailed explanation of Layout Groups and Elements, I've used them a bunch and always found them a bit confusing. Thanks!

[@Makiki_Maki]

Thanks for all this information, i was really lose about where to start

[@declanmark2809]

Wish I’d found this channel sooner. Great video :)

[@tasteofamerica4056]

Thanks. The placement and scaling for children under a layout component was driving me crazy, and often I ended up with panels and images being scaled their negative size... This cleared some of that up.

[@tomchapman128]

Just found your channel, the production quality and content is great! I would also love to see a blur effect for the new scriptable render pipelines!

[@gloriousptr]

Really good explanation, will help a lot in every project. Thanks a lot! Can't wait for the next part.

[@jhummelgaard9310]

I love your fun comments. Making Unity UI fun to learn must be some challenge!

[@krissloo143]

Love the way it's all explained can't believe I haven't subscibed yet

[@quentincomacle]

Many thanks for the video, actually watched it during my free time, but it could be useful for me later while working, so, thanks.

[@diegomendes1998]

The Grid Layout Group is so good!

[@khaliljelliti6751]

your content is amazing simple and educational. I'm learning a lot from your videos please don't stop and thanks 👋🏼👋🏼👋🏼🤛🏼

[@MohammadFaizanKhanJ]

Today I discovered your channel and it's video no 2 I am watching. Thanks for your wonderful ❤️ work.

[@raptorswire7212]

finally a GREAT explanation how layouts work. Before I couldn't understand sh*t :D

[@dominikspieler5308]

2:55 - I died Just found you via youtube recommendations and thank you so much for your videos! I'm developing VR Escape rooms and especially UI Design is a pain in the ass. Thanks for this!

[@darkerbit]

"While I will in no way claim to be an user interface artist" How about this? You are an excellent user interface artist!

[@hasnainfareed8555]

Big Artists are mostly 'humble learners'

[@KrazyKain]

This wasa incredibly useful. UI has always been an issue for me, and I had no idea unity even had those layout features. They are surprisingly similar (in theory if not practice?) to HTML and Bootstrap.

[@anumey1]

When I clicked on this video, I hoped you would shit on the Grid Layout Component. I was not disappointed. Instant subscribe.

[@Dxpress_]

Worth mentioning that Unity is working on changing their UI system to create a more CSS-like workflow.

[@lukrin3482]

You should do one on inventory UI design since that can be very challenging when factoring in the functionality.

[@MarcoMasi-masiorama]

Nice job, thanks! Looking forward to the next video.

[@kronzyproducer]

For Blur Backgrounds you can also create a blurred transparent png overlay and place it in the canvas as an image behind everything else and set it to fill width and height so its full screen. Create a script with an array of all your panels/windows. Have the script check that if any of the panels/windows are open with gameObject.activeSelf and turn the background blur on. You can then turn the blur off again when no windows/panels are active/enabled.

[@xXTheivesGuildXx]

Pretty sure you could make use of Postprocessing volume on the camera and simply add a depth of field effect to blur the background if you’re using HDRP.

[@artemv3160]

Extremely useful and concise tutorial and the channel as a whole! Thank you for all your work! I'll become a better Unity3d developer with your help.

[@nitinsoni1894]

So much in one video very great work sir. Thank you for this helpful video.

[@WebMonkey741]

Wow! I wish I had started here when I was beginning on my Unity UI work! 😀

[@Oxmond]

Great tutorial! The quality of the UI design is absolutely important - even in really cool games, haha 👍🤓

[@thebrianman]

Holy crap this is a gem! Very good video!

[@esededr]

Great video! I will not tolerate the hatred towards the grid layout group though, it can be a very useful tool when you get used to it.

[@abdullahalkhatib1416]

SRPs now support opaque grab pass which does the same thing for blurring. though it is still a little tricky you can though also adjust mipmaps of textures such as render texture to help reduce the blur samples while maintaining a good looking blur

[@Jesus-fi9kp]

Wonderful video! Congratulations! Pure knowledge ...

[@francoisneko]

Love this tutorial ! Really in depth and with a lot of good practice.... Thanks a lot 😊

[@techmeck8980]

Nice video, it really helped me a lot. Keep up the good work :)

[@ufukseyithan]

Would be good if you shared the blur shader code with us :|

[@diegohiroshiysusvideos2909]

:( buuh yeah!, buddyyyyyyyyy! comparte el shader jueputa :'v

[@williamtetlie4274]

I just found this channel, can’t believe I haven’t found it before! It’s super great content! Can you make a video on an FPS building system in Unity like that in ARK or Rust? Would love that :)

[@FelixJefferies]

I'm making Disco Elysuim, so its the best tutorial

[@thespezx6587]

I'm a bit late and there's probably a better way to achieve the blur effect now, but here's my solution. If you're using URP or HDRP, you can add a Volume and its camera focus component by play, adjust the focus you can and achieve something similar. You can easily adjust it while the game is running. Also you can make a couple of presets and switch between them. Maybe this will help someone ;)

[@HAWXLEADER]

LAYOUT ELEMENT!!!! That's what I was searching for in the last year! I usually just fought with the expand and child scale thingy to get what I wanted and always got annoyed when it decided to give them the size of 0. It baffles me why the scrollview doesn't have a content fitter and a default layout build in...

[@DylanBurke]

Not sure if this is the exact solution (will try some experiments later), but I often see the "Scene Color Node" in shadergraph used as an alternative to the grab-pass functionality. Creating a shader using this node may enable a similar effect to what you describe here in SRP. Love your channel! Thanks for all your hard work!

[@sylvaind]

Good video. Looking forward to a re-do when the new Unity UI system is out of preview

[@GameDevGuide]

I'm not a fan of the new UI System. Because it comes with the problems I talk about at the start of the video. Not really a fan of webdev style UI Design. We'll see how it develops...

[@frey6549]

These tips were really helpful. Thank you for making this :)

[@TheHiddenMarty]

7:24 "the child force expand toggle will stretch any children to fill the spaces of it's parent" that sounds perfectly fine :)