itch.io Community » itch.io » Questions & Support

How to make a WebGame with a Dynamic Resolution / How to get the window's width from within an IFrame?

A topic by chipset created Jul 09, 2017 Views: 3,204 Replies: 6

Viewing posts 1 to 2

I'm trying to have my game scale down based on the resolution of the player's browser window. By default it runs at 1280x720 which would be too big for small laptops or other smaller screens.

Before the game starts I scale down the canvas based on the window's width. Which works fine locally. On itch.io I have to access the parents window's width since the game is within a IFrame.

I found an answer StackOverflow to get the parent's width with : parent.window.innerWidth

But that only works if the IFrame is on the same domain.

I got this error trying it:

"Uncaught DOMException: Blocked a frame with origin "https://v6p9d9t4.ssl.hwcdn.net" from accessing a cross-origin frame."

The same StackOverflow thread mentioned to use Window.postMessage() for IFrames from a different domain.

Could a feature be added for web games to access its parents window resolution? Is there a another way to scale down my game's resolution dynamically?

Plan B. Is just to have a Low, Medium and Height Resolution buttons and have the players choose. Which isn't too bad.

Thanks!

Image illustrating whats happening:

Down scales locally:

On itch it doesn't down scale

Like Reply

No Time To PlayModerator6 years ago

Um... I don't get it. You want to scale your game to the size of the iframe, not the size of the parent window. And you get the iframe's width and height with plain innerWidth and innerHeight, respectively. That always worked just fine for all my games. Are you trying to do something fancier?

Like Reply

chipset6 years ago

you get the iframe's width and height with plain innerWidth

That's what I'm currently doing and it doesn't work. I'm using 'window.innerWidth' in the IFrame. example of what I'm basically doing:

   var canvas = createCanvas(1280, 720);
   var scale = window.innerWidth/width; // width is the width of the canvas
   canvas.elt.style.width = scale * width + "px"; // update canvas style to scale it down
   canvas.elt.style.height = scale * height + "px";

Can you post a link to one of your games on itch where it works?

Are you trying to do something fancier?

Nah, I'm just trying to get scaling to work. The solution I came to was accessing the iframes parent width which is not possible. Does that make things more clear? Is there something specifically confusing?

Like Reply

No Time To PlayModerator6 years ago

I'm doing it in Laser Sky and RogueBot, except I set the intrinsic dimensions of the canvas to the size of the window, and -- in the former -- scale the 2D context instead (look in game-window.js for the code). The way you're doing it seems more complicated than is necessary. Are you using some sort of 3rd-party framework?

Like Reply

chipset6 years ago (2 edits) (+1)

Ok, We aren't talking about the same thing. The games you linked change the resolution when you full screen. I'm trying to down scale the resolution when the screen/browser is smaller (as I mentioned originally). I should have phrased the title of the post better and more clearly state I'm trying to downscale my games resolution.

The way you're doing it seems more complicated than is necessary. Are you using some sort of 3rd-party framework?

What specifically seems more complicated? I'm using p5.js its a JavaScript library.

Images illustrating the issue:

Game running locally down scales:

On itch it doesn't down scale:

Your game also don't down scale:

Like Reply

No Time To PlayModerator6 years ago

Oh... Oh! That's because on itch.io your game is embedded into an iframe of fixed size, that ignores any changes in the parent window. You're basically asking for a way to resize the iframe itch.io puts on your game page. That's quite different from resizing your canvas to fit the iframe. Open one of my games in a tab of its own, or click the full-screen button, and you'll see it resizes just fine.

Now, it might just make sense for the iframe itch.io generates for you to resize with the window... except the itch.io website is designed in a fixed 960px width -- it doesn't reflow. But it is an idea, and worth asking about. But for now, your code is actually working just fine, I suspect. It just can't do what you expect of it.

Like Reply

chipset6 years ago

You're basically asking for a way to resize the iframe itch.io puts on your game page. That's quite different from resizing your canvas to fit the iframe.

Not really, I'm asking to get the windows real width not the iframes width so I can resize the canvas my self. That would work though if I made my canvas the size of the iframe. That might actually be a better solution than get access to the real window width from your game.

But for now, your code is actually working just fine, I suspect. It just can't do what you expect of it.

yeah running at max res is alright. It would be working fine if worked like it did locally. Hoping this is addressed by the dev team in the future.

It looks like (by the lack of replies) that not many people know about this or are unaffected by it. So thanks for your suggestions!

Like Reply

This topic has been auto-archived and can no longer be posted in because there haven't been any posts in a while.