S&box Wiki
Home
/
Edit Creating your first particle effect
View
Edit
History
No Category
Developer Overview
The Project System
Publishing To Asset Party
Getting Started With Hammer
Mapping Basics
Mapping Entities
Advanced Mapping Techniques
Getting Started with Modeldoc
Animgraph & Animation
Physics
Modeldoc Nodes
Advanced Modelling
UI Basics
Styles & Stylesheets
Razor Templates
Game Menus
Materials
Built In Shaders
Shaders
Shader Reference
Sounds & Audio
Particles
Getting Started
Making Games
Input
Networking
Physics
Rendering
Editor & Tools
VR
Misc
Playing Guides
Console Commands & Variables
Dedicated Server
Log in to edit
Creating your first particle effect
<cat>Particle.Intro</cat> <title>Creating your first particle effect</title> ## Opening the particle editor The particle editor can be found in the [Editor](Editor) in the top toolbar. <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>
S&box Wiki
Development
Developer Overview
6
Editor Overview
General FAQ
System Requirements
The s&box wiki
Troubleshooting
Useful Links
The Project System
4
Adding Assets
Creating a Game Project
Project Settings Window - Games
Project Types
Publishing To Asset Party
2
Uploading assets
Uploading projects
Hammer
Getting Started With Hammer
3
Getting Started With Hammer
Making Your First Map
Mapping Resources
Mapping Basics
6
Cordons
Hotspot Materials
Selection Sets
Standard Mapping Dimensions
Tool Materials
Tools Visualisation Modes
Mapping Entities
2
Creating a Door
Light Entities
Advanced Mapping Techniques
8
Collaborating With Prefabs and Git
Instances
Prefabs
Quixel Bridge Plugin
Tilesets
Tilesets-Advanced
Tilesets-Proxies
VIS Optimizations
Models & Animation
Getting Started with Modeldoc
7
Automatic Model Setup
Breakpieces
Creating a Model
Guide to Models
Importing Rust Weapons
LODs
ModelDoc FAQ & best practices
Animgraph & Animation
4
Animations without Animgraph
AnimEvents, AnimGraph Tags, Attachments
Animgraph
Delta Animations
Physics
3
Cloth Physics
Collisions, Physics & Surface Types
Jiggle Bones
Modeldoc Nodes
1
Custom ModelDoc nodes
Advanced Modelling
6
Bodygroups
Citizen
First Person
IKChains and Stride Retargeting
Morphs
Vertex Normals
User Interface
UI Basics
6
Custom Fonts
Embedding Websites
Enabling Pointer Events
Events and Input
UI Basics
UI with Components
Styles & Stylesheets
1
Video Backgrounds
Razor Templates
4
A Razor Overview
Aliases and SetProperty Attributes
Generic Components
Templates
Game Menus
1
Making a Custom Pause Screen
Materials & Shaders
Materials
5
Guide to Materials
Material Attributes
Material Resources
Texture Settings
Using Dynamic Expressions
Built In Shaders
2
Foliage Shader
Glass Shader
Shaders
4
Compute Shaders
Constant Buffers
Material API
Shading Model
Shader Reference
5
Anatomy of Shader Files
Getting rid of Tex2D macros
Shader Reference
Shader States
Texture Format Cheat-Sheet
Other Assets
Sounds & Audio
4
Guide to Sounds
Sound Events
Sound Occlusion
Soundscapes
Particles
5
Creating animated sprites
Creating your first particle effect
Understanding Particle Editor
Using custom sprites
Using particle systems from C#
Coding
Getting Started
5
Cheat Sheet
Learning Resources
Setting up Rider
Setting up Visual Studio
Setting up Visual Studio Code
Making Games
2
Components
GameObjects
Input
4
Commands
ConVars
Input System
Speech Recognition
Networking
7
Auth Tokens
Http Requests
Lobby System
Networked Types
Networking Basics
RPCs
WebSockets
Physics
5
Collisions
Hitboxes
Joints
Traces
Triggers
Rendering
3
Render Tags
RenderHooks
Scenes
Editor & Tools
5
Guide to Widgets
Hammer API
Hammer Gizmos
Hotload Performance
Widget Docking
VR
3
Getting Started
VR Input
VR Overlays
Misc
10
Asset Types
Attributes and Component Properties
Backend API
Code Accesslist
CPU Performance Profiling
DisplayInfo
package/find
Setting Up A Navigation Mesh
Threaded Tasks
TypeLibrary
Playing
Playing Guides
3
Default Keybinds
Proton
s&box on macOS (Experimental)
Console Commands & Variables
1
Launch Arguments
Dedicated Server
1
Dedicated Servers