How to use blending in phaserjs

2
votes

I have searched the whole documents in fact i downloaded them and searched manually. All i found was filter method which allows one to use webgl shadders which you have to write.

What i want is sort of blending as you would see in photoshop light blend for layers etc.

On internet i find examples in pixijs and talk about supporting it in future that happened half year ago. So please anyone who has been following phaserjs and know about filter/blendMode please let me know.

2
javascriptphaser-framework

2 Answers

8
votes

New Phaser 2.0 introduces blendMode property for Sprite object. And there is a PIXI enumration for identifying one:

PIXI.blendModes = {
    NORMAL:0,
    ADD:1,
    MULTIPLY:2,
    SCREEN:3,
    OVERLAY:4,
    DARKEN:5,
    LIGHTEN:6,
    COLOR_DODGE:7,
    COLOR_BURN:8,
    HARD_LIGHT:9,
    SOFT_LIGHT:10,
    DIFFERENCE:11,
    EXCLUSION:12,
    HUE:13,
    SATURATION:14,
    COLOR:15,
    LUMINOSITY:16
};

So, you can simply write

sprite.blendMode = PIXI.blendModes.ADD;

And here it is.

1
votes

you can simply use : 

spriteName.blendMode =  PIXI.blendModes.TypeOfBlendMode;

where:

spriteName is the name of the sprite( let's say player / enemy) and TypeOfBlendMode is the type of blend you want to use (which can be one of the following: NORMAL, ADD, MULTIPLY, SCREEN, OVERLAY, DARKEN, LIGHTEN, COLOR_DODGE, COLOR_BURN, HARD_LIGHT, SOFT_LIGHT, DIFFERENCE, EXCLUSION, HUE, SATURATION, COLOR, LUMINOSITY ).

Example: let's say the sprite name is player and i want to set the blend mode to MULTIPLY then i will write:

player.blendMode = PIXI.blendModes.MULTIPLY;