How to make spotlight?

[jakubdev]

Hi,

I try to make spotlight. Same as first screen, but manage same as second screen. I read that mask's can be reversed, but it only work on webgl, so canvas users gonna have errors. Is there other solution to this issue?
 

[ivan.popelyshev]

this, but pixi-layers is not actually required: https://pixijs.io/examples/#/plugin-layers/lighting.js

 

add container + AlphaFilter, filterArea=app.screen

add one graphics that covers everything with gray and alpha=50%, and another with blendmode ERASE to get rid of part of that shadow

[ramako]

14 hours ago, ivan.popelyshev said:

this, but pixi-layers is not actually required: https://pixijs.io/examples/#/plugin-layers/lighting.js

 

add container + AlphaFilter, filterArea=app.screen

add one graphics that covers everything with gray and alpha=50%, and another with blendmode ERASE to get rid of part of that shadow

I thought only NORMAL, ADD, MULTIPLY and SCREEN are supported if you use WEBGL?

[ivan.popelyshev]

blend_modes are:

1. porter-duff basic equations: NORMAL, ADD, SCREEN

2. composition modes , ERASE (aka DST_OUT) and all other composition modes are supported in webgl: https://pixijs.io/examples/#/plugin-picture/blend-modes.js , because they can be porter-duffed.

3. exception is SRC_IN, DST_IN work with external part of image - so they require full screen geometry - we cant do them.

4. modes that work with non-premultiplied colors and difficult formulas  -  OVERLAY, HARD_LIGHT and real MULTIPLY (that cares about transparency) aren't supported, but can be emulated via texCopySubImage operation , in pixi-picture plugin.

ERASE is an easy thing was added in pixi after i researched that topic

Edited July 30, 2021 by ivan.popelyshev

[ramako]

30 minutes ago, ivan.popelyshev said:

blend_modes are:

1. porter-duff basic equations: NORMAL, ADD, SCREEN

2. composition modes , ERASE (aka DST_OUT) and all other composition modes are supported in webgl: https://pixijs.io/examples/#/plugin-picture/blend-modes.js , because they can be porter-duffed.

3. exception is SRC_IN, DST_IN work with external part of image - so they require full screen geometry - we cant do them.

4. modes that work with non-premultiplied colors and difficult formulas  -  OVERLAY, HARD_LIGHT and real MULTIPLY (that cares about transparency) aren't supported, but can be emulated via texCopySubImage operation , in pixi-picture plugin.

ERASE is an easy thing was added in pixi after i researched that topic

Thanks for the good explanatory answer  Appreciate it

[jakubdev]

On 7/30/2021 at 1:20 AM, ivan.popelyshev said:

this, but pixi-layers is not actually required: https://pixijs.io/examples/#/plugin-layers/lighting.js

 

add container + AlphaFilter, filterArea=app.screen

add one graphics that covers everything with gray and alpha=50%, and another with blendmode ERASE to get rid of part of that shadow

Thanks for help! Will try implement this today.

 

On 7/30/2021 at 4:13 PM, ivan.popelyshev said:

blend_modes are:

1. porter-duff basic equations: NORMAL, ADD, SCREEN

2. composition modes , ERASE (aka DST_OUT) and all other composition modes are supported in webgl: https://pixijs.io/examples/#/plugin-picture/blend-modes.js , because they can be porter-duffed.

3. exception is SRC_IN, DST_IN work with external part of image - so they require full screen geometry - we cant do them.

4. modes that work with non-premultiplied colors and difficult formulas  -  OVERLAY, HARD_LIGHT and real MULTIPLY (that cares about transparency) aren't supported, but can be emulated via texCopySubImage operation , in pixi-picture plugin.

ERASE is an easy thing was added in pixi after i researched that topic

Thanks for this too. 

Edited August 1, 2021 by jakubdev

[jakubdev]

Is there any way too smooth the circle? I got antialias: true on application.

I tried to make it texture, but got error `TypeError: Cannot set property '_parentID' of undefined at Graphics.Container.addChild`.
When transfered it to sprite with RenderTexture it doesn't appear.
Found somebody hack with 2x scaling it and putting it into container with scaleAsBitmap true,but still it doesn't appear.
Tried https://github.com/pixijs/graphics-smooth without success as circle still isn't smoothed.

 

 

My code:

export const createBlackOverlay = (containerToAdd, opacity = 0.5) => {
    const blackScreen = new PIXI.Graphics();
    blackScreen.moveTo(0, 0);
    blackScreen.beginFill(0x000000)
    blackScreen.drawRect(0, 0, window.innerWidth, window.innerHeight);
    blackScreen.endFill();
    blackScreen.filters = [new PIXI.filters.AlphaFilter(opacity)]

    containerToAdd.addChild(blackScreen);

    return blackScreen;
}

const createSpotlight = (characterData, skillContainer) => {
    const blackScreen = createBlackOverlay(skillContainer, 0.2);
    const clearCircle = new SmoothGraphics();
    clearCircle.beginFill();
    clearCircle.drawCircle(characterData.characterSprite.x, characterData.characterSprite.y, 100);
    clearCircle.endFill();
    clearCircle.blendMode = PIXI.BLEND_MODES.ERASE;
    blackScreen.addChild(clearCircle);


    return blackScreen;
}

Edited August 1, 2021 by jakubdev