Unity WebGL game viewport size no longer detected properly

[Deozaan]

In the past I've never had a problem with my Unity WebGL builds. I just upload the exported WebGL folder as a zip file (or using butler) and It Just Works™.

But now I'm setting up the page for a new project, and I'm having all kinds of troubles getting the WebGL build to work and look as it should. But I think the root issue to all of my problems is that Itch can't seem to auto-detect the size of the game.

If I configure the project's edit page to autodetect the size of the game, I get this error:

I'm not sure why it can't autodetect the size. It's right there in the HTML file like I'm pretty sure it has always been. But either way, I take that as a clue to go in and manually set the size to the dimensions shown in the HTML file: 1280x720. But then the game page starts showing part of the HTML underneath the game instead of just showing the game:

So then I tried uploading a minimal HTML page that didn't have the extra text and graphics under the game, and it appeared properly, but now the fullscreen button doesn't work:

Or at least I thought that was why the fullscreen button didn't work. I went back to the other HTML template and tried the fullscreen button and it acted as though I were viewing the HTML page fullscreen, rather than the game fullscreen:

Trying to click the blue fullscreen button while already in the Itch-launched fullscreen mode doesn't do anything. But if I disable Itch's fullscreen button and click what little part of the blue one that is shown under the game, it works as it should and scales the game view to fullscreen.

In short:

• Itch's fullscreen button doesn't properly scale Unity WebGL games.
• When setting the viewport size manually, Itch is cutting off the top portion of the gameview to show (what should be) superfluous HTML content underneath.
• Itch can't autodetect Unity HTML viewport sizes anymore, or at least not in some cases.

More information to possibly help with tracking down the problem:

• My OS: Windows 10 Pro.
• WebGL build made with Unity 2019.2.17f1.

[leafo]

The only thing itch.io can do is control the size of the iframe that holds your game. What you put inside the iframe is your responsibility, so it's up to you to control how your game's canvas is reshaped to fit the window iframe how you want.

You might want to check out https://seansleblanc.itch.io/better-minimal-webgl-template

Itch can't autodetect Unity HTML viewport sizes anymore

The script looks for dimensions inside of the HTML file. It only works for the default export template, so if you've customized anything it will not align . If you think default html exports for unity have changed margins/padding I can take a look and see if I can update the detection.

[Deozaan]

The script looks for dimensions inside of the HTML file. It only works for the default export template, so if you've customized anything it will not align . If you think default html exports for unity have changed margins/padding I can take a look and see if I can update the detection.

I haven't customized anything. I just export from Unity using the default template and then upload to Itch, and Itch can't detect it.

You might want to check out https://seansleblanc.itch.io/better-minimal-webgl-template

Thanks for that link. I'll look into using that.

[Deozaan]

I uploaded a build using the Better Minimal WebGL Template and Itch still can't detect the resolution automatically.

But at least now I can work around it easily by setting the size manually, and it will properly scale when entering fullscreen.

[leafo]

I uploaded a build using the Better Minimal WebGL Template and Itch still can't detect the resolution automatically.

The resolution detection is only designed for the default export, not any custom ones. If you have a page up using that template I can take a look real quick to see if it's something we can support.

[Deozaan]

Forgive me if this comes across as rude, but you seem to keep missing what I am now saying for the third time and I want to make sure you don't miss it again:

Default export is currently broken for me.

More explicitly:

Automatic size detection on my itch.io project page is currently broken for me when uploading a project that was exported using Unity's default WebGL template.

If I understand you correctly, this should be working. That's why I created this bug report. If it was working properly then I wouldn't be jumping through all these hoops trying to get my game to display properly.

The resolution detection is only designed for the default export, not any custom ones. If you have a page up using that template I can take a look real quick to see if it's something we can support.

This was ambiguous enough that I'm not sure what you're offering to look at.

Right now my game page is set up using the Better Minimal WebGL Template. If you'd like to look into supporting automatic size detection on that template, then take a look at https://cmonkeys.itch.io/buster-monkeys which is currently an unpublished draft. ( If that's what you meant, then that might help take care of #857 )

If you meant you were only interested in taking a look at a page that is using the default export template, then I can go through the process once again of building and uploading with that default template and have you take a look at it once I've done that.

[Deozaan]

I compared a default WebGL export HTML file from an older project to the one that's being generated in my current project. It looks like the culprit may be that Unity slightly altered the div id name in more recent versions of Unity.

The old (and still working) version has a div like so:

<div id="gameContainer" style="width: 1280px; height: 720px"></div>

The new (and broken) version has a div like so:

<div id="unityContainer" style="width: 1280px; height: 720px"></div>

[leafo]

No worries, I fully understood you. I was responding to "I uploaded a build using the Better Minimal WebGL Template and Itch still can't detect the resolution automatically." We never added support for that template, so it will not be able to detect the resolution. Sorry for being ambiguous.

HTML5 games are just websites that we host, we can't really know anything about your Unity game & its configuration other than what happens to be placed in the index.html when exported. There is no standard for how HTML games render to the page or size themselves, so we can only make due with what we can scrape out of the index.html file. (Although it might be a possibility to try to parse the javascript or binary data, that's not something we do right now)

I'll pull up an empty Unity project from the latest version of unity and export it with the default template to see what's going on. I just wanted to make it clear that if you're customizing the HTML/JS/CSS in any way for your HTML5 game then it's likely something outside of our control when it comes to detecting the dimensions.

[Deozaan]

@leafo It looks like we were both typing at the same time, so I'm pinging you to make sure you saw that I just posted a potential solution to the problem. Hopefully that saves you some time from having to tinker around with exporting your own Unity project to investigate the issue. 👍

And thanks for your patience dealing with me on this issue.