Creating a resolution aspect ratio for widescreen/normal scr

I've been trying to work out how to keep my Construct game from stretching horizontally on widescreen monitors in fullscreen mode. My game uses a 640x480 window with 200% zoom, meaning that it's displaying a 320x240 game view.

deadeye tried to help me out with the following PM:

[quote:1g6lf91x]You can use the SysInfo object to detect whether the player has a 4:3 or widescreen monitor before the game starts (by finding out what the desktop resolution is set to). Knowing that will allow you to zoom the screen to the proper proportions. I assume you want a 4:3 window in the middle of a black area no matter what the width of the monitor is, yes? Well, you can create that black area yourself on a layer above all others to mask out any excess, and show that black mask as needed depending on what the aspect ratio of the monitor is. You can pretty much shape the screen to whatever you want it to be. With a couple hours work you could get such a system into place, rather than waiting "a few months" for a feature that may or may not come.

I have no idea what to do here really. Should I use a different standard resolution than 640x480? Where do I start with this workaround? I've gotten a lot of suggestions, but I'd really appreciate some help on this.

Thanks.

The way I read it. Imagine you've got two layers, one which displays on 4.3 displays, and one on 16:9 displays. Using the sysinfo you check which the user is running in and set that particular layer as visible.

It'll be a bit more in depth than that, but that's the general idea, far as I can tell.

Well I need more in-depth help than that because I am not really a programmer.

