Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

API Dev Update 4/13: Support for Custom FX Tool

1460558525

Edited 1460558859
Riley D.
Roll20 Team
Hey all, We've just pushed out a new update to the API for the Dev Server which adds a couple of new features related to the Custom F/X tool which was released a few weeks ago. New Object Type: "custfx" We've added full support for reading, modifying, and creating the "custfx" object type. This object is the one that is defined using the F/X Tool when you hit "Add New Custom" in the drop-down. Here's what the default object looks like: name: "", definition: { maxParticles: 100, emissionRate: 3, size: 35, sizeRandom: 15, lifeSpan: 10, lifeSpanRandom: 3, speed: 3, speedRandom: 1.5, gravity: {x: 0.01, y: 0.01}, angle: 0, angleRandom: 180, duration: -1, startColour: [220, 35, 0, 1], startColourRandom: [62, 0, 0, 0.25], endColour: [220, 35, 0, 0], endColourRandom:[60, 60, 60, 0] }, _id: "", _type: "custfx" An important note: the "definition" property is a Javascript object, as opposed to a string. So that means you can do, for example, custFxObject.get("definition").angle . However note that when using the set() command you still have set the *entire* definition even if you are only changing one property of it. You can't only set "angle", you have to set the "definition" property, passing in a Javascript object, like so: existingFx.set({  definition: {    angle: 0,    maxParticles: 100,    ...etc  } }); You can also create new custom FX objects from scratch using createObj(). Support for Sending an Effect Directly We've also added a new function, spawnFxWithDefinition(x, y, definition, pageid) , which you can use to spawn an effect at a location by passing in the definition directly. This allows you to easily create a quick one-off effect without needing to setup a full-blown custom effect object in the Campaign first. Note that this does require a little more network bandwidth (since we have to send the entire definition to every client) than using a custom effect (where we only send the definition once and then just send the ID), so if you're going to frequently use an effect all the time it's probably better to consider defining a custom effect for the Campaign. Note that you pass in the definition as a Javascript object, not as a string, just like when using a Custom F/X object above. Finally, note that for all places where we use the definition object, the properties that you can set on it are equivalent to the properties that are available in the Custom F/X editor on the client. We'll have this stuff on Dev for a week or two for testing and then we should be able to get it to Main. Thanks!
1460559925
The Aaron
Pro
API Scripter
SUPER AWESOME!!!!!!! Thanks Riley!!
1460560326
The Aaron
Pro
API Scripter
Riley D. said: However note that when using the set() command you still have set the *entire* definition even if you are only changing one property of it. You can't only set "angle", you have to set the "definition" property, passing in a Javascript object, like so: existingFx.set({  definition: {    angle: 0,    maxParticles: 100,    ...etc  } }); For folks that might not know about it, you can use underscore.js's  _.defaults() to set a subset of properties easily: existingFx.set({ definition: _.defaults({ speedRandom: 1.3, speed: 7 }, existingFx.get('definition')) });
1460572012
The Aaron
Pro
API Scripter
I'm not sure if this is related, but if you go to [New Custom FX] in the menu, but then cancel, it creates a blank FX anyway.
1460591437
The Aaron
Pro
API Scripter
Would it be possible to add an option on created FX to leave them out of the menu?  I have a feeling in a few months this will be a close approximation of what the effects toolbar will look like...
1460591496
The Aaron
Pro
API Scripter
Maybe an Archived flag?
1460606207
Lithl
Pro
Sheet Author
API Scripter
You could delete the effect(s) when you're done with them. =P
1460632784
The Aaron
Pro
API Scripter
Brian said: You could delete the effect(s) when you're done with them. =P For the use case I'm considering, they would all be in active use. 
The Aaron said: Brian said: You could delete the effect(s) when you're done with them. =P For the use case I'm considering, they would all be in active use.  I'm slightly scared by that thought, haha. We'll look into adding a flag...
1461002167

Edited 1461002202
Ada L.
Marketplace Creator
Sheet Author
API Scripter
I'd like to throw in a suggestion for this feature concerning performance. Could there be some sort of user setting to limit how many particles can be displayed on screen for the user at a time?  This would be helpful to reduce lag for users with less beefy machines, and it would help to solve the problem of FX particles accumulating (but not getting destroyed) over time when a user changes tabs in their browser.
This is now deployed to Main as well.
1461593994
The Aaron
Pro
API Scripter
SWEET!
1461815360

Edited 1461820255
Ada L.
Marketplace Creator
Sheet Author
API Scripter
Glad to see the custom FX API is on production now. I'm having some issues trying to use the spawnFxWithDefinition function though.  Whenever I try to spawn a custom effect by doing something like this: var x = source.get('left'); var y = source.get('top'); var pageid = source.get('_pageid'); var fxDef = { "gravity": {"x": 0.01, "y": 0.01}, "maxParticles": 500, "size": 15, "sizeRandom": 5, "lifeSpan": 15, "lifeSpanRandom": 7, "speed": 5, "speedRandom": 2, "angle": 270, "angleRandom": 75, "emissionRate": 75, "duration": 10, "startColour": [220, 35, 0, 1], "startColourRandom": [62, 0, 0, 0.25], "endColour": [220, 35, 0, 0], "endColourRandom":[60, 60, 60, 0] }; spawnFxWithDefinition(x, y, fxDef, pageid); It generates a default burn-fire effect, except that it doesn't stop, ever, unless I refresh the page. Am I doing something wrong?  It seems to be working fine on the development server. I'm also having some problems with spawning saved custom FX. If I've created a custom FX object and save it with the name "rain" and then try something like this: var x = source.get('left'); var y = source.get('top'); var pageid = source.get('_pageid'); spawn(x, y, 'rain', pageid); it only generates the default burn-fire effect. This doesn't work on either the production or development servers.