How to Achieve a Glowing Lightsaber Effect Without Duplicating Sprites?

Phaser 3
1

Hi everyone,

I’m working on a custom Star Wars fan game inspired by Star Wars: Revenge of the Sith for GBA. I’m using assets from this sprite sheet: Star Wars Revenge of the Sith Sprites.

In the original GBA game, the lightsaber emits a “glow” effect. After reviewing the game frame by frame, I noticed they achieved this by duplicating each character sprite with three different lightsaber variants, simulating a glowing effect.

For my project, I would like to use a different approach to make the lightsaber glow, instead of duplicating the sprites. Does anyone have suggestions on how to achieve this effect in Phaser?

Would a spotlight combined with a normal map work for this? Or is there another technique I could use to simulate the glow without manually altering the pixel art?

Any help or ideas would be greatly appreciated!

Thanks in advance!

2
3

Hi, thanks for the link! I may have been unclear. While I’m looking for a glowing effect, what I really want is to dynamically change the brightness of the lightsaber — from a deep blue to a bright, light blue, giving the impression of it glowing or pulsating.

Is there a way to achieve this in Phaser, perhaps by adjusting the tint or alpha values over time, or using a shader? I’d like to avoid duplicating sprites if possible.

Maybe I want something like this ? Phaser - Examples - v3.85.0 - fx - colormatrix - Colormatrix Fx

But if I want to use colormatrix, I’ll have to separate my spritesheet in two : one for Anakin, and one for the lightsaber (to apply the colormatrix only on the lightsaber)

Any advice or suggestions on how to create this effect would be appreciated!

4

You can do this by changing the alpha 3 element of the ColorMatrix effect. It will also change the character a little, but that kind of looks right.

If you want only the saber changed, I think you would have to use a color replacement shader.

5

I managed to achieve a working solution without using the color matrix.

I created a separate sprite sheet that features only the lightsaber, rendered entirely in white. While the main sprite sheet is playing, I retrieve the current frame index of the character to locate the corresponding white lightsaber in the second sprite sheet. Then, I adjust its alpha value in the update method, and voilà!

There’s still some tweaking to be done, but it gets the job done without needing to modify the main sprite sheet.

I’m even considering adding a normal map to create some lighting effects on Anakin. :blush:"

test2