PIXI 4.6+ way of cutting shapes using other shapes?

[timetocode]

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 November 23, 2017 by timetocode

[ivan.popelyshev]

http://pixijs.io/examples/#/layers/lighting.js That principle can be used for many things. That demo is using "layers" plugin (https://github.com/pixijs/pixi-display), but for just one torch you dont need it.

[timetocode]

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.beginFill(0xff0000)
sheet.drawRect(0, 0, 500, 500)
sheet.endFill()

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

stage.addChild(sheet)
stage.addChild(hole)

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?

[ivan.popelyshev]

you need only one container with VoidFilter, and put black/white elements inside.

[timetocode]

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)
red.endFill()

let blackAndWhite = new PIXI.Container()

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

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

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

//blackAndWhite.addChild(red)
//red.addChild(blackAndWhite)
stage.addChild(red)
stage.addChild(blackAndWhite)

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

 

[ivan.popelyshev]

Why do you need three colors there?

[timetocode]

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.

[timetocode]

I've simplified the code a bit and added a fiddle: https://jsfiddle.net/q5oe2vpp/3/

[ivan.popelyshev]

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

==========

https://jsfiddle.net/q5oe2vpp/4/

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.