How can I apply a glow filter in Phaser?

Question

I'm trying to get the following effect, but as far as I know, a filter is the only sensible way.

Imagine some objects and background, and a fire ball passing through. The fireball glows. All objects (not the background) become brighter in color where they are under that glow. The glow effect could be described as a glow around a missile's fire.

This should be built-in to Phaser, as pixi.js has it.

Answer 1

It may be achieved by following: add a glow sprite with additive blending mode (since it was introduced in Phaser 2.0 on March 13) and combine it with masking (you can find article on PIXI about masking here). So, the workflow: - you render all your foreground objects, that need to be affected by glow to mask graphics - render background and all foreground objects to real graphics - use the mask graphics to set the mask of the glow sprites (set additive blending mode for them) and render the glows Result: you get untouched background, and all foreground objects now are lit by glow sprites.

Answer 2

Look in pixi.js/src/filters or try pixi-extra-filters/src/filters/glow.

fireball.filters = [ new PIXI.filters.GlowFilter(viewWidth, viewHeight, distance, outerStrength, innerStrength, color, quality) ];