Particles Creation Series: Particle Basics

edited March 2015 in Tutorials

So I was asked by many people about particle creation and work flow since the tutorial provided by the steam (or someone that is put on the Valve developer site) seems to stop at one point. Since I can't do too much of complicated work today, I will write some tutorials to get people start diving into particles. I will write it in series of multiple tutorials by taking request from people and such since particles itself is kinda big topic. Just leave me a comment or send me a message what kind of particle system you want to see created manually. I will try my best to mimic the system and write it out step by step. Don't hesitate to contact me if you have any question, comment, or improvement to the tutorial.

Also noted that some particles system implementation might have Lua scripting involved if it is very complicated system. So a little of basic lua scripting will help you every now and then.

Table of Content

In this thread

Example in separate threads

Again, let me know what kind of particle system you want to see created so I can keep this tutorial series going.

Here is the list of functions covered in this tutorial:

Renderer

  • Render sprites [WIP]
  • Render models [WIP]
  • Render sprite trail [WIP]
  • Render rope [WIP]
  • Render deferred light [WIP]

Operator

  • Lifespan decay
  • Alpha fade and decay
  • Color fade
  • Movement basic
  • Radius Scale
  • Movement place on ground [WIP]
  • Noise Scalar/Vector [WIP]
  • Normalized Vector [WIP]
  • Oscillate Scalar/Vector [WIP]
  • Remap Control Point to Scalar/Vector/Velocity [WIP]
  • Rotation Basic [WIP]
  • Rotation orient relative to CP [WIP]
  • Rotation orient to 2d direction [WIP]
  • Rotation spin yaw/roll [WIP]
  • Inherit attribute from parent particle [WIP]

Initializer

  • Alpha random
  • Color random
  • Lifetime random
  • Radius random
  • Position along ring
  • Position within sphere random

