Making UI That Looks Good In Unity

[@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!!!!

[@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

[@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!

[@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.

[@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!

[@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.

[@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!

[@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

[@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 :)

[@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.

[@kaiserslacht]

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

[@bunggo9914]

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

[@LonelyAwesomeWolf]

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

[@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

[@really-america]

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

[@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.

[@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".

[@hasnainfareed8555]

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

[@nguyenhoangdung3823]

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

[@keniak1-g960]

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

[@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

[@martinfaucheux6598]

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

[@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!

[@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

[@Lothrean]

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

[@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 :)

[@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!

[@gamedevhq]

Excellent Quality! Well done!

[@nyscersul42]

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

[@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.

[@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).

[@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

[@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.

[@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.

[@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!!

[@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

[@gilleswalther5964]

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

[@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.

[@mikecu2249]

i LOVED that Grid Component part!! :D

[@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

[@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

[@aqwcom]

This channel is underrated.

[@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.

[@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.

[@hxntytube]

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.

[@riten]

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

[@casachezdoom2588]

5:41 Why did you use an image called Panel rather than a Panel component? Is there a reason why you did that? One difference I can see is that a panel will have an image set to it by default.

[@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!

[@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.

[@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!

[@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.

[@declanmark2809]

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

[@studyzen8836]

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

[@thebrianman]

Holy crap this is a gem! Very good video!

[@jumpod9853]

Thank you so much for explaining the Layout Element !

[@letterslayer7814]

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

[@koresaliva]

Same

[@Copybook]

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

[@SendarkWoW]

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

[@krissloo143]

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

[@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.

[@Jesus-fi9kp]

Wonderful video! Congratulations! Pure knowledge ...

[@Makiki_Maki]

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

[@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

[@teamchemistryrex]

Finally, a high quality Unity tutorial channel!

[@MohammadFaizanKhanJ]

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

[@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.

[@jhummelgaard9310]

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

[@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.

[@techmeck8980]

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

[@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.

[@MarcoMasi-masiorama]

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

[@nitinsoni1894]

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

[@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 :)

[@sablehoover5568]

Really enjoy your stuff, man!

[@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.

[@ahmedsameh2384]

Great work man, u r a really good teacher ^^ Keep it up

[@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.

[@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!

[@khaliljelliti6751]

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

[@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.

[@raptorswire7212]

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

[@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.

[@francoisneko]

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

[@frey6549]

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

[@anumey1]

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

[@WebMonkey741]

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

[@profsusansatsumas]

Please could you post a download for that shader script because copying it from the screen is quite confusing and difficult and i have no idea if this is going to work! thanks

[@ufukseyithan]

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

[@diegohiroshiysusvideos2909]

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

[@Caden_Burleson]

Thank you! Would love more UI videos.

[@Caden_Burleson]

Re-watching this video a year later and It's still good information!

[@Caden_Burleson]

Would be nice if you could use this same concept and show us how to have a floating header with the body able to scroll underneath the header.

[@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!

[@ozoz2448]

Thank you for this great video. A bit fast but very very usefull.

[@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.

[@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.

[@diegomendes1998]

The Grid Layout Group is so good!

[@greggalloway6410]

Where is part two of this? I didn't see it linked in the description. Is it How To Get A Better Grid Layout in Unity? Because that doesn't pick up where this left off, and only mentions it in passing. I'm a bit confused.

[@Oxmond]

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

[@placetechnologies]

Your work is always amazing thank you !

[@notnanomercy]

Great vídeo, well done!

[@hongjiantang7819]

Wow, amazing tutorial! Thanks a lot for this!