HappinessSam

Phaser full screen mobile + Cordova

Recommended Posts

I have been building a game, using the Phaser full screen mobile template as my starting block. My intention was to create a game that could have a web version but that could also be packaged as an app by using Cordova.

So far it's been going well and I'm reasonably close to an alpha release and it works fine on desktop but I've been having trouble getting the scaling right on mobile. I've package the game in Cordova as a full screen app but the game seems to initally be getting fed incorrect information about the dimension of the screen, leading to the bottom the height being too large cutting off the bottom. I have tried forcing the player to enter full screen and this works (I should stress that the app is already a full screen app, I am just using game.scale.startFullScreen to make it use the fullscreen API), but if the user clicks hits the hardware back button they exits fullscreen and the game is again cut off. Yes, I have prevented the default backbutton action but it still seems to exit fullscreen.

At the moment my workaround is to have the game catch the fullscreen exit and pause the game to the user can click to reenter full screen but I don't think this is a good experience and I feel I must be missing something or doing something wrong. Is there a way to change the settings so that the sizes are consistent and correct and it shows the whole phaser game canvas all the time, whether in fullscreen or not?

To show what I mean I have created this project: http://utterlysuperb.com/dev/js/fsm/. All it is is the full screen mobile template with a background image that takes up the whole game and a button to toggle between fullscreen and a console.log of the width+height when resize is triggered. On desktop it's fine, but if I view it on mobile, whether through inspecting chrome or using the mobile dev tools to spoof a mobile it cuts off the bottom and requires scrolling when not in fullscreen. This is also the case if it is wrapped up in Cordova.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.