Foundry VTT: System Agnostic Animations for Fabula Ultima Through Dialogue Box

[@starpulse06]

This is really neat, thanks

[@comfortablegrey]

You're welcome! I've learned a lot about Foundry since this, too.

[@comfortablegrey]

The first macro is from one token, to one target. The second macro is from one token, to a point AoE.

[@comfortablegrey]

// Usage: Select a token, and target a token, then activate this macro. // A dialogue box will pop-up. Select an element that makes sense // for whatever successful spell or effect you want to animate. Enjoy! // This tells the console who the target is let target = Array.from(game.user.targets) [0]; // This creates the dialogue. Fabula Ultima has nine elements, // so there are nine options. I will explain the first one. let d = new Dialog({ title: "Spell Effect", content: "Select the spell's element", buttons: { one: { icon: '', label: "Air", // Callback is the output from selecting "Air" in this case callback: () => new Sequence() // This animation takes place on the caster .effect() .file("jb2a.cast_generic.sound.01.pinkteal") .atLocation(token) .scale(0.25) .effect() // This animation stretches towards the target .file("animated-spell-effects-cartoon.simple.11") .atLocation(token) .stretchTo(target) // This makes it happen a few times, with a random delay between them .repeats(3, 200, 300) // This makes the animation look a little more natural // by making it rightside up, or upside down randomly. // It looks better on animations with an arc. .randomizeMirrorY() .effect() .file("animated-spell-effects-cartoon.air.blast.circle") .scale(0.5) .atLocation(target) .delay(1500) .play() }, // This is the next option, repeat. two: { icon: '', label: "Earth", callback: () => new Sequence() .effect() .file("jb2a.cast_generic.earth.01.browngreen") .atLocation(token) .scale(0.25) .effect() .file("jb2a.boulder") .atLocation(token) .stretchTo(target) .randomizeMirrorY() .effect() .file("animated-spell-effects-cartoon.earth.explosion.02") .atLocation(target) .scale(0.25) .delay(2000) .play() }, three: { icon: '', label: "Fire", callback: () => new Sequence() .effect() .file("jb2a.cast_generic.fire.01.orange") .atLocation(token) .scale(0.25) .effect() .file("jb2a.fire_bolt.orange") .atLocation(token) .stretchTo(target) .delay(500) .repeats(3, 200, 600) .randomizeMirrorY() .play() }, four: { icon: '', label: "Ice", callback: () => new Sequence() .effect() .file("jb2a.cast_generic.water.02.blue") .atLocation(token) .scale(1) .effect() .file("jb2a.spell_projectile.ice_shard.blue") .atLocation(token) .stretchTo(target) .repeats(3, 200, 600) .randomizeMirrorY() .play() }, five: { icon: '', label: "Bolt", callback: () => new Sequence() .effect() .file("jb2a.chain_lightning") .atLocation(token) .stretchTo(target) .repeats(3, 200, 300) .randomizeMirrorY() .play() }, six: { icon: '', label: "Poison", callback: () => new Sequence() .effect() .file("jb2a.markers.poison.dark_green.02") .atLocation(token) .scale(0.25) .effect() .file("animated-spell-effects-cartoon.cantrips.acid_splash") .atLocation(token) .stretchTo(target) .repeats(3, 300, 500) .randomizeMirrorY() .play() }, seven: { icon: '', label: "Physical", callback: () => new Sequence() .effect() .file("jb2a.markers.chain.spectral_standard.complete") .atLocation(token) .scale(0.5) .effect() .file("jb2a.impact.001") .atLocation(target) .repeats(2, 500, 1000) .randomizeMirrorY() .effect() .file("jb2a.impact.007") .atLocation(target) .repeats(2, 500, 1000) .randomizeMirrorY() .effect() .file("jb2a.impact.010") .atLocation(target) .repeats(2, 500, 1000) .randomizeMirrorY() .play() }, eight: { icon: '', label: "Light", callback: () => new Sequence() .effect() .file("jb2a.cast_generic.01.yellow") .atLocation(token) .scale(0.25) .effect() .file("jb2a.energy_beam") .atLocation(token) .stretchTo(target) .repeats(2, 200, 400) .randomizeMirrorY() .play() }, nine: { icon: '', label: "Dark", callback: () => new Sequence() .effect() .file("jb2a.markers.fear.dark_purple.02") .atLocation(token) .scale(0.25) .effect() .file("jb2a.magic_missile.purple") .atLocation(token) .stretchTo(target) .repeats(3, 200, 300) .randomizeMirrorY() .play() } }, default: "two", render: html => console.log("Register interactivity in the rendered dialog"), close: html => console.log("This always is logged no matter which option is chosen") }); d.render(true);

