Tutorial How to make custom animated particle effect

Since it's requested I'm reposting this thread as modding tutorial.

To add new animated particle effect you need 5 things.

- .frame file
- .animation file
- .particle file
- .effectsource file
- PNG image file

1. frame file

Code:

{
  "frameGrid" : {
    "size" : [50, 50],
    "dimensions" : [4, 1]
  }
}

- frame file is needed to describe image file.
- "size" : You have to put the size of a frame in table format. Not the size of entire frame
ex)if you made a [300,50] image file with 6 frames, you have to put in [50,50].
- "dimensions" : it describes the layout of frames. Most of the time frame order is arranged horizontally. So, if you have 6 frame image, dimension table should be [6, 1]

2. animation file

Code:

{
  "frames" : "rainbow.png",
  "variants" : 1,
  "frameNumber" : 4,
  "animationCycle" : 0.8,
  "offset" : [-10, 0]
}

- "frames" : Simply type the directory of image file. If the image file is located at same directory as animation file and frame file, just type its name.
- "frameNumber" : type in total frame number of animation
- "animationCycle" : indicates how long it will take to make a single animation loop
- "offset" : indicates offset starting point of animation

3. particle file

Code:

{
  "kind" : "rainbow",
  "definition" : {
    "type" : "animated",
    "animation" : "/animations/rainbow/rainbow.animation",
    "position" : [0, 0],
    "initialVelocity" : [2.0, 0.0],
    "finalVelocity" : [0, 0],
    "approach" : [0, -4],
    "destructionAction" : "shrink",
    "destructionTime" : 5,
    "fade" : 1,
    "size" : 1,
    "layer" : "back",
    "timeToLive" : 1.6,
    "variance" : {
      "initialVelocity" : [0.0, 1.0],
      "finalVelocity" : [1.0, 1.0]
    }
  }
}

- "kind" : The name of effectsource file
- "type" : If this particle effect uses frame animation, it should be put as "animated"
- "animation" : Indicates directory of animation file
- "position" : Anchor point of animation. Starting point will be "position" + "offset"
- "initialVelocity" : Initial speed of particle as table. First number means X_axis speed. Second means Y_axis speed.
- "finalVelocity" : Final speed of particle as table.
- "fade" : Set as 1 to apply fade out effect
- "size" : Scale of particle based on actual image size
- "layer" : Set as "back" to create particle behind the character
- "timeToLive" : Indicates how long the single particle will last
- "variance" : Adds random variance to each particle when created.

4. effectsource file

Code:

{
  "kind" : "rainbow",
  "definition" : {
    "duration" : 0.3,
    "loops" : true,
    "start" : {
      "particles" : [
        [ ]
      ],
      "sounds" : [
        [ ]
      ]
    },
    "particles" : [
      [ "rainbow" ]
    ],
    "sounds" : [
      [ ]
    ],
    "stop" : {
      "particles" : [
        [ ]
      ],
      "sounds" : [
        [ ]
      ]
    }
  }
}

- "kind" : Name of effectsource file
- "duration" : Indicates creating interval between particles.
- "loops" : Set as "true" to loop the animation frames.
- "particles" : Name of particle file

5. PNG image file

- You need to make images for every single frame. Look up particle folder or projectile folder for good examples.

That's about it. I only covered things that I consider it's important. Hope this helps.
One more thing, I personally recommend you to name all these files identically. So that you won't get confused.
------------------------------------------------------------------------------------------------------------------
Last but not least, you need to make every directory properly. This is kind of important too. Here's some examples.

.../animations/rainbow/rainbow.frame
.../animations/rainbow/rainbow.animation
.../animations/rainbow/rainbow.png
.../effects/rainbow.effectsource
.../particles/rainbow.particle

 

Would you put the files in the Packed assets folder?

 

hey nice i was looking for this but can you turn Yellow word to something less clear and also thank you for the posting its a really usefull reference