I have a brush texture that I am applying to a RenderTexture when the user clicks and moves their mouse over it. The brush texture is circular in shape with a dithered alpha edge around the outside. This gives the brush a soft edge that looks quite nice when the user draws onto the render texture with it.
This works as expected. However, I also need to apply a mask to the render texture so that the user’s brush strokes do not appear on certain areas of the render texture. Additionally, the mask also has dithered alpha edges around its edge so that the user’s paint strokes fade out as they near the outside area of the render texture.
However, when I apply my mask to the render texture, the soft edge around the paint brush texture suddenly exhibit a harsh darkened edge rather than the nice soft edge that I was previously seeing. When I remove the mask, the brush texture once again shows the soft edges that I was expecting.
For the avoidance of doubt, I am referring to brush strokes that should still be perfectly visible on screen, rather than brush strokes that might now be hidden from view due to the mask being applied.
Here’s a rough outline of the steps I’m carrying out:
Load a brush and mask texture
Create a RenderTexture
Create a Bitmap mask using the mask texture and apply it to the RenderTexture
Listen for mouse down, move, and up events to track when user is drawing on the RenderTexture
When pointer is down or moving, then use RenderTexture::draw() to draw the brush texture onto the RenderTexture and also tint it red
Expected Behaviour
When drawing to the RenderTexture I would expect the brush to look identical no matter whether a mask was applied or not.
Actual Behaviour
The first image shows the brush being applied to the RenderTexture when it has no mask applied. Notice the nice soft edges around the brush strokes.
The second image has the mask applied and now shows a darkened edge around the brush strokes. The two white ovals in the second image are intended and are created by the mask.
If you run the code you will initially be able to draw to the RenderTexture but without the mask applied. Set useMask to true then re-run the demo. You should notice when you draw that your lines now have a darkened edge rather than the previous softer edge.
Example Test Code
The brush texture I am using can be found here.
The mask texture I am using can be found here.
Version
Description
I have a brush texture that I am applying to a RenderTexture when the user clicks and moves their mouse over it. The brush texture is circular in shape with a dithered alpha edge around the outside. This gives the brush a soft edge that looks quite nice when the user draws onto the render texture with it.
This works as expected. However, I also need to apply a mask to the render texture so that the user’s brush strokes do not appear on certain areas of the render texture. Additionally, the mask also has dithered alpha edges around its edge so that the user’s paint strokes fade out as they near the outside area of the render texture.
However, when I apply my mask to the render texture, the soft edge around the paint brush texture suddenly exhibit a harsh darkened edge rather than the nice soft edge that I was previously seeing. When I remove the mask, the brush texture once again shows the soft edges that I was expecting.
For the avoidance of doubt, I am referring to brush strokes that should still be perfectly visible on screen, rather than brush strokes that might now be hidden from view due to the mask being applied.
Here’s a rough outline of the steps I’m carrying out:
Expected Behaviour
When drawing to the RenderTexture I would expect the brush to look identical no matter whether a mask was applied or not.
Actual Behaviour
The first image shows the brush being applied to the RenderTexture when it has no mask applied. Notice the nice soft edges around the brush strokes.
The second image has the mask applied and now shows a darkened edge around the brush strokes. The two white ovals in the second image are intended and are created by the mask.
Example Test Code
A CodePen example can be found here.
There is a constant named
useMask
at the top of the JavaScript. It’s initially set tofalse
.You can see the main parts of the code below.
If you run the code you will initially be able to draw to the RenderTexture but without the mask applied. Set
useMask
totrue
then re-run the demo. You should notice when you draw that your lines now have a darkened edge rather than the previous softer edge.Example Test Code
The brush texture I am using can be found here. The mask texture I am using can be found here.