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?
← 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!