HTML5 Games Optimization, The Common Tricks And A Bit Of Magic

Sprite sheets

TexturePacker is an excellent software that can be used to develop games that are top quality and will give the user everything he or she wants in a game. TexturePacker allows the developer to place all the small pictures and animations into a single large file. This means that the number of HTTP requests is significantly reduced. It also means the developer can reduce the loading of the graphics processor. It is much easier to handle a few large textures than hundreds of small ones.

If you take into account the fact that sometimes only textures of ‘power of two’ sizes are supported, it does make sense to use the software TexturePacker. For example, an image of 30 x 100 may be in the memory as 32 x 128, or in some cases 128×128 (sometimes only square textures are supported).

Atlases are excellent too, but the main thing to remember is to not overdo them. Some mobile devices do not support Atlases of more than a certain size. The most popular size is 2048 x 2048. But the optimal for relatively old devices such as iPhone 4 is only 1024 x 1024.

Graphics

Let’s talk a little about Graphics on a game. Optimizing graphic files can dramatically reduce the final size of the Application and increase the speed, performance and overall quality of the game. Each graphic file often stores additional meta-data which is completely useless for the game. In addition, you can combine similar colors (quantization), thereby further reducing the size of the picture without visible loss of quality of the final image. There is a wonderful service TinyPNG, which perfectly performs this task. If this is not enough or if for some reason it does not suit you, you can find many analogues in the network both online or standalone applications. In other words, do your research and choose the right software.

Loading assets

JavaScript supports parallel downloading of files, and there are many popular game engines that use this feature. If you have an engine of your own design, you should pay attention to optimization of the loader of resources. Keeping a part of resources on the CDN can also speed up the download. If you use script tags on the HTML page, which is not the most desirable option, you can play around with the async / defer parameters of the script tag. Bear in mind that they are not supported by some browsers.

There is another method for loading resources, a design pattern called ‘lazy loading.’ With this approach, the necessary resources are loaded in the background, while the user performs certain actions.

Sound sprites

Just like with pictures you can use sprites for sounds. Sound sprites provide an advantage even though it is seen as controversial. A drawback with this approach is that you cannot use lazy or parallel loading of audio files. It therefore makes sense to combine techniques and use several sound sprites for certain parts or states of game logic.

FPS

The number of frames per second is a very important parameter that affects the smoothness of the game. It also impacts the user’s opinion of the product because a smooth game is what a user wants. If the FPS lags, nobody will play the game again. You need to look at where the game is going to be played, whether on a PC, tablet or a smart device and which kind of smart device, and then look at each device’s characteristics and capabilities. Always test your game on the weakest devices in your category and test your game on them. If you find that you have to abandon your good ideas for the normal operation of the application, then rather look at using divided assets.

Divide assets

With technology being developed every single day, new devices are coming out with incredible speed. It can be hard for new game developers when there are new screen resolutions and new and upgraded sets of hardware. But a developer does need to keep on top of this and know how to handle it. As a game developer who needs to keep up with ever changing technology, you need to use various sets of resources for devices with different performance levels and screen resolutions. You need to find a balance. High quality games must include a user-friendly interface, no matter what the platform or device is that is being used. You need to develop a unique interface for a PC, tablet and smartphone too.

Owners of high-end devices expect high quality games, and it is not just owners of high-end devices that want quality. Everyone wants quality. You find that games are trendy, and everyone is playing the same game at the same time, no matter what they are playing on. You need to develop a game that is high quality for all users.

Sometimes an even more detailed separation by browsers and versions of the operating system is required. It’s quite expensive in terms of time and resources but your users will appreciate it.

setInterval / setTimeout / while (1)

This is a tricky code to use in game development and we feel you should not use this code in games unless you are a hundred percent sure it is necessary. requestAnimationFrame was introduced and optimized specifically for the animation In HTML5 and this is a much better option to use. There are many other ready-made tools that use requestAnimationFrame and are bound to deltaTime. deltaTime is a time factor that is the variable of the time elapsed since the last frame. For example, for a function with a delayed call. You can use the delayedCall method from the GreenSock TweenMax library. Look for the good options and that will help you develop a game and keep your users happy.

Code minification and obfuscation

In the beginning of this article I referred to tricks and magic. Code magnification and obfuscation is one of those magic tricks that is applicable to all web applications, not just for games. It is logical in the final version, which will go to the user, to remove from the code all the formatting, comments, reduce the names of variables and methods to several letters. A lot of ready tools will help you with that and we suggest you look at the Closure compiler from Google.

The most important trick

Creating a game that will conquer the market is a long process. You need to research properly and do a lot of work but if you do it well, the rewards will be huge. You need to plan properly and be consistent. You have to come up with the best game design, best animations, best speed and sound, and you need to test everything thoroughly and carefully. Look at each aspect of the game individually. We suggest you divide the various aspects of the game between team members, or to do it with specially trained people who are professionals in their field.

Use specialists. You have a great idea for a game and you want it to work properly. It has a much better chance of being successful and becoming world famous if you work with the people who really understand gaming, Apps, development, devices and software.