x-ray effect - how to make sprite transparent where it is overlapped with other sprite

Question

I want to make an x-ray effect.

Here are the example layers of sprites:

----- xray glass
----- sprite 2
----- sprite 1

So i want to make sprite 2 transparent where xray glass sprite is overlapping it, so that in that area sprite 1 would be seen.

How can i implement it in godot?

Comments

@ dorijan5484's suggestion could probably work, but I think you might be better off using the Light2D node and masking. I only skimmed through this video, but I think it should give you a push in the right direction: https://www.youtube.com/watch?v=phA51SdFXCs

Answer 1

Make your "xray glass"-node a Light2D. Set it's texture to a fully white image (it has to be white, nothing else, i.e. "#FFFFFF"!) and the mode-property to "Mix". The size of the image depends on how large the x-rayed area is supposed to be. If you don't want it to be rectangular, you can add shape by including fully transparent areas.

Next, select your "sprite 2"-node. In the inspector under CanvasItem > Material create a new CanvasItemMaterial from the dropdown-menu and set it's light_mode-property to "Unshaded". This will be the overlay, which is shown by default, so we don't want it to be affected by the light.

Lastly, select your "sprite 1"-node and create a new CanvasItemMaterial for it as well. Only this time, set it's light_mode to "Light Only". That way, it will only become visible where it overlaps with a Light2D texture.

Make sure, that your tree looks like this - order matters here:

- Root-Node (whatever)
  - xray glass
  - sprite 2
  - sprite 1

Comments

perfect! it works!

---

This does not work on Godot 4.0, any solutions for it?

---

2mbili: The 2D lighting system was rewritten from scratch in Godot 4.0. It now uses a single-pass approach to lighting instead of multi-pass, which is significantly faster when using several lights. However, the mask lighting mode that existed in Godot 3.x no longer exists in Godot 4.0.

Instead, you can look into using CanvasItem's built-in clipping property, which is new in Godot 4.0. It lets you use another CanvasItem's alpha channel to clip (and mask) any CanvasItem. As of writing, there are some bugs with this feature though (they're already reported on GitHub).

Answer 2

I think you need to use shaders for such an endeavour.
I don't think there are any functions to make only a part of the sprite transparent. You could set sprite 2's alpha value on collision with xray glass object (preferably just making it an area2D and giving it a collision and a sprite), but that would make whole sprite 2 transparent.