In my previous posts on responsive Phaser game (part1, part2, part3) I used RESIZE scale mode for making game reponsive. RESIZE mode needed quite some handling whenever screen was resized. For example position of individual controls were required to be recalculated. Moving tweens were also something which required special handling on resize. It serves better for desktop games in which you can support different aspect ratios.
I planned to compile and publish my next game to Android play store which made me also look into SHOW_ALL scale mode. SHOW_ALL handles resizing automatically and does not have a resize method for moving controls around on resize. The only limitation is that it fixes the aspect ratio of the game canvas and when game screen is resized, it resizes game canvas in the same aspect ratio. It might be a problem for desktop games where browser window can be resized to any proportion but mobile games which take full mobile screen should be good for a specific orientation. If we are using SHOW_ALL scale mode then we should target only one orientation (Landscape or Portrait).
I recently wrote a game (Train Dominoes) targeted for desktop. After finishing the game I felt that I can also target the game for mobile devices and distribute as a mobile app. Compiling HTML5 game for Android or iOS is pretty straight-forward and I already wrote an article on using Intel XDK for compiling HTML5 game for Android.
The desktop version of the HTML5 game was built for a resolution of 1350×900. I did a quick compilation of the game to Android and was pleased to see that the game worked very well on my high-end mobile devices. The problem though was the crappy devices which I keep just for testing the performance of my games, it would simply not run. The performance on those crappy devices were horrible. Running a few parallel tweens would make the game stop on those devices and I suspected that it also had something to do with the resolution I made the game for so I started the quest to make the game work on my crappy devices.
As a side note, if I open the game simply in the browser on those crappy devices, it had a decent performance and will at least run but the moment I compile it to Android app using Cordova-CLI, it will have a horrible performance so somewhere it was the problem with Mobile WebView as well which hybrid mobile apps run under. I looked into the solution on both fronts; first – optimizing the game code and second – see what is available at the platform level to optimize the performance.
The first option which I looked into was to use Intel Crosswalk, which went well and the game was running very well on my crappy devices but the APK size went up from 2.5MB to 30MB when I used Intel Crosswalk. I think that will be the last option I would take once I have exhausted all other options to optimize the game for mobile. Also, Intel has stopped the developement and support for Crosswalk project so it does not make any sense to use it any further unless, open source community picks up the code from Intel which is available and actively maintains it.
The next step was to optmize the resolution game was built for. I would pick 960×640 as a standard for the game which falls in the middle of lower and higher resoltions. A lot of developers are developing HTML5 games for 480×320 (or similar resolutions for different aspect ratios) for which I had to resize my assets 1/4 of the original size. I happily did that, compiled the game and checked the performance. The performance on my crappy devices was much better than 1350×900 but the resolution on my high-end devices didn’t look nice (or say crisp enough) so I went for the middle resolution of 960×640. My crappy devices were doing okay with 960×640 (except the tweens which won’t run if maultiple tweens are to run in parallel no matter how low I select the game resolution to) so I decided 960×640 to be the base resolution I would do for crappy ones and then I would go for the original 1350×900 for devices with better processing power which means I am going for multiple resolutions and will keep my original game for devices which have good processing power and can handle the game well on higher resolution.
In the next article we will fix resolutions for the game and would look at the calculation of game canvas size. In the meanwhile you can go through some interesting facts on game resolutions being used by the game developers.
Resources:
http://www.html5gamedevs.com/topic/1112-what-is-the-best-resolution-for-a-html5-game/