How to Make Perfectly Scaling UI [Unity Tutorial]

hey everyone make here from com3 interactive welcome back to the channel today we're gonna be taking a look at creating scalable UI designs now we almost have done this at some point we've created some amazing looking UI in Photoshop or we've exported it into unity and we found that the scaling is completely wrong when we try and fix that inside of unity we get all sorts of stretches and distortions and nothing looks nice well we can fix that if when we're designing our UI elements we think about it in a grid format so let's just jump over and I'll show you exactly what I mean now I'm gonna be using a sprite for this I'm gonna be doing a pixel art design and what we want we want a 16 by 16 cell size and a grid of 3 by 3 we can go ahead and create this so we want 16 by 3 I'll do if I clicked in here week 1 16 by 3 and again 16 by 3 I'm will clear this is a new canvas so if we look at this grid we can think of it as this top left would always be our top left most area of the UI element that this is attached to top right bottom right bottom left our left side which we can either stretch or we can repeat going on and on up until we reach the end and that's the same for a top right and bottom and then our Center Square will be either again a stretchable or tile herbal texture for the entirety of the inside of the UI element so I'm gonna go ahead and I'm going to create a quick and easy pixel art UI design we'll throw this into unity I'll show you where to set it up and I'll show you a useful this can be [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Applause] so this is my finished UI design if I just enable the grid here you can see that I've kept all of my individual elements inside these 16 by 16 cells so this I want as my topmost left side of any UI element top right bottom right bottom left and I want this to tile in between the top left and top right corners so when we go ahead and save this able export this as a PNG file we'll just call this border we can pop over into unity now and we can see we have our border when we go ahead and create a panel in the UI section we'll decide this down slightly increase the opacity and then we'll drag and drop our border onto our image and as we can see it looks absolutely terrible when it's not in its native aspect ratio so where do we go about fixing this we can click on our border sprite in a project window and there's a few things that we've got a set-off beer so up first of all we want to set our pixels per unit to 16 because that was our base size you may not have to do this if you're not running a pixel art design I just suggest playing around with this and seeing what's right for you next up we'll set filter mold 2.0 filter again as you can see there it clears up our pixel art making it a lot more crisp so if you're not using pixel art you may not have to do that step and I want to make sure that my compression is set to none because it's a very small image it's not going to increase it that much and it just gives it that little bit more clarity now for the next byte is where we split this one image up into a tileable texture so we click on sprite editor we need to apply that first now we're still going to keep this as a single image but what we want to do we want to drag in our corners and we want to put these down to our 16 by 16 grid size like so you could also just add in 16 16 16 and 16 to these four border parameters and we'll go ahead and hit apply now we won't notice any difference just yet so what we need to do we need to go over to our panel and change image type from simple to tiled there when I press this you'll see exactly what this does know we can resize our panel and we can see that our callers stay exactly where we want them on the innermost edges tile and repeat to keep everything perfect and we can mess about with this pixels per unit if we set this to 2 we can then see it's much nicer sized we can size this up to just smaller than our window and everything scales like it needs to we could even do this for our buttons so if we just create a button change the background from UI spray again to our border image type tiled and increase this a little bit more set 5 on this one and then when we go ahead and scale our buttons you can see everything works just like it did before so I hope this was useful this shows you how you can create very crisp perfect UI designs with very little effort if you've learned something today then drop a like on the video and subscribe to the channel you can also find us over on social media for more bite-size unity and c-sharp tips I've been Mike for com3 Interactive and I'll see you again soon

Channel: Comp-3 Interactive

Views: 34,686

Keywords: comp-3 interactive, comp3 interactive, comp-3interactive, comp3interactive, comp, comp3, comp-3, interactive, unity, unity3d, unity2d, 3d, 2d, materials, easy, how, to, howto, learn, course, series, tutorial, tutorials, game, development, develop, developer, android, mobile, games, programming, programmer, tip, tips, indie, coding, basic, basics, C#, video game, first, material, physics, interface, class, navigating, noob, beginner, intermediate, advanced, professional, guide, introduction, scale, scaling, ui, pixel, pixel art, GUI

Id: _-9MrJfbysM

Length: 6min 25sec (385 seconds)

Published: Fri Apr 17 2020