<cat>Dev.Particles</cat> <title>Creating your first particle effect</title> # 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. <upload src="653cb/8d90ee08e6d220f.png" size="113574" name="image.png" /> <upload src="653cb/8d90ee0c2602e4e.png" size="55711" name="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 <upload src="653cb/8d90ee0fbff4b15.png" size="77820" name="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 <key>CTRL</key>+<key>N</key> <upload src="653cb/8d90ee140e39a4e.png" size="11364" name="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 <key>CTRL</key>+<key>S</key> <upload src="653cb/8d90ee1c794b007.png" size="25978" name="image.png" /> <warning>After creating your particle you will need to immediately save it or it will not show up in the viewport!</warning> <warning>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"</warning> If you still see this message in your viewport: <upload src="653cb/8d90ee211cec5f2.png" size="10581" name="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! ⤶ The first thing we need to do is add something which spawns our sprites.⤶ # 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. <upload src="653cb/8d90ee2b8e7b780.png" size="21800" name="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`: <upload src="653cb/8d90ee2e8b85943.png" size="5132" name="image.png" /> A new dialogue will open up, this dialogue is the option you have which you can use for `Emitters`. <upload src="653cb/8d90ee30e1a32bc.png" size="46239" name="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. <upload src="653cb/8d90ee350b79025.png" size="93969" name="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` <upload src="653cb/8d90ee49672f601.png" size="6058" name="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` <upload src="653cb/8d90ee4aeb99e62.png" size="78025" name="image.png" /> Doing so you should now see your particles appear in the viewport <upload src="653cb/8d90ee4d7e296d1.png" size="1929388" name="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`. <upload src="653cb/8d90ee5b0eaa3b1.png" size="5526" name="image.png" /> Just like before, we're going to look for `Alpha Fade and Decay` <upload src="653cb/8d90ee5de7ad25b.png" size="86306" name="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! <upload src="653cb/8d90ee5f660075c.png" size="37733" name="image.png" /> <upload src="653cb/8d90ee6170bca9f.mp4" size="2325483" name="2021-05-20_18-54-5de3e14b-69f3-4444-bd77-52629cba937d-8VQS3XB4.mp4" /> 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 is what is 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 press the `+` button next to `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`. <upload src="653cb/8d90ee647abda78.png" size="5355" name="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. <upload src="653cb/8d90ee6a6103d5c.png" size="99476" name="image.png" /> Now your particle might look the same <upload src="653cb/8d90ee6e9ad2ecd.png" size="134644" name="image.png" /> This is where the properties come in which we mentioned before, with `Position In Ring` selected: <upload src="653cb/8d90ee6f8368ff9.png" size="7383" name="image.png" /> Update the `initial radius` property and set it to a number like `20` and press <key>ENTER</key> <upload src="653cb/8d90ee70918f059.png" size="51090" name="image.png" /> You should now have a working particle! <upload src="653cb/8d90ee73ee00a63.mp4" size="2603837" name="2021-05-20_27-05-cb65b707-d433-4871-a5a2-f6ce8ed4f895-BLsF6Mfg.mp4" /> # Using your particle in-game To initialize your particle in-game, you can use the `Particles` class. ```cs 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 ``` <warning>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. <upload src="653cb/8d90ee831e48e86.png" size="26106" name="image.png" /> </warning> ## 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: <page>Using custom sprites</page>