How do I mask out the player like in Axiom Verge?

Godot Version



I want to make it where when you go through a door everything goes black except for the player and then once the player transitions the black fades away. this is to hide the rooms spawning and despawning. (0:12)


You could replace the world with a black room. Is the player a child or a sibling of your world node?

child. and wdyum replace?

is there a way to spawn a black box and make the player infront of it but keep everything else behind it? that could work

Yes, first create a CanvasLayer node, this node will make sure that any child of it stays on screen always. Then give it a ColorRect node as a child and color it black. Adjust it to cover the whole screen. Then, in visibility, you want to change the ordering → z index to a high value, like 9, and then do the same but with a z index of 10 for the player.
Then via script you fade the ColorRect alpha using a Tween whenever the player enters a new room.
I hope it’s easy to understand and I didn’t make any mistake :slight_smile: I’m writing this at 2am lol

ill try it thnx

ok there is a problem, i dont want the player to be a child of the rect. for now i will just make it temporarily a child of it, but would there be a way to do this effect while keeping hem seperate?

Oh don’t worry, the player doesn’t need to be a child of the rect, just make sure the z-index is greater than the black ColorRect.

how do i set z index

All 2D Nodes that inherit from CanvasItem have a z_index property that can be set in GDScript / C# code

sprite_node.z_index = value

or directly in the Godot Editor Inspector (there should be a CanvasItem tab with the z_index property in the inspector of your Sprite2D, TileMap, etc.)

CanvasItem — Godot Engine (stable) documentation in English

setting the z index isnt putting it infront of the rect

setting the node’s z indexes isnt rendering the player infront

Indeed, it seems that your player node and your ColorRect must both be children of the CanvasLayer (otherwise it will always take over, regardless of the z_index ordering).

I’m not very familiar with the 2D part of Godot Engine, I’ll let Ralzee indicate the solution if using a CanvasLayer is indeed the best solution

1 Like


Remove the world and replace it with a black scene. But I think the canvas layer solution is more elegant.

maybe theres a way to mask a player hole from the color rect. any ideas?

I didn’t know canvas layers render on top of everything else, independent of z-index…

Screw the CanvasLayer approach then.

Place the ColorRect as a child of your player.
Adjust its size to fit the whole Camera.
Then give it a z-index greater than everything else (like 9)
And give your player a z-index greater than the ColorRect (like 10).

Then you Tween the transparency whenever you enter a new room.

it didnt work. the player stays behinds the rect

nvrm i turnd off z as rletive for the rect and it worked

1 Like