How to keep game content centered like with "keep" while using "expand" for aspect mode?

Help
,
1

Godot Version

4.4.1

Question

When I originally designed my game, I used the keep aspect mode to lock the content to a 16:9 ratio, and it worked well.

Now, I’m adapting the game for mobile, and after adding touch controls, all UI elements still appear within the centered 16:9 area. This forces players to stretch their fingers to reach controls and blocks the game view.

Switching to expand solves the UI layout issue, but my game is designed for a 16:9 layout — so when the screen ratio changes, it reveals parts of the map outside the camera limits, or shows resources placed beyond intended boundaries.

I’m looking for a way to let the UI stretch beyond the 16:9 gameplay area, while the game content itself still behaves as if it’s in keep mode.

Both the UI and game content are on separate CanvasLayers. What can I do to separate their behavior?

I tried adding black ColorRects at the camera edges to hide the undesired areas, but they behave poorly when reaching the camera limits.

2

You could use a SubViewport and SubViewportContainer and add your game as a child of them.

Something like:

  • Main
    • SubViewportContainer
      • SubViewport
        • Game
    • GUI

You’ll need to configure the SubViewportand SubViewportContainer correctly to keep the 16:9 ratio.