How to make image fit screen in Godot

Question

I am new in godot engine and I am trying to make mobile game (portrait mode only). I would like to make background image fit screen size. How do I do that? Do i have to import images with specific sizes and implement them all for various screens? If I import image to big, it will just cut out parts that don't fit screen. Also, while developing, which width and height values should I use for these purposes?

Answer 1

With Godot 3, I am able to set size and position of sprite / other UI elements using script. I am not using the stretch mode for display window.

Here is how you can easily make the sprite to match viewport size -

var viewportWidth = get_viewport().size.x
var viewportHeight = get_viewport().size.y

var scale = viewportWidth / $Sprite.texture.get_size().x

# Optional: Center the sprite, required only if the sprite's Offset>Centered checkbox is set
$Sprite.set_position(Vector2(viewportWidth/2, viewportHeight/2))

# Set same scale value horizontally/vertically to maintain aspect ratio
# If however you don't want to maintain aspect ratio, simply set different
# scale along x and y
$Sprite.set_scale(Vector2(scale, scale))

Also for targeting mobile devices I would suggest importing a PNG of size 1080x1920 (you said portrait).

Answer 2

Working with different screen sizes is always a bit complicated. Especially for mobile games due to the different screen sizes, resolutions and aspect ratios.

The easiest way I can think of, is scaling of the viewport. Keep in mind that your root node is always a viewport. In Godot you can stretch the viewport in the project settings (you have to enable the stretch mode option). You can find a nice little tutorial here.

However, viewport stretching might result in an image distortion or black bars at the edges.

Another elegant approach would be to create an image that is larger than you viewport and just define an area that has to be shown on every device no matter whats the resolution. Here is someone showing what I am meaning.

I can't really answer your second question about the optimal width and height but I would look for the most typical mobile phone resolutions and ratios and go with that settings. In the end you probably should start with using the width and height ratio of the phone you want to use for testing and debugging.

Hope that helps.