Jump to content

PIXI 4.6+ way of cutting shapes using other shapes?


Recommended Posts

I've been reading a backlog of how to do this all the way back to when the recommendation was to use canvas. What is the new and modern way of accomplishing this? Let's say I have a rectangle that fills my screen and makes the game look like night time.. then I have a torch and I want to cut (or lighten) a circle out of the night rectangle.

I've tried drawing a circle using graphics and setting its colors to white, black, and alphas to 1.0 or 0, then adding it as a mask onto the rectangle -- this only seems to perform a regular mask operation (aka draw the night within the circle) but never the opposite (draw the nighttime everywhere but the circle). I know how to accomplish this via canvas or webgl, but it looks like this feature is already in pixi I'm just not sure how to do it!

Thanks for reading!

p.s. if the answer involves using a filter could you please reply with code.. im never sure which object exactly gets the filter added

EDIT: and will the new method work if calculated *every frame* ?

Edited by timetocode
Link to comment
Share on other sites

  • 3 weeks later...

Thanks for the sample code. It looks like its doing approximately what I'm looking for.

I think I'm stuck, though, when I just try to cut one shape out of another (without layers or any particular aesthetic for the lighting):

let stage = new PIXI.Container()
let sheet = new PIXI.Graphics()
sheet.drawRect(0, 0, 500, 500)

let hole = new PIXI.Graphics()
hole.drawRect(0, 0, 50, 50)
hole.filters = [new PIXI.filters.VoidFilter()]
//hole.filters[0].blendMode = PIXI.BLEND_MODES.MULTIPLY 
hole.filterArea = new PIXI.Rectangle(0, 0, 500, 500)


The goal there being to cut one shape out of another, specifically `hole` out of `sheet` .  I've tried adding them to each other and adding different blend modes. The code there as pasted just draws the hole (a white square) over the sheet (a larger red square). My background is black, so the desired result is for the red square to have a black square hole cut out of it.

Any tips?

Link to comment
Share on other sites

Then how do I use that container with the black+white stuff to mask/reverse-mask another container?

I gave them some better names:   red, black, white, and stage.

renderer.backgroundColor = 0xFFC0CB

let stage = new PIXI.Container()

let red = new PIXI.Graphics()
red.beginFill(0xff0000, 1.0)
red.drawRect(0, 0, 150, 150)

let blackAndWhite = new PIXI.Container()

let black = new PIXI.Graphics()
black.beginFill(0x000000, 1)
black.drawRect(0, 0, 50, 50)

let white = new PIXI.Graphics()
white.beginFill(0xffffff, 1)
white.drawRect(50, 50, 50, 50)

blackAndWhite.filters = [new PIXI.filters.VoidFilter()]
blackAndWhite.filterArea = new PIXI.Rectangle(0, 0, 500, 500)


I've attached a picture.  Background is pink. Red is the image that i want to get cut/removed. The black+white are what I'm trying to make the void/mask out of. Am I getting closer?? :x



Link to comment
Share on other sites

Maybe I made it over-complicated.  I'm just trying to cut through the red and see the pink. I wasn't sure which color I had to give the void filter to cut through to the next layer. Or which container to put the void filter on, or which container to add the void-using container to. Basically looking for a SOURCE_IN blend mode? or Maybe SOURCE_OUT, whatever is the opposite of a regular pixi mask.

The actual game mechanic is the poison circle in https://bruh.io/ .  Currently we draw circles every frame to close the circle (causes some performance issues). I'm also working on another game that does something very similar to your pixi lights demo, but with normal maps after cutting away the darkness.

I'm looking to replace it by covering the whole game in poison, then reverse-masking a giant circle out of the poison (aka cutting a hole in the poison). Then I can shrink the circle every frame without having to generate any new circle graphics.

Link to comment
Share on other sites

OK, now I've got it. That thing requires custom webgl blendmode. It could be done through two masks but I really dont want to do that :) Either a mask+cutout, if someone fixes https://github.com/pixijs/pixi.js/issues/4183



That's what I've used: https://github.com/pixijs/pixi.js/wiki/v4-Gotchas#no-custom-webgl-blend-modes

I hope to add clearing blendmode in V5. BTW, test it on iphones, it might be we need different blendmode.


Thank you for reminding me that we have those stupid issues.

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...