Electric Arcs Effect

This is an implementation of an electric arc effect for Roblox games. It draws electricity sparks between two static or moving points, and you can change various properties such as the color, the number of arcs, whether it is enabled/disabled, etc.

Courtesy of user @AllYourBlox for the original implementation of the algorithm that produces the line segments for the arcs (click here). The original code has been modularized, refactored and optimized for ease of use and more widely applicable use.

(Some details on differences in implementation from original) The original code manipulated many neon parts every frame which was not optimal due to the work it takes for the engine to update the position and size of baseparts. This version draws the line segments that represent the arcs through ImageHandleAdornments with the texture of a glowing line segment. Please note that this is still somewhat on the performance-heavy side and may be an overkill kind of implementation for such an electricity effect, but the library does include auto-throttling and other tricks to make sure the frame rate stays as high as possible and no effort is wasted updating effects that are far away compared to those closeby.

Showcase

See here for a visual example: (video)

Downloads

Model file with just the module: Arc.rbxm (12.7 KB)

Example place from the video above: ElectricArc.rbxl (31.9 KB)

Also available in the Library as a model: https://www.roblox.com/catalog/02770378782/redirect

Usage

The following listing shows how some of the most important API is used to make the effects happen in a game.


local Arc = require(game.(...).Arc)

-- Make an arc between two static points with default colors:
local arc1 = Arc.new(
    Vector3.new(10, 10, 0),
    Vector3.new(-10, 10, 0)
)

-- Make a dynamic arc linked between two (moving) attachments:
local arc2 = Arc.link(
    workspace.ArcStart.Attachment,
    workspace.ArcEnd.Attachment
)

-- Make an arc that is green:
local arc3 = Arc.new(
    Vector3.new(10, 10, 0),
    Vector3.new(-10, 10, 0),
    Color3.new(0, 1, 0)
)

-- Make a blue one with 12 arcs (instead of default 6) with segments that are half as wide as normal:
local arc4 = Arc.new(
    Vector3.new(10, 10, 0),
    Vector3.new(-10, 10, 0),
    Color3.new(.5, .5, 1)       -- cyan
    Color3.new(1, 1, 1),        -- top color (not important here)
    12,                         -- number of arcs
    0.5                         -- fatness multiplier (half of normal)
)

-- Change various properties while it is running:
arc1:SetColor(Color3.new(1, 0, 0)) -- make it red
arc1:SetRange(Vector3.new(20, 10, 0), Vector3.new(-20, 10, 0)) -- update points
arc2:SetEnabled(false) -- toggle off temporarily
arc3:SetCFrame(arc3:GetCFrame() + Vector3.new(0, 5, 0)) -- move up by 5 studs
arc4:SetFatnessMultiplier(2) -- twice as fat as default now

-- Cleanup arcs:
arc1:Destroy()
arc2:Destroy()
arc3:Destroy()
arc4:Destroy()

Please refer to the Github repository for the full API listing:

Credits

This library is freely available for use in your projects under the MIT license. (See Github repository if you need details)

Credit to @AllYourBlox for open-sourcing the algorithm that produces the line segments for the arcs, which was edited and optimized for this implementation.

Show Me Your Moves™

If you do anything cool with this, let me know in a reply here, or on Twitter via https://twitter.com/buildthomasRBX

Let me know also if you have any requests or suggestions regarding this effect or the code. (you can also file issues / pull requests on the repository)

Happy developing! :cloud_with_lightning:

488 Likes

Those are beautiful, oh man. Fantastic work.

My only worry is do you think they’d have any risk for epilepsy?

18 Likes

I wouldn’t recommend filling an entire place with them, probably. :grin:

The video is just my test place, I threw a bunch of them in there to show that performance is still fine. I would recommend using them sparingly and in the proper places in an actual showcase / game.

15 Likes

Amazing, thanks! :+1:

2 Likes

This effect looks so cool, nice implementation!

2 Likes

I love this!
I can already see a lot of uses to it. Thanks for sharing!

3 Likes

Wow. This looks amazing. Thanks for making it open source for others to use!!

3 Likes

This is neat! I’ll definitely be making use of this at some point. Bookmarked for future reference.

5 Likes

Bookmarked. This is awesome. I can use this for a Sci-fi project

5 Likes

This is pretty awesome, I’m curious how expensive it is in terms of speed and memory usage though.

6 Likes

The code is also a good example of ECS in Roblox. Thanks for the reference!

5 Likes

The original version used a bunch of neon parts, which looks better but is incredibly expensive because a bunch of parts are being updated every frame which triggers i.e. the physics subsystem to do a relatively high amount of work for something that is actually meant to be purely visual.

The next version I made (2017 somewhere) used decals on bricks instead, but this was still using parts, so was still incredibly expensive.

I then moved to a solution where I use ImageHandleAdornments, because then I only need 1 part per arc instance and for the rest it’s just 1 attachment for the center light, and X ImageHandleAdornments which basically have the performance impact of a textured quad. So overall, memory-wise this should be really great, and performance-wise it should be good.

There is a pretty heavy duty throttling mechanism that works on top of this to ensure that no effort is wasted rendering far-off effects and that effects closeby are prioritized in terms of number of arcs / update rate compared to those far away.

You can see this in action when you zoom out the camera really far: you’ll see that the effects become simpler and update less often, but this doesn’t matter because the camera is further away so it is less noticeable.

16 Likes

Really nice! The old versions used parts and were prone to lag your game if you relied on them too much, so I’m sure this will help many people.

4 Likes

OMG thanks you for sharing this effect for us!

3 Likes

That is crazy!

Appreciate you putting the download for the place!

3 Likes

That looks amazing with the lighting effects! Surely, I have a few ideas to where I can use this in another side project I’m working on. Thanks for sharing this!

3 Likes

These are really nice looking! I might have an idea for them…

2 Likes

Nice effect! Will use it to learn more scripting, thanks!

2 Likes

This is beautiful. Unless I get performance issues, I will definitely be using an effect derived from this for one of my sci-fi projects. Thanks for sharing!

3 Likes

This looks really cool! It gave me an idea for what I should make! :slight_smile:

2 Likes