Awesome! Thank you very much for your time and efforts!
(Unity) Better Minimal WebGL Template
A downloadable Unity WebGL Template
Minimal WebGL build template.
- Scales canvas to fit the window horizontally + vertically while maintaining aspect ratio (can be disabled)
- Centers canvas in window
- Customizable background
- Download and unzip
- Copy the "WebGLTemplates" folder into your project's "Assets" folder
- File -> Build Settings... -> WebGL -> Player Settings... -> Select the "BetterMinimal" template
- (Optional) Customize colour in the "Background" field; enter "false" in the "Scale to fit" field to disable scaling
Ideal for embedding on sites like itch.io which provide an external full-screen button.
Click download now to get access to the following files:
Log in with itch.io to leave a comment.
Thanks for a great little template! I am sending $20 can your way for this! Much appreciated.
Thanks for sharing this. Saved me a lot of headache.
I just found this and it's great. I'm going to link to this from the itch.io documentation for HTML5 games.
Thank you so much! This does exactly what I've struggled to do over the last few days.
This is fantastic! Auto-include in every Unity game I make now. Thank you!
Wow, this is really useful! Setting 'scale to fit' to false would be perfect for me, but it doesn't seem to actually change the dimensions & aspect ratio of the camera the way it should. The boarders of the screen get cut off. Likely a problem with Unity itself.
What kind of license is this under? I plan to release the source code of my game... Do I need to mention you somewhere?
MIT license; attribution is appreciated but not required
(updated the metadata to reflect this)
Thanks for the amazing template! It works great in Chrome and saved the day for my project.
I was wondering if focusing the canvas element after entering fullscreen mode would help Estecka's issue. I noticed for me as well that after going into fullscreen you need to click on the canvas element to resume the game loop.
Would be nice to have the auto-detection working. Does adding the "width" and "height" properties in the style attribute of the "gameContainer" div work?
Would be nice to have the auto-detection working. Does adding the “width” and “height” properties in the style attribute of the “gameContainer” div work?
Yes. That’s exactly what is needed.
Works great !
Though for some reason, when enabling Itch.io's fullscreen on firefox, the game remains scaled down until you click it again. (No issue on chrome)
Another thing that is not an issue but worth noting:
Whereas Itch.io can usually find the canvas' size for Unity games automatically, this template requires setting the canvas size manually.
Hey, thanks for the feedback! I'll try to take some time to look into those issues.
Edit: looks like the first issue is on Unity's end (the canvas does in fact resize, but Unity's not updating till it's been focused). RE the auto-detect size, I spent a bit of time tinkering to see if I could figure out where they're pulling the size from without success; I've submitted a feature request on itch.io's github about it though, and will update this if more info on the auto-detect becomes available.
Late reply, but I just came across this template and ran into the same issue as you with itch not being able to detect the canvas size.
But the good news is I found the solution.
Near the bottom of the index.html included in the template, change the line with
<div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px"></div>
and itch.io will then be able to automatically find the canvas size.