[ SOLVED ] Node changes its color if overlapped

kar1s0n

Hi all. I'm creating a simple 2D top down game and I have a question
My game has fully white UI, and all the objects in the scene are also white. When the white object moves behind the UI, the player cannot see the UI because it has the white background

I want to make the following:
If UI gets covered by another object, it goes black only in those areas where it's being overlapped. I thought of making two versions of UI (one white and another black), so when the white gets in contact, it clips and we see black underneath it, which will be under the white UI but over all the objects

I'm not sure how to create something like that. Also keep in mind that most of objects are being instantiated via the code, so the solution with clip children doesn't seem to work here. I will appreciate greatly if you know how to make it and share it here!

DaveTheCoder

Would the CanvasItem.z_index property be useful?
https://docs.godotengine.org/en/4.6/classes/class_canvasitem.html#class-canvasitem-property-z-index

kar1s0n

DaveTheCoder It could be, if it didn't cover the white node (White UI)

DaveTheCoder

Is it possible to keep the UI and the objects in separate areas of the display, so that objects cannot move behind the UI?

If that's not possible, you could detect whether an object intersects the UI, and change the object's color, maybe using transparency, so that the overlapped part of the UI remains visible.

Changing the color of the overlapped part of the UI to black may be possible, but more details about the objects and the UI would be needed.

kar1s0n

Alright. Other methods would work, but I want to make it stylistically look well, so I persist

More specifically: I'm remaking the arcade game "Asteroids", and as you can see on the top left side of the screen, the asteroid fully covers my hp meter (On the top right side of the screen I also have score label)

My hp meter is basically AnimatedSprite2Ds (they have simple repeating animation) inside of their own TextuRerects that are inside of an HBoxContainer (so I can align everything correctly)

The objects that usually cover those ui elements are the player or asteroids. They all are just CharacterBody2Ds. Asteroids have AnimatedSprite2D and the player has just Sprite2D, so we can see them

If you need any other details, I'll be glad to include them as well

kar1s0n

So, the solution to my question turned out to be simple:

I created copies of my white UI and through modulate made them black, in the same toggle (visibility) I set the light mask and visibility layer to the desired one for me (in my case I set both on the layer 6). Ordering had to be higher than the original white UI, so it gets basically covered with the black version. And then goes the smart step: I set material to CanvasItem and change "light mode" to Light only. Now, the only step is to add the pointlight2d to all the objects I want to show this black UI when they get in contact. Don't forget to set the correct texture to the pointlight2d node and set its "item cull mask" to the same layer as the black UI. Good Luck