+1 vote

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)

asked Feb 10 in Engine by sney (23 points)
edited Feb 10 by sney

3 Answers

0 votes

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.

answered Feb 10 by Sween123 (726 points)

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.

–4 votes

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.

answered Feb 10 by Merlin1846 (172 points)

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.

+1 vote

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.

answered Feb 12 by Aristonaut (30 points)

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())

Welcome to Godot Engine Q&A, where you can ask questions and receive answers from other members of the community.

Please make sure to read How to use this Q&A? before posting your first questions.