How do I mask a sprite?

:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By genete
:warning: Old Version Published before Godot 3 was released.

I want to partially reveal a sprite and programmatically show it completely along the time.
Mask area I want to use is a circle and want to hide the parts of the sprite that are outside the circle
How can I achieve that?

Sorry I can’t help. The closest stuff I did was to paint only a part of a sprite, but it had to be a rectangular area.

Gokudomatic2 | 2016-04-14 07:25

Note that this looks like an easy task for shaders.

Bojidar Marinov | 2016-04-14 08:45

:bust_in_silhouette: Reply From: kubecz3k

To use 2d mask in Godot you need to use Light2d.

  1. Prepare mask in graphic editor, use white / alpha. Let the part that should be visible be white, the part that should be invisible should be totally transparent.
  2. Add Light2D node to the scene, ensure it’s enabled (Enabled = true)
  3. Load your mask to the light with Texture property.
  4. Set light to mask mode (Mode->Mask)
  5. In Range section of the light take a note on what is the value of 'Item Mask
  6. Add ordinary sprite node that should be affected by the mask, setup it.
  7. In ‘Canvas Item’ section ensure that Light Mask property is corresponding to Item Mask property of the light.

If you will have any problems check one of the demos, which illustrates how to use masks, demo is called “Using lights as mask”, you can find it here: Download - Godot Engine (Demos and Examples)

You could do the same thing with a material on any CanvasItem. Just multiply the alpha by your mask texture.

Or do it in a material without an image mask by using the UVs, like in the later third of this video:

rgrams | 2016-04-14 21:20

Thank you, this comment helped us a lot in our project. One thing to notice is that in the Demo project the Set light mode is set to “Mix” and not “Mask” (your step 4). In our project we had to set it to “Mix” for the Light Mask to work correctly. When set to “Mask” it fades all images and show the Bg color

coindrop | 2017-08-09 07:33