I embedded Phaser3s’ canvas parent in a bootstrap table (FlexGrid) and am trying to get fullscreen and window resize to work as expected.
<main role="main" class="container">
<div class="container"> <div class="row"> <div class="col">
<!-- the problem doesn't occur without the bootstrap flexbox (i.e. when there's just this div) -->
<div id="phaser3MainView"></div>
</div></div></div>
</main>
There are three distinct approaches i’ve worked on.
First, i’ve tried to disable the ScaleManagers auto features and see what happens, but after returning from fullscreen, hit areas don’t seem to work anymore. Here’s a annotated example for that: https://codepen.io/gyzkard/pen/gJZxro
var config = { type: Phaser.AUTO, scale: {
mode: Phaser.Scale.NONE,
autoCenter: Phaser.Scale.Center.NO_CENTER,
zoom: Phaser.Scale.NO_ZOOM,
Second, i’ve tried to use the ScaleManagers auto features. I tested all combinations, but none worked for me. Here’s a annotated example for that: https://codepen.io/gyzkard/pen/EzGLEy
var config = { type: Phaser.AUTO, scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
zoom: Phaser.Scale.MAX_ZOOM,
Finally, i tried to come up with a custom solution and tried to work around the system. Here’s a annotated and working example: https://codepen.io/gyzkard/pen/PvXBxm
function getFullscreenSize()
{
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
return {x:x, y:y};
}
function calcZoom()
{
let x, y;
if (game.scale.isFullscreen) {
let size = getFullscreenSize();
x = size.x;
y = size.y;
} else {
x = Math.min(game.scale.canvas.parentNode.clientWidth, window.innerWidth);
y = Math.min(game.scale.canvas.parentNode.clientHeight, window.innerHeight);
}
let zoomH = x / game.config.width;
let zoomV = y / game.config.height;
return Math.min(zoomH, zoomV);
}
var lastZoom = 1;
window.onresize = function (event) {
let zoom = calcZoom();
game.scale.setZoom(zoom);
if (!game.scale.isFullscreen && zoom > lastZoom) {
game.scale.canvas.style.width = "8000px";
game.scale.canvas.style.height = "6000px";
setTimeout(function() {
let zoom = calcZoom();
game.scale.canvas.style.width = game.config.width * zoom + "px";
game.scale.canvas.style.height = game.config.height * zoom + "px";
lastZoom = zoom;
}, 1);
} else {
game.scale.canvas.style.width = game.config.width * zoom + "px";
game.scale.canvas.style.height = game.config.height * zoom + "px";
}
lastZoom = zoom;
if (game.scale.isFullscreen) {
let size = getFullscreenSize();
if (size.x > size.y) {
let offsetX = (size.x - size.y) / 2;
game.scale.canvas.style.marginLeft = offsetX / zoom + 'px';
game.scale.refresh();
}
} else {
game.scale.canvas.style.marginLeft = '0px';
game.scale.refresh();
}
};
Now my question is how this is ment to be solved.
The setup seems to clearly violate the “Parent and Display canvas containment guidelines” from Phaser-CE ( https://photonstorm.github.io/phaser-ce/Phaser.ScaleManager.html#toc-3 ) but there is nothing like that mentioned in the Phaser 3 notes ( https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/ ).
The hacks from the third approach seem to work, at least in the small test environments i played around with, but i’m wondering if that’s just luck and if there’s an actual painless solution for this kind of setup or if it’s as forbidden as it’s been for Phaser-CE.
I’m new to Phaser and not good with javascript, so please forgive me the maybe strange style.
Note: This same question has also been posted to html5gamedevs.