Unity Optimize UI - Reduce your Draw Calls Improve your performance in 10 MINUTES!

hello guys and welcome to the first video of my unity ui optimization series in the next five minutes we're going to learn the easiest and fastest way to both optimize the performance of your games and also decrease the size of your mobile builds with this technique alone i was able to increase the performance of my upcoming game by a lot and also if you stick till the end you can see how with one click you can decrease the size of your mobile builds so make sure you stay tuned on this channel i'm always uploading videos to help you grow your skills as a game developer so if you don't want to miss any of them make sure you subscribe to the channel below alright so jumping into unity i have a basic scene set up where i have a background and a single panel with a scrollable list of heroes to choose from one key concept to understand for this tutorial is what a draw call is simply put each draw call is a pass unity makes to draw your ui we are trying to optimize the performance of our game the less draw calls we have the better our game is going to perform and trust me they stuck up really quickly now that we know what draw calls are we need to figure out how many we have in our scene you know that we can just open the stats panel right here in our gaming view and under batches we can easily see that number if for example we only leave our background on you can see we only have one draw call because it just draws the background in one pass but if we turn on the canvas you can see it jumps to 46. now you may be wondering if the background is only one draco how come the panel has 45 to try to understand the answer to this question we have to turn to the frame debugger so go to windows analysis frame debugger you can enable it and here under canvas render overlays we can step through all of the draw calls or our game makes to draw that canvas so first it puts the background then it puts that overlay then the text the icon the other overlay the x then we start seeing the icons somewhere down here one icon at a time until we have all of the icons for our panel now let's stop for a second and try to understand when two things can be drawn together and when they can for two things to be drawn in the same draw call they need to be first of all on the same canvas they have to share the same material we have to share the same sprite asset and they have to be clipped by the same mask now that we know that we can already start to guess what's going on here all of our images are in the same canvas most of them use the same material but none of them are in the same sprite asset the easiest way to solve this is using unity's sprite atlas feature so to do that we're going to go back to unity create a new folder all the sprite atlas [Music] right click and just select new sprite atlas we're going to call this icons and here we can do two things we can just drag and drop each of the icons be packed you can do it like this or the easiest way let's delete this this way is to just assign the whole folder you can just go like this just pack preview we can see that we have one sprite where we have all of our icons now one thing that you probably need to do is to disable allow rotation and tight packing because you may run into some issues of sprites being actually rotated or bleeding into some other sprites if you don't do that just back preview again in this case it doesn't make a difference because all of our sprites are squares but just keep that in mind now we're actually going to do the exact same thing so we can just copy this duplicate it and put ui and do the same thing with our ui we're going to pack all this into the same sprite sheet let's just remove play see how this looks now let's go to the frame debugger again and now we have one draw call for all of this another draw call for the text now we have another these empty draw calls that are actually the the sprite mask that are making our scroll list work then we have one for all of the icons and then we have the last one here so now we we went down from 46 to 8. that's pretty amazing now if you really want to dig deeper into your draw calls you can go to window analysis and open up the profiler know this is always scary but bear with me the first thing we're going to do is just remove all of the modules that we're not going to use we just want to leave on ui and ui details now we can actually see when we press play and now if we open the canvas we can see each of the draw calls which game objects are drawn in this batch and why each of the draw calls is breaking from the previous one so if we step through here the first one we can see the background with the icons and everything patched together then the next draw call is for the text this uses a different texture and that's correct because that's the text font there's nothing we can do about that then the next two are for the scroll view like i mentioned there's nothing we can do here this one uses a different texture from the font and the viewport is a different material instance to be able to do the clipping there's nothing we can do there then we can see here all of the icons being batched together and this is a different material instance from the previous one and the same with the with the last one this last three or four actually there's nothing we can do that's the scroll view so we can have this effect one last tip to really optimize your game is to go back to the sprite atlases select them make sure you use crunch compression you can leave normal quality and put this to compression quality 100 and you can see we can go from 256k down to 80 and do the same with the ui and we're not going to lose any quality of our images that's really noticeable you can actually test this out in your target device so if you're going to target mobile just make sure you change this and test it out in a few devices to make sure it still looks good but with this tip alone of using sprite atlases using crunch compression we were able to decrease the size of our builds on our latest game around 85 megabytes to down to 60. that's about a 30 decrease that's crazy another advantage of doing this with the sprite atlases is that for this crunch compression to work you need the images to be power of two but by doing it in a sprite atlas you make sure that all of them are power of two because the sprite atlas is always going to be a power of two so it just works out of the box okay guys so this concludes our first video like i mentioned before i'm gonna be doing a series of videos like this one really short tutorials where i'll go over different optimization tips for your mobile game so if you're interested in content like this make sure you're subscribed to the channel also i want to know from you guys what's the biggest performance issue that you had in your games if you can leave me a comment below with it and i'll try to help you out alright thanks for watching and i'll see you guys in the next video [Music]

Channel: Bigfoot Codes

Views: 15,622

Keywords: unity optimize ui, reduce draw calls unity, optimize ui, reduce draw calls, ui performance, unity optimize, unity optimization, unity performance, optimize performance, unity optimization tips, optimization tips, sprite atlas, unity sprite atlas, Unity atlas, unity optimization mobile, reduce batches, brackeys sprite atlas, sprite atlas unity, Unity optimize for mobile, frame debugger unity

Id: _EmwV98r4RY

Length: 7min 45sec (465 seconds)

Published: Tue Jan 19 2021