Free Responsive WebGL Template

The default Unity WebGL templates are a good starting place for web games, but they only run at a fixed width and height!

Grab it on the Unity Asset Store.

With the SIMMER.io Responsive WebGL template, you can export your game so that it fits optimally in the entire browser window. If the user resizes the browser window, the Unity WebGL canvas automatically gets resized. The template also maintains the aspect ratio of your game, and adds letterboxes where appropriate.

How To

After importing this package, go into Player Settings (edit -> project settings -> player).

playerSettings-1

Go to the HTML5 player settings (shown in pink above) and then select the “Responsive” template (shown in green above).

Next, do a normal WebGL export. (file -> build settings). Add the appropriate scenes to the build, and click “Build and Run”

buildSettings

Give your build a name, and you should be up and running!

Modifying the Template

If you need to change anything in the template, you can edit WebGLTemplates/Responsive/index.html. Specifically, you may want to remove the small SIMMER.io backlink:

<div class="simmer">template by: <a href="https://simmer.io" target="_blank">SIMMER.io</a></div>

Obviously I would love it if you keep that link in your deployed build, but it’s definitely not a requirement :-).

About SIMMER.io

SIMMER.io is the simplest place for Unity developers to share their games on the Web.

Screen-Shot-2018-04-24-at-9.34.47-PM

I created some scripts for the site that do some magic to resize the unity canvas for the site, and I thought I’d share them with the community–so I built this asset!

Screen-Shot-2018-04-24-at-9.36.11-PM

Anyway, if you want to try sharing a game on SIMMER, simply make a WebGL build, and drag the build folder onto the upload page. Note that this “Responsive Template” is not required–a WebGL build with the default template works just fine.

Support

If you need help or have suggestions, you can reach me at: https://simmer.io/support

Like or follow SIMMER:

It really makes a big difference!
https://www.facebook.com/SIMMERdotIO/
https://twitter.com/simmer_io

Thanks!
Rocco 🙂

5 Replies to “Free Responsive WebGL Template”

  1. If someone would like to fill the window instead of maintaining aspect, one can edit responsive.javascript and in setDimensions change “var fitW =..” to “var fitW = window.innerWidth;” and change “var fitH = ..” to “var fitH = window.innerHeight;” At least that worked for me.. I’m not sure if innerWidth and innerHeight work in every browser but *shrug* maybe they do! lol.. anyway, thanks for sharing such a great template – for FREE! 🙂

  2. I am building a scroll view which on runtime is populated with a prefab (of some text etc). But that prefab is not resizing properly on changing browser size. Any idea what the issue could be?

  3. I am having trouble using this while making a vertical layout with prefabs that gets populated on runtime. The size of the individual element is not being adjusted properly, part of it gets cut out when the screen is made smaller. What could be the issue?

  4. Hello. Before anything else, i wanted to thank you for this asset. It save me a lot of time. However, i did find something weird: whenever i run the site, there was an “uncaught reference error: unityprogress is not defined” exception in the javascript console. I looked into the code and found the error: the files UnityProgress and responsive had a .javascript extension instead of .js like any other Javascript file. I fixed that and the game run normally. Not sure if it was intentional or not. Just wanted to point that out for future updates.

Leave a Reply to Nandini Tripathi Cancel reply

Your email address will not be published. Required fields are marked *