When you create a game, there are a lot of little details you have to look out for to ensure a great gaming experience for as much users as possible. Different users with different devices can all play your game, if you have built a responsive game, which can be displayed on different screen sizes and can work with different processors. Using HTML5 can be a relatively easy way to achieve this, if you are following some rules and know what to look out for.
Here are our tips for making your game responsive!
There are nearly as much different screen sizes as there are devices. From the 19inch-Gaming-Notebook with 1080p over your iPad with Retina Display to a 3 inch Smartphone display with low resolution. So: How do you fit your game to these different specifications?
First of all you should go for a fixed ratio to the canvas. 4:3 and 16:9 are the most common, so you should probably go with one of them. Next you have to decide what orientation suits your game best, landscape or portrait. We do not recommend working with fixed sizes in pixels, since it is not adaptable to different resolutions.
Once you have a ratio, take one dimension of the screen size of your device, e.g. the width and consequently carve the other dimension (in this case the length).
Here it is important to choose a size reference that identifies the actual size of the screen. In particular, it is recommended to use window.innerWidth and window.innerHeight as they provide the actual screen size.
In the viewport you can set the size of your window to fullscreen, by telling your device that the window has to be as big as the display with width=device-width.
Another important aspect is to disable any gesture that could hinder the enjoyment of the game. When playing a game it is very easy to trigger the zoom gesture by accident.
To disable zooming you can use user-scalable=no in the <head> for Android and iOS devices and -ms-touch-action: none for Windows Phone.
A final aspect to take care of is the rotation management. If you are using a framework like c2 it is possible and likely that this function is managed directly by itself. In case of manual coding, or in any case without the aid of a framework, you should capture the rotation by using window.resize rather than a listener.
By using the window.resize function, the device will compare innerWidth and innerHeight and tell us if the device is in landscape or portrait situation. This function offers a better compatibility but has the downside that it may take a second, if you are playing on an older device with not that much processor performance, because it may not have been updated on the current width and height.
Adapting your game to different devices today is much easier than it was a few years ago and it is no witchcraft to do so. But still you have to watch out for a lot of details and think about what you are coding. Our tips are of course no complete guide, but can hopefully show you some best practices and save you a little time, when you are despairing over why your code is not working.