Search the Community

I codded this new website and it specializes in browser-based games where I write a full overview of a game and the users how played the game before getting the right to review it and rate it. I just want your opinion on the website layout is it good or not. the website is fully dynamic it renders all of the content from the database and sorted by the newly added games. Browser Games To Play Online For Free 2019 | OvOnGames

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 phaser.discourse.group