
There are a myriad of ways to deal with resizing your game for devices, and they all depend on how the game is built (canvas or DOM). You don’t want to squeeze a tiny game into the middle of an iPad screen for example, and as they’ve typically got the processing power to take advantage of pushing more pixels around it’d be wise to use that. I’m not going to labour on this point for long, but depending on the game you should almost certainly expect to be creating two sets of assets: SD (low resolution) and HD (high resolution) and dynamically load them based on device capabilities. It may also save you precious design time later on if your designers know up-front they shouldn’t use device resolutions as their template.Ģ) Different graphics for Low Res and High Res Devices
#Zwoptex windows full#
If you don’t they may assume the game is going to be full screen ‘just like a normal app’ when in reality it won’t.


Handy tip: If you’re going to mock-up screen shots for your client, make sure you do so with the browser UI visible. Stats from one of our own titles shows a staggering 4,000+ different reported resolutions. And whatever you do, don’t assume that everyone will be playing your game at the same resolution. In short you should plan your game like you’d plan a presentation for an overhead projector: don’t put crucial information or items such as the “Play” button near the edges.
#Zwoptex windows android#
In portrait mode this gives you a visible area of 416px once you have scrolled the URL bar out of the way and a paltry 268px in landscape mode, less than the 8 year old Nintendo DS. On iPads, Android phones and tablets such as the Kindle Fire this changes again. For example on an iPhone 3 you will lose the top 20px to the status bar and the bottom 44px to the navigation controls, neither of which can be removed in default browsing mode. However before you start resizing graphics always factor in how much room the browser UI will take-up. This caters for iPhone 3 and older Android handsets. The base minimum you are likely to need to support is 320 x 480 (portrait) or 480 x 320 if the game will be in landscape. And needless to say, these don’t often play nicely with mobile resolutions.

From the classic 550 x 400 to more modern 800 x 600 and above. After all Flash is still plenty strong enough on Desktop, so our work has been in taking popular games designed for desktop and porting them ‘down’ to mobile browsers. As you’d expect the most immediate problem is that depending on how old the games are they can vary in size dramatically. 1) One Size Doesn’t Fit AllĮvery game we’ve done so far has been converted with the mobile web in mind. Hopefully some of these can help you, and if you’ve got any others you would recommend then please leave a comment. So for fellow developers doing the same as us here is a list of our favourite tips, tools and libraries. And having just finished our 9th conversion we’ve learnt a number of lessons along the way. As well as making our own games we also convert Flash games to HTML5 for clients.
