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.
After importing this package, go into Player Settings (edit -> project settings -> player).
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”
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 :-).
SIMMER.io is the simplest place for Unity developers to share their games on the Web.
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!
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.
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!
5 Replies to “Free Responsive WebGL Template”
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?
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?