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

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

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 Play7 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

chipset7 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 Play7 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

chipset7 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