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>
Are you talking about the window.set_listener() callback? Yes, that should report the new size in the data table. Don’t you get any callbacks when resizing?
I will test with this. The older script uses the information available to the render script by default - render.get_window_width() render.get_window_height() - shouldn’t these be updated when a canvas is resized too?
Well, the working example is just that example code given in the documentation. Then, when resizing the canvas element, you can test in the debug view of the browser (I’ve tested chrome, safari, ie, edge & firefox). Simply change the width or height elements, and the callback will be triggered.
Now, for resizing the content based on the browser window size, I’m not sure how to do that, other than specifying something like width="50%", but this seems (in our case) to give it a size of 50 pixels.
Maybe you can use <body onresize="myFunction()"> (link) to set the canvas size?
Hi guys!
When I resize the fullscreen html build, the GUI elements are static (not changing its size and position) and the other elements are being resized so this breaks the game aspect. Is there an option to disable the fullscreen resize? resizing the GUI elements (GUI elements with the same resize behavior than no GUI elements) will help me too.
This sounds really strange. @sven has a pretty good insight into the HTML5 wrapper code and whatever goes on when then screen is resized. Sven, any ideas?
It said “root”.I already changed all my GUIs to per node but the problem is still there.
when I run it natively clicking build and launch it works fine.
Would it be possible for you to share a repro case? Either invite me to the project, or upload a zipped version here. Explain the steps you do to resize the window (or if setting fullscreen) and which browser and OS.
Thanks a lot guys I realized what is the problem, the project is using the aspect ratio render https://github.com/britzl/publicexamples/tree/master/examples/fixed_aspect_ratio
but it looks like the render script is not working in HTML or linux build. @britzl Is this working in HTML? just the GUI elements are locked but all the other game objects are resized in full screen mode.
I’m back at the office on Monday. I can check then. I can understand if there might be issues on html5, but not on Linux. What kind of problem do you have on Linux?
