1
\$\begingroup\$

I have a WebGL build for my game, however, I'm getting frequent requests to center the image. Right now it is left justified. How can I center the WebGL game window?

enter image description here

\$\endgroup\$
3
  • 1
    \$\begingroup\$ You won't get good answers without a more specific question. Center what window, in what? What is your picture representing? All I see is a glowy blue box with scrollbars and a different black box. And, most importantly, what have you already tried, and why doesn't it work? \$\endgroup\$ Feb 16, 2016 at 1:26
  • \$\begingroup\$ The picture is a screenshot of my web browser when loading my build. The game window should be centered in my browser, not off to the left. I've looked at the CSS file, but I can't figure out what if anything I could tweak to have the desired effect. I've also looked at the player settings. \$\endgroup\$ Feb 16, 2016 at 1:35
  • \$\begingroup\$ Have you tried changing the game resolution from the editor? \$\endgroup\$
    – user100681
    Nov 15, 2017 at 9:01

1 Answer 1

2
\$\begingroup\$

You can create a custom WebGLTemplate just change the HTML as documented here. You can choose either one of the defaults or create your own template.

According to those docs you create folder in Assets called WebGLTemplates and inside that create a new folder for your template like BetterTemplate. Inside that put an index.html file and any other images, css, JavaScript files you want included with your game.

The index.html could look something like this

<!DOCTYPE html>
<html lang="en-us">

  <head>
    <meta charset="utf-8">
    <title>%UNITY_WEB_NAME%</title>
    <style>
      body { margin: 0; }
      #gameContainer { width: 100vw; height: 100vh; }
      canvas { width: 100%; height: 100%; }
    </style>
    <script src="Build/UnityLoader.js"></script>
    <script>
    var gameInstance = UnityLoader.instantiate("gameContainer", "Build/dist.json");
    </script>
  </head>

  <body>
    <div id="gameContainer"></div>
  </body>

</html>

Then you pick Edit->Project Settings->Player from the menus and under the WebGL tab choose your template

Here's an example that provides a custom logo.

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .