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!

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 🙂