Particle System Tutorial: 2016 Edition

Discussion in 'Models, Animations, and Particle Effects' started by WinstonShnozwick, Sep 15, 2016.

Remove all ads!
  1. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    This is intended to be a complete beginner's tutorial for understanding and using the particle system in ToEE to modify and create your own new effects. It is based off of the previous tutorial by @vampiricpuppy, so a large amount of credit goes to him and his sources of inspiration. Make sure to click on any of the images to enlarge, and if you cannot view them, you may need to create an account on these Co8 forums.

    Getting Started

    You will need a few required programs for the ability to interact with the particle system.
    This allows you to extract other partsys files from the dats, however you should have access to all of the particles a regular user should need.

    Note: It may help to run all of your ToEE based programs, including those listed above, in administrator mode.

    Getting Acquainted with V2Brute

    Move V2Brute.exe into the root folder of your ToEE directory, and then run it for the first time. Select a particle effect from the top left list, and press the 'Play' button. The particle effect that you have chosen will play, centered on the little man on screen.
    pt00.png
    This is how you will view effects as you make and modify them.

    Wait, what's that, you can't see the little man on the screen? This is because the background is set to black, pretty annoying to test transparencies on effects. To change the color of the background on the screen, which I advise, use the following menu option. I personally like choosing a grey that is in the middle of pure white and pure black.
    pt01.png
     
    Last edited: Sep 15, 2016
  2. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    Getting Acquainted with ProtoEd

    Every time you change the effect file, partsys1.tab, you must close and re-open V2Brute. So close it now, we don't need it just yet. Next, you are highly advised to copy partsys1.tab to a different location as a backup, in case you mess up the file. You can find the original partsys1.tab in the folder you installed ToEE to, at Temple of Elemental Evil\data\rules.

    Have you downloaded Protoed? Be make sure to make a second copy of partsys1.tab into the same folder that Protoed is installed to. Install it to a new directory, and open the program up. Under the options menu, make sure that the Allow Add/Delete Rows option is checked.
    pt02.png
    Then go to File->Load and choose the partsys1.tab that is in the directory you installed Protoed to open it in the program.
    pt03.png
    Now that you have loaded the file, it helps to select Tools->Auto Size Columns to make all of the columns stretched to display all of their information. Also, for the future you may want to check the option Auto Size On Load, to avoid having to repeat this.
    pt04.png
    Now you should be able to read the columns in full. This file is an extremely large spreadsheet here, and ToEE uses it as a big lookup table to define particle effects. You might get lost, so you can highlight columns and/or rows by clicking their header at the top, or left side of the screen, respectively.
    pt05.png
     
    Last edited: Sep 15, 2016
  3. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    Partsys1.Tab Column Fields

    @Agetian has a helpful list of partsys1.tab fields located here:
    http://www.co8.org/forum/showthread.php?t=5717
    A detailed breakdown is below, for those who finish this tutorial and wish to know all of the things we have control over in the particle system.

    protoedfields.png
     
    Last edited: Sep 16, 2016
  4. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    How The Particle System Works

    Every row in partsys1.tab consists of an emitter and its particles. The emitter is basically an invisible hose nozzle that sprays particles out, and the particles are either 2D flat images or 3D models.

    This guide only covers 2D flat image use, but the principles can be extended to 3D models. Most of the particle effects in the game that players are familiar with (spell effects) use 2D flat images, so you won't be hugely restricted from your imagination if you avoid 3D models.

    Particles can be made to spray out of the emitter at different angles, speeds, and be controlled to move to different places. The emitter can also be moved and re-positioned as well.

     
    Last edited: Sep 15, 2016
  5. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    1. Working with an Existing Particle System

    Until you feel comfortable with the particle system and understand all of the columns well, it's easier and advised to copy existing effects and make modifications to them. Generally, use a similar type of spell to the type of effect you want to create - for an explosion, use fireball, for a burst on weapon hit, use flaming longsword burst, etc.

    We will use an easy, single row particle effect for now. Make sure you still have partsys1.tab open in Protoed, and then find the row sp-fog cloud.
    pt06.png
    Select the line by clicking the sp-fog cloud entry in the very left column, and then right click in one of the other columns in the same row and click Copy this Row.
    pt07.png
    Now you have two sp-fog cloud rows. Double click the lower of the two entries name, and rename it to sp-test cloud, and then in column 1 of the same row which is currently empty, name it Main Cloud. This column isn't 100% necessary, but it is a good habit to name your effects something descriptive, so you understand what the purpose of this effect is.
    pt08.PNG
    Go to File->Save, and then copy partsys1.tab from the ProtoEd install directory, and paste it into the folder it originally came from in your ToEE install directory, choosing to overwrite the existing file. You will need to do this every time you want to view new change(s) you made to a particle system in V2Brute.

    Now open V2Brute and scroll down in the upper left box to find your new particle effect.
    pt09.png
    If you press play, you can observe the fog cloud particle effect playing, and the particle it currently uses is fire-sprite. This refers to an MDF and TGA file hidden in one of the ToEE Dat files (that's what that dat extractor lets you find!), and it looks like this.
    pt11.png
    Back to ProtoEd, go to column 15 in your new sp-test cloud row, and change the entry there from fire-sprite to flare-1.
    pt10.png
    Make sure to save and recopy partsys1.tab, and restart V2Brute to go view your modified particle effect.
    pt12.png

    Damn, that's a pretty bad looking square filled cloud of particles :(. This is because some particle sprites don't mix well with some particle blending modes. Thankfully, we can fix this...
     
    Last edited: Sep 15, 2016
  6. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    2. Particle Blending Modes

    Go back to ProtoEd and find column 17. This is the particle blend effect column. The effect listed for sp-test cloud is Blend.

    This column can have one of four entries:
    • Add - This is for bright shiny effects
    • Subtract - This is for dark effects
    • Multiply - This is like a subtle version of subtract that only uses the darker areas of the particle sprite
    • Blend - This is like a subtle version of add that only uses the lighter areas of the particle sprite
    For now, lets replace the Blend entry with Add.
    pt13.png
    Save and reload V2Brute.
    pt14.png
    We got rid of the ugly square effects and it looks nice now! :)

    Now we have a cloud full of dim flare effects that are all the same color and size. They all have a random rotation, and do not rotate as the cloud expands. We can change all of these things.

    Back to ProtoEd, find columns 62-65.
    pt15.png
    These columns represent Alpha Transparency, Red, Green, and Blue values of the particle, respectively. Alpha is how transparent or see through the particle is, and Red, Green, Blue are all a value from 0-255 that together can make any color in the rainbow. Red 255, Green 255, and Blue 255 together is white, and 0, 0, 0 is black. This actually means INVISIBLE in this context. If you want dark colors use Subtract, 255, 255, 255 on subtract is pure black. It's all up to experimentation on your part.

    The particles currently have an alpha of 0, 40, 0. This means that they start their lifespan invisible, grow to about 20% transparency, and then fade to be invisible again. Alpha can have the same kinds of values that RGB can have. Remember, values separated by commas are keyframed values evenly spaced along the lifespan of a particle.
     
    Last edited: Sep 15, 2016
  7. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    3. Particle Transparency

    Change the alpha value, column 62, to 0?255

    This makes the alpha value of every particle sprite created to be one value for its entire lifespan, and 0?255 means a random number between 0 and 255.

    Save and reload V2Brute
    pt16.png

    Now the particles are all different, some very bright, and some very faint.
     
    Last edited: Sep 15, 2016
  8. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    4. Particle Color

    Change the values of columns 64 (Green) and 65 (Blue) both to 0.

    Save and reload V2Brute
    pt17.png

    Column 63 (Red) was the only one still with a value, of 255, so all of the particle became full strength red. :mad:

    Let's try something else. Change the value of column 64 (Green) to 0,255

    Save and reload V2Brute
    pt18.png
    Notice now that the particles in the middle are red and the ones far away turn to yellow. The particles start out fully red, and as they go through their lifespan, the amount of green in them also increases until there is an equal value of green and red, which makes them yellow. o_O
     
    Last edited: Sep 15, 2016
  9. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    5. Particle Scale

    Back in ProtoEd, find column 56. This is the particle scale x field, and with respect to the 2D particles we are working with, it is the only one that you will need to worry about to change the size of your particles. Currently the field reads 30?60
    pt19.png

    This means the particles created will all randomly range in size from 30% to 60% of the original tga.

    Let's make them smaller. Change the field to 5?30

    Save and reload V2Brute
    pt20.png
    We made the sparkles smaller! ;)
     
    Last edited: Sep 15, 2016
  10. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    6. Particle Rotation

    Let's try making them rotate to appear more sparkly. Find column 59. This is the particle yaw column, and with respect to the 2D particles we are working with, is again, the only one you need to worry about, this time concerning particle rotation.

    Currently it is 0?360

    This means each particle is assigned one random static value of 0-360 degree rotation and keeps that value as it is spewed from the hose nozzle.

    Change this to 0,360

    Save and reload V2Brute to view this animated effect yourself.

    The particles all now do one full rotation across their lifespan. It's slow though, so let's make them do a second rotation.

    In column 59, change the value to 0,720

    Save and reload V2Brute to view this animated effect yourself.

    The particles now do two full rotations during their lifespan. The particle system accepts rotational values greater than 360, each additional 360 is just one more turn. You are also allowed to use negative values if you want, to rotate in the opposite direction.
     
    Last edited: Sep 15, 2016
  11. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    7. Particle Lifespan
    Let's say that we like the size of our effect in general but want the particles to move faster from the center to the edge. For this, we will modify the particle life-span column, column 16.

    sp-test cloud currently has a particle lifespan of 200. Let's make this lifespan 50, which will make the particles to live out their lives (position, rotation, color change etc) 4 times faster.

    Change column 16's value to 50

    Save and reload V2Brute
    p21.png

    The animations and rotations and such all play out much faster, but because the amount of particles is the same, and they "die out" faster, it looks like we have less particles on the screen :eek:.

    Don't worry, we can fix this also.
     
    Last edited: Sep 15, 2016
  12. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    8. Particle Rate

    We will increase the rate of the particles to compensate and make the cloud more dense. Column 5 is particle rate. sp-test cloud's particle rate is currently 20. Let's make it 200 - meaning we will have 10 times as many particles being created as we did before.

    pt21.png
    Hooray, lots more sparkles :)
     
    Last edited: Sep 15, 2016
  13. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    9. Emitter Life Span

    The original fog cloud particle effect used a permanent emitter. This means that as long as the fog cloud spell stayed active, the emitter would continue creating more particles.

    Let's say we just want a short one time burst of particles, like an explosion. For this, we need to use column 4, emitter life span.

    Currently the emitter for sp-test cloud is set to perm. Change this to a value of 30.
    pt22.png

    Save and reload V2Brute
    pt23.png

    Observe now, the particle system only emits for a short period, before it stops.
     
    Last edited: Sep 15, 2016
  14. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    10. Particle Position Variation

    Let's try changing the movement of the particles now. For example, a wave of particles that spreads outwards, but also upwards.

    Find the particle positional value fields, 53, 54, and 55. Also look at the coordinate system field, column 13, and note that this effect uses polar coordinates.
    pt24.png

    X values are set to 0?360, meaning they are emitted from all 360 degrees around the emitter.
    There is no Y value, so the particles stay travelling along the ground as they go outward.
    The Z value, distance from emitter, starts at 0, and then finishes at 360.

    Let's make an egg shaped particle effect that goes upward.

    Change the Y value, column 54, to 0,90

    This will mean that particles will finish their lifespan 90 degrees above the emitter, at a distance (Z) of 360 still.

    Save and reload V2Brute
    pt25.png
     
    Last edited: Sep 15, 2016
  15. WinstonShnozwick

    WinstonShnozwick Established Member

    Joined:
    Mar 2, 2011
    Messages:
    628
    Likes Received:
    23
    11. Creating a New Particle Sprite

    Making a new particle sprite is pretty easy. Make use of the free and powerful image editing program paint.net and the free text editor notepad++. This example uses paint.net.

    The best method to make a new particle sprite is to create a new file of equal width and height, 64x64 pixels is a good size that many game sprites already use.
    pt26.PNG
    Make sure the image has a transparent background so that you don't get a big blocky square. You can do this by selecting all (Ctrl+A) and pressing delete. You might want to also add a new layer to make your effect on.
    pt27.PNG
    All particles are generally made with greyscale, where white is opaque in game, greys are semi-transparent, and black is transparent depending on your blending mode.

    On this layer, let's draw a simple shape for the example, a star.
    pt28.PNG

    Save the image as a 32 bit tga file, named star.tga and copy it into your ToEE installation directory into the data/art/meshes/particle folder.

    In that folder you should find an mdf file, if not, just look at the below image. Open it in notepad++ or notepad and replace the filename with your new filename or type out the full file as shown, and then save it as the same name as an mdf file, star.mdf.
    pt29.PNG

    Place this new file into the same folder where your tga image is.
    pt30.PNG

    Now, go back to ProtoEd with your parsys1.tab still open. Go to the sprite column, column 15, and enter in the name of your newly created 2D sprite, star

    pt31.png


    Save and reload V2Brute
    pt32.png

    You just created a new particle sprite and were able to use it with your new particle effect :D.

    There are many more things you can do, such as manipulating 3D models instead of 2D sprites, and moving the emitter instead of or as well as the particles, to create more wild effects, and the best course of action is for you to check out the Parsys1.Tab fields explained earlier, but also, EXPERIMENT, and learn from how existing particle effects work to create new ones of your own. :)
     
    Last edited: Sep 15, 2016
Our Host!