Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

embedding game in <iframe> size issues between browsers #34851

Open
define-private-public opened this issue Jan 6, 2020 · 5 comments
Open

embedding game in <iframe> size issues between browsers #34851

define-private-public opened this issue Jan 6, 2020 · 5 comments

Comments

@define-private-public
Copy link

@define-private-public define-private-public commented Jan 6, 2020

Godot version:
3.1.2

OS/device including version:
HTML5 Export

Issue description:
So I have a game that I created to run at 800x800 pixels. I was able to export it for HTML5. After reading the "Exporting for the Web" document, I got the idea to put the game in an <iframe>. The only issue is that in Firefox, my game only looks good if I do <iframe width="640" height="640"> and in Chromium I need to do <iframe width="615" height="615">

Something about this doesn't feel right, or work right. I have to add some JavaScript to check what the browser is, and then resize the iframe.

@define-private-public define-private-public changed the title embedding game in <iframe> size issues between browers embedding game in <iframe> size issues between browzers Jan 6, 2020
@Calinou

This comment has been minimized.

Copy link
Member

@Calinou Calinou commented Jan 6, 2020

Can you upload a minimal reproduction project, please? This would make it much easier to diagnose the issue.

@define-private-public

This comment has been minimized.

Copy link
Author

@define-private-public define-private-public commented Jan 6, 2020

I'll try to get a reproduction up within a day or two. I also want to report that when I switched to my Windows partition (same machine), and then tested Firefox and Chrome, there were also sizing differences w/ the iframe that made things look quite ugly.

@define-private-public define-private-public changed the title embedding game in <iframe> size issues between browzers embedding game in <iframe> size issues between browsers Jan 6, 2020
@define-private-public

This comment has been minimized.

Copy link
Author

@define-private-public define-private-public commented Jan 7, 2020

Got this done a bit quicker than planned. The full game I have is up here: https://16bpp.net/games/pucker-godot-edition-2020/

Attached is a very stripped down version of the game that I was making (most scripts are removed, had to remove the custom font for licensing reasons). Do the HTML5 export to the directory html5/, and make sure the file is called game.html. You can then visit the test.html file where I have that <iframe width="640" height="640"> set up (though I want 800x800).

PUG_stripped_down.zip

I also suggest visiting game.html by itself as well. As there are some layout discrepancies as well too.

@define-private-public

This comment has been minimized.

Copy link
Author

@define-private-public define-private-public commented Jan 10, 2020

Someone on Reddit pointed out I was missing the test.html in the .zip file. It's now been included in there.

@define-private-public

This comment has been minimized.

Copy link
Author

@define-private-public define-private-public commented Jan 11, 2020

I was able to resolve the issue by changing the project settings of "Stretch Mode" to 2d and "Aspect Ratio" to keep.

I think that something should be mentioned about this in the Exporting for the Web doc. Since I'm pretty sure that other newcomers might have this same thing happen to them too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.