Jump to content

How to properly go "Fullscreen"


christian.tucker
 Share

Recommended Posts

By "Full-screen" I mean to just take up the entire browser.  The goal of my game is to work on both mobile devices and desktops, and it does!(Ofcourse, it's html5, lol). However, the problem is with the sizing on my phone. The canvas is much larger than the actual window and I can't move around or zoom out any, not to mention the huge "blank area" that's there for absolutely no reason. 

 

Screenshot from mobile:

 

d4a08bb21307e19b556e3d048a63ac46.png

 

Notice the large area on the left?

 

Here's the code I'm using for fullscreen, it may be wrong. (Uses JQuery)

window.onload{    var width = $(window).width();    var height = $(window).height();    var game = new Phaser.Game(width, height, Phaser.AUTO, 'game');    game.state.add('preloadState', preloadState);    game.state.add('loginState', loginState);    game.state.add('cityState', cityState);    game.state.start('preloadState');}

My over-all goal is to create a seperate UI for mobile/desktop and display them based on what device type they're on, but for now I need to figure this out properly. 

 

On the computer, this goes "fullscreen" perfectly fine. -- Not using the fullscreen API 

Link to comment
Share on other sites

Going fullscreen on mobile is much more complex than on desktop. There are lot's of glitches to take care for. The first thing you should start at is looking for "viewport" tutorials. Also, keep you screen size in mind. Right now it looks like you designed the screen in 4:3 aspect ratio. That won't work on mobile, except on an iPad or other devices using 4:3 ratio. You have to decide for a strategy how to span to different screen sizes like 21:9, 16:9 etc.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...