Search the Community

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.