A framework approach to multi-screen, full-screen development

[richpixel]

Obviously dealing with multiple devices, screen resolutions, and orientations is a task we have to deal with in HTML5 game development.

 

What is Phaser's approach to making a game fit into available screen real-estate, resize events, and allowing or disallowing the different orientations (landscape, portrait)?

 

In most cases, I would like to be able to develop a game at a constant resolution - say 800x600, and then have some way for the canvas to be scaled - with or without aspect ratio being preserved - into a maximum area of the screen.

 

Just for fun I might imagine a 'Capabilities' object like Flash had to be able to query and/or set the following:

 

- isDesktop

- isIOS

- isAndroid

- fullScreen (read/write) - makes sure canvas is auto-scaled to fit the screen

- allowPortrait

- allowLandscape

- scaleToFit - used in conjunction with 'fullScreen' to let me scale the game on a mobile device - possible options are 'exactFit', 'aspectScale', 'noScale' (appropriate for desktop)

 

Internally, the framework would handle resize events and do any scaling and screen fitting based on the Capabilities. If the user changed the orientation, an alert might come up telling the user 'the game can only be played in landscape', etc.

 

Basically it would be great for a framework to handle these tasks that for me have so far been 'roll your own' headaches. If the framework were responsible for hiding the details of device and browser quirks related to screen sizing and placement - so we could focus on creating fun games and not fighting with all sorts of eccentric mobile browser implementations!

 

 

EDIT: I forgot to mention that some boilerplate CSS that helps center the canvas might be nice as well. Potentially the CSS could include breakpoints to handle various device sizes.

[rich]

Our approach is exactly how you've described it actually. Games are developed at a fixed resolution and then scaled to fit the device via the StageScaleMode class. There are events for device resizing, entering/leaving landscape/portrait and fullscreen API modes. You can set proportional scaling, or make it scale to all available space and to hell with the aspect ratio. There's canvas container page centering as well.

 

As for your 'Capabilities' object - look at Phaser.Device! (available via game.device anywhere in your game). It has all of those properties and a lot more (portrait and landscape are game.stage.scale related though, not Device related).

 

Have a look in the repository in the 'resources' folder and then "Project Templates / Basic". Here you'l find how to use all the above. Also if you look in the dev branch in the Project Templates folder you'll find a new template called "Full Screen Mobile" which goes even further. It includes boilerplate CSS, iOS app icons, etc.

[richpixel]

Awesome! Thanks I really need to take a look at Phaser