[@comfortablegrey]

// Creates the default template icon and shape let config = { size:8, icon: 'icons/magic/control/silhouette-grow-shrink-blue.webp', label: 'AoE', tag: 'chop power', drawIcon: true, drawOutline: true, interval: 1 } // Tells the console where to create the AoE const selected = canvas.tokens.controlled[0]; let position = await warpgate.crosshairs.show(config); // This dialog is for choosing which element the AoE is let d = new Dialog({ title: "Spell Effect", content: "Select the spell's element", buttons: { one: { icon: '', label: "Air", callback: () => new Sequence() .effect() .file("jb2a.gust_of_wind.default") .atLocation(selected) .stretchTo(position) .effect() .file("jb2a.whirlwind.bluegrey") .atLocation(position) .duration(2800) .delay(1250) .scaleIn(1.0, 2000) .fadeIn(1000) .fadeOut(800) .effect() .file("jb2a.swirling_leaves.complete") .atLocation(position) .belowTokens() .scaleIn(0.5, 150, {ease: "easeOutExpo"}) .duration(4500) .fadeOut(500, {ease: "easeInSine"}) .name("Air Impact") .delay(1300) .name("Air Impact") .play() }, two: { icon: '', label: "Earth", callback: () => new Sequence() .effect() .file("jb2a.drop_shadow") .atLocation(position) .waitUntilFinished(-600) .effect() .file("jb2a.falling_rocks.top.1x1.grey") .atLocation(position) .fadeOut(800) .waitUntilFinished(-4000) .effect() .file("jb2a.explosion.08") .atLocation(position) .belowTokens() .scaleIn(0.5, 150, {ease: "easeOutExpo"}) .duration(2500) .fadeOut(500, {ease: "easeInSine"}) .name("Air Impact") .name("Earth Impact") .effect() .file("jb2a.impact.ground_crack.still_frame.01") .atLocation(position) .belowTokens() .duration(3000) .fadeIn(300, {ease: "easeInSine"}) .fadeOut(1000, {ease: "easeInSine"}) .name("Earth Cracks") .play() }, three: { icon: '', label: "Fire", callback: () => new Sequence() .effect() .file("jb2a.breath_weapons.fire") .atLocation(selected) .stretchTo(position) .waitUntilFinished(-3250) .effect() .file("jb2a.explosion.01") .atLocation(position) .waitUntilFinished(-2250) .effect() .file("jb2a.shield_themed.below.fire.01.orange") .atLocation(position) .belowTokens() .scaleIn(0.5, 150, {ease: "easeOutExpo"}) .duration(6500) .fadeOut(500, {ease: "easeInSine"}) .name("Fire Impact") .waitUntilFinished(-3250) .effect() .file("jb2a.scorched_earth") .atLocation(position) .belowTokens() .duration(5000) .opacity(0.1) .scale(0.5) .fadeIn(300, {ease: "easeInSine"}) .fadeOut(1000, {ease: "easeInSine"}) .name("Fire Impact") .play() }, four: { icon: '', label: "Ice", callback: () => new Sequence() .effect() .file("jb2a.breath_weapons.cold") .atLocation(selected) .stretchTo(position) .waitUntilFinished(-3500) .effect() .file("jb2a.ice_spikes.radial.burst.white") .atLocation(position) .fadeOut(1500) .waitUntilFinished(-2250) .effect() .file("jb2a.markers.snowflake.blue.02") .atLocation(position) .belowTokens() .scaleIn(0.5, 150, {ease: "easeOutExpo"}) .duration(4500) .fadeOut(500, {ease: "easeInSine"}) .name("Air Impact") .play() }, five: { icon: '', label: "Bolt", callback: () => new Sequence() .effect() .file("jb2a.lightning_ball.blue") .atLocation(token) .fadeIn(800) .fadeOut(800) .duration(2400) .effect() .file("jb2a.lightning_strike") .atLocation(position) .setMustache({ // random letter between a to f "letter": () => { const letters = ['a', 'b', 'c', 'd', 'e', 'f']; return letters[Math.floor(Math.random() * letters.length)]; } }) .scale(2) .repeats(4, 200, 400) .randomizeMirrorX() .delay(1250) .waitUntilFinished(-11000) .effect() .file("jb2a.explosion.02") .atLocation(position) .belowTokens() .scaleIn(0.5, 150, {ease: "easeOutExpo"}) .fadeOut(500, {ease: "easeInSine"}) .name("Air Impact") .waitUntilFinished(-3250) .effect() .file("jb2a.static_electricity") .atLocation(position) .belowTokens() .duration(3000) .fadeIn(300, {ease: "easeInSine"}) .fadeOut(1000, {ease: "easeInSine"}) .name("Bolt Impact") .play() }, six: { icon: '', label: "Poison", callback: () => new Sequence() .effect() .file("jb2a.breath_weapons.poison") .atLocation(selected) .stretchTo(position) .effect() .file("jb2a.markers.poison") .atLocation(position) .delay(1250) .effect() .file("jb2a.zoning.inward.circle") .atLocation(position) .belowTokens() .scaleIn(0.5, 150, {ease: "easeOutExpo"}) .duration(2500) .fadeOut(500, {ease: "easeInSine"}) .name("Air Impact") .delay(2300) .waitUntilFinished(-3250) .effect() .file("jb2a.zoning.inward.circle") .atLocation(position) .belowTokens() .duration(3000) .fadeIn(300, {ease: "easeInSine"}) .fadeOut(1000, {ease: "easeInSine"}) .name("Air Impact") .play() }, seven: { icon: '', label: "Physical", callback: () => new Sequence() .effect() .file("jb2a.barrel.toss.wooden.01.01.brown") .atLocation(selected) .stretchTo(position) .waitUntilFinished(-1500) .effect() .file("jb2a.drop_shadow") .atLocation(position) .waitUntilFinished(-1250) .effect() .file("jb2a.caltrops.01") .atLocation(position) .belowTokens() .duration(3000) .fadeIn(300, {ease: "easeInSine"}) .fadeOut(1000, {ease: "easeInSine"}) .name("Air Impact") .play() }, eight: { icon: '', label: "Light", callback: () => new Sequence() .effect() .file("jb2a.zoning.outward.cone.once") .atLocation(selected) .stretchTo(position) .effect() .file("jb2a.bless") .atLocation(position) .delay(1250) .effect() .file("jb2a.cast_generic.01") .atLocation(position) .belowTokens() .scaleIn(0.5, 150, {ease: "easeOutExpo"}) .duration(2500) .fadeOut(500, {ease: "easeInSine"}) .name("Air Impact") .delay(2300) .waitUntilFinished(-3250) .effect() .file("jb2a.butterflies") .atLocation(position) .belowTokens() .duration(3000) .fadeIn(300, {ease: "easeInSine"}) .fadeOut(1000, {ease: "easeInSine"}) .name("Air Impact") .play() }, nine: { icon: '', label: "Dark", callback: () => new Sequence() .effect() .file("jb2a.disintegrate") .atLocation(selected) .stretchTo(position) .effect() .file("jb2a.darkness.green") .atLocation(position) .fadeIn(1000) .fadeOut(2000) .delay(1250) .waitUntilFinished(-3250) .effect() .file("jb2a.arms_of_hadar.dark_purple") .atLocation(position) .belowTokens() .duration(3000) .fadeIn(300, {ease: "easeInSine"}) .fadeOut(1000, {ease: "easeInSine"}) .name("Air Impact") .play() } }, default: "two", render: html => console.log("Register interactivity in the rendered dialog"), close: html => console.log("This always is logged no matter which option is chosen") }); d.render(true);