Jump to content

draw transparency to graphics object


ForgeableSum
 Share

Recommended Posts

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. 

 

Link to comment
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. 

Link to comment
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? 

Link to comment
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.

Link to comment
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. 

Link to comment
Share on other sites

  • 3 years later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...