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.


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.

  • \$\begingroup\$ i think i get it but i am very new to pixijs and phaser so if you could make a small example i'd be very happy. Also i want other sprites to visible but extra lit when glow sprite is over them.Otherwise i could just lit them and unmask the lit part. \$\endgroup\$ – Muhammad Umer Mar 16 '14 at 18:44
  • \$\begingroup\$ can you translate that into phaserjs code...i can't find a way to do you render all your foreground objects, that need to be affected by glow to mask graphics \$\endgroup\$ – Muhammad Umer Mar 16 '14 at 19:46
  • \$\begingroup\$ can you give an example \$\endgroup\$ – Muhammad Umer Mar 17 '14 at 21:43

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) ];

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.