+2 votes

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:

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

in Engine by (24 points)
edited by

3 Answers

–3 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.

by (811 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.

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.

–8 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.

by (573 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.

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.

+1 vote

This tutorial has a lot of details on CanvasLayers.


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.

by (54 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 Frequently asked questions and How to use this Q&A? before posting your first questions.
Social login is currently unavailable. If you've previously logged in with a Facebook or GitHub account, use the I forgot my password link in the login box to set a password for your account. If you still can't access your account, send an email to [email protected] with your username.