Thank you so much for this tool. I'm wondering if there is a way to remove the black/custom bars when resizing it; for the game view to take up the entire screen in fullscreen mode.
It's a loading bar that updates based on unity's progress, though it seems like on your game it spends almost all the time on one resource so there's very little animation.
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 don't have an iOS device to test, but if you are running into this issue, you may try swapping out the "100%" in the style with "100svw" and "100svh" for width and height; this may help out with adaptive resolution in cases where system UI like the mobile keyboard may appear.
← Return to Unity WebGL Template
Comments
Log in with itch.io to leave a comment.
Thank you so much for this tool. I'm wondering if there is a way to remove the black/custom bars when resizing it; for the game view to take up the entire screen in fullscreen mode.
ah i think i've solved it, for anyone else wondering: comment out these. thanks again for the great template :)
// if (w * r > window.innerHeight) {
// w = Math.min(w, Math.ceil(h / r));
// }
//h = Math.floor(w * r);
Thank you Sean, but why is there a white bar when it first goes to full screen?
https://spore-games.itch.io/freeze-tag
It's a loading bar that updates based on unity's progress, though it seems like on your game it spends almost all the time on one resource so there's very little animation.
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.
Is this still the case? Wondering if this is the right utility for us, web-based Tablet games (ie ipad is very common).
I don't have an iOS device to test, but if you are running into this issue, you may try swapping out the "100%" in the style with "100svw" and "100svh" for width and height; this may help out with adaptive resolution in cases where system UI like the mobile keyboard may appear.
thank you Sean! I'll give this a try