Keep fixed size game view in specific position and add black bars as needed - mobile

Hi all!

tldr: I want to have a centered game screen and anchored controls that adapt to device’s width (see pics below)

long version:
I’m making a retro-game, so it is important to keep a given screen ratio for the game itself. Let’s say, as an example, that I want to make something based on NES visuals. Resolution was 256 × 240 pixels, so that would be the resolution I’d be working on.
On desktop controls would be either keyboard/gamepad based, so no worries there, but on mobile I’m going to have to create on-screen controls to simulate the game pad. What I’d like to be able to do is have the game on landscape mode, keep the 256x240 (scaled to full device height) game window centered, and have the controls anchored to the sides, so the game always has the same viewsize and the controls can adjust to any device size.

I’ve been trying to experiment around but have so far been unable to find a suitable solution. The closest idea seems somewhat convoluted, but it’s the best I could think of:

  • configure the game to set to “change height to fit the screen”
  • define a super wide resolution
  • calculate proper x position of tilemap according to current resized height
  • have two black tiledsprites resized to the proper width so only desired view is shown
  • anchor controls to appropriate bottom/side

Still haven’t tried implementing, but it should work. Nonetheless, I’m thinking that there might be an easier way of doing this that I’m just not getting.

These images should better illustrate what I want to achieve
Untitled-1
Untitled-2

bumping to make sure I’m not over-complicating again :smiling_face_with_tear:

You’re right about your idea.
You cannot add any elements to the black bars generated by GDevelop, they are outside the game, so you need your own black bars.