How to optimize your Unity game for Mobile, PC & WebGL: from 230MB to 3.7MB

[Music] hey guys gamedevlook here and today i have a tutorial for you to optimize your unity game for webgl two years ago i made a game for the nintendo switch and recently i was asked to convert this to webgl when i started my first webgl build i had over 230 mb in textures alone and the final build had to be less than 10 mb checking out the internet i didn't found a lot of good tutorials or workflows in how to optimize your game or webgl so i started my own and i went all the way back from 230 mb to 3.7 mb while the game still looks exactly the same if you want to learn how to do this then please check out this video and i will show you how to do this workflow and what kind of tricks i use i'm quite impressed with the result the final result is 62 times smaller than what i started with i hope you can learn from it as well check it out and let me know what you think about it enjoy for this tutorial i will be using game i have released for the nintendo switch in 2018 all tied together let's take a look at optimizing a 2d unity game for webgl for webgl it is very important that your build is as small as possible because people tend to leave really quick if they have to download too much and this is the general workflow first you make a build once the build is done you can go to the console you can click here and open the editor log this is everything what the editor is logging if you put your cursor all the way up search for build report and you make sure the direction is down and you click find next and this here is actually the most important thing of optimizing in webgl as here you can see what each type or category of asset in your project how much it costs how much mb it is taking here you can see textures 260 mb and it's taking up 89 of my whole project so probably this is something we need to optimize and every game is unique for your game you have to make builds check out this log and see what's going on probably 90 of all projects it's gonna be textures and sounds i removed all the sounds in this game for demonstration purposes but if you have a full game probably you will see that textures and sounds take up like 90 percent of all your memory but then you can look here use assets and files from the resource folder sorted by uncompressed size and here you can see which textures are really causing problems my first texture is taking up 40mb but this is spyss.png and here you can see it has several sprites in there and let's take a look at the settings what can we see here we can see that this sprite is 40 mb it has a super huge resolution of 4k times something it has no compression mid maps are enabled let's optimize the first thing i would do if i were you is to put every sprite i have in my whole project to have a compression and i always use normal quality and let's apply this so we did that now you can see we still have 40.5 mb but we have a little warning here says only bot which means power of two texture can be compressed if map maps are enabled so there are a couple of problems one is this texture is not power of two and you can see so here where my mouse is right now at the bottom of the image npot means not power of two and this is very important in unity images get compressed really well if an image is power of two if you make a 3d model texture always has to be a power of two and power of two means it's going to be 256 times 256 or 1024 by 1024 or any combination of that and this is very important and with sprites we don't have this requirement but for optimization it is very good to do that let's turn off generate mipmaps hit apply and see what that does with generate mipmaps off you'll see that we lost 10 mb that's already something but it's still way too big i also put the compression to normal quality but you see here that we have warning only textures with width height being multiple four can be compressed to the xd5 format so what i'm gonna do now i'm gonna go to photoshop and i'm gonna make sure this image is gonna be power of two so let's go to the closest power of 2 which is 4096 with so i'm resizing this i'm going to say okay and then i'm also going to make sure the height is a power of 2 and that's 20 48. now i'm not resizing but i'm just increasing my canvas our image got a little higher now now our image is a power of two let's see what the difference is so it's 30 mb now now reimporting now it's only 8 mb so this is like four times as small but there's more let's make a new scene and let's place one of the assets and i'm using the helicopter because that's the biggest asset in the scene and now i'm gonna resize my image so i'm gonna make it smaller and smaller and smaller until i see the image getting blurry and that means it is too low resolution and that's not something we want we want the image to look crisp and nice and smooth so but probably it's now way too big right our game is now in a full hd resolution but our texture is like 4000 by something and that's way too big you can do this in photoshop or in any other package but you can also use unity for this by controlling the max size and let's go back one step so it's going to be 2048 i'm gonna hit apply and now you see the texture is only 2mb and actually we don't see any difference in our helicopter so we're going to go another step back now it's only half a mb and i think you see if you look very closely you see a bit of lower quality but i think it's still very doable entirely noticeable you know if this thing flies around you're not gonna notice this i think so this is fine and then there is another trick you can use crunch compression and this is a library that crunches your image even more it does use some gpu power to uncompress them when you need them in the game but for us in webgl our biggest problem is memory and it's fine that it uses some more processing power so i'm gonna hit this i'm gonna leave the quality at 50 i'm gonna hit apply and now you can see our helicopter is only 59 kilobytes now we started at 40 and if you think you know the quality is too low now we can put it back to 248 see how much we have then 130 kilobytes so that's fine that's nothing anymore actually those are the steps to optimize your textures for webgl it is really about the import settings and the most important step is having a texture in the power of two resolution that's the very most important step because unity is optimized to really really really really compress that down to like as you can see a few kilobytes but if it's not power of two compression is not gonna work crunch compression is not gonna work then you have very very high memory usage of your textures so another thing i want to show you is this i have these sprites here which are for the main menu and they're all loose in this project they're like body parts of characters they're like objects that are standing on the table on the desk and so they're also pretty big if you see at this screen the screen is 0.7 mb almost 1 mb 2mb and so on you can also see that all of these textures are not power of two and that's the most important step to actually have these textures be a power of two these are many many images and if i had to go to photoshop and i'll make them power of two it's gonna take a lot of time so what you can also do is use unity's sprite atlas system so that's what i'm going to do now i'm going to go to create and i'm going to say sprite atlas i'm going to call this main menu atlas i'm going to leave it all on default and what i'm going to do now i want to add all of these sprites to the atlas at the same time so what i do for that i'm gonna hit this lock icon over there and i'm gonna select all the sprites i want and i'm gonna drag them in this objects for packing list then we have all these sprites here and as you can see spritel atlas says hey sprite that is packing is disabled please enable me in edit settings editor so let's go there in the editor settings sprite packer mode always enabled and that is actually this is actually the sprite packer and the sprite packer is old by now now we use sprite atlases so i'm gonna set this to always enabled and now we get this little button here pack preview and then it's generating an atlas for all these sprites so it's putting all these brights that are separate into one bigger image all right and what is important with the sprite atlas it has a max texture size and it only fits in as much as it can in this space as you can see now i have a lot of images and i only see like three and that is because these are very very big these images the start background is very big because it has to fill the whole screen i think it's smarter to fix this one separately and only use the small images in my atlas see what other images are really big this one is really big 2048 so i'm going to my atlas and i'm going to remove them so rbg i'm going to remove and the player select background i'm going to remove hit pack preview again and now you can see that has packed all my color sprites into this one image there's one problem though a tv frame here and it has put images inside the tv frame and these are so if i use a tv frame now then we're gonna have these images in there as well and to fix this we can disable tight packing and pack it again doesn't place any sprites within my tv frame and what is good about this this atlas is a power of two 2048 by 2048 while all these images were not a power of two and it's unity is only going to use this atlas when you make a build so now i can use the crunch compression again it's now only 300 kilobytes and all these separate images were like a half mb full mb half mb and so on and now it's only 300 kilobytes that's a nice way to save you some time you could also go to photoshop and do these all by hand but this is i think way faster and it's only one draw call that's sprite atlas and another thing i want to show you is let's say when you make a game you have lots of images update constantly and things come and go and at some point i had this image and i figured out that actually i'm only using this thing now all the other assets i don't use in the project anymore but this whole atlas is in the project let's see how big it is actually ui update here you can see it's 4 mb it is a power of 2 so it's actually ok i can crunch this see how well it gets 240 kilobytes that's still not too bad but we really have to push ourselves to get as low as we can so if i'm only using this sprite from this atlas i might as well just use that sprite copy this into a new document and when i copy paste this i have to make sure it's a power of two again but this is a kind of bit of a difficult thing 800 something is in between 5 12 and 10 24 but we could resize this smaller because it doesn't have to be this big in my game so i'm going to resize this to 512 the height i'm gonna make bigger to 512 so even that i'm adding more transparency so the image is actually having more transparency it's still going to be way smaller so the ls is now 250 kilobytes with everything set up right let's go to the frame now it's only 23. you know that it's quite worth it to actually do this because it's from 250 it's going to 23. so that's like 10 times as small and another thing i want to show you is this trick so for the background of the game we're just using a simple gradient let's say we have this image this is our background image it's a gradient from dark green to a little bit lighter green it has a resolution of 19 20 by and 80. what we can do with this we can optimize this by making sure it has power of two and use the crunch compression that kind of things but only information we actually need is the gradient in the length of the screen because that contains information from dark green to light green and in the width of the screen staying the same it's just repeating that same pattern that same gradient over and over so what i would do is i would make an image that's only one pixel wide which you can see here one pixel wide and an 80 high i would place this in my scene and i would put the sprite to file and then i put the width on whatever and then you can see we actually have this exact same gradient because we're repeating our one pixel over and over again and while this one pixel right is only three kilobytes and it's not not even using crunch compression so this is also a very good tip if you have repeatable sprites just use a one pixel version and tile it all the way and that is the basic workflow of optimizing textures for webgl i've only showed you if we go back to our build report i've only showed you to optimize this one we went from 40 b to 129 kilobytes and the next step would be looking at this right and then this one and this one and this one and this one there's this one and it's basically just making a build checking the build report and again you do this by going to the console and opening the editor log and here you're gonna ctrl f and find build report then you find this and then when you think okay i've optimized a lot you make another build you check this list again and so you keep going and going and going so these are the techniques and tricks i used to get all the way from 230 mb all the way back to 3.7 mb in textures alone and what also is an important part of optimizing is audio and i'll probably make another video like this in optimizing your audio for webgl and that will come in the future you want to know exactly when that comes please follow subscribe and comment thank you very much have a nice day and good luck optimizing your build bye bye

Channel: GameDevLuuk

Views: 80,564

Keywords: Unity WebGL, Optimize Unity WebGL, Optimizing textures unity, Unity Sprite Atlas, Unity import settings, unity optimization, game development unity tutorials, reduce build size, unity3d, unity2d, how to optimize webgl, unity webgl build, Unity build size, unity build size too big, how to optimize webgl unity, how to optimize webgl unity to reduce build size, how to setup textures in Unity WebGL for smallest build size, gamedevluuk, unity webgl workflow, unity webgl build size

Id: j0DN9P8e7dc

Length: 14min 48sec (888 seconds)

Published: Tue Aug 18 2020