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\u00a0to have our game fill up 100% of the window space we have available: a\u00a0full browser window\u00a0Unity webGL game.<\/p>\n
<\/p>\n
An example of what I’m talking about is here<\/a> (with an extra header and footer).<\/p>\n It’s easiest to set this up starting from\u00a0the ‘minimal’ player template, but you can add this onto any template, or better yet make your own<\/a>.<\/p>\n All you need to do is\u00a0add 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).<\/p>\n 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.<\/p>\n The second part tells the canvas the game is rendering onto to stretch the full size of the browser window.<\/p>\n The\u00a0“position: absolute;” rule\u00a0stops\u00a0your game from trying to maintain its aspect ratio, allowing the height to fully stretch.<\/p>\n If you have any other divs or whatever objects wrapping your canvas, make sure to give them “height: 100%; width: 100%;” as well.<\/p>\n That’s all there is to it!<\/p>\n 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\u00a0how to replace the default progress bar.<\/p>\n","protected":false},"excerpt":{"rendered":" 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\u00a0to have our game fill up 100% of the window space we have available: a\u00a0full browser window\u00a0Unity webGL game.<\/p>\n","protected":false},"author":1,"featured_media":110,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[9,3,10],"class_list":["post-14","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised","tag-tutorial","tag-unity3d","tag-webgl"],"_links":{"self":[{"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":7,"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":112,"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/posts\/14\/revisions\/112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/media\/110"}],"wp:attachment":[{"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ocias.com\/blog\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}The Set-up Process<\/h2>\n
* {\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\ncanvas {\r\n width: 100%;\r\n height: 100%;\r\n position: absolute;\r\n}<\/pre>\nTips and Pitfalls<\/h2>\n
\n