Regardless of the ratio, the vertical resolution will be 480. Find out the ratio of the monitor to determine what to set the horizontal resolution to (I'm not sure of the math). After setting the resolution, put an extra layer above all the others. Put black bars on the left and right covering the area past 0 and 640.

Also, I tried creating my game with a native resolution of 640x400 in order to cater to the widescreen audience, but when going fullscreen I am told that the fullscreen mode of 640x400 is not supported, and that it will switch to the "next best" thing; 640x480.

I don't see how I'm ever going to solve this.

What about a custom pixel shader, placed on a layer of it's own, over the entire game. You've seen how the lens and magnify shaders work, right? Then it would be entirely plausable to have a shader sitting over everything, which either stretches or shrinks in various directions while maintaining a specific ratio. I would think a type of refracting lens effect could do that in some way. And yes I'm aware this method wouldn't work for people with low end cards, but then, they're not likely to have fancy monitors requiring stuff like this, either.

Or make a version for every fullscreen resolution commonly used at the moment (more work, but if it's so important to have this thing then you wont mind will you?). Then it's up to them what they download. Do a special edition version in widescreen and a common version in regular mode. Embrace it, turn the problem into an excuse to create two versions of one game.

Or just create your game at 16:9 ratio but focus only in a 4:3 area in the middle. No different to how movies used to be done, when filmed in widescreen and then converted for 4:3 TV's. Use pan and scan to follow events in your game when in 4:3 mode.

Or use deadeye's method rather than dismissing it because you don't really understand it.

Or stop worrying about aspect ratio and finish the game first, by the time you've finished, there might be a proper solution available.

Really there's loads of solutions, but there isn't a fix everything button you can click, and there likely isn't going to be for some time.

[quote:1g6wm3dg]My game uses a 640x480 window with 200% zoom, meaning that it's displaying a 320x240 game view.

So that makes me think you're going for the retro look. Deadeyes method sounds like the best one for you.

Solved it! Well sorta, it's basically doing what I already suggested, and using a bit of creativity, and some of what deadeye was onto as well.

I should point out that this will only work "properly" if your game is flip screen like the two I saw on your website, with the black guys. Course if your game scrolls then this whole aspect ratio thing is a farse because you so wouldn't need to worry about it. But even then, it would still work!

Ok this is what you do:

Make your layout the size of the largest fullscreen display currently available, don't worry this wont effect filesize or anything like that.

Create your game >>>>>>> AT THE CENTER OF THE LAYOUT <<<<<<< This is very important, it'll not work right if you don't do that. continue to make your game in 320x240.

Now, around your actual game window within a window. Create a border, a nice pretty graphical border, how it looks depends on your game. Put this border on the OUTSIDE of the 320x240 window. Because you never want your 4:3 users to see this border, it's not for them, it's too good for them and they're not allowed to see it.

Now then, create a tiled background, on the lowest layer. Make sure the tiled artwork matches your border you just made, so it looks like it's part of it. Cover the entire background with that tiled background image.

Right, by now you're looking at it and probably thinking "Nobody is going to play a tiny window like that on a huge resolution you idiot!!!" But that's cool, that's exactly what I want you to think, and if you're thinking that, then you've done this right so far.

What you need to do then, is create a layer which will sit above EVERY OTHER LAYER, it wont scroll it wont move, and it has to sit exactly over your 320x240 playing area, taking into account the borders too (hey maybe the 4:3 crowd will get to see those amazingly rendered borders afterall!) Add a pixel shader to it, magnify, or lens, up to you whichever works best.

Now the magic

By using sysinfo, you can get the height information, which you will then use to change the size of this magnifying layer, depending on whatever resolution the user is running in. You'll have to use some math to get the width correct, but I'm sure someone else will be able to help on that score.

You may have to tweak the size of your magnifying lens somewhat, to get it working right, it may not be as straight forward as just giving it a height to use.

What you'll end up with, is a playing area which is always as high as the users resolution, and if you did it right, two nice borders down either side, and a tiled background to fill in the extra space, which using this method, wouldn't be much wasted space really, unless they've got some weird super wide monitor or something.

As for the 4:3 users. Well it all depends really how the magnifying layer behaves on those displays, so it may just be a case of putting things in groups and turning off the magnifying layer and turning on a regular window set size group, depending on whatever resolution they're running at. And I'm pretty sure that's entirely possible too.

I dunno, tested it and it seemed to work ok to me. So give it a go, see how it works for you.

Also, I tried creating my game with a native resolution of 640x400 in order to cater to the widescreen audience

No modern monitor that I know of will be able to support that at fullscreen. In fact, the lowest resolution available for my monitor is 800x600, which is 4:3, so if your game is made at 640x480 then it will scale up just fine.

Anyway, I don't really have anything to do this morning so I guess I could try to make an example file. After I've had my coffee and read the forums, that is

Thanks for taking the time to help me. I appreciate it!

Lost my Keys I will play around with your example tonight. There are a few things I'm unsure about, but I won't knock it until I've tried it... or at least tried trying it!

I'm looking forward to an example from deadeye as well. :-)

So yeah, thanks.

I already caught Drule in chat but I will post my solution here in case anyone else wants to check it out.

It turns out that this was much more painless than I though... apparently you don't even need to bother with checking the aspect ratio at all!

If the resolution for your game is 320x240 then Construct will pick the lowest resolution available when you go to fullscreen. For most modern monitors that will be 800x600.

All I did was this:

<img src="http://i47.tinypic.com/33o2q2s.png">

And it just worked. Widescreen monitors will show your game 4:3 centered in the middle with black on either side. This uses Unbounded Scrolling on a 320x240 game. The clamp() expression is necessary to scroll to the proper location because when you zoom layers like that then the scrolling goes all funky (if it's not unbounded then your player goes off the screen, and if it is unbounded then your player is always centered and you can see outside the layout). Anyway, the clamp() thing fixes it.

If you want to fullscreen a letterboxed 16:9 game on a 4:3 monitor though, that's a totally different story

Lol, so after all the problems, blood, sweat and tears, that's it? That's the solution? Awesome haha.

To be fair, the last time I attempted this was a long time ago on a much older version of Construct, and I was expecting to have to do the same sort of stuff now. Guess not, though.

To be fair, the last time I attempted this was a long time ago on a much older version of Construct, and I was expecting to have to do the same sort of stuff now. Guess not, though.

Well it works so yay. Now, about that making a widescreen game work on 4:3.......

I just don't understand what it was that was causing Drule's game to stretch... I couldn't even get mine to stretch even though I was trying to.

I just don't understand what it was that was causing Drule's game to stretch... I couldn't even get mine to stretch even though I was trying to.

I can't say for sure but I got the impression he was trying to make it fill the whole screen no matter what resolution is used, but without extending the playing area to compensate. I personally wouldn't mind black bars at either side (or a tiled background, or even the name written down the sides in a fancy text), they wouldn't even be that wide really, and besides doing the thing I mentioned in an earlier post. You could use that extra space for the old Arcade machine look, when some of them had fancy overlays around and sometimes over parts of the screen to make them look nicer back when the graphics weren't that hot. I think Space Invaders did that for sure. Crazy thing is, it worked great too lol.