Questions on camera, fixed aspect ratio, and letterboxing with built-in features

Hi everyone,

This is my first time posting on this forum. Please let me know if any further information is needed.

I’m currently developing a 2D game for iOS and Android. I was previously using the “Starly” library to manage a fixed aspect ratio and a camera that follows the player.

However, after a recent Defold update, it seems Starly is no longer working correctly, so I am trying to switch to Defold’s built-in features to achieve the same results.

I have a few questions about this:

  1. Is using the built-in camera and render script features the standard approach for a fixed aspect ratio and a player-following camera? Or is there a simpler, or more recommended, modern asset for this?

  2. I want to display a full-screen background image that exactly fits the device’s display size. This background should be static and not be affected by the camera’s movement. What would be the best way to implement this?

  3. When the game is run on a screen with a different aspect ratio, I want to show black bars on the sides (letterboxing/pillarboxing) and ensure that no game objects are rendered in these black areas. How can I achieve this effect?

Thank you in advance for your help!

With the recent improvements to the camera I would definitely try this approach first! There’s less and less need for camera extensions to be honest.

There’s at least two solutions:

  1. Create a gui component with a full screen image node (box node). Make a copy of the default gui.material and change the material predicate to something like “background”. Then make a copy of the default render script and draw the “background” predicate before you draw any sprites
  2. Attach a sprite component to the same game object as the camera component, make sure the z values is behind any of your other objetcts.

This may sound silly, but honestly the easiest way to do this is to add a gui component with big fat black boxes around the edges to cover any additional area outside of the default view. The other solution is to change the viewport in the render script.

1 Like

Thank you so much for your detailed and helpful response! It really cleared things up for me.

I’m glad to hear that sticking with the built-in features is the right approach, and I’ll continue with that direction.

Following your advice, I tried adding black bars using GUI nodes, and it worked perfectly to create the letterboxing effect I wanted.

Next, I will try implementing the static background.

Thanks again for your great help

1 Like

I was able to successfully implement the fixed, full-screen background image based on your advice. It’s working perfectly in my tests.
This was a huge help. Thank you so much

When I updated Defold from version 1.10.1 to 1.11.1, my game objects were no longer displayed correctly.

I don’t remember if there were any error messages.

Could it be that the breaking change (z axis related changes) introduced in 1.11.0 is behind this problem?

Check it out here: 1.11.0 release notes