Making a game for both Desktop and Mobile

[Natman]

I'm entering an HTML5 game development contest that requires all games to run on both Desktop and Mobile browsers. There are several problems that are stumping me when setting up my game. If anyone can help me with any of these problems, it would be really helpful.

 

-Can I determine whether the game is being played from a computer or a mobile device at runtime, so I can execute different code for different platforms?

-Can I make my game run in a 640x480 window on Desktop, but run in fullscreen landscape on a mobile device, using the same resolution, scaled?

 

I've tried using game.stage.scale.startFullScreen() but it only works when triggered by a tap, never if I try putting it in the create() function to make the game start in full screen mode. Also, I don't want to allow players to disable full screen on mobile, and I don't want players have full screen mode at all on Desktop.

[Heppell08]

Boot.js can determine the device being used, then resolution can be set. Eg:

if(this.device.iOS) { // ios screen here }

if(this.device.android) { // android here }

[Natman]

Thanks, that's pretty helpful. I still can't get the game to enter automatically enter full screen mode on mobile (although I can get it to execute different code and I know that part works). So how do I get it to fill the whole screen and use landscape orientation?

 

Edit (more details): Because putting the startFullScreen() call in the create() function didn't work, I put it in update(), like this:

if (!initialized) {    if (!game.device.desktop) {        mobile = true;                    game.stage.fullScreenScaleMode = Phaser.StageScaleMode.EXACT_FIT;        game.stage.scale.startFullScreen();    }            initialized = true;}

Of course, even if this worked, it wouldn't put the game in landscape mode like I want.

 

Why does startFullScreen() work if I put it in a function attached to a touch input, but not in update() like above, anyway?

[pain_gwar]

If you want to enter in fullscreeen mode in the create() function try to use this code:

 

this.game.stage.fullScreenScaleMode = Phaser.StageScaleMode.EXACT_FIT;

this.game.stage.scale.startFullScreen();

this.game.stage.scale.setShowAll();

this.game.stage.scale.refresh();

 

For the orientation you can use this:

 

this.game.stage.scale.forceOrientation(true, false);

this.game.stage.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);

this.game.stage.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);

 

and then manage the behaviour in the "enterIncorrectOrientation" and "leaveIncorrectOrientation" function

[Natman]

After making those changes I still don't get the precise behavior that I want. You can see the results here:

http://nathanielnelson.com/webgames/BricketySplit

 

I currently have it set up to attempt to go full screen on both desktop and mobile. When I run the game from my desktop, the resolution scales to fill the browser vertically without entering a real full screen mode. When I run it on my phone, the resolution scales to fill the browser horizontally. It does not actually enter landscape mode or full screen.

 

Here is the code I have in create() right now:

game.stage.fullScreenScaleMode = Phaser.StageScaleMode.EXACT_FIT;        game.stage.scale.forceOrientation(true, false);game.stage.scale.enterIncorrectOrientation.add(enterIncorrectOrientation, this);game.stage.scale.leaveIncorrectOrientation.add(leaveIncorrectOrientation, this);game.stage.scale.startFullScreen();        game.stage.scale.setShowAll();game.stage.scale.refresh();

[Natman]

*Bump* still looking for an answer on this one.

[dnassler]

Fullscreen behaviour .... I don't think I'm an expert but have figured out a few things in the last month... see:

 

http://www.html5gamedevs.com/topic/4462-full-screen-confusion/#entry27686

 

I tried calling 

 

game.stage.scale.startFullScreen()

 

in the game create method and it didn't work (phaser 1.6). But it does work (on desktop/laptop browsers) if it is done afterwords like from a callback from a keyboard event. Maybe a timer callback would work too although I have not yet tried that. But it has no effect for mobile as far as I see (just look at the link above for mobile suggestion at least for iOS).

 

As far as forcing orientation goes I cannot help you with that yet as I've not been too worried about that for webApps at least. I figured I'd let the user flip the phone until it looks good! But I did try to create a Phonegap APP from my game and when doing that used Apple's XCode environment to set the orientation as one of the build settings.

[Natman]

I could even work without true full screen if I could find the width and height of the mobile device in order to just scale the resolution. My game has to work on all mobile devices, unfortunately.

[dnassler]

See my post at the bottom of this link: http://www.html5gamedevs.com/topic/1380-how-to-scale-entire-game-up/

 

You just can choose your resolution then set Phaser to Scale show all basically. The only thing is that there will be black bars on devices that have different aspect ratios from your chosen game ratio. There are ways around that.  I'm not sure of the best way to solve the black bar issue is though. But you can have a look at the link to see how to query for the device size. There are a few ways but in the index.html you can just ask for:

 

window.innerWidth

window.innerHeight

and multiply these numbers by: window.devicePixelRatio

[Natman]

Alright, your solution from that post worked! Thanks a lot. There is letterboxing, and the player has to rotate their own device to landscape but I'm okay with these minor issues.