• Art & Design

  • Help me decide how I should handle 4:3 aspect ratio screens

As soon as 16:9 screens were begun to be produced, 4:3 screens were stopped being produced for a long time, with everyone and everything using a new 16:9 screen instead of an old 4:3 screen.

Now we even have wider screens with aspect ratios of up to 24:9. There exist Even Wider screens, but they are so niche that I decided that my game does not need to support them.

But now, 4:3 screens are being produced again, on devices such as modern Laptops and Tablets. For immersion, I want my game to support not just a Single aspect ratio, but a Range of Aspect ratios. This range is guaranteed to include anything from 16:9 to 24:9, with 21:9 being my main targeted Aspect Ratio.

This is how the game looks like in 16:9:

When I tested my game in 4:3, it revealed too much content, which can be seen by the hidden path above that is not visible in the 16:9 version:

This makes me a bit concerned about my Aspect Ratio choice, because I made that choice when I thought that 16:9 to 24:9 was the Entire Range of common screen aspect ratios today, because I thought that 4:3 was only used by old devices which became obselete a long time ago: - How many devices which are important for (both hardcore and casual) gaming have a 4:3 screen? - How annoyed will players react when they see Big Black Bars at the Top and Bottom of their 4:3 screen?

I'm curious about this issue myself. I found a tip for avoiding the Big Black Bars by filling the areas with a background and/or placing UI elements there.

@DaveTheCoder said: I'm curious about this issue myself. I found a tip for avoiding the Big Black Bars by filling the areas with a background and/or placing UI elements there.

That's similar to something I thought of, just moments before you replied: I just came to the idea of placing Foreground Elements in front of where the Black Bars would be.

If you look at Super Mario Run, there's always a Bush or another dense Foreground Element at the bottom of the screen, so that you never see the part where the level cuts off at the bottom, or what happens in the background if Mario falls into the pit: That foreground gets extended the taller the screen becomes, so it always successfully covers the behind of the scenes, wether you're playing in 9:16 or 9:21 (the tall versions of 16:9 and 21:9, because the game runs in portrait mode).

I can use the same trick to conceal the Secret Path in my game when it gets played in 4:3. Because that foreground element moving Left and Right but not Up and Down with the camera could be very disorientating for some people (especially because it happens much more often than in Super Mario Run), I might also include the accessibility option to make that Foreground non-moving and another alternative which is switching back to regular Black Bars for those who actually prefer it.

4 days later

Finally I have done it!

I have made a Parallax Foreground which always stays on the same Vertical Position but moves 1:1 with the screen on the Horizontal Axis.

This obscures the secret path I wanted to obscure, in the same way that the bush obscures the bottomless pits in the Super Mario Run example. But Unlike the foreground in Super Mario Run which naturally moves on both axis, My foreground has to move in One direction but stay still in the other, which many people including me find disorienting,

From this experience, I have learnt that I should use this as a last resort and ideally design my levels around Not having to use One-Way Parallax Scrolling, because Parallax Scrolling, except for in Rainmaker for Pico-8 where the flowers on the ground below are always shown, is only natural when all layers move equally in both directions.