S&box Wiki

Creating your first particle effect

Creating your first particle effect

Opening the particle editor

In s&box, the particle editor is opened from the sbox-dev.exe executable located in your s&box root directory. You can find this directory by opening Steam, Right-Clicking s&box, Manage and pressing Browse local files.

image.png
image.png

After launching sbox-dev.exe, the Asset Browser should pop up as well as the game itself. From the top toolbar, select the particle editor

image.png

Preparing our particle effect

In the particle editor, before you can start editing your particles you need to create a new instance.

  • On the top left, press File and select New, or use the shortcut ctrl+n
image.png
  • Next you will need to save your particle, this is a requirement in s&box at this current time. To save your particle press File and select Save or use the shortcut ctrl+s
image.png
After creating your particle you will need to immediately save it or it will not show up in the viewport!
You need to save your particle to a valid path which the game itself can find. This path is usually "sbox/addons/MyAddonName/particles/my_particle.vpcf"

If you still see this message in your viewport:

image.png

You need to save your particle or save it in a proper directory. If you do not do this, the particle will not render or be shown in the viewport!

Creating our Emitter

Now that we have prepared our particle to be shown in the viewport, we can start working on it. The main settings you'll be playing with when creating particles is known as the Functions panel, it's located on the far left side of your application.

image.png

This is how you'll be controlling how your particle works and what it should do. Let's start by creating a basic particle. First press the + button next to Emitters:

image.png

A new dialogue will open up, this dialogue is the option you have which you can use for Emitters.

image.png

For our purpose, we're going to pick Continuous Emitter. This means we'll constantly keep creating particles forever.

A new panel should now be visible, this is known as the properties panel. It shows all of the fields we can modify for the current function.

image.png

Each property listed here is for our Continuous Emitter which is named Emit continuously in our function panel.

  • Duration Limit is how long the emitter should keep emitting particles before stopping. 0 means to never stop.
  • Start Time Offset is how long of a delay there should be until the emitter starts.
  • Emit Rate is how many particles should be spawned per second. For right now we'll keep these all default.

Creating our renderer

A renderer is how to represent our particles. There are multiple different renderers but we're going to focus on the most basic one, which is the Sprite Renderer. To create a renderer, we click the + button next to Renderers

image.png

A new dialogue will open up, this dialogue is to specify which different types of renderers we can use. We're going to pick Sprite Renderer

image.png

Doing so you should now see your particles appear in the viewport

image.png

Right now it's just one giant blob, but before we change that, we should stop it from spawning infinite particles.

Particle operators

Particle operators are operations that are applied to your particles. These operations are applied to change specific operators of the particle. The one we're going to focus on is Alpha Fade and Decay. This operator will make our particle fade in, exist for a little bit, fade-out, and become killed. To create a new operator, press the + button next to Operators.

image.png

Just like before, we're going to look for Alpha Fade and Decay

image.png

It might not look like anything happens, but if we click the Restart Sim button on our toolbar you'll notice our particle fades in!

image.png

Now we can't really see our particles fading out because of how bunched together they are, however, we can fix this with Initializers!

Particle Initializers

Particle initializers are properties which are set when a particle is initialized or created. You can set all sorts of properties here, but what we're going to do in our example particle, is to position our particles within a ring. Like before, let's create an initializer by pressing the + button next to Initializers.

image.png

We're going to look for Position In Ring. Position in ring does exactly as the name suggests, it places all of our particles within a ring or a doughnut.

image.png

Now your particle might look the same

image.png

This is where the properties come in which we mentioned before, with Position In Ring selected:

image.png

Update the initial radius property and set it to a number like 20 and press enter

image.png

You should now have a working particle!

Using your particle in-game

To initialize your particle in-game, you can use the Particles class.

Particles MyParticle = Particles.Create("particles/my_particle.vpcf", WorldPos); /* 0 being the control point index 1.0f the x component of the control point 2.0f the y component of the control point 3.0f the z component of the control point */ MyParticle.SetPos(0, new Vector3(1.0f, 2.0f, 3.0f)); MyParticle.Destroy(false); // false = Destroy after the particle is done emitting, true = destroy the particle immediately
As of right now, Particles require at LEAST 1 control point which should be the position of the particle. This SHOULD be control point 0. Typically this isn't an issue if you use Position in X, however if you don't the current workaround for this is to create an new Initializer with Set Vector, the the output field to Position and specify a control point value.

image.png

Spicing up the sprites

You can play with the properties on the functions you've added. Here's a few suggestion for what you can do:

  • On Render sprites change the color blend, and the radius scale properties.
  • On Emit Continuously change the emission rate property to spawn more or less particles.
  • On Operator add Movement Basic and play with the gravity property (try setting it to 0, 0, 40)
  • Add a custom sprite. Follow the wiki guide here: Using custom sprites

Special Pages


Wikis

?

Render Time: 103ms

DB GetPage 45
Generate Html 1
SaveChanges (1) 54
Render Body 0
Render Sidebar 0