Difficulty to resize my HUD (CanvasLayer) according to the screen size

Question

I have a HUD that follows Camera2D and the camera follows my player around the map (tilemap). The problem is that I used a script to resize the game to various resolutions, without black bars or distortions, it basically uses Zoom from Camera2D. I used the script because it was the only thing that had a good result, resizing the game and maintaining its proportion. The script works very well, everything was perfect on different phones but my HUD inside a CanvasLayer doesn't resize. In the script itself it is already warned that: "Nodes inside a CanvasLayer won't be scaled, it has to be done manually."

I tried several things, but nothing worked. I have no idea how to resize the HUD to match the new size. Can someone help me?

The structure is:

Player
   > Camera2D (affected by the script)
     > HUD (CanvasLayer)
       > Label (Points)
        > Texture Button (Pause)

Answer 1

You don't have to use a script to scale around in order to keep up with the game resulotion when it's changed.
Go to Project Settings - Display - Window - Stretch. Set "mode" to "2d" and "aspect" to "keep". The game will be automatically keeping up the game world's scale with the resolution and the window size.

Comments

Yah but that can make some things like health bars be half off and half on screen. I understand what your trying to do but I have never done it, but my game is going to need it so I'll have to try.

---

Not useful for mobile games... if you use "keep", then some black bars appears on the screen when the resolution of the game and th resolution of the device don't match.

---

Use the expand stretch aspect to support multiple aspect ratios instead of keep.

Answer 2

I have the answer. Why are you using a canvas layer? In all my time with Godot I have never used a canvas layer. Try using a "control" node instead.

Comments

CanvasLayers are something you shouldn't avoid learning. As mentioned in this tutorial, you can set the render order on the entire canvas layer, placing your ui in front at all times. They can also be used for backgrounds. They are almost like a quick and dirty viewport.

---

You can just use Z indexing for that every node has one and in addition to that theirs things like Y sort. And the z index can be changed via code and in addition to that a control nodes z index effect children.

And as for backgrounds just go into the control nodes section and add a textureRect at the very top of the scene tree and set the texture to your background or you can mess with paralex backgrounds.

---

Sry about that, its been a year and I now use canvas layers quite often. But maybe something that could have been done back then was have a control as a child of a canvas layer.

Answer 3

This tutorial has a lot of details on CanvasLayers.

If TL;DR:

CanvasLayers have their own scale property that needs to be set to the same value as your camera. The CanvasLayers are not really "seen" by your camera.

A canvas layer is like a quick and dirty world of it's own. It has it's own viewport, so cameras in the base scene don't see the canvas layer at all. That canvas layer is rendered separate.

NOTE: CanvasLayers do have a few bugs right now (3.2), so you may have some frustration using them. Their scaling reports the wrong viewport size to it's children, so you can't bank on the anchors of a control working correctly. CanvasLayers also have a bug where "FollowViewport" doesn't work with translating mouse positions, so be wary of using that.

Comments

It's possible to convert mouse coordinate using the transform, for example get_canvas_transform().xform_inv(event.position) or position.direction_to(get_global_mouse_position())