How can draw a black outline around my image?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By Bimi124

I’m trying to make a gun scope for my shooter game. I designed an overlay but since it’s a square I want to fill the rest of the screen with a black border.
I created a mockup to show how the player’s screen is going to look like:

I have no Idea how to do the black borders.
NOTE: The player should still be able to see the game in the entire screen size, the view should only be limited once they aim.

:bust_in_silhouette: Reply From: exuin

Couldn’t you just make the image a rectangle or use a ColorRect to fill the blank space?

Thank you for your quick answer!
I tried using a color rect and a HBoxContainer but I’m unsure how I can ensure the image is as big as possible.
Making the image a rectangle also wouldn’t work since the window can have different sizes.

Bimi124 | 2021-12-31 15:56

:bust_in_silhouette: Reply From: Gluon

Add a canvas layer with the black border as a sprite on that canvas layer. The control whether it is on the screen with the .visible attribute.

See the documentation here for some more info on that

Set up a function and when you go into a “sniper” mode set the canvas layer sprite as visible and when the player comes out of “sniper” mode set the canvas layer sprite as not visible.