Full browser WebGL templates with CSS
There is a number of layout options for embedding the WebGL player in an HTML page now. Unity gets shipped with two standard WebGL templates and custom templates feature. This is an update to my previous post here.
The standard templates include the default and the minimal template.
The minimal template comes only with the minimal files for runnung the WebGL player only and doesn’t provide any output for the loading time. During the build process the minimal template generates the .htaccess and index files together with the Release/ and Compressed/ data folders inside the build folder.
The default template also adds a TemplateData/ folder with the UnityProgress.js file in it. On loading the webpage the UnityProgress.js generates and adds the loading elements to the parent node of the canvas element in the index document and then uses them to visualise the loading progress.
I came across a very interesting blog post here. The most important I have learned from it is that all the resizing can be done purely with css so there is no need of any javascript for canvas size initial setup or onResize action.
I started from the default template and then forked it a bit, getting three new templates:
- full browser window flexible
- full window flexible & footer
- full window flexible & sidebar
Comparing to the default template – in the full browser flexible template I have given up the canvas background element and styled the page backrgound instead, because they have the same size. Then I will be able to easily pass on the styling data with the $_GET or $_POST to the index.php file.
I found this very useful for one of my projects where I have one common loading scene and over a hundread of target scenes loaded from AssetBundles. Then I pass the url of requested scene bundle as an argument to the index.php file. Now I can use the same argument to set the loading screen background.
The loading process has a data downloading phase which is illustrated by a progress bar and then follows a data processing phase, when – in the default template – user is being made to wait and nothing is happening. In all these templates I have added an animated gif for that.
These templates are ready for download inside unityPackage below:
17 Comments
Leave a Reply
You must be logged in to post a comment.
I think this is just what I am looking for, but link is broken, any chance of re-upping it? Thanks!
Sorry and thanks for letting me know. There was a slash missing in the url. I have corrected that so now it should work.
Thank you very much!
thank you !
Great template, but only seems to work in Firefox (not IE or Chrome). Any ideas? Thanks.
Nice
Thanx
Beautiful! just beautiful!!!
Thanks sooooo much!!!
Thank you for taking the effort to put this together.. I was unable to make the Webgl Full screen when I tried to do it manually.. This really helped me out- thank you!
[…] Full browser WebGL templates with CSS […]
Thank you!!
Pourquoi est-ce à Gris-ne-pisse de se saisir de ce problème ?C’est une question de santé publique, pas d&eolus;écologie.D’aiqlrurs, la plupart des questions dont se saisissent les écolos concernent la santé publique et non l’écologie. C’est une forfaiture tellement répandue que le public n’y prend même plus garde.
Hi, The template does not work properly for me. Contents from UnityProgress.js(progress bar etc) are not showing while game is loading. Can you please help?
Thanks so much for this template, it was just what we needed!
Thanx buddy. It’s awesome!
Unity 2017. Can’t get this working.
%UNITY_WEBGL_LOADER_GLUE% shows in black text upper left corner in Chrome latest as of December 1, 2017.
The picture I put shows up fine.
Any idea on how to fix guys? I see his example built surely on an older version of Unity than 2017? works. So, it probably is not something to hard to figure out for a smart Unity developer.
Please!
Thanks.
This is working on Unity 5.5, but not on Unity 5.6 nor 2017. (The exemple provided is on Unity 5.1).
The full browser window template had errors in the script so i deleted it.
But the other templates build a blank project with only the side bar available although the fullscreen button does nothing.