Blend Mode controls the way particles are added over background content.
Parameters
Blend modes available (as per the PixiJS documentation are:
normal: the default mode. A sprite layer overlays the other layer according to the sprite layer’s alpha.
add: add sprite pixels to background pixels. Always produces the same or lighter colors as the background.
multiply multiply sprite pixels and background pixels. Results in darker colors, similar to shadows.
screen inverts both layers’ pixel values, multiplies them, and inverts again. Produces the opposite of multiply.
Here are some examples, refresh the page to see the different blend modes over different images.
Pixi includes a special particle container which is great for adding a lot of simple elements to a container. However, it does come with some limitations.
If you apply a blend mode to Pixi Particles on a ParticleContainer, you will not see any blend mode applied. This can be worked around by applying a blend mode to whole ParticleContainer instead of to the particles directory. This works, but limits you to one type of blend mode for all particles on the layer.
Blend Mode Behavior Example:
Blend Mode Behavior Configuration: – other configuration excluded for brevity
{
type: "blendMode",
config: {
"blendMode": "screen"
}
},