Comments

  • edited March 2015 Posts: 96

    Particle Basics

    Particle system is the effect system source 2 engine use. It can start from unit's effect, spell's effect, and almost cover into everything you see in the map, like ambient, special effect placed on ground, etc. The best advice from me is to study from existing particles and understand what it actually does in each case, then apply it to your particle system.

    Note that I cannot explain every values on each of the function cause if I were to do so, it will become a book instead of tutorial guide and also I don't know what every values do. If you want specific detail on how to recreate something using that system. Please leave a comment or send me a message and I will try my best to do so.

    The list of every functions along with its description (I assume) in particle editor can be found in this link provided by valve. Some of them may be not very accurate in what it actually does but don't hesitate to ask people around to help. There are many people who are much better than me and understand exactly what's the potential of each function does. Now that is too much of the talk, let's dive into the very basics of creating your own particle.

    Particle Functions

    There are in total of 8 sections in the functions tab. Each of them work serves different purpose which I will try to explain later in this tutorial. Now let's see what the 8 of them are.

    1. Base Properties
    2. Renderer
    3. Operator
    4. Initializer
    5. Emitter
    6. ForceGenerator
    7. Constraint
    8. Children

    Let me give a brief description of what each function's category does.

    Base Properties

    This is where all the base value required for each particle system stored. Normally you don't have to change any value in this function since it will be override by other function. But in some specific cases, you might need to change these values manually. Here are some values you might want to take a note about:

    Value Description
    Color This is the base color of your particle. Mostly, this will affect all renderer functions except Model. Default color is White.
    Radius This will determine the original size of your sprite. Default value is at 5.
    Lifetime This will determine how long your particle system will last. Default value is at 1.
    Max Particles This is very important part of the Base Properties. It allows you to restrict your particle counts. This will greatly affect the performance of the system. If you have too much particles in your system, it is possible for users to feel degraded performance or might even lead to crash if you don't control your total particle count in the system. My best advice is to use less than 100~200 particle per system if it is avoidable.
    Cull Radius This is usually set to 0.0, however, if you want your particle system to be seen through fog, set it to -1

    Renderer

    This is where you tell your particle system what type of particle you want to show. Usually in most particle systems, we will use Sprite as a base particle. With some specific cases, you might want to move to other functions when it fits such as Rope, Sprite Trail, Deferred Light or Model. Those are the five basics renderer you will see a lot. Let's see what are the other Renderer available for us. Note that I don't usually use some of them so it might be inaccurate, let me know if any is wrong.

    Function Description
    Render sprites This is what you will use the most. It will render the sprite (vtex file) individually.
    Render models This function will draw a model (vmdl file) individually.
    Render sprite trail This behave similar to sprite, but instead, it will drag out the sprite itself so that you will see the "trail" created by stretched sprite.
    Render rope This will render each sprite into separate section which can be connected to each other like a rope, for example, hook chain. This usually has to be also using Movement in order to show up properly as well.
    Render deferred light This function, instead of drawing normal sprite, it will act as a light on another object or particle.
    Render grid need more information
    Render sound need more information
    Render cables need more information
    Render projected need more information

    Most of the time, all the renderers will have different values they use to render their own type. However, there are some essential values you might want to take a look at as followed. Some may have these, some may not.

    orientation_type

    This will tell the renderer which direction you want it to render. There are 5 of them in total, but what you usually will end up using are these two:

    Type Description
    Screen Align This will always render your sprite facing the screen, which means, it will auto-adjust so that you will not see the side of the sprite.
    World-Z Align This will always render your sprite in parallel with the ground, so that your sprite will always show up similar to a plane parallel to the ground.

    texture and model

    This will tell the renderer which sprite (vtex) or model (vmdl) this function will render to show to your screen. However, you cannot just browse from any folder, you have to move the file you want to use in your system to the following path.

    Sprite:
    ...\Steam\steamapps\common\dota 2 beta\dota_ugc\content\dota_addons\your_add_on\materials
    Model:
    ...\Steam\steamapps\common\dota 2 beta\dota_ugc\content\dota_addons\your_add_on\models
    

    animation rate

    This should be pretty such self-explanatory. It basically allows you to control how fast the animation should go. In some Sprites, there might exist sprites in sequence and you may change the animation rate through this value, this is also the case in animated model. Although for each animated model you want to use, instead of rendering all animation sequence the model has, you have to use specific animation of the model, otherwise, all animations in the model will show up.

    This should cover all the basics of Renderer, let's move on to Operator.

    Operator

    This function category essentially processes your particle past the initialization. Which means, it will handle most of the animations you see going on in the particle system such as moving the particle around, rotating particles around, etc. Since there are too many operators to explain here, I will only explain some basic operators you probably use in normal particle system as followed.

    • Lifespan decay
    • Alpha fade and decay
    • Color fade
    • Movement basic
    • Radius Scale
    • Movement place on ground [WIP]
    • Noise Scalar/Vector [WIP]
    • Normalized Vector [WIP]
    • Oscillate Scalar/Vector [WIP]
    • Remap Control Point to Scalar/Vector/Velocity [WIP]
    • Rotation Basic [WIP]
    • Rotation orient relative to CP [WIP]
    • Rotation orient to 2d direction [WIP]
    • Rotation spin yaw/roll [WIP]
    • Inherit attribute from parent particle [WIP]

    Lifespan decay

    There is nothing much to play around with this operator but it is quite essential. Basically, this operator will tell the engine that your system will decay over time, which means your particle system can die out. In most of the particle systems, you will want this operator unless you want your particle to stay forever. There are some other operators associated with this operator which will allow advanced configuration of life span.

    Lifespan endcap timed decay
    Lifespan from endcap decay
    Lifespan maintain count decay
    Lifespan minimum alpha decay
    Lifespan minimum radius decay
    Lifespan minimum velocity decay
    

    Alpha fade and decay

    This operator will allow you to have fade in and fade out effect on your particle so it doesn't look so sudden showing up and disappearing out. The basic value of this operator is as followed. Note that all values are between 0.0 to 1.0 which is proportion on the percentage of life time of the particle.

    Value Description
    start fade in time This will tell when the fade in effect of the particle should start.
    end fade in time This will tell when the fade in effect of the particle should end.
    start fade out time This will tell when the fade out effect of the particle should start.
    end fade out time This will tell when the fade out effect of the particle should end.
    start alpha This will tell how much transparency of the particle it should start with.
    end alpha This will tell how much transparency of the particle it should end with.

    Note that this operator will make your particle system show up fully at the end of fade-in. There are similar operators which will handle other types of fade in and out as well as followed.

    Alpha fade and decay for tracers
    Alpha fade in random
    Alpha fade in simple
    Alpha fade out random
    Alpha fade out simple
    

    Color fade

    This operator will mostly associated with Sprite. It will allow your sprite to start changing color at the certain time indicated in the operator. Its basic value that you will use is as followed.

    Value Description
    color fade This is the color your particle will change into.
    fade start time This is the time in lifetime percentage when your particle starts transforming color.
    fade end time This is the time in lifetime percentage when your particle will completely become new color.

    Movement basic

    This operator will allow your system to move around. It also can function as a somewhat gravity. There are two basic values that you might want to mess around with in this operator. When you have "position" initializer, which I will explain later on, associated with movement or speed, you will want this operator to be in your system to allow movement as well.

    Value Description
    gravity This will allow you to push your particles in certain direction all the time. Note that this will respect the world axis not the local axis.
    drag I'm not so sure how to describe this into word but it somewhat allows your particle to have some kind of momentum to it.

    Radius Scale

    This will allow your particle to change its radius over time. Multiple instances of this operator also stack with each other. Essentially what this can do, it will make your particle grow bigger or smaller over time. The basic values associated to it are as followed. Note that the input value will be between 0.0 to 1.0 indicated the scale of start radius you want it to be.

    Value Description
    start time This is when your particle will start changing its size.
    end time This is when your particle will become the indicated size.
    radius start scale This is the size your particle will start with.
    radius end scale This is the size your particle will end up with.

    Those are the basics of operators. I will explain the more advanced one in the example tutorials coming up later on.

    Initializer

    So we saw the function which will adjust value after its initialization, now we will look at initialization itself.

    The Initializer functions will essentially start your particle system and initialize all the values associated to it such as position, speed, vector, start radius, start alpha, etc. All these values will override the property that you set in the base properties, so be cautious of what you override. The basic initializers are as followed.

    • Alpha random
    • Color random
    • Lifetime random
    • Radius random
    • Position along ring
    • Position within sphere random

    Alpha Random

    This initializer will set your particles to start with alpha within the range which can be set to be between 0 to 255 which goes into the two values; alpha min and alpha max, the name should be self-explanatory.

    Color Random

    This initializer mostly will associate with Sprite. What it basically does is that your particle will start off with either of the two color; color 1 or color 2.

    Lifetime random

    This initializer will initialize how long each of your emitted particle will stay. Note that this does not determine the whole life time of your entire system in normal circumstance. There are two values which is the time in second for your particle's lifetime.

    Value Description
    lifetime min The minimum time that your particle can live before it starts decay.
    lifetime max The maximum time that your particle can live before it starts decay.

    Radius random

    This initializer will random the radius between the number you give which is between radius min and radius max.

    Position along ring

    This initializer will make your particle starts in ring form. Basically, it will randomly put your particle in the random spot on the ring based on the value you give it. The basic values of this initializer are as followed.

    Value Description
    control point number This is the center of the ring. Usually should be left at 0.
    initial radius This is how wide your ring will be (radius of the ring).
    thickness This will expand the size of the ring in all 3 axis so it will become like a doughnut.
    min/max initial speed Minimum/Maximum speed in which your particle will travel out of the ring based on the center.
    roll/pitch/yaw This will rotate your ring in roll/pitch/yaw axis with the degree you provide.
    even distribution This will enable your ring to create particle evenly along the ring.
    even distribution count This will tell how many points on the ring which will emit particles.

    With ring, you can create something similar to the following.

    image

    Position within sphere random

    This initializer is probably the most basic initializer you will use. It will basically put your particle randomly within the sphere based on the value you give it. The basic values of this initializer are as followed.

    Value Description
    distance min/max This is essentially the radius of the sphere. Your particles will be created in between min/max distance based on the center of the sphere.
    distance bias absolute value This will allow your particles to create in bias to the axis, i.e. if it is 0.5 bias to Z-Axis, it will create something similar to dome instead of sphere.
    control point number This is where the center of the sphere is located.
    speed min/max This is the minimum/maximum speed your particle will travel out of the sphere based on center.
    speed in local coordinate system min/max This can restrict your particle to only move in certain axis only.

    With sphere, you can create something like this.

    image

    That should cover all the basic initializers.

    Emitter

    Previously we have seen the operation during the lifetime, function to initialize the particle, but we haven't seen the particle emittion yet. This section is the one. These functions will basically emit the particle for your system in different manners for different functions. There are total of 5 functions but I will explain only 2 since they will be the one you most likely will use.

    Emit continuously

    This emitter will always emit certain amount of particles all the time, says, if you set the rate to 400, it will continuously emit 400 particles throughout its duration. Be very careful when you set emission rate, it could potentially affect your add-on overall performance. The basic values for this emitter are as followed.

    Value Description
    emission duration This is how long the emitter will continuously emit the particles.
    emission start time This is when emitter should start emit the particles.
    emission rate This is how many particles the emitter should emit per second.

    Emit instantaneously

    This emitter will emit exact amount of particles at the start, says, if you set the number to 100, it will emit only once with 100 particles. There are only two fields that you should set every time when you use this emitter.

    Value Description
    num to emit The number of particles emitted at the start
    emission start time The delay before emitter starts emitting the particles

    Force Generator

    Force generator will act similar to the "external" force done to the particle after the initialization. In my opinion, it is quite hard to use as these functions, so if you really want to use these functions, please note that be very cautious in your input.

    There are multiple force generators available to use but I will only explain the ones I'm familiar with which also are the very common ones you will see.

    Pull towards control point

    This function will create an external force to pull all your particles toward a given control point (like a vacuum to the point). Let's say if you have it set to CP0 and CP0 is set to 0, 0, 0 then your particles will be pull towards 0, 0, 0 by this function automatically. Its basic values are as followed:

    Value Description
    component scale This indicates which axis you want your force to be applied to along with the scale.
    amount of force This indicates how much force you want to exert into your particles toward the point.
    falloff power This indicates how much your force will affect the system.
    control point number This is the point where your particles will be pulled toward.

    The following image is the result I created using this function with the sphere I previously created.

    image

    Twist around axis

    This force generate will pull towards the given axis with given force. Its basic values are as followed:

    Value Description
    amount of force This is the amount of force pulling towards the axis.
    twist axis This is the scale in which the force will be applied in respect to each axis.
    control point This is where the axis centers are at.

    It's hard to exactly tell what this function does in general but I will show you the images before it starts pulling and after it finishes pulling so you may get more idea about it.

    Starting with sphere previously created.

    image

    Now I apply the function on Z-axis with some forces, then it becomes:

    image

    You can see that the particles are pulled towards the z-axis only while other axes are unaffected.

    Constraint

    This is probably the most advanced/complicated functions you can have in your system. Essentially, these functions will restrict your particle system in many areas such as collision, distance, position, etc. I personally don't use these functions yet, but I will explain the ones that is easy to understand, but I still do not know the exact behavior it should give.

    Constrain distance to control point

    This will restrict your particles to stay within the radius from the given control point. Your particles will be forcefully move into this sphere. Its basic value is as followed:

    Value Description
    minimum/maximum distance The radius starting from the control point. Need more information what it actually does.
    control point number This where the center of the sphere will be.

    The following image is the example when I use this function with the previously created sphere.

    image

    By messing around with values, it can potentially become like this.

    image

    What it does is that all the particles are pull into this circle in some unknown manner which I'm not sure about and stays there looking like a plate instead of sphere.

    Constraint particles to a box

    This will forcefully move all your particles into a box given by the input and its center. It behaves similarly to the previous one but in a box style instead. Its basic values are as followed:

    Value Description
    min coords The minimum coordinate where your box will start.
    max coords The maximum coordinate where your box will end.
    control point The center of your box.

    This is the result where I use this function with the sphere I previously created.

    image

    Now that should be enough for the constraint.

    Children

    This part will not likely be a function, but instead, it will allow you to attach other particles to this particle which will allow more possibilities like tracing the current particles, start from the ring of current particles, etc. To add new children, simply click on the "+" sign and browse to your desired particle.

    Be very cautious when browsing the children, do not press on the current particle you are working on or it will crash.

    With this, it should cover all the basics for particle creation.

  • edited February 2015 Posts: 96

    Creating your first particle system

    Previously I discussed the functions of the particles which might not get people very far in creating their own particles, however, I do think people need to know those basics before they can understand why it should be created this way. Anyway, let's start creating the particles.

    When I create an original particles manually, I have these steps in my mind.

    1. What should it look like?
    2. How many different sprite/model do I want?
    3. Will it move? Static?
    4. Where should each sprite/model start emitting?

    When I have those in mind, now I will start it from there. One thing to have in mind is that for each different sprite and model, you will need at least one sub system each because if you work with many different renderer on the same particle system, it can become ugly with some exceptional like deferred light.

    Now that you have those in mind (or write it down, sometimes I still take note somewhere before creating), you have to know the bare minimum to create 1 particle system.

    Required function Why do you need it
    1 renderer If you don't have at least one of this, there is nothing to render to screen.
    1 emitter If you don't have at least one of this, particle will never get emitted.
    Essential function Why do you need it
    1 position-related initializer If you don't have at least one of this, your particle will always emit at world origin.
    1 lifespan decay operator If you want your system to end at some points, you need this one.
    1 movement basic operator If you want your system to move around, you need this one.

    For example, I want to create a simple particle emitter at CP0 (control point 0) that will emit sprite from its center and travel outward then I would need the following function.

    Renderer: Render sprites
    Emitter: Emit continuously
    Initializer: Position within sphere random
        Set speed min and max to 100
    Operator: Lifespan decay
    Operator: Movement basic
    

    What this essentially does is that the engine will render sprites (as told by Render sprites), and emit it continuously from the start (as told by Emit continuously). Then the sprite will decay over time (as told by Lifespan decay) and have basic movement without gravity (as told by Movement basic). Those particle will be created at the center of the sphere with radius 0 based on CP0 and travel at speed 100 out of the center (as told by Position within sphere random).

    The more detailed tutorial on your first particle can be found in this link.

    Congratulation, you have finished your very first particles.

  • edited February 2015 Posts: 1,668

    Wow this is really great! Way more in-depth than what I was expecting.

    I hope this series goes on, I'll spend my time today making particles and bring ideas for particle examples.

    Keep it up :smiley:

    The concept of Modding Community doesn't go well together with Competitive Business
    My Project Page || My GitHub Profile ||

  • Posts: 16

    Does anyone know if you can scale a sprite/model in one direction (like doubling its width or its length) in the particle editor?