Tutorial How to make custom animated particle effect

Discussion in 'Starbound Modding' started by Riuny, Oct 9, 2014.

  1. Riuny

    Riuny Big Damn Hero

    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
     
  2. CodyGibson925

    CodyGibson925 Yeah, You!

    Would you put the files in the Packed assets folder?
     
  3. stufufuku

    stufufuku Guest

    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
     
    boo buu likes this.

Share This Page