HTML5 canvas resize not reported to engine (SOLVED)

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?

They should also be updated. How are you resizing the canvas? By actually setting the size on the canvas element or changing it through CSS?

I tested both, and neither worked right. In the HTML example above is a CSS attempt. Some specific values Defold listens to only?

Post a working example of it done the right way so the engine gets the canvas size back as the actual browser window is resized?

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?

Thank you for the info!

Canvas width / height cannot be set with CSS for this to work. It must be set directly in the tag values for the engine to see them.

function resize_game_canvas() {
var app_continer = document.getElementById('app-container');
app_continer.style.width = window.innerWidth;
app_continer.style.height = window.innerHeight;

var game_canvas = document.getElementById('canvas');
game_canvas.width = window.innerWidth;
game_canvas.height = window.innerHeight;
}

resize_game_canvas();

window.addEventListener('resize', resize_game_canvas, false);
window.addEventListener('orientationchange', resize_game_canvas, false);

This works! Also I think a mistake I made earlier was using the wrong render script. :disappointed_relieved:

Here is the example uploaded here to show it working: https://www.bookofdefold.com/examples/FullWindowCanvas/

It should work “well” on mobile devices too, and handle orientation change for web apps.

4 Likes

Nice! It seems to work perfectly.

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.

Thanks.

this happens only when I reduce the size in the fullscreen HTMLmode when I resize bigger, the images turn blur but almost with the same aspect. :s

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?

What “Adjust Mode” is set for the GUI scene? If you click on the root GUI node in the outline of your GUI scene, it should say “Per Node”:

Does it work correctly if you run it natively, just selecting “Build and Launch” in the “Project” menu?

2 Likes

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. :thumbsup:

If you want to invite me to the projects; sven.andersson@king.com

2 Likes

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?

1 Like

sorry, its just with html5. Thanks for your help :slight_smile: