{"id":38,"date":"2017-03-29T05:49:08","date_gmt":"2017-03-29T05:49:08","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=38"},"modified":"2017-11-06T19:33:45","modified_gmt":"2017-11-06T19:33:45","slug":"making-of-a-responsive-game-in-phaser-part-1","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/making-of-a-responsive-game-in-phaser-part-1\/","title":{"rendered":"Making of a responsive game in Phaser: Part 1"},"content":{"rendered":"

I first started reading about Phaser<\/a>\u00a0around 5 months back and since then I have been planning to write games in Phaser. After studying some material online I finally decided to write a few games to get used to the framework. I wrote a few\u00a0games which were more like practice games and then started digging further\u00a0into it to make something more polished. Finally\u00a0I decided to write a game and publish a series of articles\u00a0as I encountered scenarios which I wanted to manage in the game but\u00a0could not find enough tutorials for help.<\/p>\n

Scaling the game<\/strong><\/h3>\n

A very basic\u00a0requirement for HTML5 games is to be able to scale to the resolution of the device on which the game is running. Since HTML5 games can run both on pc as well as mobile, there are thousands of resolutions and aspect ratios which the game needs to support. Now this is somewhat hardest part of the development process. I decided to make a game which is\u00a0responsive, adapts to the screen resolution on both pc as well as mobile, and works for\u00a0both orientations (Portrait as well as Landscape) in mobile. It did not turn out to be a trivial solution.\u00a0There is some material available on internet which mostly talks about the concepts but there is not much\u00a0available out-of-the-box to use and there is no one solution which can be used in handle it. There are solutions which fit into one type of games but would not work for another. It entirely depends on the requirements of a specific game.<\/p>\n

Phaser has built-in support for scaling a\u00a0game to fit size of the device. The\u00a0ScaleManager in Phaser has a few options to scale a\u00a0game out-of-the-box. One such option is to\u00a0use\u00a0SHOW_ALL<\/em> property which resizes the game to fit into available space using the same aspect ratio which was used to develop the game. If the device has a different aspect ratio compared to the game, then after resizing there is going to be some blank space\u00a0either around horizontal sides or the vertical sides depending upon which of the two\u00a0aspect ratios is higher (game vs device). This is known as “letter boxing” effect. This option is easiest to use and does not need developer to do anything special. Just set the property and let Phaser handle everything else. Everything gets scaled up or down in the same ratio so the game looks fine for all resolutions. The blank bars indeed don’t look nice and need some more work to blend the game into the background. Easiest option would be to set a background\u00a0in HTML which would simply blend with the game background and everything would look perfect. Another\u00a0scaling mode using EXACT_FIT<\/em> does not maintain the aspect ratio which means the game will be distorted.<\/p>\n

The third option is to use RESIZE<\/em> mode which creates canvas element for the game that is the same size as the parent container. This needs handling of the various\u00a0elements in the game itself and that is the mode which can\u00a0be used for making games truly responsive.\u00a0We are going to explore\u00a0RESIZE<\/em> scale mode which has an extra feature of “Resize callback” that other scaling modes don’t. If our state has a “resize” method, it will be called every time size of the parent changes (change of orientation on mobile or, change of browser window size on pc).<\/p>\n