sigonasr2
/
olcPixelGameEngine
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

emscripten resizer overhaul!

Browse Source
develop
Moros1138 2 years ago
parent 3280f71307
commit df9595d19a
1 changed files with 80 additions and 98 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 152
      olcPixelGameEngine.h

152
olcPixelGameEngine.h
Unescape View File

@ -197,7 +197,7 @@
Author Author
~~~~~~ ~~~~~~
David Barr, aka javidx9, ©OneLoneCoder 2018, 2019, 2020, 2021, 2022 David Barr, aka javidx9, <EFBFBD>OneLoneCoder 2018, 2019, 2020, 2021, 2022
*/ */
#pragma endregion #pragma endregion
@ -5817,118 +5817,100 @@ namespace olc
// the giant web baby. // the giant web baby.
// Fullscreen and Resize Observers
EM_ASM({ EM_ASM({
// cache for reuse // olc_ApsectRatio
Module._olc_EmscriptenShellCss = "width: 100%; height: 70vh; margin-left: auto; margin-right: auto;"; //
// Used by olc_ResizeHandler to calculate the viewport from the
// dimensions of the canvas container's element.
Module.olc_AspectRatio = $0 / $1;
// width / height = aspect ratio // HACK ALERT!
Module._olc_WindowAspectRatio = $0 / $1; //
Module.canvas.parentNode.addEventListener("resize", function(e) { // Here we assume any html shell that uses 3 or more instance of the class "emscripten"
// is using one of the default or minimal emscripten page layouts
Module.olc_AssumeDefaultShells = (document.querySelectorAll('.emscripten').length >= 3) ? true : false;
if (e.defaultPrevented) { e.stopPropagation(); return; } // olc_ResizeHandler
var viewWidth = e.detail.width; //
var viewHeight = e.detail.width / Module._olc_WindowAspectRatio; // Used by olc_Init, and is called when a resize observer and fullscreenchange event is triggered.
if (viewHeight > e.detail.height) var olc_ResizeHandler = function()
{ {
viewHeight = e.detail.height; // are we in fullscreen mode?
viewWidth = e.detail.height * Module._olc_WindowAspectRatio; let isFullscreen = (document.fullscreenElement != null);
}
if (Module.canvas.parentNode.className == 'emscripten_border') // get the width of the containing element
Module.canvas.parentNode.style.cssText = Module._olc_EmscriptenShellCss + " width: " + viewWidth.toString() + "px; height: " + viewHeight.toString() + "px;"; let width = (isFullscreen || !Module.olc_AssumeDefaultShells) ? window.innerWidth : Module.canvas.parentNode.clientWidth;
let height = (isFullscreen || !Module.olc_AssumeDefaultShells) ? window.innerHeight : Module.canvas.parentNode.clientHeight;
Module.canvas.setAttribute("width", viewWidth); // calculate the expected viewport size
Module.canvas.setAttribute("height", viewHeight); let viewWidth = width;
let viewHeight = width / Module.olc_AspectRatio;
if (document.fullscreenElement != null) // if we're taller than the containing element, recalculate based on height
if(viewHeight > height)
{ {
var top = (e.detail.height - viewHeight) / 2; viewWidth = height * Module.olc_AspectRatio;
var left = (e.detail.width - viewWidth) / 2; viewHeight = height;
Module.canvas.style.position = "fixed";
Module.canvas.style.top = top.toString() + "px";
Module.canvas.style.left = left.toString() + "px";
Module.canvas.style.width = "";
Module.canvas.style.height = "";
} }
// trigger PGE update // ensure resulting viewport is in integer space
Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight); viewWidth = parseInt(viewWidth);
// this is really only needed when enter/exiting fullscreen viewHeight = parseInt(viewHeight);
Module.canvas.focus();
// prevent this event from ever affecting the document beyond this element
e.stopPropagation();
});
// helper function to prevent repeating the same code everywhere
Module._olc_ResizeCanvas = function()
{
// yes, we still have to wait, sigh..
setTimeout(function() setTimeout(function()
{ {
// if default template, stretch width as well // if default shells, apply default styles
if (Module.canvas.parentNode.className == 'emscripten_border') if(Module.olc_AssumeDefaultShells)
Module.canvas.parentNode.style.cssText = Module._olc_EmscriptenShellCss; Module.canvas.parentNode.setAttribute('style', 'width: 100%; height: 70vh; margin-left: auto; margin-right: auto;');
// override it's styling so we can get it's stretched size // apply viewport dimensions to teh canvas
Module.canvas.style.cssText = "width: 100%; height: 100%; outline: none;"; Module.canvas.setAttribute('width', viewWidth);
Module.canvas.setAttribute('height', viewHeight);
Module.canvas.setAttribute('style', `width: ${viewWidth}px; height: ${viewHeight}px;`);
// setup custom resize event // update the PGE window size
var resizeEvent = new CustomEvent('resize', Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight);
{
detail: {
width: Module.canvas.clientWidth,
height : Module.canvas.clientHeight
},
bubbles : true,
cancelable : true
});
// trigger custom resize event on canvas element // force focus on our PGE canvas
Module.canvas.dispatchEvent(resizeEvent); Module.canvas.focus();
}, 50); }, 200);
}; };
// Disable Refresh Gesture on mobile // olc_Init
document.body.style.cssText += " overscroll-behavior-y: contain;"; //
// set up resize observer and fullscreenchange event handler
if (Module.canvas.parentNode.className == 'emscripten_border') var olc_Init = function()
{
if(Module.olc_AspectRatio === undefined)
{ {
// force body to have no margin in emscripten's minimal shell setTimeout(function() { Module.olc_Init(); }, 50);
document.body.style.margin = "0"; return;
Module.canvas.parentNode.style.cssText = Module._olc_EmscriptenShellCss;
} }
Module._olc_ResizeCanvas(); let resizeObserver = new ResizeObserver(function(entries)
// observe and react to resizing of the container element
var resizeObserver = new ResizeObserver(function(entries) {Module._olc_ResizeCanvas();}).observe(Module.canvas.parentNode);
// observe and react to changes that occur when entering/exiting fullscreen
var mutationObserver = new MutationObserver(function(mutationsList, observer)
{
// a change has occurred, let's check them out!
for (var i = 0; i < mutationsList.length; i++)
{ {
// cycle through all of the newly added elements Module.olc_ResizeHandler();
for (var j = 0; j < mutationsList[i].addedNodes.length; j++) }).observe(Module.canvas.parentNode);
let mutationObserver = new MutationObserver(function(mutationsList, observer)
{ {
// if this element is a our canvas, trigger resize setTimeout(function() { Module.olc_ResizeHandler(); }, 200);
if (mutationsList[i].addedNodes[j].id == 'canvas') }).observe(Module.canvas.parentNode, { attributes: false, childList: true, subtree: false });
Module._olc_ResizeCanvas();
} window.addEventListener('fullscreenchange', function(e)
}
}).observe(Module.canvas.parentNode,
{ {
attributes: false, setTimeout(function() { Module.olc_ResizeHandler();}, 200);
childList : true,
subtree : false
}); });
};
// set up hooks
Module.olc_ResizeHandler = (Module.olc_ResizeHandler != undefined) ? Module.olc_ResizeHandler : olc_ResizeHandler;
Module.olc_Init = (Module.olc_Init != undefined) ? Module.olc_Init : olc_Init;
// add resize listener on window // run everything!
window.addEventListener("resize", function(e) { Module._olc_ResizeCanvas(); }); Module.olc_Init();
}, vWindowSize.x, vWindowSize.y); // Fullscreen and Resize Observers }, vWindowSize.x, vWindowSize.y); // Fullscreen and Resize Observers
#pragma warning restore format #pragma warning restore format

Write Preview
Loading…
Cancel
Save