x

Search in
Sort by:

Question Status:

Search help

  • Simple searches use one or more words. Separate the words with spaces (cat dog) to search cat,dog or both. Separate the words with plus signs (cat +dog) to search for items that may contain cat but must contain dog.
  • You can further refine your search on the search results page, where you can search by keywords, author, topic. These can be combined with each other. Examples
    • cat dog --matches anything with cat,dog or both
    • cat +dog --searches for cat +dog where dog is a mandatory term
    • cat -dog -- searches for cat excluding any result containing dog
    • [cats] —will restrict your search to results with topic named "cats"
    • [cats] [dogs] —will restrict your search to results with both topics, "cats", and "dogs"

setting default res for HTML

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 !

Product Version: UE 4.10
Tags:
more ▼

asked Feb 25 '16 at 12:37 PM in Packaging & Deployment

avatar image

Teapot Creation
167 22 33 47

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

2 answers: sort voted first

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.

more ▼

answered Feb 26 '16 at 01:17 PM

avatar image

svv3dUDN
8.5k 254 42 400

avatar image Teapot Creation Feb 26 '16 at 02:27 PM

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

avatar image Teapot Creation Feb 26 '16 at 02:56 PM

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 !

(comments are locked)
10|2000 characters needed characters left
Viewable by all users

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

more ▼

answered May 27 '19 at 11:31 AM

avatar image

Pyrofox
10 3 5 6

(comments are locked)
10|2000 characters needed characters left
Viewable by all users
Your answer
toggle preview:

Up to 5 attachments (including images) can be used with a maximum of 5.2 MB each and 5.2 MB total.

Follow this question

Once you sign in you will be able to subscribe for any updates here

Answers to this question