Why ColorRect break Area2d?

Question

ColorRect break Area2d

My scene:

root
└ Node2D
  └ Area2D
    ├ Sprite
    └ CollisionShape2D

Area2D.gd:

extends Area2D

func _ready():
    var b = self.connect("input_event", self, "_on_Area2D_input_event")
    print($"../..".print_tree_pretty())


func _on_Area2D_input_event(viewport, event, shape_idx):
    if InputEventMouseButton and event.is_pressed():
        print("Click")  

Everything works. If you click on the sprite, it is written "Click".

If my scene:

root
└ Node2D
  ├ ColorRect #This background
  └ Area2D
    ├ Sprite
    └ CollisionShape2D

The script Area2D.gd is breaking! If you click on a sprite, "Click" is **not **written. Why is this happening and how to fix it?

Answer 1

Controls (such as ColorRect) take priority to handle input. So a Control will have an opportunity to handle the mouse input before any Node2D (such as Area2D) even if the Node2D is in front.

To fix that, change the Mouse Filter (mouse_filter) property of the ColorRect to "Ignore" (MOUSE_FILTER_IGNORE), so it does not handle mouse input, and lets the Area2D handle it.