koobas.hobune.stream
Scale Unity WebGL Canvas to fit browser window
Hi dear community.
I recently updated to Unity 5.6. For WebGL a lot of things have changed since 5.4.
I wanted to know how to automatically adjust the game canvas to fill the whole browser window. I don't want to use fullscreen mode. It worked in earlier builds using some tutorials.
I tried the following in my style.css file:
.webgl-content * {border: 0; margin: 0; padding: 0; min-width: 1024px; min-height: 768px; width: 100%; height: 100%;}
.webgl-content {position: absolute; min-width: 1024px; min-height: 768px; width: 100%; height: 100%;}
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}
.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}
But it doesn't work. Have I missed something? Must I do something in my index.html? I'm using the default layout and deleted the "footer" div.
Thanks in advance!
Best,
Mischaal
This guy published a template for this: https://github.com/greggman/better-unity-webgl-template Works perfectly for me.
I made an asset for this!
https://assetstore.unity.com/packages/tools/gui/responsive-webgl-template-117308
Also feel free to check out the site that I run (https://simmer.io) to see this in action.
This one works like magic. but i have one question. how can i toggle to Fullscreen mode? thanks anyway!
Thank you for your project.
I'm testing on mobile devices but how about canvas size? Just set default size of WebGL size (960x600)?
I'm using the Kongregate WeblGL template and I faced the same. What I did was add this to my style:
gameContainer { width: 100%; height: 100%; position: absolute; }
Basically, I replaced the style div webgl-content for div gameContainer and works fine.
PS.: have a look at the Kongs Template, then you can play around and custom it: https://github.com/kongregate/webgl-preloader
The template looks good. Why not to simply change this:
<div id="webgl-content" style="width: 100%; height: %UNITY_HEIGHT%px">
<div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div>
into this:
<div id="webgl-content" style="width: 100%; height: 100%>
<div id="gameContainer" style="width: 100%; height: 100%"></div>
Basically the starting point should be the WebGL template from the documentation. But the templates there are not updated yet. I have only found this draft document here: https://docs.google.com/document/d/1wmNOiwa3qXeGqBSFY9IWgoO99LZOu5U3yaxIig-bGAs/edit#heading=h.86qaywgwrt22 to get a new template for 5.6
Hello , I couldn't manage to make it work with the $$anonymous$$ongregate WebGL template. Do you have a more detailed explanation about how to do it?
I did that:
<div id="webgl-content" style="width: 100%; height: 100%>
<div id="gameContainer" style="width: 100%; height: 100%"></div>
Sorry i'm still new to coding and Unity.
Thanks
This method worked for me(thanks tipue on codepen):
