How would I make a lightning projectile move from A to B?

How would I make a lightning projectile like this.

I know the basic of creating lightning between two points. You get the start position, and the end position, and then you create like little nodes between the positions and offset it. Then connect the nodes together with parts. But, how would I move it from point A to B, like in the video? I haven’t tried anything simply because I don’t know how. ;-; I’m not sure TweenService is the way to go. I think it involves CFrames.

Would I have to loop through the nodes and change their CFrame or something? Some mini example code would be really helpful for me to understand so that I can do it myself.

Based on what I could see from the video, it looks like the developer is using my old nemesis Bézier Curves.

This image from the Bezier Curves API page shows how it can be used to path find with dynamic offset.

Ideally you would want to make it follow a path from A to B and then randomly add points of offset along the line.

Honestly, Bezier Curves are a lot of work and require some high order math. However, this would be the most preferable way of replicating this effect; due to it’s possible customization.

1 Like

how do I make it move on the line?

The set-up for making a part move along the line in the Arc-length parameterization section of this API page:

I read that over a few times. It was confusing and not very helpful.

Simply use the formula provided. It’s not hard.

Saying it’s not hard doesn’t make it any easier for me? I can see that there are formulas there, but I literally just said that it was confusing and not very helpful. It would be better if someone were to make it simpler for me to understand.

Okay. I will attempt at doing so. Basically, quadratic bezier curves are 2 points shooting a “ray” at each other while lerping to their goals.

You don’t need to necessarily understand how the formula works (I don’t really understand). But you just need to know how to use it.
This is the code you’ll need to use:

function quadBezier(t, p0, p1, p2)
	return (1 - t)^2 * p0 + 2 * (1 - t) * t * p1 + t^2 * p2

T is the percentage you want to lerp by.
Then you can just plug this into a for loop and lerp the CFrame using CFrame:Lerp()! Hope this helped.
p0: image
p1: image
p2: image

1 Like

Ok, I understand that. I think now my issue is creating that “lightning projectile” and having it lerp along the bezier curve path. In the video, it’s multiple parts, traveling on the same curve. I tried replicating the same effect by destroying the parts after a wait() so that it looks like a projectile, but I don’t think that’s how it’s done.

I am fairly certain they use a tween.

what about the actual lightning itself? I honestly don’t know how to do that and am thinking of just using trails to mimic that actual effect…

They did exactly what you described, but with yields and the tween service. Make the lightning, tween the part’s transparency in order, then tween the transparency back to 1. CFrames are used to reposition parts, though they didn’t do that in the video.

A simple/easier way to make lightning similar to this:

  • Step 1: Get the CFrame you want the lightning to go
  • Step 2: Get the segments, create a table (use the CFrame.Position and the lerp function to the endPosition (do CFrame.Position:lerp(endPosition, [0-1])))
  • Step 3: Loop through the table, add a delay in the loop, each iteration do this: Get and angle (math.random() * math.pi * 2), Add lightningOffsetDistance * cos(angle) * CFrame.RightVector and lightningOffsetDistance * sin(angle) * CFrame.UpVector (note you can also slightning randomize the lightningOffsetDistance), create a part (with transparency 1) from the last point to the current point (add this part to a table for later), create and play a tween to make the part visible
  • Step 4: Once that loop finishes, loop through the list of parts we made earlier and create tweens for each of them to make them invisible (use either Tween.Completed:Wait() or wait()/RunService.Heartbeat:Wait() to yield)
  • Step 5: Clean up. Destroy the parts and tweens.

Note there are tons of things you could do to improve this. A simple one is to vary the lightningOffsetDistance based on the distance from the start and end positions (hint: use the lerp alpha then do 1 - math.abs(alpha - 0.5)*2 (returns 0-1, 0 should have the shortest offset, 1 should have the longest)). You could also do what it looked like the video was doing, where they just did a random spherical offset on all axes, instead of just on two like my example.

If you’re stumped, here are some modules people have made that you might find helpful:

1 Like