How do I show a static, resized background image in a 2D scene

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By OptoChemist

I’m trying to create a simple 2D game which basically is a top down view of a city with a few clickable and draggable sprites. There’s no moving camera or anything like that.

I can’t for the life of me figure out how to add a background image though. I tried adding it to the scene like this (I’ve tried many things, but this is what I currently have):

Imgur

Which results in this:

Imgur

As you can see, only a portion of the image is visible, and the rest is cropped. I’d like it to be scaled to fit the application window. How do I achieve that?

:bust_in_silhouette: Reply From: SQBX

Make a new control node and set it its anchoring mode to Fill (top left section of the editor there is an anchor symbol, click on it).

Add the TextureRect with your city texture as a child and set it its anchoring mode to Fill via the same process as earlier.

Then, you should be good to go!

Thanks, but unfortunately not. The texture still isn’t being shrunk to fit in the viewport.

OptoChemist | 2023-01-05 12:14

It’s a problem with your camera then. Add a new Camera2D , check the checkbox button that says current, and set the zoom to somethin’ like (3, 3)

SQBX | 2023-01-05 13:25

Adding another camera still doesn’t fix the problem. I’ve created a minimal scene in an otherwise empty project that recreates the problem here https://filebin.net/cfiv9m5awm4gqeio Just to clearify my intentions: I want the image to scale down automatically to whatever size the window currently is (not caring about the aspect ratio).

OptoChemist | 2023-01-05 19:52

:bust_in_silhouette: Reply From: OptoChemist

According to the GitHub issue below, my problem occured due to using a Node2D as my root node.

The solution I found was the following

  • create a scene with a Node (not a Note2D, just to reiterate)
  • add a Control, and add a TextureRect to the Control
  • set the anchors preset of the Control to “Full Rect”
  • set the anchors preset of the TextureRect to “Full Rect” (after changing Layout Mode from “Position” to “Anchors”
  • tick the Ignore Texture Size box of the TextureRect

Et voilà!

1 Like