CanvasLayer not working as expected

[opinionmaterial3649]

Godot Version

4.2.2

Question

Just starting to learn Godot and I’m trying to add some UI elements, elements that don’t move when the player camera moves. I’ve read that CanvasLayer should fix this but when I use it it doesn’t work as I expect. I’ve created a very simple example to show this.

I create a Node2D at the root. Then a Camera2D with zoom behaviour. Then a Polygon2D representing the game part of the scene. Then a CanvasLayer, with a Control child, with a Panel child as the UI layer.

My expectation is that when I zoom then the game contents will change size but the UI content won’t. But that isn’t what happens (see screenshots). What am I missing? Thanks

Camera2D.gd

extends Camera2D

# Called when the node enters the scene tree for the first time.
func _ready():
  pass # Replace with function body.


# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(delta):
  pass

func _unhandled_input(event):

  if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_WHEEL_DOWN:
    zoom = zoom + (zoom*0.05)
  if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_WHEEL_UP:
    zoom = zoom - (zoom*0.05)

node.tscn

[gd_scene load_steps=2 format=3 uid="uid://cvjly8lqjlbgv"]

[ext_resource type="Script" path="res://Camera2D.gd" id="1_8c80c"]

[node name="Node2D" type="Node2D"]

[node name="Camera2D" type="Camera2D" parent="."]
script = ExtResource("1_8c80c")

[node name="Polygon2D" type="Polygon2D" parent="."]
polygon = PackedVector2Array(-92, -6, 2, 116, 140, 50, 118, -96)

[node name="CanvasLayer" type="CanvasLayer" parent="."]

[node name="Control" type="Control" parent="CanvasLayer"]
layout_mode = 3
anchors_preset = 0
offset_right = 40.0
offset_bottom = 40.0

[node name="Panel" type="Panel" parent="CanvasLayer/Control"]
layout_mode = 0
offset_right = 40.0
offset_bottom = 40.0

[shatteredreality]

Hi, i pasted your code and replicated your layout and it works as expected (panel does not change size), is there more code?

[opinionmaterial3649]

Sorry I’m not sure what else could have an affect. Here is the project.godot file, is there anything else I should upload? I can upload the whole project, is there a recommended method for doing that?

; Engine configuration file.
; It's best edited using the editor UI and not directly,
; since the parameters that go here are not all obvious.
;
; Format:
;   [section] ; section goes between []
;   param=value ; assign values to parameters

config_version=5

[application]

config/name="camera_test"
run/main_scene="res://node.tscn"
config/features=PackedStringArray("4.2", "Mobile")
config/icon="res://icon.svg"

[input]

zoom_in={
"deadzone": 0.5,
"events": [Object(InputEventMouseButton,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"button_mask":16,"position":Vector2(173, 12),"global_position":Vector2(177, 53),"factor":0.4,"button_index":5,"canceled":false,"pressed":true,"double_click":false,"script":null)
]
}
zoom_out={
"deadzone": 0.5,
"events": [Object(InputEventMouseButton,"resource_local_to_scene":false,"resource_name":"","device":-1,"window_id":0,"alt_pressed":false,"shift_pressed":false,"ctrl_pressed":false,"meta_pressed":false,"button_mask":8,"position":Vector2(167, 9),"global_position":Vector2(171, 50),"factor":0.05,"button_index":4,"canceled":false,"pressed":true,"double_click":false,"script":null)
]
}

[rendering]

renderer/rendering_method="mobile"

[opinionmaterial3649]

Thanks to your help I figured out it is the mobile renderer which is the problem. Is it related to this issue? Zero child of CanvasLayer (which is a child of Camera2D) may render with wrong transform [Windows, Intel HD 630 or lower] · Issue #58314 · godotengine/godot · GitHub

Anyway, for anyone else, I solved this issue by changing the renderer from mobile to gl_compatibility