Yesterday, I wanted to put demo of Super UI on this site, I ran into following problems:
- Compression problem
- Inaccessible Index.html files
- Embed build in a WordPress page
- Misalignment of content
First things first, I created a new Unity package to solve several UI problems in Unity, so I decided to build a WebGL demo. I have never published any WebGL games, even though I used to be a web designer and web developer. I have built games for PC, Linux, iOS and Android, but not web! I created an empty project, targeted WebGL, imported Super UI package and I built it, nothing special so far.
Unity WebGL contains two important folders and an index file to layout web page and call scripts. I opened Index.html file, it gave me an error which basically was telling me: You should run it from a server. So I put the folder inside my local IIS server, opened Index.html file again and bum! Now it was complaining about “Brotli” compression format!
What the heck is Brotli? (.br file format)
Short answer: Brotli is a generic-purpose lossless compression algorithm that compresses data better than common compression algorithms for web (gzip, deflate).
Long answer: Read Here
Compression Problem
IIS (by default) does not support Brotli, so I had to find another way. I headed to player settings in my demo projects. After few minutes I found it under: Project Settings > Player > WebGl tab > Publishing Settings > Compression Format and I changed it from Brotli to Gzip, because gzip is some standard compression for web contents. I built the project one more time, it got bigger in size (not too much, from 7.xx mb to 8.xx mb). Now I put files on IIS again and similar thing happened, once again it complained, this time about gzip. I headed back to path mentioned above and completely disabled compression. Now that everything worked fine, it was time to test in on my host.
Inaccessible Index.html files
Since I was not sure about my provider’s features, I thought it is better to put uncompressed contents online. After uploading everything from build folder on server, I accessed it with no problem (almost). The only problem now is that the default page is quiet empty dull! While I was trying to find out how to embed that file inside a WordPress page, I noticed URL to demo file is case-sensitive! Why? I don’t know, maybe it Apache server config, Linux config or WordPress, either one, just remember to use URL to your build as is.
Embed build in a WordPress page
Because I haven’t WordPress experience, I didn’t know how to use it. (I am a web developer but I wanted a quick solution, so I chose WordPress). There is “Custom HTML” widget for this purpose. Use it, put an iframe and fill it like this:
<iframe src="URL of your desired HTML file" allowfullscreen="allowfullscreen" style="width: 1280px; height: 720px; max-width:1280px; " width="1280" height="720" frameborder="0"></iframe>Misalignment of content
Please notice “max-width” property in “style” attribute. I noticed that WordPress’s theme controls width of content (which is quiet nice) but it caused misalignment of iframe. So, along other attributes and properties to set width and height of iframe, you probably need to set “max-width” manually.
Final Words
Unity is a great platform for making games and apps, however, sometimes you need to deal with some “external” problems, like problems above. One more problem is, Unity WebGL is not supposed to work on mobile devices (however, FireFox plays, but with super low performance), if you want to target mobile market, do not go for WebGL, just use native platforms.
It’s hard to find experienced people about this subject, however, you sound like you know what you’re talking about! Thanks