Making UI That Looks Good In Unity
HTML-код
- Опубликовано: 16 фев 2020
- Learn ways to improve your understanding of how to design UI in Unity!
URP Examples: github.com/Unity-Technologies...
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.gamedevguide.store
💡 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.unity.com/top-asse...
Free Unity Assets! - assetstore.unity.com/top-asse...
New on the Asset Store! - assetstore.unity.com/top-asse...
Top Paid Asset Store Packages - assetstore.unity.com/top-asse...
Asset Store Partners - assetstore.unity.com/lists/as...
--------------------------------------------------------------------------------
Socials and Other Stuff:
• Subscribe - ruclips.net/user/gamedevguide?...
• Join the Discord - / discord
• Twitter - / gamedevguideyt
• Facebook - / gamedevguideyt
• Instagram - / gamedevguideyt
It's super hard to find resources on UI design in Unity, thank you so much for this!
Oh, hi man!
Even harder on roblox. I’m making a simulator but the ui has to be top notch
@@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
Rug Bug Red Fer N!!!!
"I'm obviously going to go with the British Palette here" > Immediately calls the library UI Colors instead of UI Colours
Force of habit now, as most libraries and references are in American English. 😂
@@GameDevGuide I feel you, makes me sad everytime resharper is like "u spelt that wrong" like sorry excuse me?
@@GameDevGuide Except for MonoBehaviour, for some bizarre reason.
@@GameDevGuide You mean "English (Simplified)"
Louis Greenland you mean
"Proper English"
Jk. None is "better" than the other but
I prefer American
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!
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.
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.
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 :)
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 :)
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!
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. :)
I have a feeling you're gonna love the next video! 😂
I have used the component for inventory systems before. Never had a single problem. I seriously don't understand why you guys hate it.
@@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.
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.
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.
All your videos are very high quality, informative, clear, organised, interesting and have sound quality and music background levels that are perfect.
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.
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.
Oh god, finally! I finally understand those blasted layout grouping options! So damn confusing! Thank you!
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).
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!
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
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
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!
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!
I just found your channel yesterday and immediately I'm your fan. Great Work!!
Definitely looking forward for more; as other comments have pointed out, it's incredibly hard to find good UI tutorials for Unity.
Dude you are so incredible!, Continue like this, you deserve more views and subscribers dude, hope you are doing great!
"Like a lot of things in Unity, it can feel pretty half baked at times"
STRAIGHT UP FAX
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
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.
one of the most underrated channel on youtube about unity gamedev.
keep up the good work. :D
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!
Excellent Quality! Well done!
I like that the video goes deep in the subject. Good job!
Thanks man,you are among few rare channels who are teaching in depth.
man, you deserved more subs, this is one of the best unity tutorial channel for sure.
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.
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".
Really good explanation, will help a lot in every project. Thanks a lot! Can't wait for the next part.
Explaining the under-the-hood behaviour of the ui elements was real helpful, thanks!
Love this tutorial ! Really in depth and with a lot of good practice.... Thanks a lot 😊
i LOVED that Grid Component part!! :D
Thank you so much for explaining the Layout Element !
Really enjoy your stuff, man!
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.
So glad to be able to help!
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
}
}
}
Thanks
Really the best video I found out there to explain how to deal with Unity UI!
These tips were really helpful. Thank you for making this :)
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 :)
Nice job, thanks! Looking forward to the next video.
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.
I love how the "terrible color pallet" example literally is pretty up-to-date and awesome just 2 years later :D
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.
Thanks for all this information, i was really lose about where to start
Many thanks for the video, actually watched it during my free time, but it could be useful for me later while working, so, thanks.
U video style is great! Keep going and u will become a big RUclipsr
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
Nice video, it really helped me a lot.
Keep up the good work :)
Wish I’d found this channel sooner. Great video :)
I already have a current UI, but I’m here because it’s so relaxing to watch good UI design.
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
Wow, amazing tutorial! Thanks a lot for this!
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!
Finally, a high quality Unity tutorial channel!
Great tutorial! The quality of the UI design is absolutely important - even in really cool games, haha 👍🤓
Wonderful video! Congratulations! Pure knowledge ...
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.
Your work is always amazing thank you !
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.
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.
Holy crap this is a gem! Very good video!
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.
Love the way it's all explained
can't believe I haven't subscibed yet
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
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.
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.
Thanks for this awesome tutorial !
Great vídeo, well done!
Liked and subbed. Good work brother.
Today I discovered your channel and it's video no 2 I am watching. Thanks for your wonderful ❤️ work.
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.
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.
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.
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!
So much in one video very great work sir. Thank you for this helpful video.
your content is amazing simple and educational.
I'm learning a lot from your videos please don't stop and thanks 👋🏼👋🏼👋🏼🤛🏼
You could blur the game view with post-processing for simpler results
Great work man, u r a really good teacher ^^
Keep it up
You should do one on inventory UI design since that can be very challenging when factoring in the functionality.
Me: What about the grid layout?
Me 3 seconds later: Oh
Same, but I always use it. Sometimes even instead of vertical and horizontal, so I honestly don't get it.
I've actually managed to get it to work a couple of times. Compared to the number of times it hasn't worked tho...
@@binaryparrot3352 Yah, if you don't use grid, you must be kid.
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.
Thank you for the tutorial 👍
This is brilliant! Thank you
Really nice! But I'm really curious about the city you used as the background, it's that an asset from asset store? Kenny?
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
Great tutorial , thank you
12:17 lol! Also, excellent tutorial as always!
Keep it up Mate! Definitely would be awesome if you found a solution about blur panel via URP!
amazing video as always :)
awesome, mate, keep it up!
finally a GREAT explanation how layouts work. Before I couldn't understand sh*t :D
I don't remember how many developers have recommended the video "Understanding Colors" by Blender Guru. He is a great artist
Keep up the great work!!!
The Grid Layout Group is so good!
Thank you for this great video. A bit fast but very very usefull.
I love your fun comments. Making Unity UI fun to learn must be some challenge!