Learning to Use VFX

Visual effects (VFX) are what can take a product from being good to spectacular. In this chapter, we will be learning the art of translating your imagination into VFX using the in-house options that Roblox provides, such as beams, particles, and trails. Each of these emits 2D images that we will customize the behavior of to get our desired look. We’ll also be examining how to utilize the FlipbookLayout option within the ParticleEmitter property options. We will examine the best use cases for each effect as well as how to customize the various property options to give it a look that best suits our game’s needs.

In this chapter, we will be examining the following recipes:

• Creating simple effects with fire, smoke, and sparkles
• Creating hi-res fire with particles
• Making volumetric smoke with particles
• Beaming a laser
• Flipbook particle explosion
• Trailing behind players
• Building a whirlwind
• Snowflakes falling from above...

Technical requirements

You will need to open an empty baseplate in the latest version of Roblox Studio downloaded (at the time of writing, version 572). You will also need to toggle on the Constraint Details setting, found inside the Model tab.

In this chapter, we will be working with images and textures located here: https://packt.link/gbz/9781805121596.

Creating simple effects with fire, smoke, and sparkles

Roblox has several premade particle-emitting classes that allow us to instantly attach it to parts and attachments to give us a customizable effect. These premade particles have limited customizability but do serve a useful purpose. In this recipe, we will be examining how to apply and customize the three premade ParticleEmitter objects – Sparkle, Fire, and Smoke. We will be using these three effects to construct a simple fire pit. Figure 4.1 shows the three default effects side by side:

Figure 4.1: Fire, smoke, and sparkle effects

How to do it…

We will start by inserting a square part and then scaling it into the shape of a log. After duplicating the log, we will rotate and stack the logs on top of one another. We will then add color and the Wood material to it, then insert Fire, Smoke, and Sparkle effects from the Effects drop-down menu. We will then go through each of the effects...

Creating hi-res fire with particles

ParticleEmitter is one of the more used types of effects because it allows for a wide range of effects. Particles are great for making anything, from splashing water, smoke, and dust specks to fire. In this recipe, we will be examining a method to create a more stylized fire with embers emitting from it using the Roblox ParticleEmitter object, versus using the basic effects from Creating simple effects with fire, smoke, and sparkles recipe.

How to do it…

After inserting a ParticleEmitter object into a transparent part, we will insert our ImageID texture. Next, we will modify the color and transparency using Sequence Graph. We will then modify various parameters within the property box to get our desired look. To begin, follow these steps:

1. Create a stack of logs. Right-click on one of the parts and insert a ParticleEmitter object.
2. Rename the particle emitter Fire.
3. Set the original part’s Transparency value to 1...

Making volumetric smoke with particles

Another great use case for particle emitters is creating volumetric smoke. In this recipe, we will be going through the step-by-step procedure to create a large puff of slowly rolling smoke. This method is also applicable for creating VFX such as gas, mist, dust, and fog.

How to do it…

We will begin by inserting a ParticleEmitter object into a square part. Next, we will insert our ImageID texture and then set up the LightEmission and LightInfluence property options. We will then modify the size and transparency of the smoke, and then finish the recipe by applying a slight rotation. To start, follow these steps:

1. Insert a square part into Workspace, and then set its Transparency value to 1.
2. Set the part’s CanCollide property value to False.
3. Next, rescale the part to be 80, 30, 80 studs.
4. Right-click the part and insert a ParticleEmitter object.
5. Rename the ParticleEmitter object Smoke.
6. Insert the ImageID...

Beaming a laser

A second resource that Roblox provides us with is the Beam object, which draws a texture between two attachments. Attachments define a point we can use to create a start and end point for the beam. We can then modify the appearance of the image being emitted, the curvature, and the width to create a tight beam effect. We will examine how to create attachments and then how to project a beam between the two set attachment points.

How to do it…

We will start this recipe by inserting two Attachment objects into a part and then moving them to the width of our beam. We will then insert a Beam object and then link it to the two attachments. We will continue by applying our ImageID texture and then changing the start and end width of the beam. To begin, follow these steps:

1. In the top menu bar, navigate to the Constraints section found under the Model tab.
2. Enable Constraint Details so that the constraints that we place are visible.
3. Next, insert a...

Flipbook particle explosion

Flipbook textures, also known as Animated Textures, are a type of particle emitter. When enabled, they allow you to use sprite sheets to animate the texture of the particle over the duration of its lifetime. This is very useful for creating high-quality and consistently animated effects such as explosions, fire, power-ups, and more. Let’s see how we can create and upload our own sprite sheet into a high-quality explosive effect. We will be using 1024x1024 textures laid out into flipbook frames. Currently, only 2x2, 4x4, and 8x8 layouts are compatible with Roblox.

How to do it…

After inserting a ParticleEmitter object into an invisible part, we will change the property of the emitter to FlipbookLayout. This will allow us to set our grid size and then import our flipbook frame sprite sheet. We will then modify the various values of the emitter’s properties to create a stunning visual. To start, follow these steps:

1. First,...

Trailing behind players

The third available object that we will be going over in this chapter is Trail. The Trail object is like the beam effect as it has two points, though instead of the beam being statically placed, trails are emitted as the two points move within a space. This makes trails useful when creating things such as footprints, tracers, and moving objects. In this recipe, we will be looking at how to create a trail effect and then make it follow behind the players using a simple script.

How to do it…

We will start by inserting a Trail object into a part and then modifying its Lifetime and Color Sequence values to give it a fun gradient. We will then change the Max Length value and the ImageID texture. To finish, we will move the trail into the ServerStorage object and insert a script into the ServerScriptService object. To begin, follow these steps:

1. Insert a Trail object into a part in Workspace.
2. In the trail’s property box, change its Lifetime...

Building a whirlwind

In this recipe, we will be diving further into the customization options of particle effects, specifically with the EmitterShape and Emission properties. We will be learning how to apply rotation and SpreadAngle to give the particles a spin, then modify the Shape and ShapeStyle properties to get the needed parameters that will allow us to create a fun whirlpool of particles. We will see how we can change the shape of the emitter.

How to do it…

We will start by inserting a ParticleEmitter object into a part placed in Workspace. Next, we will modify the emitter’s LightEmission property and then add our own texture. Next, we will change the various parameters of the particles, and finish off by setting the Orientation value to FaceCamera. To start this recipe, follow these steps:

1. Insert a square part into Workspace.
2. Now, insert a ParticleEmitter object into the part.
3. Rename the ParticleEmitter object Whirlwind.
4. Change the particle...

Snowflakes falling from above

In this final recipe, we create a large plane above the ground, which will slowly drop snow down using a ParticleEmitter object. Although we’re using snowflakes for this example, you can easily swap out the texture for rain, dust, or other things that fall from the sky, or pair it with the cloud that we made in the Making volumetric smoke with particles recipe.

How to do it…

We will begin by creating a large flat plane using a transparent part and then moving it upward along its y axis. Next, we will insert a ParticleEmitter object into the part and modify the Brightness and EmissionDirection properties. We will then insert our snowflake texture and then finish the recipe by changing the particle emitter’s property attributes. To begin, follow these steps:

1. Start by inserting a square part onto the baseplate.
2. Rescale the part to 80, 0.1, 80 studs.
3. Move the part upward along the y axis about 55 studs.
4. Turn the...