Fullscreen while keeping aspect ratio with bars

This forum is currently in read-only mode.
From the Asset Store
Health Bars & More
$3.60 USD
40% off
Health, Weapon & Rage Bars for your Games. Easy to use & Customize.
  • By popular request here it is: how to make a game fill up the screen while

    • keeping the same aspect ratio,
    • zooming in to fill as much of the screen as will fit, but only integer zoom levels so weird stretch patterns don't appear,
    • filling extra space with black bars,
    • not wasting VRAM (you import all your graphics at normal size),
    • positioning UI elements at the same place on-screen,
    • and not blurring the display.

    I always assumed it was possible, but nobody seems to have done it yet. It has been possible in Construct Classic for a while, but I'll admit - it was a little complicated. You have to use some tricks.

    Here's the file: http://dl.dropbox.com/u/15217362/fullscreen.cap (r1.2)

    How it's done:

    We shouldn't stretch the window surface, or DirectX will probably linear filter it, blurring the pixels. So Project Propertes -> Resizing is set to "show more window content" - making the window bigger shows more pixels, without automatically sizing anything. We do the zooming ourselves.

    Project Properties -> Sampling is "Point", so nothing linear filters and blurs.

    Layout properties -> Unbounded scrolling enabled, so we don't hit scrolling limitations to do with zoom.

    There are three layers: main, UI and one for the black bars. These are all ordinary scrolling layers. This means we don't have to deal with objects going offscreen when the zoom changes, the objects are manually positioned.

    Most of the rest is Good Old Maths:

    • a global zoom is set to the largest integer size that will fit inside the screen bounds. So for example if 2x will fit, it will use that, or 3x if it fits, or 1x if the window is small.
    • some maths positions the black bars on a scrolling layer in such a way they obscure everything that you shouldn't see.
    • the UI layer is also a scrolling layer, but a UIOrigin sprite is positioned at the top left of the viewable area, so you can position your UI elements from there.
    • F and W switch between fullscreen and windowed.

    Hope that helps. Back to Construct 2!

  • Wow this looks like something that is going to help a lot later on, thanks ashley, still waiting for construct 2 to have Tilemap, sound/music and .exe support before I will begin working on that engine too much. But I purchased it already to support the awesome work you all are doing! Thanks for the added help with construct issues while we are waiting on the Construct 2, you are too Awesome! :)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • 404 Page Not Found?

  • Urled link's still working OK for me here...

  • Yes, Ashley. Now it works.

  • It's nice and all, but you omitted layers with different scroll rates. That's the biggest problem people run into as far as I can tell. Yes, black bars and such are nice, but this makes reliable parallax use nearly impossible at different resolutions because zooming isn't screen-relative but layout-relative. So it's nice, but it would be wonderful to have a work-around for THAT instead.

  • <font size="2">hi everyone, i'm new user for construct ,

    i can't open the example of "full screen.cap" , help me please <img src="smileys/smiley1.gif" border="0" align="middle" /> . the error is :

    <img src="smileys/smiley34.gif" border="0" align="middle" /> "failed to open project C:/..../fullscreen.cap" thanks for all</font>

  • patchouka - this is a demo for Construct Classic, not Construct 2.

  • Ashley thank you very much    <img src="smileys/smiley1.gif" border="0" align="middle" />

  • Hi it looks really great but I have some troubles with understanding it. I need to create it for 4:3 in start up in window 1024/768. After that u can choose fullscreen. On every ress size up verticaly to max keeping that aspect ratio 4:3 and rest of horizont fill with black.

    Is there any chance to help me? :)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)