0 votes

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?

in Engine by (74 points)

@ 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

2 Answers

+2 votes
Best answer

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
by (10,553 points)
selected by

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

+1 vote

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.

by (21 points)
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.