HTML5 build full screen pixelated on HiDPI displays (DEF-2396)(SOLVED)

#1

Hi!

Calling Module.toggleFullscreen() in the HTML5 build correctly enters full screen on hidpi devices (Android Chrome), but doesn’t multiply canvas.width and canvas.height with window.devicePixelRatio || 1.

The change needs to be operated in _glfwSwapBuffers() and onFullScreenEventChange().

2 Likes

#2

Thank you for reporting this. I believe this is the same issue as this one right? How to get better quality web render?

0 Likes

#3

Not really. You can get good results in windowed mode if you do what that issue recommends (set the canvas size with css and the canvas’s backing size with Module.setCanvasSize), but specifically in full screen mode you don’t have good control and the engine needs to accomodate for that.

0 Likes

#4

I’ve added your info to the same ticket as I believe they should be solved together. If @sven doesn’t agree with me we’ll split it into two issues and update this post.

4 Likes

#5

@dapetcu21 did you find a work around?

–>The change needs to be operated in _glfwSwapBuffers() and onFullScreenEventChange().

can you plse expand on this?

Thanks!

0 Likes

Look Your Loot aka Hamster
#6

My template for resizable HTML5 canvas for mobile and PC:

<!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="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no,width=device-width,minimal-ui" />
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

		<title>Hamster 0.2 beta</title>
        <style>
			.canvas-app-container {
			  /* A positioned parent for loading visuals */
                width: 100%;
                height: 100%;
                position: absolute;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                background: #0e1618;
			}

			.canvas-app-progress {
			  position: absolute;
			  background-color: rgb(245, 245, 245);
			  height: 20px;
			  /* Progress same width as canvas. */
			  width: 100%;
			  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;
			}

			* { margin:0; padding:0; }

			#canvas {
			  outline: none;
			  border: 0;
                          width: 100%;
			}
			canvas:focus, canvas:active {
			  outline: none;
			  border: 0;
			  ie-dummy: expression(this.hideFocus=true);
			  -moz-outline-style: none;
			}
			div {
			  -webkit-tap-highlight-color: rgba(0,0,0,0);
			}

		</style>
	</head>

	<body oncontextmenu="return false;">
    <div id="fb-root"></div>
	<div id="app-container" class="canvas-app-container">
	    <canvas id="canvas" class="canvas-app-canvas" tabindex="1" width="720" height="720"></canvas>
	</div>

	<!-- -->
	  <script type='text/javascript' src="dmloader.js"></script>
	  <script type='text/javascript' src="Hamster.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);

        function resize_game_canvas() {
            var dpi=window.devicePixelRatio || 1
            //var dpi =1
            var width=window.innerWidth;
            var height=window.innerHeight;
            var aspect=width/height
    		var app_container = document.getElementById('app-container');
    		app_container.style.width = width+"px";
    		app_container.style.height = height+"px";

    		var game_canvas = document.getElementById('canvas');

            game_canvas.width = width*dpi;
            game_canvas.height = height*dpi;

            window.console.log("width: " + game_canvas.width + " > "+ game_canvas.style.width)
            window.console.log("height:" + game_canvas.height + " > "+ game_canvas.style.height)
		}

		resize_game_canvas();

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

	</script>
</body>
</html>

Because on mobile devices browser logical width == 320…480px we need write some trick.
And this trick is set canvas.style.width to 100% but canvas.width to window.innerWidth*devicePixelRatio;
I set Canvas style.width in css (see header).

If you can’t set canvas style properly then mobile browser setup wrong size of page.
Also your defold render script should react to changing app resolution: render.get_window_width() and render.get_window_height()

Example with this html template: http://dragosha.com/hamster/

Another good solution is using maximize-canvas script: https://github.com/sergebat/maximize-canvas (for properly working this script required to creating canvas in code, not preset in html)

4 Likes

Fullscreen on HTML5
#7

Well, the workaround for me at the time was prettyfying the main JS file, patching the above two functions manually, then minifying it back together.

0 Likes

#8

Solved in Defold 1.2.160 has been released

3 Likes