Ray, Beam and Lightning Effects

[MikauSchekzen]

Ahoy!

For those of us who played games quite a bit (most of us, no doubt), we've seen plenty of (chain) lightning effects (example screenshot in the spoilers). Now, even though I've seen such effects plenty of times, I wouldn't know where to start to make such a thing.

My question is: how would something like this be accomplished in PixiJS? I'd prefer a way without having to rely on WebGL, if at all possible, though, but WebGL-specific answers are welcome too, of course.

 

Example screenshot

(P.s. sorry if this image is hogging someone's bandwidth... I could not find a spoiler tag or something similar)

 

-MikauSchekzen

[Str1ngS]

http://gamemechanicexplorer.com/#lightning-5

Although that example is made in Phaser, the principles can be added to PIXI as well.

It uses some simple draw calls to draw the lighting adds some nice tweens to them, and a WebGL Filter for glow (which you can offcourse dismiss, it's just glow)

[MikauSchekzen]

Thanks for the answer!

I looked at the example, and while reading through the code, an idea struck me (like lightning, lol). I used a Sprite containing multiple TilingSprites as segments, and made the segments go from the previous end to a bit of a random point. Except for the last one, that went to the expected destination.

Here is a screenshot of it:

 

And yes, it's RPG Maker MV, but since it uses PixiJS and the answer wasn't specific to RPG Maker, I posted it here.

But regardless, thanks for the answer, matey!

 

-MikauSchekzen

[Str1ngS]

Another thing you could do animate the lightning effect yourself in your favorite tool, and then export it as a spritesheet.

In your code you should be able to rotate and stretch it your liking. We did something similar for one of our games: 

 

[MikauSchekzen]

That looks great! And that effect is made just by rotating and scaling some sprites a bit? Impressively good looking for something otherwise basic.

[xerver]

Use a Rope: https://pixijs.github.io/examples/#/demos/strip-demo.js

That example is basically mapping this texture across a length of points.