Full Browser Window Unity WebGL

Every amount of screen-space a player gives you is a gift – it’s a horrible waste to present your webGL content using the Unity default templates. It would be much nicer to have our game fill up 100% of the window space we have available: a full browser window Unity webGL game.

An example of what I’m talking about is here (with an extra header and footer).

It’s easiest to set this up starting from the ‘minimal’ player template, but you can add this onto any template, or better yet make your own.

The Set-up Process

All you need to do is add these rules into the “style” tag in the head of the index.html file (or create a new CSS file and link it in if you prefer to keep things professional).

* {
  margin: 0;
  padding: 0;
}

canvas {
  width: 100%;
  height: 100%;
  position: absolute;
}

The first part removes all padding and margins, to make sure nothing is adding extra white space. Browsers want even unstyled text to be readable so by default there is spacing around elements that we need to remove.

The second part tells the canvas the game is rendering onto to stretch the full size of the browser window.

The “position: absolute;” rule stops your game from trying to maintain its aspect ratio, allowing the height to fully stretch.

If you have any other divs or whatever objects wrapping your canvas, make sure to give them “height: 100%; width: 100%;” as well.

That’s all there is to it!

Tips and Pitfalls

• The internal resolution of your unity build will automatically update as the browser resized. This is good because you don’t need to worry about manually setting the resolution and maintaining the aspect ratio, but on the other hand it does mean you have no control over render resolution and performance will decrease as the window size increases.
• Don’t forget to give your body a “background-color” as well, otherwise the screen will flash white before your canvas loads up.
• If you’re using a slightly different structure and have problems with scrollbars appearing and messing up your document, add “overflow: hidden;” to the body.
• Setting these CSS rules through the web inspector to test them doesn’t always work for me, but when they’re in the file it works fine.
• This styling makes it nice and easy to embed your build as an iframe, letting you choose a resolution later. This is great if you plan on uploading your game to Newgrounds, Kongregate, etc.
• The resolution you set in ‘player settings’ will now be completely ignored, so don’t stress about it.

Hopefully you now have a working full browser window Unity WebGL build – shoot me a message if something’s not working! Next time I’ll write about how to replace the default progress bar.