Creating custom kart VFX for Roblox

Premise

‍

In this guide we will explain how to create VFX for a karting game in Roblox, using both the Beam and Trail systems to create two different types of VFX. Adding these effects to your kart will make the graphics look much more appealing and immersive, it will also enhance the user experience by giving the user an extra visual indicator of what is going on.

‍

‍

The Mission

‍

We are going to learn how to dress your Roblox kart with custom VFX. One will be the “propulsion effect” which is basically flames coming out of your exhaust pipes, reacting to the speed of your kart dynamically. And the second one will be the “Power-up ring effect”, which will indicate you have an active power-up ready to use.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Resources

• Roblox Studio
• Photoshop

‍

To begin creating our VFX first we need to add a Roblox “part” which will inherit all the properties necessary to create the effect. Effectively it’s just a box that will have the Trail component. Think of it as the “parent” of the effect.

To do so, go the “Model” tab in the upper part of the editor, and click on the "part" icon.

‍

‍

‍

‍

‍

‍

‍

‍

By default you will get a "part" with size “4,1,2”. Since this will be the parent of the VFX, all the effect will inherit the "Part’s Transform" properties, meaning the if the "part" is not sized “1,1,1” the effect will be stretched and distorted.

‍

‍

To avoid this, go to the “Transform” properties of the "part" and change it to “1,1,1”.

‍

‍

The last thing left to do with our "part" is to make it transparent so it doesn’t show along with the VFX. Go to the “Appearance” properties and increase the transparency property to a value of 1.

‍

‍

Creating the VFX

‍

Now that we have set-up our "part", let’s begin creating the Trail VFX.

‍

Propulsion effect

‍

First steps

The first step is to add the Trail component to the "part". Go to the “Explorer” window on the top right, you will find your the "part"and as you hover it a “+” icon will appear, click it and type “Trail” to search the component so you can add it.

‍

‍

Now you can start customizing the Trail component, but before you can see any effect going on you will need to adjust certain parameters:

• Add a texture: under the “Appearance” parameters of our Trail component, you will find the “Texture” parameter. Add a texture of your liking, in this case we have used a flame-like texture with a transparent background to achieve the desired result. Keep in mind that the effect will stretch and deform this texture so it doesn’t need to exactly be a flame to achieve the fire effect.
• Add attachments: the same way you added the Trail component, add two “Attachment” components to the parent. These will serve as points indicating where the effect starts and where it ends, although other parameters can make it stretch further from the end point, we will see how to do this further on. In the “Data” parameters of our Trail components, assign each attachment point to both parameters.

‍

‍

• Face camera: last thing before being able to see our trail is the “FaceCamera” toggle. Find it under the “Appearance” parameters of the Trail component, and enable it. This will make sure our texture is always facing the camera and prevent it from dissapearing depending on the angle of our camera.

‍

Now, grab your VFX parent and move it around with the Move (Ctrl+2) gizmo.

Congratulations! You can finally start seeing a trail effect before we start customizing and adjusting it.

‍

‍

Adjusting the parameters

‍

We have a functional Trail effect, now let’s make it look much better.

‍

The first thing we notice is that the Trails sticks around for too long, and the flames from an exhaust pipe should disappear rather quickly. Go to the “Emission” parameters of the Trail component and change the “Lifetime” parameter from 2 to 0.1.

‍

‍

‍

‍

Another trick that improves the visuals of this effect is to adjust the "WidthScale" under the “Emission” parameters. This parameter affect the scale of the texture emitted by the Trail. By default it’s set to 1, but you can set a dynamic value over the time of the emission, making it go from small to big, instead of having a constant scale. To do so, click on the “WidthScale” value, and notice how 3 dots appear next to it, click on those dots to open the curve editor of the value. Here’s where you can decide the scale over time of the emission, in our case we made it go from 0 to 0.7 and then to 0 again to simulate how a flame extinguishes in real life.

‍

‍

The next parameter we will adjust is the “MaxLength”: this limits the amount of stretch you get from the trail, if it’s set to 0, it won’t have a limit. This value will depend on how fast the trail emitter is moving, so feel free to adjust it to your project’s needs. We have set it to 6 after some Trial and error.

‍

‍

The rest of extra parameters we are going to tweak (which are optional) are the “Color”, “Light” “Emission” and “Transparency” of the Trail, all of them under the “Appearance” parameters. We found that adding a instense orange color, increasing the light emission to 1 and setting transparency to 0 gives us the best result for our project, but feel free to play with these values to find your desired result.

‍

‍

PowerUp ring effect

‍

First steps

Next we will create the “PowerUp” effect, using the Beam component instead of the Trail. This component’s behavior is very similar to the Trail, you could see it as a Trail that is active all the time, independently of being static or in motion, it always looks the same.

We are going to repeat the same first steps from the trail creation, except we are going to use the Beam component instead. We recommend duplicating the Trail’s parent and simply replacing the component. That way the part will already be set-up and the attachment components will be used again.

‍

Once again, let’s add a texture to the component. This time we are using a stripped texture of “Light Beams” that will create the ring effect.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Next, set-up the attachments like we did before with the Trails, you will notice that you will start seeing the Beam right away. In this case you can skip the “FaceCamera” attribute, since we won’t need it for this effect in particular.

‍

‍

Now, we want to create a “ring” shape, so let’s see how to create curvature to the Beam. Under the “Attachment” parameters, you will find the “CurveSize” parameters, this will create the curve between both attachments. We have set them to -5 and 5 respectively, and adjusted the position of the “Attachments” to create a “semicircle” shape.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

One limitation to this method is that you cannot add more “Attachment” points, making it imposible to create a full circle. The workaround to this is to duplicate the VFX parent, and rotate it to match the other side of the semicircle, thus creating a full circle. Now that we have the ring, like we did we the Trail, it’s time to tweak the color, light emission, and transparency to your liking.

‍

‍

And there you go, now attach the VFX parents to your kart and enjoy the ride!

‍

Conclusion

‍

Creating Trail and Beam effects in Roblox is simple, but the most important part is the initial set-up of the “Parent”, “Components” and main parameters. Once you have those ready, it’s time to have fun and play with the values until you get the desired result. Both Trail and Beam components are very similar, because they share most of the parameters, but there is some specific nuances that make them work differently, allowing us to create very different VFX to enhance the visuals of our projects.

‍