How to Build and Optimize HTML5 Game using Unity

  Melvin       December 23, 2020

Unity has been widely known as a dedicated platform to make 3D games but it has enormous flexibility for 2D games too. The developers tend to move their game written on HTML5 to Unity because of the features it has to offer. There are several problems reported by developers who tried to script the game completely on HTML5 and faced issues on multiple browsers during gameplay. It looked different on each device which hindered with the gaming experience.

Unity appears as a second thought for the developers and with the expectation that it could wipe out all the issues. In this article, we will go through the points on how to build and optimize HTML5 games with Unity and will it become an ultimate solution for the concern.

When it comes to HTML5 games, it has a prerequisite of having the build size very less as people would skip from the game if there is too much to download. So we need to do an in-depth optimization for these games which is amazingly possible in Unity platform. Firstly, we need to check which resources are taking up the memory which in turn makes the game of larger file size.

The best way for this is to take the build report in Unity which shows each resource and their file size. In most cases, textures and audios are the bigger ones and our efforts are spent to optimize these assets. It will also break down the details of each asset which has taken up the memory. To reduce the texture size the best practice would be reducing the size of each asset especially the larger ones. In the inspector window, there will be an option to compress the sprite to normal quality which brings a reduction in file size.

As recommended by most of the Unity game developers, it works the best in optimization when the image width and height is brought to a value with the power of 2. But make sure you don’t lose the clarity of the image. You can easily perform this correction in Photoshop or any other tool. It is recommended that you go for the larger sprites at first and then move on to the smaller ones to correct the size. It may take some time but it is indeed useful to invest time in this process.

Another most helpful aspect which helps in optimisation is the crunch compression. You can enable the crunch compression option in the inspector window which creates a massive difference in the sprite sizes. But remember, all these are going to be effective only if you optimize your images to values with the power of 2. To select each sprite and resizing it may take away your time so there is one easy step with which you can make it up. You can create a separate atlas for the small size assets and after adding them you can then enable the options like a compress to normal quality and crunch compression. It is recommended to treat large size sprites separately than mixing it with the smaller sized ones.

With the help of a profiler tool, you can understand which part of the game is taking too much memory and time. Mostly this happens in the texture and audio assets so make sure you have gone through each of your game assets for optimization. Using too much light in the game could also increase the build size. Similarly, you can follow the same steps for the optimization of audio assets.

Advantages

The game engine is very user friendly and has an effective development pipeline.

We can export the build in WebGL very easily.

The updates are regular and support all the latest features such as WebGL2, shaders etc.

There is an option to port it into a native mobile app with the latest update.

Disadvantages

Still, there is an issue while running the games on mobile devices.

With no source maps, tracking is difficult if you have WebGL.

Adding more graphics may make loading assets in WebGL a complex task.

Unity is not an open-source platform which may hinder your development process.

Unity is still working to make the HTML5 optimization process simpler, so we can expect it to happen in future. Unity is creating revolutions in the gaming industry by bringing everything which is needed to make a successful game. HTML5 games are still having the popularity and requirement in the industry but are finding ways to tackle the issues faced during its run. Meanwhile, you can make use of the tips and techniques shared in this blog. You can make use of our blog site to keep updated in the gaming industry.