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.
Are you sure you downloaded the right version of the template? The placeholder strings in v2.2 are in the format "{{{ VARIABLE }}}" instead of "%VARIABLE%"; the latter is the format from v1.1, so you may have accidentally used that instead.
I just double checked template v2.2 against Unity v2020.3.30f1 locally and it seems to work fine, lmk if you have any other issues.
Yes, you're right. I'm not sure how I ended up with an old version. I replaced the files while the editor was open so maybe Unity was running off an in-memory cache rather than the files on disc? Very strange. After replacing with template version 2.2 and verifying the version was correct before launching the editor, it's working much better now. Thank you!
Hey there, I took a look at your itch profile on desktop and the embed you have right now seems to be working fine, with the white loading bar visible. What you may be seeing is that your browser has already cached the files, and may only be sending the progress event for 0 or 100 and skipping most of the loading state on repeated visits.
The template isn't actually responsible for any of the progress events, it just listens for the progress from unity. If it's behaving strangely on other browsers, it may be an issue with how unity is loading the files and firing the events.
If you want to force it to go slowly locally just for testing purposes, most browsers have a network tab in their dev tools which allow you to disable caching and simulate slower network speeds.
Hey, it's not resizing automatically for me when uploading to itch.io. It works perfectly on localhost though. I'm using Unity 2020.3.9f1 DX11 and the template for 2020.2 and higher. My itch.io settings are "embed in page, manually set size (auto-detect size is not working. itch throws error 'No dimensions provided or detected')"
Hey, I tried to reproduce this issue but everything seems to be working fine for me using Unity 2020.3.9f1 and the 2020.2 template. When you say it's not resizing, what's the behaviour you're seeing?
I was able to reproduce the "no dimensions provided or detected" issue, but that appears to be a bug in itch.io itself: the same thing currently happens when using the default unity templates. You may be able to report this to their support for more info.
I've tried to upload it to itch.io and it doesn't scale with the screen size and it becomes fixed and in itch.io if I try automatically detect HTML size then it gives me an error and I am using Unity 2020 3.21
Are you using v2.2 of the WebGL template? There are major differences across Unity versions, so if you've copied the version you were using in 2019 (i.e. v1.1) it would not work as expected.
Really love this template Sean - been using it for a while now! Is there any way you could guide me in how to change the unity logo in the load screen (alternatively adding a background) in 2019.x? I am having trouble figuring this out (haven't quite looked into the background but I do see the update for 2020.)
Unfortunately I think the logo you're talking about is part of the game itself, not the WebGL template, and can only be removed if you pay for a unity license (see here for more info).
No worries - thank you. I am trying to incorporate the scaling from your code to work in a different template I have. You found the perfect formula to get it to work. Not quite there yet =P
hi, i just try in unity 2020.3.22 and is work great on mobile but problem is not show loading and logo, can you send me here a script or something to fix this problem?
This template is intended to be minimal and so doesn't include a logo/loading bar. If you'd like to add those, I'd recommend looking at the source for the default template that comes with Unity.
The template is scaling the game as expected: It's scaling it down such that the whole canvas is visible while maintaining aspect ratio.
If what you're expecting is for it to automatically fullscreen or lock into landscape mode to make better use of the device's screen real estate, that's something which should be handled by code specific to your game or by the site embedding it (e.g. itch has orientation and fullscreen settings on the project page).
The default template included in Unity (the non-minimal one) includes a loading bar. I'd recommend taking a look at the source for that and copying over the bits you'd like to use.
If you just want a static loading image, you can add an extra line of CSS to give the game a background while it's loading.
hi, i just try in unity 2020.3.22 and is work great on mobile but problem is not show loading and logo, can you send me here a script or something to fix this problem?
Loving this template, thank you so much for providing it!
One issue I'm having, for some reason since I upgraded to Unity 2021.1 the Minimal presets seem to no longer have a loading bar at the beginning and there's no feedback to tell the user that my game is loading in the background, but I am trying to wrap my head around tutorials on how to reimplement a loading bar, or a loading percentage or anything that just says loading, into this template and I'm really struggling - I'm incredibly bad at HTML and CSS.
If anyone has a solution to help with this, that would be amazing.
the default template included in Unity (the non-minimal one) should include a loading bar; taking a look at the source for that would probably be the easiest way to start
Hello, great template by the way, works perfect on desktop and is pretty much compatible on mobile which is awesome, however I'm having an small issue, on chrome and opera mobile browsers I'm getting an aspect ratio distortion on the vertical axis, it looks perfect on firefox.
Hi Sean, great work on this, however I am having an issue.
The build works on itch however when I try to host it on GitHub Pages, it causes a 404 error, I think because there is no templateData folder after building. Do you know what can be done to fix this?
I don't know why the choice of host would make a difference for this; are you sure you've included all the same files and deployed correctly in both cases? If you're getting a 404, my initial guess would be that the GitHub pages deployment is missing one or more files from the build output.
there's info on how you can add a loading indicator at the bottom of the page here (you can also use the built-in unity template with a loading bar as a reference)
hey there, I tried to reproduce this using the latest version (v2.2 + Unity v2020.2.0b13), but it seemed to work fine. without more info to debug with, i'd suggest trying to use one of the default templates and see if the problem persists as a way to narrow down whether it's actually a bug with the template or with something else
EDIT: My mistake. I was using the wrong zip file. I'll leave this here for anyone else who makes the same mistake.
Using Unity 2019.2.11. Changed to the BetterMinimal template in Player Settings but the options don't appear. Also, it appears the template tags aren't being replaced on build. Any Help would be appreciated. Thanks.
← Return to Unity WebGL Template
Comments
Log in with itch.io to leave a comment.
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
Is it working in newer versions of Unity? On my side everything turns black when I try to use it.
If it's not working for you, could you share the specific version of unity and of the package that you're using?
I'm experiencing a similar issue with template version 2.2 in Unity version 2020.3.31.f1.
It looks like Unity isn't replacing any of the %UNIY_WIDTH% etc placeholders, leading to syntax errors when parsing the resulting html.
Are you sure you downloaded the right version of the template? The placeholder strings in v2.2 are in the format "{{{ VARIABLE }}}" instead of "%VARIABLE%"; the latter is the format from v1.1, so you may have accidentally used that instead.
I just double checked template v2.2 against Unity v2020.3.30f1 locally and it seems to work fine, lmk if you have any other issues.
Yes, you're right. I'm not sure how I ended up with an old version. I replaced the files while the editor was open so maybe Unity was running off an in-memory cache rather than the files on disc? Very strange. After replacing with template version 2.2 and verifying the version was correct before launching the editor, it's working much better now. Thank you!
Thank you!
Elegant solution, thank you!
Hey there, I took a look at your itch profile on desktop and the embed you have right now seems to be working fine, with the white loading bar visible. What you may be seeing is that your browser has already cached the files, and may only be sending the progress event for 0 or 100 and skipping most of the loading state on repeated visits.
The template isn't actually responsible for any of the progress events, it just listens for the progress from unity. If it's behaving strangely on other browsers, it may be an issue with how unity is loading the files and firing the events.
If you want to force it to go slowly locally just for testing purposes, most browsers have a network tab in their dev tools which allow you to disable caching and simulate slower network speeds.
Yo are the best dude
This is a life saver! Thankyou!
Hey, it's not resizing automatically for me when uploading to itch.io. It works perfectly on localhost though. I'm using Unity 2020.3.9f1 DX11 and the template for 2020.2 and higher. My itch.io settings are "embed in page, manually set size (auto-detect size is not working. itch throws error 'No dimensions provided or detected')"
Either way great job on the tool :)
Hey, I tried to reproduce this issue but everything seems to be working fine for me using Unity 2020.3.9f1 and the 2020.2 template. When you say it's not resizing, what's the behaviour you're seeing?
I was able to reproduce the "no dimensions provided or detected" issue, but that appears to be a bug in itch.io itself: the same thing currently happens when using the default unity templates. You may be able to report this to their support for more info.
I mean that the resolution of the game doesn't increase/decrease as you resize the browser window on itch.io, such as in this gif.
Would you be able to share an example of a case where it's not working? It's all working as expected in my tests.
Sure, I'll pm you on twitter.
after importing i can't be able to make the build for webgl and upload it to itch.io
Could you give more details about the issue? What version of unity, what version of the package, any specific error messages, etc?
I've tried to upload it to itch.io and it doesn't scale with the screen size and it becomes fixed and in itch.io if I try automatically detect HTML size then it gives me an error and I am using Unity 2020 3.21
it worked in unity 2019 but not in 2020
Are you using v2.2 of the WebGL template? There are major differences across Unity versions, so if you've copied the version you were using in 2019 (i.e. v1.1) it would not work as expected.
yes i am using unity 2020 3.21 but thanks it worked fine in unituy 2019 i've downgraded my project for this to work
Really love this template Sean - been using it for a while now!
Is there any way you could guide me in how to change the unity logo in the load screen (alternatively adding a background) in 2019.x? I am having trouble figuring this out (haven't quite looked into the background but I do see the update for 2020.)
Unfortunately I think the logo you're talking about is part of the game itself, not the WebGL template, and can only be removed if you pay for a unity license (see here for more info).
No worries - thank you. I am trying to incorporate the scaling from your code to work in a different template I have. You found the perfect formula to get it to work. Not quite there yet =P
hi, i just try in unity 2020.3.22 and is work great on mobile but problem is not show loading and logo, can you send me here a script or something to fix this problem?
This template is intended to be minimal and so doesn't include a logo/loading bar. If you'd like to add those, I'd recommend looking at the source for the default template that comes with Unity.
i dont know nothing with html code :) can you please make option in your cool script and update to download please?
A few people have asked for this in the past so I've added this to the 2020.2 template (see here for details).
the loading is good but sadly in mobile is not show full screen on portrait mode, you can play game here to see how it show in your mobile
The template is scaling the game as expected: It's scaling it down such that the whole canvas is visible while maintaining aspect ratio.
If what you're expecting is for it to automatically fullscreen or lock into landscape mode to make better use of the device's screen real estate, that's something which should be handled by code specific to your game or by the site embedding it (e.g. itch has orientation and fullscreen settings on the project page).
Hi. It is totally what I need. How can I set up for images on the loading like background images, logo?
The default template included in Unity (the non-minimal one) includes a loading bar. I'd recommend taking a look at the source for that and copying over the bits you'd like to use.
If you just want a static loading image, you can add an extra line of CSS to give the game a background while it's loading.
hi, i just try in unity 2020.3.22 and is work great on mobile but problem is not show loading and logo, can you send me here a script or something to fix this problem?
Hello, I do have trouble getting it to work with Unity 2020.3.20f1.
I did set the Scale to fit to true but it does not seem to work after the upload on itch (currently still a draft, so I can't provide a link).
Hey there, I tested on 2020.3.23f1, and it seems to be working as expected. Are you sure you used the correct version of the package (v2.2)?
Works perfectly on 2020.3 thanks!
Excellent plugin! How would I go about making it non aspect ratio fixed?
If you don't want it to maintain aspect ratio, you could remove the bulk of the `onResize` implementation (seen here) and just use the window size.
god
It solved all the size problems of my project at once, thanks a lot!
Still works on 2020.3
It works in 2020.2.3f1.. thanks for this
Loving this template, thank you so much for providing it!
One issue I'm having, for some reason since I upgraded to Unity 2021.1 the Minimal presets seem to no longer have a loading bar at the beginning and there's no feedback to tell the user that my game is loading in the background, but I am trying to wrap my head around tutorials on how to reimplement a loading bar, or a loading percentage or anything that just says loading, into this template and I'm really struggling - I'm incredibly bad at HTML and CSS.
If anyone has a solution to help with this, that would be amazing.
the default template included in Unity (the non-minimal one) should include a loading bar; taking a look at the source for that would probably be the easiest way to start
Hello, great template by the way, works perfect on desktop and is pretty much compatible on mobile which is awesome, however I'm having an small issue, on chrome and opera mobile browsers I'm getting an aspect ratio distortion on the vertical axis, it looks perfect on firefox.
Thanks in advance for any help with this.
Hi Sean, great work on this, however I am having an issue.
The build works on itch however when I try to host it on GitHub Pages, it causes a 404 error, I think because there is no templateData folder after building. Do you know what can be done to fix this?
Thanks
I don't know why the choice of host would make a difference for this; are you sure you've included all the same files and deployed correctly in both cases? If you're getting a 404, my initial guess would be that the GitHub pages deployment is missing one or more files from the build output.
Hi Sean,
looks like it just took a while for the GitHub Pages to set up, its working perfectly now, thanks for the reply.
Will this work on 2020.3? I'm sorry I haven't tried it, but since you parted 2020.2 and 2020.1, I think I might ask first
I've used it in 2020.3.4f1 without issues; lmk if it's not working for you
Okay, thanks!
hello, it doesn’t seem to work with Unity version 2020. I get a black screen when I try to build with it :’)
have you double-checked you're using the correct version of the package for your version of unity? there are different versions for 2020.1 and 2020.2
if you have, can you let me know what specific version of unity you're using?
ohhhh! Thank you! That fixed it :D
Thank you for making this, I spent way too much time trying to get this to work and you have even more customizable than I ended up with!
Works for mobile!
Five Stars! Beautifully simple to add and build.
Thank you!!
I'm not sure, but I think this gets rid of the loading screen as well? Any way to re-enable it?
there's info on how you can add a loading indicator at the bottom of the page here (you can also use the built-in unity template with a loading bar as a reference)
Dude, THANK YOU ! This simplifies my workflow by A LOT !! I'm donating a few bucks.
I seem to be struggling. I followed the steps and when I uploaded my zip to itch.io I get this error in itch "No dimensions provided or detected"
I have the embed in page option selected. When I change it to click to launch in fullscreen the game works but the scaling doesn't work on mobile.
Any tips or am i missing something? :)
what version are you using?
OMG thanks it just saved my life ahah
Thank you so much!
Great stuff :) Using this, thanks.
hey there, I tried to reproduce this using the latest version (v2.2 + Unity v2020.2.0b13), but it seemed to work fine. without more info to debug with, i'd suggest trying to use one of the default templates and see if the problem persists as a way to narrow down whether it's actually a bug with the template or with something else
Thanks you so much! Works great.
Cool stuff, short, sweet, and super useful! Thanks!
EDIT: My mistake. I was using the wrong zip file. I'll leave this here for anyone else who makes the same mistake.
Using Unity 2019.2.11. Changed to the BetterMinimal template in Player Settings but the options don't appear. Also, it appears the template tags aren't being replaced on build. Any Help would be appreciated. Thanks.
same happens to me, i'm using 2019.4.13
have you double checked you're using the correct version of the template?
Yeah, i changed the template (i was using the 2020.2), now the build works but the options didn't show yet.
this is really handy.
Fantastic, thanks for providing this! $10 winging its way to you now.
I love you. My chibi maker can be played on the phone now