Full Screen from fixed height, width container

Phaser 3
1

Hello,

I am making my first simple phaser3 game, and the last thing I tried to do was full screen. Up to this it had been a nice 800 width by 600 size on the page, and I wanted to maintain this, but also have people switch to full screen if they liked.

if I set the scale mode, it doesn’t seem to respect the height and width, it just scales to whatever the parent allows. It does some strange things too, jittering as if it is trying to figure out the right size, and scaling very small after full screen. The only way I could sort of replicate it was to set scaling to None here, though in the game it is FIT. You see it after full screen https://jsfiddle.net/vywL05hk/

To get around this I try to set a height and width on the parent, then when I go full screen it just sites in a corner, as per this fiddle https://jsfiddle.net/kcmbq4tf/1/

Any ideas what I am doing wrong? I note a couple of examples I saw, the game was in an iframe, is thath the way to go?

Cameron

2

OK I’ll just log my travels here and maybe if I figure it out someone else will find it helpful.

The first fiddle above’s behaviour has changed, so now I’m getting a weird thing where it is often only the top half in full screen, though what appears to be the top half could just be the height specified for the container.

Next thing I tried is manually resizing using js:

document.getElementById(this.config.scale.parent).style.height = this.config.scale.height + ‘px’;

Which you can see in this fiddle almost works.

https://jsfiddle.net/wyhueL03/1/

3

OK so I think the only way I can figure out how do to this is in an iframe, that is what the examples do, that is what this post does https://www.emanueleferonato.com/2019/02/06/give-your-html5-games-a-full-screen-option-and-manage-game-scaling-and-resizing-in-a-couple-of-lines-of-code-thanks-to-phaser-3-version-3-16/

Cest la vie.