Fullscreen while keeping aspect ratio with bars

Post your own tutorials, guides and demos.

Post » Wed Jul 27, 2011 1:09 am

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!
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Tue Sep 27, 2011 2:57 am

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! :)
B
27
S
3
G
6
Posts: 88
Reputation: 4,873

Post » Tue Sep 27, 2011 9:18 pm

404 Page Not Found?
B
18
S
4
G
1
Posts: 413
Reputation: 2,512

Post » Tue Sep 27, 2011 9:25 pm

@Urled link's still working OK for me here...
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Wed Sep 28, 2011 8:14 pm

Yes, Ashley. Now it works.
B
18
S
4
G
1
Posts: 413
Reputation: 2,512

Post » Wed Nov 09, 2011 7:14 pm

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.
B
90
S
32
G
14
Posts: 935
Reputation: 14,540

Post » Fri Jan 04, 2013 11:07 am

hi everyone, i'm new user for construct ,

i can't open the example of "full screen.cap" , help me please . the error is :

"failed to open project C:/..../fullscreen.cap" thanks for all
B
3
Posts: 2
Reputation: 479

Post » Fri Jan 04, 2013 5:22 pm

@patchouka - this is a demo for Construct Classic, not Construct 2.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,600

Post » Wed Jan 09, 2013 1:18 pm




@Ashley thank you very much    
B
3
Posts: 2
Reputation: 479

Post » Sun Feb 10, 2013 9:27 am

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? :)Ubru2013-02-10 20:17:52
B
10
S
3
Posts: 37
Reputation: 974

Next

Return to Your tutorials & example files

Who is online

Users browsing this forum: No registered users and 0 guests