🤑 Indie game store🙌 Free games😂 Fun games😨 Horror games
👷 Game development🎨 Assets📚 Comics
🎉 Sales🎁 Bundles

view port dimensions

A topic by Tartle Games created 29 days ago Views: 52 Replies: 3
Viewing posts 1 to 3

this is a very small issue, but I've noticed that on my game page settings for a webbuild when I specify the "view port" dimensions to match my resolution dimensions in the build of my game, I get a solid bar on the left and the top of the game window that isn't on the right and the bottom. I think this is some weird thing with the padding on the div of the container that holds the game window. To compensate I have to add units to the setting for "view port" dimensions to be greater than that of my game build. This allows there to be a good looking solid border around the entire window. It pushes the solid colored area right, and down when I do this.

Moderator(+1)

It's hardly weird. All browsers give the body element a padding of 1ex or so by default. Might want to remove that from CSS if you make a game with the intention to embed it. Failing that, making a slightly bigger iframe so there will be a nice equal border all around your game is perfectly fine.

It's not hard to get around, but it could be a little confusing for some because the wording on the itch submission page makes you think you should match the game window size when in fact you need to make it larger. And it isn't clear to me how much larger or how much padding is applied since the frame doesn't wrap the content on its own. Every time I've adjusted it to make it look right I've had to change numbers and refresh the page several times to get it right.

Admin(+1)

The iframe dimensions will be exactly the value you provide. Some engines provide built in CSS that will remove any additional spacing, if not you'll need to make adjustments to the page CSS for the game you upload. There's no way for us to fix this from the outside without rewriting the embedded page's CSS. I think rendering the frame at the exactly at the specified dimensions is the best approach.