Really low screen resolution in initial launch of html5 packaged builds

When I initially launch the packaged version of my html5 project, the resolution is extremely low and heavily pixelated. If I hit the fullscreen button it goes to what it should be, and if I leave fullscreen it’s fixed. I know this wasn’t happening in 4.11, but due to it’s packaging issues, I can’t really use it. Any idea on how to fix this would be much appreciated.

By any chance would you be able to zip up a build?

Ue 4.10 had some resizing activity going on in the output .html file. Poking on the size of the canvas element there,

<canvas class="main" id="canvas" oncontextmenu="event.preventDefault()" height="904" width="1600"></canvas>

and specifying there the desired size:

<canvas class="main" id="canvas" oncontextmenu="event.preventDefault()" height="xxx" width="yyy" style='width: xxxpx; height: yyypx;'></canvas>

might work. Specifying the size directly there might be tricky for proper high DPI handling, so there is also a load function where you might be able to configure. In the .html file, find

function preRunHandler() {
}

and see if changing that to e.g.

function enforceCanvasSize() {
  var canvas = document.getElementById('canvas');
  var desiredPhysicalWidth = 1920;
  var desiredPhysicalHeight = 1080;
  var correspondingCSSWidth = desiredPhysicalWidth / window.devicePixelRatio;
  var correspondingCSSHeight = desiredPhysicalHeight / window.devicePixelRatio;
  if (canvas.width != desiredPhysicalWidth || canvas.height != desiredPhysicalHeight) {
    console.log('Setting canvas size to ' + desiredPhysicalWidth + 'x' + desiredPhysicalHeight);
    canvas.width = desiredPhysicalWidth;
    canvas.height = desiredPhysicalHeight;
    canvas.style.width = correspondingCSSWidth + 'px';
    canvas.style.height = correspondingCSSHeight + 'px';
  }
}
function preRunHandler() {
  enforceCanvasSize();
}

has any effect. If it doesn’t, then likely UE 4.10 is setting the size at engine startup somewhere. In that case, you could try setting the size after UE4 has started up by finding

Module = {
  preRun: [preRunHandler],
  postRun: [],

and setting

Module = {
  preRun: [preRunHandler],
  postRun: [enforceCanvasSize],

Does any of that help?

Btw, you mention some UE 4.11 packaging issues. Is there a report about that somewhere?

You are a problem solving machine, lol. I actually solved this late last night, and didn’t think about updating it. But thanks to your help on my 4.11 issue, I don’t need to work in 4.10 anymore. You are a great person.

I haven’t tried your answer. I actually solved this last night, by just deleting the width here in the html file.

#canvas:not([fullscreen]) {
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

Probably not the best solution, but apparently it wasn’t letting emscripten know that it was modifying the size. This made it to where the display size would be very large but never update the resolution to match it. At least not initially, if you went into fullscreen and back out, it would fix the problem.

Oh, thanks!

The width: 100% CSS directive is what caused the visible presentation size of the canvas to scale up to fit the browser window. The CSS directives don’t affect the WebGL render target sizes, so the engine can still continue to render to its existing sizes independent of what the visible presentation size is. It would be possible to register a resize handler in JavaScript land to resize the WebGL canvas when browser window is resized, if one wants to match the visible size to the WebGL render target size.

If you do want to customize the canvas size behavior in different ways, there are a number of strategies that can be employed, though UE4 doesn’t by default export any of these. See here for an example. The resizing behavior you are seeing in windowed mode is equal to the “Aspect+None” soft fullscreen behavior.

please, can you explain more widely? I don’t understand where need to put and I can’t find functions preRunHandler()

■■■■! You are a life saver! I have been stalking the forum for a solution to this problem until i sure this post. I opened the .html file with notepad++ and searched and found where is says not fullscreen and i deleted those lines and there! Problem solved! Thanks.