drawing on the viewport

Question

For a simple top-down golf game, I want to highlight the possible landing area for the ball. My golf course is a simple tile map. The player can select one of several golf clubs, each club allowing for a different range to where they can hit the ball. Now when the player selects a golf club, I want to put some kind of overlay over the tilemap (or the complete viewport if that is easier) that "dims" the environment, leaving only the parts of the current hole that the player can hit the ball to with that club at full brightness. Alternatively, I could also imagine leaving the complete background as is and draw a half-transparent overlay over the part that the player can hit.
(I created some pics with Gimp to explain what I mean ... this is not really my tilemap, just a random pic of a golf hole, btw)

How do I best do that?

Debouchment

Answer 1

A TextureRect with a suitable semi-transparent texture would probably do it.

Ditch

Answer 2

Yeah, but how do I dynamically create the texture? Also, this kind of feels like something that should be done with a shader, but I haven't used shaders in Godot before, so I'm not sure if that's the way to go. I guess I could do s.th. like have a semi-transparent black TextureRec over my complete tilemap and then have a shader that makes all pixels fully transparent that are in the required distance from my ball position.

Debouchment

Answer 3

If it's 2D use a transparent texture. There are options in canvasItem to set the canvases to draw on top of other node2Ds, you can use this to have objects draw over your overlay. Or just put the overlay between the background and the important sprites that need to be highlighted. You could also change the color of the sprites with modulate.
In 2D you can override the _draw function of any canvasItem inherited node and draw a custom shape.
In 3D try a Decal. Decals are great for this because they cover the objects on the screen and you can set up layers to have it interact with different meshes.
Another alternative would be to use a mesh with a material with multiply or add. Multiply darkens and add brightens. This works in 3D but will 2D should probably have the option too.

Cryptogram

Answer 4

So the masked area must be dynamic? That wasn't clear from the pictures. It looked like as if it just needed to be moved around or maybe scaled.

If you need a dynamic mask then yes, shaders are likely your best option. Use a ColorRect), attach a ShaderMaterial to it, write the shader with the required uniforms and you should be done. Doesn't sound too hard, except that shaders are generally a pain in the arse to debug.

Ditch

Answer 5

If all else fails, I could make a texture for every golf club instead of creating the shape dynamically. But since the textures would need to be pretty huge (and also I'm not certain all the shot lengths for the different clubs will stay the same), I'd rather calculate them on the fly. Programming the shader should be pretty straightforward, if I get my coordinates normalized correctly.

Debouchment

Answer 6

Yay. It worked. I programmed my first shader. And it was a lot easier than I thought.

Debouchment