draw transparency to graphics object

[ForgeableSum]

Is there a way to make only certain pixels of a graphics object transparent? assuming the graphic was already filled with a solid color, then you could do something like:

graphic.beginFill('transparent',1);

graphic.drawCircle(0,0,100);

 

So that would draw a little circle with transparent pixels?

I am using a bitmap data to achieve a similar effect and it is just way too resource-intensive to draw to a BMD on every update call. 

 

[ForgeableSum]

Anyone? I've tried about 1000 things. Still can't figure out a way to do something like this. And I've found tons of old posts of people asking the same thing in different words. The idea is simple: fill a graphics or render texture and draw a shape, like a circle or ellipses with transparency. 

Right now there seems to be no way to do something like this without using a bitmap data. 

But surely, that couldn't be true. Because erasing stuff, with more specific criteria than "the entire thing" is a fundamental and basic drawing operation. Yet it would seem render textures and graphics only allow you to clear the entire thing, and not certain areas. 

[samme]

I have to guess transparent fills can't actually remove other fills. But maybe you could fill black/white and use a blendMode?

[ForgeableSum]

1 minute ago, samme said:

I have to guess transparent fills can't actually remove other fills. But maybe you could fill black/white and use a blendMode?

I can't conceive of how blend modes could be used in render textures or graphics. Using destination-out blendmode in a bmd gets the job done, but it's horrible on performance. 

How do you imagine using blend modes in a render texture or graphic? 

[Milton]

2 hours ago, feudalwars said:

Because erasing stuff, with more specific criteria than "the entire thing" is a fundamental and basic drawing operation. Yet it would seem render textures and graphics only allow you to clear the entire thing, and not certain areas. 

HTML Canvas supports clearRect(), so you could add that to Phaser's CanvasRenderer. Add some sort of clearObject, similar to how a Mask is used.
Then as the final step on render, do some clever clearRecting  You would have to do everything with Rects of course, could be fun.
For the WebGLRenderer it should be easier to implement, you can just render your transparent clearObject.

[squilibob]

Am I missing something in this topic or can you simply just apply a mask to your graphics object?

[ForgeableSum]

5 hours ago, squilibob said:

Am I missing something in this topic or can you simply just apply a mask to your graphics object?

A mask is only going to give you a rectangular shape and it will only show the parts of the graphics object that are inside the mask. But what I want is the opposite, to only show the negative space (making the pixels inside the mask area transparent). So yeah, a mask is not the solution. A reverse mask that allows shapes other than rectangles would be. 

[samme]

 

[samme]

 

[JeanPeel]

You need to make your graphics into PNG's with transparency.  Here is an online editor that does it well.  https://www5.lunapic.com/editor/?action=transparent  Then Phaser will load it into the game with the transparency already recorded in the PNG.