S&box Wiki

Revision Difference

Creating_your_first_particle_effect#547165

<cat>Dev.Particles</cat> <title>Creating your first particle effect</title> ## Opening the particle editor The particle editor can be found in the [Asset Browser](Dev_Tools) in the top toolbar. <upload src="653cb/8d90ee0fbff4b15.png" size="77820" name="image.png" /> <upload src="a768a/8da65196a089d17.png" size="9212" name="sbox-dev_ilJb08MDD9.png" /> ## Creating a new particle system file You must first create a new particle system and save it within your addon. * On the top left, press `File` and select `New`, or use the shortcut <key>CTRL</key>+<key>N</key> * Save the file with `File` -> `Save` or the shortcut <key>CTRL</key>+<key>S</key> - save it to a particles folder within your addon e.g `sbox/addons/myaddon/particles/my_particle.vpcf` ## 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 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" /> ### Spicing up the sprites You can play with the properties on the functions you've added. Here's a few suggestions 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>