Setting default res for HTML

Development Platform & Builds
, , , , ,
1

Hi,
I’m packaging my game for HTML export, but I can’t set the default resolution of the game.
Each time it loads, it takes the entire width of the browser as the default width, with a creepy pixelized resolution.

I’ve tried a r.SetRes 800x600w command line, also changed some .ini but with no results.
From editor, it works fine, but not when packaged for html.

Does anybody know the way to go ?
Thanks a lot !

2

Hi!

Do the following. Go into the UE4 folder. Open the \Engine\Build\HTML5\Game.html.template in notepad.

Find this:

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

Decrease the parameter WIDTH as you need.

3

Thanks svv3dUDN for your answer, but it doesn’t work. I’ve set 60% but it still launches the game in the full width.
I’ve found in the same file this :

div#display_wrapper {
  position: relative;
  margin: 1em auto 10px auto;
  text-align: center;
  min-width: 640px;
  max-width: 95%;
  /*border: 1px solid red;*/
}

Is there no way to set the precise size I want it to stay, for any browser window size ?

EDIT : i’ve tried to set max-width to 60%, it’s the same…

4

Ok in the GameX.html.template in the same folder, there are

.wrapper{
	position: relative;
	margin: 1em auto 10px auto;
	text-align: center;
	min-width: 640px;
	min-height: 480px; 
	max-width: 95%;
	display: block; 
	align-items: center;
	position: relative;
	text-align: center;
	justify-content: center;
}

and

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

Changing these values works great.
Thanks for showing me the way, svv3dUDN !

5

For those who are still stuck with game resolution, I’m sharing here how I fixed the problem:

  • Project Settings → Platforms/Html5 → Canvas/Canvas Scaling Mode
    Set to “Fixed” so the resolution won’t always change

  • After cooking your project, open the file “YourProject-HTML5-Shipping.UE4.js” and modify these variables:
    var canvasAspectRatioWidth
    var canvasAspectRatioHeight

    Set the desired values (about line ~283)

  • Don’t import the compressed file version “YourProject-HTML5-Shipping.UE4.jsgz”

(to make the compress game working, I had to add “gz” at the end of the line “AddType application/octet-stream .data” in the .htaccess)

Engine version used : 4.21.2