vcarluer Posted September 2, 2014 Share Posted September 2, 2014 Hi, I'm trying to have an application template which handle properly device orientation and fullscreen.I've started with the project template in phaser : https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Full%20Screen%20MobileThe problem is that it does not work (anymore?) with chrome on Android device: navigation bar is always shown. It works with firefox on Android.So my idea was to use the full screen mode. It can only be triggered with an user action so I've plugged it on the game start button, so the game is not fullscreen from start.And with the fullscreen mode, the device orientation recognition with the hidden div telling to rotate the device does not work anymore. My question is : what do you use to do this?Fullscreen at some point in the game + working device rotation recoginitionORyou don't bother with this, it's OK to have the navigation bar on chrome...ORother? Link to comment Share on other sites More sharing options...
eguneys Posted September 2, 2014 Share Posted September 2, 2014 You mean, you can make the game fullscreen but when it is, device orientation doesn't work anymore, is that right? Link to comment Share on other sites More sharing options...
vcarluer Posted September 2, 2014 Author Share Posted September 2, 2014 Yes this is it.it does not work anymore the way it is handled in https://github.com/photonstorm/phaser/tree/master/resources/Project%20Templates/Full%20Screen%20MobileIt uses an hidden div with id "orientation" with this image in background: https://github.com/photonstorm/phaser/blob/master/resources/Project%20Templates/Full%20Screen%20Mobile/images/orientation.jpgthis div is shown when the orientation is not the good one (css display = block).I have idea how to make it works (with a sprite in the main game div) but I don't know if I need to do it + fullscreen (real one with a call to this.scale.startFullScreen()) does not work immediatly, a button must be clicked and I don't like it very much.I would have prefer to make work the same mechanism as in the template project but I can't make it work with chrome on Android: navigation bar does not hide. Link to comment Share on other sites More sharing options...
eguneys Posted September 2, 2014 Share Posted September 2, 2014 can you post some example code from your project. I use this piece of code, and it is working fine, It goes full screen and device orientation works, and I don't see any navigation bar.goFullScreen: function() { this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; if (this.game.scale.isFullScreen) { this.game.scale.stopFullScreen(); } else { this.game.scale.startFullScreen(); }} Link to comment Share on other sites More sharing options...
vcarluer Posted September 11, 2014 Author Share Posted September 11, 2014 OK I managed to make it works on Android + IPhone with device orientation check.I don't use startFullScreen anymore, after a lot of trials, the following code works quite well (some pixels can be lost at the bottom so I manage it in game design) :create: function () { this.input.maxPointers = 1; this.stage.disableVisibilityChange = true; BasicGame.orientated = true; this.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT; this.scale.minWidth = this.game.width / 2; this.scale.minHeight = this.game.height / 2; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; if (this.game.device.desktop) { this.scale.maxWidth = this.game.width; this.scale.maxHeight = this.game.height; this.scale.setScreenSize(true); } else { this.scale.maxWidth = this.game.width * 2.5; this.scale.maxHeight = this.game.height * 2.5; this.scale.forceOrientation(false, true); this.scale.hasResized.add(this.gameResized, this); this.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this); this.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this); this.scale.setScreenSize(true); } this.state.start('CheckOrientation'); },Device orientation hint is handled as in Phaser full screen template project with an hidden div.<body> <div id="game"></div> <div id="orientation"></div>enterIncorrectOrientation: function () { BasicGame.orientated = false; document.getElementById('orientation').style.display = 'block'; }, leaveIncorrectOrientation: function () { BasicGame.orientated = true; document.getElementById('orientation').style.display = 'none'; this.scale.setScreenSize(true); }I call again setScreenSizeTrue in leaveIncorrectOrientation, which is not done in phaser template I think. I hope this will help some people with the same issues. Link to comment Share on other sites More sharing options...
totor Posted September 11, 2014 Share Posted September 11, 2014 Could you post a working example? thanks! Link to comment Share on other sites More sharing options...
vcarluer Posted September 11, 2014 Author Share Posted September 11, 2014 Yes of course. I am trying to make a template for simple HTML5 games. It's not finished at all but you will find this working part in it. There is still a lot of magic number in the code.The source code: https://bitbucket.org/vcarluer/html5gaverttemplateLive example: http://www.gamersassociate.com/html5/vert/ In Android Chrome: It fits below the address bar, no page scroll, some bottom of the game screen is lost.In Android Firefox: It does not fit directly on screen, it fits without the address bar, so it may cause problem with gesture because page can be scroll downIn Safari IPhone 4 & 5: It fits perfectly below the address bar (I've not done a lot of tests with it, have to buy one...). No page scroll, none of the game screen is lost I think. You can rotate the phone in portrait mode before or after the game loading. When you come back to portrait mode it fits the same way it was (this was what I tried to achieved first). Tell me if you find bugs, I'm chasing them for now. This coding part is painful and it does not generates a lot of code, but it's important to find the right match! vohogames 1 Link to comment Share on other sites More sharing options...
Recommended Posts