Been meaning to try this again after the HTML5 build improvements.
As the game’s canvas is resized, the size needs to reported back to the engine as the screen/window size. Maybe I’m doing something wrong? Maybe having the window.innerWidth and window.innerHeight JS values available in HTML5 builds would be enough? Getting the actual width and height though of the canvas should work.
Or add another function like Module.toggleFullscreen() but as something to tell the game that its canvas is going to be resized? Module.toggleFullscreenCanvas() ?
HTML I’m testing with. @britzl Try with your fixed aspect ratio test?
Also @britzl mouse click events break in HTML5 with the fixed aspect ratio example build when fullscreen. Just resizing the canvas size in the vanilla HTML is enough to break clicks.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>PublicExamples 0.0</title>
<style>
.canvas-app-container {
background: rgb(255,255,255) no-repeat center url("try_game.png");
/* A positioned parent for loading visuals */
position: relative;
}
.canvas-app-container:-webkit-full-screen {
/* Auto width and height in Safari/Chrome fullscreen. */
width: auto;
height: auto;
}
.canvas-app-progress {
position: absolute;
background-color: rgb(245, 245, 245);
height: 20px;
/* Progress same width as canvas. */
width: 640px;
bottom: 0px;
}
.canvas-app-progress-bar {
font-size: 12px;
height: 20px;
color: rgb(255, 255, 255);
background-color: rgb(30, 100, 234);
text-align: center;
line-height: 20px;
}
.button {
color: #fff;
background-color: #1e64ea;
border-color: transparent;
padding: 10px 20px;
}
* { margin:0; padding:0; }
html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
canvas {
height: 100vh;
width: 100vw;
display: block;
}
.app-container {
height: 100vh;
width: 100vw;
display: block;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<div id="app-container" class="canvas-app-container">
<canvas id="canvas" class="canvas-app-canvas" tabindex="1"></canvas>
</div>
<!-- -->
<script type='text/javascript' src="dmloader.js"></script>
<script type='text/javascript' src="PublicExamples.js" async onload=""></script>
<!-- -->
<script type='text/javascript'>
var extra_params = {
archive_location_filter: function( path ) {
return ("archive" + path + "");
},
engine_arguments: ["--verify-graphics-calls=false"],
splash_image: "splash_image.png",
custom_heap_size: 268435456
}
Module.runApp("canvas", extra_params);
</script>
</body>
</html>