Jump to content

[PIXIJS] [HELP] Drawing polygon inside rectangle with transparency (Hole inside rectangle)


Recommended Posts

Hello PIXIJS Devs.

I am working on Line of Sight in PIXIJS. So far my algo works well. I ecountered on issue, that i can not draw polygon which makes a hole inside a rectangle. 

I tried to use mask and blend modes but it did not work.

        beginFill(0x000000, 0.5)
        drawRect(0, 0, this.viewport.width, this.viewport.height)

I tried Graphics hole, it was working but not always, sometimes holes disapear for some reason.


Should be like this: (First image is using code above, but this is not working always) 2nd image shows there are 2 graphics (1 Rectangle which fits whole screen with black fill color and 0.5 alpha and second polygon (Vision))


I tried stacked canvas with blendMode multiply and it works. 
What is the best way to do this?

Edit: Polygon is cleared and drawn each frame. Way to make hole inside rectangle needs to be fast.

Edited by Saqirm
Link to comment
Share on other sites

I tried Graphics hole, it was working but not always, sometimes holes disapear for some reason.

if hole intersects the outer hull - it wont go well.

the best way is to do the layering.

Example1 :

create a full screen render texture , render black rect there, with white light on it. Place a sprite with this texture and corresponding blendMode


create a container that will be shown on top of your world. set its filters to [new PIXI.filters.AlphaFilter()]. add graphics in it, as usual: black rect and lights. set "container.filters[0].blendMode = MULTIPLY"


Learn how to use @pixi/layers https://pixijs.io/examples/#/plugin-layers/lighting.js , basically the same, but it also allos you to store the light inside character, so you can move them together. It creates fullscreen renderTexture with "clearColor" property so you can omit the rectangle.


Learn how to use any filters with lighting: https://codesandbox.io/s/advancedlayeringfilterspixi-iycmu . Beware, this demo uses global pixi, but you can use es6 modules just fine



Link to comment
Share on other sites

Thanks alot ivan. I applied 2nd example, and it works very well. 

I am using layers library. I am abit aware of creating renderTexture each frame from polygon, is it faster than 2nd example ? 


Edited by Saqirm
Link to comment
Share on other sites

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.

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.


  • Recently Browsing   0 members

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