I built with the template and am uploading to itch however I'm getting "No dimensions provided or detected". My setup on itch is - Checked "This file will be played in the browser" - Embed in Page - Auto Detect Size - Automatically start on page load
Am I missing something? When I open the produced index.html in browser it does look like it's creating the canvas and sizing it to fill the window. And it updates when I resize. Unity Version 6000.0.33f1 . I did not add any optional config to the template.
i've updated the "2020.2 and higher" template and the auto-detect setting on itch should now work as expected, lmk if you try the update and still have issues
Appreciate it. I have updated the build and went ahead and did a new build from scratch. The game launches but is stuck at the Default canvas width and height (in my case 1920x1080). Changing the window size on itch does not change the canvas/iframe size. However if I open the index.html page in a browser, the canvas does scale.
i think you may be misunderstanding how the auto-detect size feature on itch works: it does not make itch resize the canvas/iframe to match the window size, it just uses the detected game dimensions as the fixed size without you having to enter them manually. this template will make the game's canvas resize to fit any iframe that contains it, but it does not affect how itch resizes those iframes on the game page.
if you have a 1920x1080 game, i'd recommend one of the following:
replacing the embed with the "click to launch in fullscreen" option. this expands the game's iframe on start, though note that it's not true fullscreen behaviour and the game will be slightly smaller than the monitor size due to things like the address bar still being visible
replacing the auto-detect size with manually set dimensions, and enabling the "fullscreen button" checkbox. you can use dimensions that match your aspect ratio but are small enough to reasonably fit on the page (e.g. 1280x720), and the fullscreen button gives players an option to enter true fullscreen
if you have custom CSS enabled, you may be able to create a custom page style that resizes the iframe however you want for different screen sizes
Works great! No complaints. Just going to share my experience in case it helps anyone else who runs into this bug. My game screen was only in one corner of the window, and the rest of the window was black bars. But I could interact with everything as if my game WAS filling the whole window (i.e. everything was positioned correctly, but the visual itself was in the bottom left corner). Turns out in my game code I had manually set the screen's resolution to 1920x1080 while trying to fix a different unrelated issue. Removing this line of code solved everything.
Does not work properly on iPhone. When the keyboard is opened and closed, the aspect ratio and screen position get thrown off and part of the game is off the screen. In Chrome, this can be corrected by rotating the device to landscape and then back to portrait. In Safari, it stays unplayable.
I really like this template and always recommend it. Using it with Unity 6 and it still works. I am just wondering if I could add some centered text label nearby/above the progress bar. Just as a helper for the viewer so they can more easily identify it as a loading progress - and what is being loaded. Any tips?
You could do this by adding a separate element to the page with your loading text and `position: fixed` CSS, and then removing that element once the game is loaded.
I'll see if I can manage this somehow. I was able to style the progress bar itself a bit which I'm already more happy with. For me it's better recognizable as a progress bar when the loading background isn't transparent. But I'm not sure how I would remove stuff once the game is loaded. Maybe based on the loading progress percentage as a condition? Haha, guess I'll have to play around a bit.
Thank you for this wonderful template. I'm trying to add logo on loading. Up until now I added logo to display but I can't show it on top of the loading bar, not centered and not scaling properly. Do you have any idea, maybe I can send you the html code?
i've tested v2.2 of the template on v2022.3.29f1 of unity and it works as expected; some quick googling seems to show that TemplateData missing on webgl builds is a known issue, i'd recommend searching for answers on how to deal with that separately
oh I did that 1st; hardly a known issue as there are 2 posts in google, one says "create a custom template" which means not using yours and the other says "I fixed by resetting player settings".
Absolutely awesome! Spent weeks trying to get the exact position and size working on any device and your little template fixed it within minutes! Even made the builds faster and no more hand editing css or index files!
Also, for anyone who needs it: This might just be me, but there can sometimes be a slight issue with it getting stuck on the loading screen or the keyboard being unresponsive on itch.io after going full screen with itch.io's full screen button. It does fix itself if you click on the unity game (focusing the iframe), but if you don't want the player to have to click on it, simply add:
window.focus();
in the index file after line 98 (At the end of the OnResize() function). This fixed the issue for me.
You could add some CSS to hide the cursor (e.g. `canvas { cursor: none; }`) but depending on your use case you may want to use unity's cursor lock instead.
First of all, Thanks for the Awesome Template. Solve some Rendering issues caused by the auto scalings.
Kinda new to Scripting and totally clueless to WebGL and html editing,
if i wanted to add a Container for the Loading Bar and also a Logo.png on the Loading Screen. Where do i need to inject the code? i've tried copying some sample of other working template but im not getting it to work.
The loading bar is implemented by modifying the inline style of the game canvas to apply a gradient background (line reference). If you wanted to put it in a container and show a logo, I'd recommend adding your own HTML elements that are positioned on top of the canvas and changing this so it targets one of them and then removes them after it's fully loaded.
Scale to fit seems to fail again in Unity 2022. Like ThisIsNik, I’m using manual dimensions since auto-detect fails on itch.io (with any Unity template anyway).
But I think I found the reason: itch.io uses a fixed width for the main content column, so resizing the window won’t affect it.
If you change Integration Options to Click to Play in Fullscreen, then it will open the game in a full tab and it will behave as in your demo GIF, resizing the canvas with the window.
I guess that for embedded frames, we should just keep a fixed size…
If you don't want to use the fullscreen by default, but still want users to have the option, itch does have a "fullscreen button" checkbox which should work with this template.
I got these errors in the console (see screenshot below) immediately after selecting your template. I was using a Windows 11 version 21H2 laptop with Unity version 2020.3.37 LTS version and I downloaded the version 2.2 of your template. I made a video if you want to see it.I don't know how bad leaked allocations are but I thought I would post this comment just in case.
The canvas that's referenced in the template is managed by Unity to draw the game itself, so I wouldn't recommend using it to draw loading text. What would probably be easier and more accessible is to manually add a separate element to the page (just a div or etc, not a canvas), style it to be placed on top, and update its text in the progress handler (line reference).
This is working great. How would I add a slight padding to the sides of the game so it doesn't fill up the entire window, but still scales? I tried adding a margin to the game-container div and it only affected the top (I have very little experience with HTML).
To add some padding, you could modify the two lines of the template where the window size is retrieved (seen here). Subtracting some fixed amount from this width/height will have the same effect as adding that amount as padding.
← Return to Unity WebGL Template
Comments
Log in with itch.io to leave a comment.
I come back to this with literally every game jam I do. Thank you so much for maintaining this.
Still goated. Still what I recommend to people for game jams. Fantastic work
I built with the template and am uploading to itch however I'm getting "No dimensions provided or detected". My setup on itch is
- Checked "This file will be played in the browser"
- Embed in Page
- Auto Detect Size
- Automatically start on page load
Am I missing something? When I open the produced index.html in browser it does look like it's creating the canvas and sizing it to fill the window. And it updates when I resize. Unity Version 6000.0.33f1 . I did not add any optional config to the template.
i've updated the "2020.2 and higher" template and the auto-detect setting on itch should now work as expected, lmk if you try the update and still have issues
Appreciate it. I have updated the build and went ahead and did a new build from scratch. The game launches but is stuck at the Default canvas width and height (in my case 1920x1080). Changing the window size on itch does not change the canvas/iframe size. However if I open the index.html page in a browser, the canvas does scale.
i think you may be misunderstanding how the auto-detect size feature on itch works: it does not make itch resize the canvas/iframe to match the window size, it just uses the detected game dimensions as the fixed size without you having to enter them manually. this template will make the game's canvas resize to fit any iframe that contains it, but it does not affect how itch resizes those iframes on the game page.
if you have a 1920x1080 game, i'd recommend one of the following:
Works great! No complaints. Just going to share my experience in case it helps anyone else who runs into this bug. My game screen was only in one corner of the window, and the rest of the window was black bars. But I could interact with everything as if my game WAS filling the whole window (i.e. everything was positioned correctly, but the visual itself was in the bottom left corner). Turns out in my game code I had manually set the screen's resolution to 1920x1080 while trying to fix a different unrelated issue. Removing this line of code solved everything.
Does not work properly on iPhone. When the keyboard is opened and closed, the aspect ratio and screen position get thrown off and part of the game is off the screen. In Chrome, this can be corrected by rotating the device to landscape and then back to portrait. In Safari, it stays unplayable.
Works great on Android and PC.
I really like this template and always recommend it. Using it with Unity 6 and it still works. I am just wondering if I could add some centered text label nearby/above the progress bar. Just as a helper for the viewer so they can more easily identify it as a loading progress - and what is being loaded. Any tips?
You could do this by adding a separate element to the page with your loading text and `position: fixed` CSS, and then removing that element once the game is loaded.
I'll see if I can manage this somehow. I was able to style the progress bar itself a bit which I'm already more happy with. For me it's better recognizable as a progress bar when the loading background isn't transparent. But I'm not sure how I would remove stuff once the game is loaded. Maybe based on the loading progress percentage as a condition? Haha, guess I'll have to play around a bit.
I love it!!!❤️❤️❤️
THANKS ❤️❤️❤️
Just tested it on Unity 2022.3.29. Still works!
I LOVE BETTERWEBGL I LOVE BETTERWEBGL I LOVE BETTERWEBGL
Worked really well. Thanks.
Thank you for this wonderful template. I'm trying to add logo on loading. Up until now I added logo to display but I can't show it on top of the loading bar, not centered and not scaling properly. Do you have any idea, maybe I can send you the html code?
sure, feel free to email or dm me any of these places if you'd like some help
I was looking for something that would help me scale a prototype for WebGL PC and Mobile testing and this is perfect. You're perfect. Thank you :)
Is the background color a string, hex, or rgba?
it can be any supported CSS colour value, so all of these would be valid: red, #FF0000, rgb(255,0,0)
Thanks :) You are my hero!
I LOVE YOU OMG
2022.3.25 not making TemplateData am i doing something wrong?
i've tested v2.2 of the template on v2022.3.29f1 of unity and it works as expected; some quick googling seems to show that TemplateData missing on webgl builds is a known issue, i'd recommend searching for answers on how to deal with that separately
oh I did that 1st; hardly a known issue as there are 2 posts in google, one says "create a custom template" which means not using yours and the other says "I fixed by resetting player settings".
have you tried creating a new custom template then copying the contents of this one in? without being able to repro i'm not sure how to debug further
THANK YOU
Wow this issue has annoyed me for years and you made a perfectly working, simple solution. Super frictionless to integrate. Thanks Sean!
THANK YOU SEAN
works like magic
Thanks for this Sean! We want to use it in our build. One question - what is the lincensing like?
it's under the MIT license
Excellent, thank you!
Fantastic! Thank you!
Absolutely awesome!
Spent weeks trying to get the exact position and size working on any device and your little template fixed it within minutes! Even made the builds faster and no more hand editing css or index files!
Thank you!
Thank you so much Sean! Works like a charm.
Thank you
Thank you so much!
Not only did this help me with my loading bar problem, but this identified and solved my screen-size problem. Thankyou Sean!
This template helped a ton -- thank you so much!
Also, for anyone who needs it: This might just be me, but there can sometimes be a slight issue with it getting stuck on the loading screen or the keyboard being unresponsive on itch.io after going full screen with itch.io's full screen button. It does fix itself if you click on the unity game (focusing the iframe), but if you don't want the player to have to click on it, simply add:
window.focus();
in the index file after line 98 (At the end of the OnResize() function). This fixed the issue for me.
Thank you very much!
It helped a lot.
Is there anyway to hide the mouse arrow when playing?
You could add some CSS to hide the cursor (e.g. `canvas { cursor: none; }`) but depending on your use case you may want to use unity's cursor lock instead.
Love it so much, thank you!
Hello, i dont know if this is an issue just for me, but this does not seem to work on Safari as it is just stuck on the loading screen.
Anyone can confirm/deconfirm?
It often doesn't appear in the settings for some reason and sometimes does. I love the work, have used it in all my projects.
Nice! Also can build without problems with Flutter. Thank you!
Thanks so much for this, saves from so much headache... wish I found this before wasting hours of my time though haha
First of all, Thanks for the Awesome Template. Solve some Rendering issues caused by the auto scalings.
Kinda new to Scripting and totally clueless to WebGL and html editing,
if i wanted to add a Container for the Loading Bar and also a Logo.png on the Loading Screen. Where do i need to inject the code? i've tried copying some sample of other working template but im not getting it to work.
The loading bar is implemented by modifying the inline style of the game canvas to apply a gradient background (line reference). If you wanted to put it in a container and show a logo, I'd recommend adding your own HTML elements that are positioned on top of the canvas and changing this so it targets one of them and then removes them after it's fully loaded.
Thanks for the template!
Scale to fit seems to fail again in Unity 2022. Like ThisIsNik, I’m using manual dimensions since auto-detect fails on itch.io (with any Unity template anyway).
But I think I found the reason: itch.io uses a fixed width for the main content column, so resizing the window won’t affect it.
If you change Integration Options to Click to Play in Fullscreen, then it will open the game in a full tab and it will behave as in your demo GIF, resizing the canvas with the window.
I guess that for embedded frames, we should just keep a fixed size…
If you don't want to use the fullscreen by default, but still want users to have the option, itch does have a "fullscreen button" checkbox which should work with this template.
Ah, that’s right, I’ll try it!
I got these errors in the console (see screenshot below) immediately after selecting your template. I was using a Windows 11 version 21H2 laptop with Unity version 2020.3.37 LTS version and I downloaded the version 2.2 of your template. I made a video if you want to see it.I don't know how bad leaked allocations are but I thought I would post this comment just in case.
Hello, is it possible to add percentage number on top of the loading bar? (like "10%", "11%", "12%"...)
I've tried a "ctx" method with that index.html but that didn't work, I guess I'm still not very familiar with JavaScript and html, ha ha.
https://www.w3schools.com/graphics/canvas_text.asp
(Also, thank you very much for making this~)
The canvas that's referenced in the template is managed by Unity to draw the game itself, so I wouldn't recommend using it to draw loading text. What would probably be easier and more accessible is to manually add a separate element to the page (just a div or etc, not a canvas), style it to be placed on top, and update its text in the progress handler (line reference).
Oh, yeah that's way easier, touching the canvas just seems to break everything. 😆
I now use a div added with style="position: fixed" with width/height/margin adjustments and is working perfectly.
Thank you very much~
Great!
Hi Sean,
This is working great. How would I add a slight padding to the sides of the game so it doesn't fill up the entire window, but still scales? I tried adding a margin to the game-container div and it only affected the top (I have very little experience with HTML).
To add some padding, you could modify the two lines of the template where the window size is retrieved (seen here). Subtracting some fixed amount from this width/height will have the same effect as adding that amount as padding.
That worked! Thank you