Sign in to follow this  
Followers 0
feudalwars

draw transparency to graphics object

9 posts in this topic

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. 

 

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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? 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.