The Effects (FX) tool allows users to create dynamic visual Effects at a click of a button to help bring stories to life. The tool includes a pre-build particle Effects Library and the ability to create custom Particle Effects.
In the Classic Tabletop, the Effects tool is available only to GMs with a Pro subscription. In the beta of Roll20's improved tabletop experience (Project Jumpgate), the Effects tool has been uplifted to provide access for pre-built Effects to all users - players and GMs, regardless of subscription - with improved effects. Custom Effects in Jumpgate will continue to be available to Pro Subscribers.
Effects Tool - Jumpgate
The Effects (FX) Tool is available to all users in a game, so all users - players and GMs - can use pre-build Effects Library. Custom Effects feature is available to Pro level subscribers.
Custom Effects allow you to create more particle emission patterns than the small number of built-in effects. Pro subscribers can create and edit custom effects. If a game creator has a Pro subscription, custom effects will be available for all players to view and use in game.
Custom Effects Overview - Jumpgate
In order to create your own custom Effect, first select the Effects Tool (wand icon) from the left toolbar, then select the "+Custom Effect" option in the menu. This will open a dialog, much like the Macro dialog, where you can modify different attributes available in the default effect or add additional properties/attributes referenced below in this article. This info must be in a JSON format, if the format is incorrect it will not let you save your new custom Effect. If you don't know exactly what JSON is you start off with the general format of the default code and just change the numbers. You can also add code snippets for additional properties explained further in the article.
Custom Effects Properties - Jumpgate
These properties (attributes of particle emission patterns) are shared between our Classic Tabletop custom Effects feature, and Jumpgate.
angle
This is the angle at which the particle are ejected from the spawn point (your cursor). The angle is measured in degrees starting with 0 pointing to the right, so 90 is straight down, 180 is to the left, 270 is straight up. If you enter -1 for this value the system will ask you to "aim" it every time you use it. This is useful when you want to fire an effect in a different direction each time you use it.
angleRandom
How much the particles spread from the original angle to either side. An angleRandom of 45 would result in a 90 degree fire arc centered on the original angle.
duration
This is how long the effect will last, even if the mouse is held down. This is mostly used with, and required for (if it's not set, or is -1 it will be defaulted to 25), aimed and for onDeath effects, since the mouse can't be held down, so they will last for the duration. The max duration in these instances is 50, which is just about 2 seconds. It can also be useful if you want the effect just to be a single burst of particles, like in the Bomb and Nova effects where the duration is just 10. If you set the duration to -1 the effect will last as long as you hold down the mouse button, otherwise the effect will stop after the duration has finished even if you hold down the button.
emissionRate
This is a measure of how quickly particles are created and fired from the origin. This attribute ties closely with the maxParticles attribute because if that limit is reached the system will stop creating particles, so make sure that you set the max hight enough to support your emission rate.
gravity
This attribute is the only one that has 2 "sub-attributes", x and y. It has these 2 options because you are able to have the "gravity" work in any direction. You cannot use the 0 value for either of these attributes, so use 0.01 for "no gravity". X and Y both accept positive and negative values, a positive Y would pull the particles down where as a negative value would pull the particles up and it works the same way with X and left and right.
lifeSpan
lifeSpan defines how long, in a measure of time, a particle will last before it disappears. This attribute, combined with speed, will decide how far the particle will fly before it is destroyed.
lifeSpanRandom
How much variation there is in the lifespan of individual particles.
If an effect has a lifespan of 10 and a lifeSpanRandom of 5 the particles will be alive for a span of 5-15.
maxParticles
maxParticles defines the total number of particles, for that specific effect, that can be on the board at one time. Once this max is reached the particles will stop being generated until some of already existing particles reach the end of their "life".
size
size defines the relative size of the particles that are created.
sizeRandom
How much variation in size there is in the particles of the effect.
If an effect has a size of 10 and a sizeRandom of 5 the particles will have a size of 5-15.
speed
speed defines the speed at which the particles will move away from the origin.
speedRandom
How much variation in speed there is in the particles of the effect.
If an effect has a speed of 10 and a sizeRandom of 5 the particles will have a speed of 5-15.
startColour / endColour
start/endColour defines the color of the particle when it is created and right before it is destroyed, respectively, using an array [Red, Green, Blue, Alpha]. The colors, RGB, use values between 0-255 and the Alpha channel is a decimal between 0-1. If you're looking for a specific color you can look up "hex color picker" in your favorite search engine and that should give you the numbers you're looking for. The colors will fade from the start value to the end value over the course of their life span. Since all of the particles are piled on top of each other to begin with the colors tend to be much lighter, turning into a ball of white, than you expect so you will want to use darker colors at least in the startColour block. There are a bunch of color examples at the end of this page, if you're looking for inspiration.
startColour / endColour Random
The start and end randoms determine how much difference there is in the color of the particles at the beginning and end of their lifespans. Example:
startColour: [220, 35, 0, 1],
startColourRandom: [62, 0, 0, 0.25]
an effect with these values will range from an RGBA of
[158, 35, 0, 0.75] to
[255, 35, 0, 1]
resulting in a more varied color range for your effect’s particles.
onDeath
This is the only value that accepts a string, so make sure if you use it to wrap the value in "quotes" or it won't let you save. This is used, like in the Burst effect, to spawn an additional effect as soon as the original one finishes. The Burst effect is basically just the Burn effect with "onDeath": "explosion", so the Burn effect lasts until you let go of the mouse, after which it will spawn the Explosion effect at the same location. This the effect that is spawned in the onDeath sequence cannot be an "aimed" effect and must have a duration. If it has a -1 for either of these it will either be given a default or not work as intended. This also only works for other Custom FX, if multiple FX have the same name you are referencing it will only select the first one on the list.
Custom Effects Properties in Jumpgate Only
These additional properties (attributes of particle emission patterns) are only available in the upgraded FX Tool in Jumpgate.
sizeGradient
Size gradients allow for the particles in the effect to grow and shrink over the lifetime of the particle. “gradient” is used to denote where in the life span the size should be at “factor” which is a multiplier for the base size of the particle. In the below example the particles in the effect would start at 75% size then grow to normal size over the first 20% of the particle’s lifespan then it would grow to 1.5x its base size over the rest of its life.
sizeGradients: [
{ gradient: 0, factor: 0.75 },
{ gradient: 0.2, factor: 1 },
{ gradient: 1, factor: 1.5 },
],
emitRateGradients
Emit Rate Gradients define how the emit rate of the effect changes over the life of the effect’s duration similarly to the sizeGradient changing the size of particles over the lifespan of the individual particles. In the below example the effect would fire a burst of particles at the beginning and then taper off over its duration.
emitRateGradients: [
{ gradient: 0, factor: 1 },
{ gradient: 0.25, factor: 0.2 },
{ gradient: 1, factor: 0 },
]
velocityGradients
Velocity Gradients define how the particles change their speed over their lifetime.
In the above example the particles would fire out much faster than their base speed and then rapidly slow down to 20% of base speed over the first 60% of its lifespan, then slowing to a stop over the remaining 40%.
velocityGradients: [
{ gradient: 0, factor: 3 },
{ gradient: 0.6, factor: 0.2 },
{ gradient: 1, factor: 0 },
],
rulerType
This defines what the aiming interface presents as and supports
- ‘cone’
- ‘line’
- ‘beam’
additionalEmissinRatePerPixel
This property is used in conjunction with the rulerType and denotes how much faster the effect should produce particles the longer the range of the effect is.
scaleX
Determines how much wider the particles should be, is a multiplier to the base size.
scaleY
Determines how much taller the particles should be, is a multiplier to the base size.
alignParticles
This forces the alignment of each particle to match the angle it was fired upon.
rotationSpeed
Determines how fast particles should spin, default is no spin.
emitterSize
Determines the size of the emitter box. It will be 2x the value as a square.
A value of 5 would result in a 10x10 pixel emitter box.
isPointToPoint
Determines if the Effect should move from the start to end while firing particles along the path, only usable with aimed Effects.
baseEffect
Name of an existing effect to base a new effect off of. You get all the properties of the baseEffect and you can additionally override other properties to add custom effects. For example our "Rocket" effect is based off of our "Missile" effect with an additional explosion onDeath.
rocket: {
name: 'Rocket',
baseEffect: 'missile',
onDeath: 'explode',
}
Built-in Effects - Jumpgate
Effect | Preview |
---|---|
Beam beam: { |
|
Bomb bomb: { |
|
Breath breath: { |
|
Bubbling bubbling: { |
|
Burn burn: { |
|
Burst burst: { |
|
Explode explode: { |
|
Glow glow: { |
|
Missile missile: { |
|
Nova nova: { |
|
*Rocket rocket: { |
|
*Shield shield: { |
|
*Sparkle sparkle: { |
|
Splatter splatter: { |
* Only in Jumpgate
Effects Tool - Classic Tabletop
The Effects Tool will only appear in the toolbar for GMs of a game in Classic Tabletop. Pro level subscribers can use the pre-built Effects Library or create Custom Effects to user in-game.
Custom Effects allow you to create more particle emission patterns than the small number of built-in effects. You can play with the Effects yourself on the Effects Playground.
Free | Plus | Pro | |
---|---|---|---|
Effects Tool |
Custom Effects Overview - Classic Tabletop
In order to create your own custom Effects, first select the Effects Tool (lightning bolt) from the left toolbar, then select the "[New Custom Effects]" option under the "--Custom Effects--" header. This will open a dialog, much like the Macro dialog, where you can modify all of the different attributes available to the particle system. This info must be in a JSON format, if the format is incorrect it will not let you save your new custom Effects. If you don't know exactly what JSON is you can just be sure to keep the general format of the default and just change the numbers. The default text is for "Burn - Fire", and it has all of the attributes available for creating a new Effect. (minus the onDeath attribute, which will be explained at the end of the table)
Custom Effects Attributes - Classic Tabletop
angle
This is the angle at which the particle are ejected from the spawn point (your cursor). The angle is measured in degrees starting with 0 pointing to the right, so 90 is straight down, 180 is to the left, 270 is straight up. If you enter -1 for this value the system will ask you to "aim" it every time you use it. This is useful when you want to fire an effect in a different direction each time you use it.
angleRandom
How much the particles spread from the original angle to either side. An angleRandom of 45 would result in a 90 degree fire arc centered on the original angle.
duration
This is how long the effect will last, even if the mouse is held down. This is mostly used with, and required for (if it's not set, or is -1 it will be defaulted to 25), aimed and for onDeath effects, since the mouse can't be held down, so they will last for the duration. The max duration in these instances is 50, which is just about 2 seconds. It can also be useful if you want the effect just to be a single burst of particles, like in the Bomb and Nova effects where the duration is just 10. If you set the duration to -1 the effect will last as long as you hold down the mouse button, otherwise the effect will stop after the duration has finished even if you hold down the button.
emissionRate
This is a measure of how quickly particles are created and fired from the origin. This attribute ties closely with the maxParticles attribute because if that limit is reached the system will stop creating particles, so make sure that you set the max hight enough to support your emission rate.
gravityThis attribute is the only one that has 2 "sub-attributes", x and y. It has these 2 options because you are able to have the "gravity" work in any direction. You cannot use the 0 value for either of these attributes, so use 0.01 for "no gravity". X and Y both accept positive and negative values, a positive Y would pull the particles down where as a negative value would pull the particles up and it works the same way with X and left and right.
lifeSpan
lifeSpan defines how long, in a measure of time, a particle will last before it disappears. This attribute, combined with speed, will decide how far the particle will fly before it is destroyed.
lifeSpanRandom
How much variation there is in the lifespan of individual particles.
If an effect has a lifespan of 10 and a lifeSpanRandom of 5 the particles will be alive for a span of 5-15.
maxParticles
maxParticles defines the total number of particles, for that specific effect, that can be on the board at one time. Once this max is reached the particles will stop being generated until some of already existing particles reach the end of their "life".
size
size defines the relative size of the particles that are created.
sizeRandom
How much variation in size there is in the particles of the effect.
If an effect has a size of 10 and a sizeRandom of 5 the particles will have a size of 5-15.
speed
speed defines the speed at which the particles will move away from the origin.
speedRandom
How much variation in speed there is in the particles of the effect.
If an effect has a speed of 10 and a sizeRandom of 5 the particles will have a speed of 5-15.
startColour / endColour
start/endColour defines the color of the particle when it is created and right before it is destroyed, respectively, using an array [Red, Green, Blue, Alpha]. The colors, RGB, use values between 0-255 and the Alpha channel is a decimal between 0-1. If you're looking for a specific color you can look up "hex color picker" in your favorite search engine and that should give you the numbers you're looking for. The colors will fade from the start value to the end value over the course of their life span. Since all of the particles are piled on top of each other to begin with the colors tend to be much lighter, turning into a ball of white, than you expect so you will want to use darker colors at least in the startColour block. There are a bunch of color examples at the end of this page, if you're looking for inspiration.
startColour / endColour Random
The start and end randoms determine how much difference there is in the color of the particles at the beginning and end of their lifespans. Example:
startColour: [220, 35, 0, 1],
startColourRandom: [62, 0, 0, 0.25]
an effect with these values will range from an RGBA of
[158, 35, 0, 0.75] to
[255, 35, 0, 1]
resulting in a more varied color range for your effect’s particles.
onDeath
This is the only value that accepts a string, so make sure if you use it to wrap the value in "quotes" or it won't let you save. This is used, like in the Burst effect, to spawn an additional effect as soon as the original one finishes. The Burst effect is basically just the Burn effect with "onDeath": "explosion", so the Burn effect lasts until you let go of the mouse, after which it will spawn the Explosion effect at the same location. This the effect that is spawned in the onDeath sequence cannot be an "aimed" effect and must have a duration. If it has a -1 for either of these it will either be given a default or not work as intended. This also only works for other Custom Effects, if multiple Effects have the same name you are referencing it will only select the first one on the list.
Built-in Effects - Classic Tabletop
Effect | Preview |
---|---|
Beam
{ "maxParticles": 3000, "size": 15, "sizeRandom": 0, "lifeSpan": 15, "lifeSpanRandom": 0, "emissionRate": 50, "speed": 30, "speedRandom": 7, "angle": -1, "angleRandom": 1, "duration": 25 } |
|
Bomb
{ "maxParticles": 500, "size": 15, "sizeRandom": 0, "lifeSpan": 15, "lifeSpanRandom": 0, "speed": 5, "speedRandom": 2, "angle": -1, "angleRandom": 1, "emissionRate": 50, "duration": 10 } |
|
Breath
{ "maxParticles": 750, "size": 20, "sizeRandom": 10, "lifeSpan": 25, "lifeSpanRandom": 2, "emissionRate": 25, "speed": 15, "speedRandom": 3, "angle": -1, "angleRandom": 30, "duration": 25 } |
|
Bubbling
{ "maxParticles": 200, "size": 15, "sizeRandom": 3, "lifeSpan": 20, "lifeSpanRandom": 5, "speed": 7, "speedRandom": 2, "gravity": { "x": 0.01, "y": 0.65 }, "angle": 270, "angleRandom": 35, "emissionRate": 1 } |
|
Burn
{ "maxParticles": 100, "size": 35, "sizeRandom": 15, "lifeSpan": 10, "lifeSpanRandom": 3, "speed": 3, "angle": 0, "emissionRate": 12 } |
|
Burst
{ "maxParticles": 100, "size": 35, "sizeRandom": 15, "lifeSpan": 10, "lifeSpanRandom": 3, "speed": 3, "angle": 0, "emissionRate": 12, "onDeath": "explosion-magic" } |
|
Explode
{ "maxParticles": 300, "size": 35, "sizeRandom": 10, "duration": 25, "lifeSpan": 20, "lifeSpanRandom": 5, "speed": 7, "speedRandom": 1, "angle": 0, "angleRandom": 360, "emissionRate": 300 } |
|
Glow
{ "maxParticles": 500, "size": 5, "sizeRandom": 3, "lifeSpan": 17, "lifeSpanRandom": 5, "emissionRate": 7, "speed": 3, "speedRandom": 2, "angle": 270, "angleRandom": 45 } |
|
Missile
{ "maxParticles": 350, "size": 7, "sizeRandom": 3, "lifeSpan": 7, "lifeSpanRandom": 5, "emissionRate": 50, "speed": 7, "speedRandom": 5, "angle": 135, "angleRandom": 0 } |
|
Nova
{ "maxParticles": 500, "size": 15, "sizeRandom": 0, "lifeSpan": 30, "lifeSpanRandom": 0, "emissionRate": 1000, "speed": 7, "speedRandom": 0, "angle": 0, "angleRandom": 180, "duration": 5 } |
|
Splatter
{ "maxParticles": 750, "size": 7, "sizeRandom": 3, "lifeSpan": 20, "lifeSpanRandom": 5, "emissionRate": 3, "speed": 7, "speedRandom": 2, "gravity": { "x": 0.01, "y": 0.5 }, "angle": -1, "angleRandom": 20, "duration": 10 } |
|
Built-In Colors
Effect | Preview |
---|---|
Acid
"startColour": [0, 35, 10, 1], "startColourRandom": [0, 10, 10, 0.25], "endColour": [0, 75, 30, 0], "endColourRandom": [0, 20, 20, 0] |
|
Blood
"startColour": [175, 0, 0, 1], "startColourRandom": [20, 0, 0, 0], "endColour": [175, 0, 0, 0], "endColourRandom": [20, 0, 0, 0] |
|
Charm
"startColour": [200, 40, 150, 1], "startColourRandom": [25, 5, 20, 0.25], "endColour": [200, 40, 150, 0], "endColourRandom": [50, 10, 40, 0] |
|
Death
"startColour": [10, 0, 0, 1], "startColourRandom": [5, 0, 0, 0.25], "endColour": [20, 0, 0, 0], "endColourRandom": [10, 0, 0, 0] |
|
Fire
"startColour": [220, 35, 0, 1], "startColourRandom": [62, 0, 0, 0.25], "endColour": [220, 35, 0, 0], "endColourRandom": [60, 60, 60, 0] |
|
Frost
"startColour": [90, 90, 175, 1], "startColourRandom": [0, 0, 0, 0.25], "endColour": [125, 125, 255, 0], "endColourRandom": [0, 0, 0, 0] |
|
Holy
"startColour": [175, 130, 25, 1], "startColourRandom": [20, 10, 0, 0.25], "endColour": [175, 130, 50, 0], "endColourRandom": [20, 20, 20, 0] |
|
Magic
"startColour": [50, 50, 50, 0.5], "startColourRandom": [150, 150, 150, 0.25], "endColour": [128, 128, 128, 0], "endColourRandom": [125, 125, 125, 0] |
|
Slime
"startColour": [0, 250, 50, 1], "startColourRandom": [0, 20, 10, 0.25], "endColour": [0, 250, 50, 0], "endColourRandom": [20, 20, 20, 0] |
|
Smoke
"startColour": [150, 150, 150, 1], "startColourRandom": [10, 10, 10, 0.5], "endColour": [200, 200, 200, 0], "endColourRandom": [10, 10, 10, 0] |
|
Water
"startColour": [15, 15, 150, 1], "startColourRandom": [5, 5, 25, 0.25], "endColour": [10, 10, 100, 0], "endColourRandom": [10, 10, 25, 0] |
|
Effects UserLibrary
Main article: Effects Library
Roll20 users have created many interesting Effects that you can copy. Check out the Effects Library to see what they've come up with!
Using Custom FX in Macros
Custom FX can be triggered by Text Chat commands.
See Special Effects for documentation.