I've been making a game where the player is on the ground and has to dodge objects falling to the ground. Since I'm using libGDX (But the question still applies to any other language/framework), The game will have to handle both desktop and mobile apps.

I'm trying to make the game fit vertically into any aspect ratio while making it fair, but this is my first time trying to deal with this, and I'm looking for a good way to do this. My game has 3 main regions: The game, the data (Health/coins), and the GUI (Pause button). Here are my ideas so far:

Horizontal: Game in the center with everything else on the sides


Vertical: Game on the bottom with data on top


Everything else: No room for GUI on sides/bottom, GUI on top of game


I've seen other questions similar to this, but none of them cover a game similar to this type.

  • 1
    \$\begingroup\$ What exactly is the question? Your idea seems to be the way to go. Is there any specific step that you are having trouble with? \$\endgroup\$ – TomTsagk Apr 29 '19 at 9:28
  • \$\begingroup\$ We can't tell you what layout is right for your game on a particular platform/display, but we can help you achieve the layout you've chosen if you run into any specific problems in trying to implement it. \$\endgroup\$ – DMGregory Apr 29 '19 at 11:32
  • \$\begingroup\$ Have you looked at a game like Ikaruga? A vertical shooter is much alike a game where you dodge stuff falling from the top of the screen. The orignal arcade has a vertical aspect (gui overlay on gameplay), home conversions had widescreen (gui on the sides outside of gameplay). Is this an example of what you're looking for? \$\endgroup\$ – Felsir May 1 '19 at 12:12

To maintain consistency, I would keep the same relative areas in each aspect ratio and in the vertical layout, put the data in a short row along the bottom and the GUI in a short row on top. This would mirror the left, center, right arrangement of your horizontal layout.

This would allow you to keep the same area for your game. And then your layouts can be chosen dynamically. I was just trying to solve a similar problem in my website with a 3 column or row layout of thumbnails, a large image, and text. By the way the solution was to make the body or surrounding div tag display:flex; and flex-flow:row nowrap;


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.