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

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

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

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

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

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

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

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

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

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

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

[@LonelyAwesomeWolf]

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

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

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

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

[@ianfrancis3605]

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

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

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

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

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

[@Lothrean]

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

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

[@nyscersul42]

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

[@hasnainfareed8555]

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

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

[@studyzen8836]

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

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

[@bunggo9914]

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

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

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

[@nguyenhoangdung3823]

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

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

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

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

[@riten]

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

[@OneSlavBoi]

this is extremely satisfying to watch and work with

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

[@Makiki_Maki]

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

[@keniak1-g960]

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

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

[@jumpod9853]

Thank you so much for explaining the Layout Element !

[@SendarkWoW]

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

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

[@martinfaucheux6598]

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

[@mikecu2249]

i LOVED that Grid Component part!! :D

[@GameDevHQ]

Excellent Quality! Well done!

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

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

[@Copybook]

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

[@gilleswalther5964]

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

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

[@letterslayer7814]

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

[@koresaliva]

Same

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

[@kken8766]

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

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

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

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

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

[@aqwcom]

This channel is underrated.

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

[@declanmark2809]

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

[@gloriousptr]

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

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

[@notnanomercy]

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

[@khaliljelliti6751]

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

[@lukrin3482]

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

[@MohammadFaizanKhanJ]

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

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

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

[@WebMonkey741]

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

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

[@diegomendes1998]

The Grid Layout Group is so good!

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

[@teamchemistryrex]

Finally, a high quality Unity tutorial channel!

[@nitinsoni1894]

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

[@Jesus-fi9kp]

Wonderful video! Congratulations! Pure knowledge ...

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

[@MarcoMasi-masiorama]

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

[@francoisneko]

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

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

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

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

[@thebrianman]

Holy crap this is a gem! Very good video!

[@Oxmond]

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

[@sablehoover5568]

Really enjoy your stuff, man!

[@raptorswire7212]

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

[@anumey1]

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

[@krissloo143]

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

[@ozoz2448]

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

[@pimpace]

Keep it up Mate! Definitely would be awesome if you found a solution about blur panel via URP!

[@frey6549]

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

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

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

[@wescube-ligma]

OR , instead of blurring it that complicated , you can make a rectangle is photoshop , set its opacity down , and brush it with the blurr brush , import it into a pannel in unity and maybe adjust the color and BAMM

[@BlenderDumbass]

I built a little organizer software to look for my animation projects. At first I used py gtk and used the toolkit with in it. And it worked but I could not really control things. So I redesigned everything within a drawable. It's basically a feature that allows you to draw all kinds of things. Like graphs and weird UI elements. So I just drew 90% of the software there. And it looks amazing. Tho unlike what you are showing. I had to manually assign things. Because drawable doesn't even know what's a button. It knows what's a rectangle. And you can set change color if your mouse cursor happen to be within it's area. And you can also set a function if the mouse also is happened to be clicked.I love this kind a low level basicness and with it freedom. But it would be cool to have some prebuilt things. Maybe I just need to code them myself.

[@Dxpress_]

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