Making UI That Looks Good In Unity
Вставка
- Опубліковано 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 - ua-cam.com/users/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.
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!
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 :)
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.
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.
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 :)
Oh god, finally! I finally understand those blasted layout grouping options! So damn confusing! Thank you!
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.
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
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.
All your videos are very high quality, informative, clear, organised, interesting and have sound quality and music background levels that are perfect.
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).
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
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!
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.
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!
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
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!
Definitely looking forward for more; as other comments have pointed out, it's incredibly hard to find good UI tutorials for Unity.
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
I just found your channel yesterday and immediately I'm your fan. Great Work!!
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!
one of the most underrated channel on youtube about unity gamedev.
keep up the good work. :D
Explaining the under-the-hood behaviour of the ui elements was real helpful, thanks!
Thanks man,you are among few rare channels who are teaching in depth.
Thank you so much for explaining the Layout Element !
I like that the video goes deep in the subject. Good job!
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!
Love this tutorial ! Really in depth and with a lot of good practice.... Thanks a lot 😊
Really good explanation, will help a lot in every project. Thanks a lot! Can't wait for the next part.
Dude you are so incredible!, Continue like this, you deserve more views and subscribers dude, hope you are doing great!
man, you deserved more subs, this is one of the best unity tutorial channel for sure.
Really the best video I found out there to explain how to deal with Unity UI!
Nice job, thanks! Looking forward to the next video.
i LOVED that Grid Component part!! :D
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.
Excellent Quality! Well done!
These tips were really helpful. Thank you for making this :)
Many thanks for the video, actually watched it during my free time, but it could be useful for me later while working, so, thanks.
Wow, amazing tutorial! Thanks a lot for this!
Thanks for all this information, i was really lose about where to start
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
I already have a current UI, but I’m here because it’s so relaxing to watch good UI design.
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.
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.
Really enjoy your stuff, man!
Finally, a high quality Unity tutorial channel!
I love how the "terrible color pallet" example literally is pretty up-to-date and awesome just 2 years later :D
Wonderful video! Congratulations! Pure knowledge ...
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.
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".
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 :)
"Like a lot of things in Unity, it can feel pretty half baked at times"
STRAIGHT UP FAX
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!
Your work is always amazing thank you !
Great tutorial! The quality of the UI design is absolutely important - even in really cool games, haha 👍🤓
Wish I’d found this channel sooner. Great video :)
Holy crap this is a gem! Very good video!
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
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.
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.
Thanks for this awesome tutorial !
Nice video, it really helped me a lot.
Keep up the good work :)
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
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.
This is brilliant! Thank you
So much in one video very great work sir. Thank you for this helpful video.
U video style is great! Keep going and u will become a big UA-camr
Thank you for the tutorial 👍
Thank you for this great video. A bit fast but very very usefull.
Great tutorial , thank you
Today I discovered your channel and it's video no 2 I am watching. Thanks for your wonderful ❤️ work.
Thank you so much, it's helpful
Love the way it's all explained
can't believe I haven't subscibed yet
Great vídeo, well done!
your content is amazing simple and educational.
I'm learning a lot from your videos please don't stop and thanks 👋🏼👋🏼👋🏼🤛🏼
Wow! I wish I had started here when I was beginning on my Unity UI work! 😀
finally a GREAT explanation how layouts work. Before I couldn't understand sh*t :D
awesome, mate, keep it up!
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!
Thank you very much for this video.
The Grid Layout Group is so good!
amazing video as always :)
Keep it up Mate! Definitely would be awesome if you found a solution about blur panel via URP!
Great work man, u r a really good teacher ^^
Keep it up
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
Keep up the great work!!!
Great video!
You should do one on inventory UI design since that can be very challenging when factoring in the functionality.
Liked and subbed. Good work brother.
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.
Another great video.
You could blur the game view with post-processing for simpler results
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.
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...
Thank you! Would love more UI videos.
Re-watching this video a year later and It's still good information!
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.