One Spell Effect, Two Workflows: WebM for VTTs and PNG for Games
guide3 min

One Spell Effect, Two Workflows: WebM for VTTs and PNG for Games

Choose between transparent WebM and a PNG spritesheet, read frame metadata, and avoid common loop and import mistakes when using animated spell effects.

The same magical portal can work as a video overlay in a virtual tabletop and as a sprite animation in a game. The artwork can be shared; the import workflow cannot. Choose the format your destination handles well instead of converting files until something looks right.

Use WebM for a video overlay

A transparent WebM bundles timing and frames into one video. This is convenient for Foundry tiles and other tools that explicitly support WebM with alpha. Place the video, choose playback behavior, and scale it in the scene. A tool supporting ordinary WebM video does not necessarily support transparent WebM, so confirm alpha support before committing to that workflow.

Use a spritesheet for frame-based animation

A PNG spritesheet gives an engine a grid of frames. It is useful when you want control over animation state, impact timing, or frame selection. In a Sprixen VFX export, frames are arranged left to right and then top to bottom, with eight columns. Read effect.json for the number of rows, total frames, and frame dimensions. The manifest is the source of truth for that specific export.

Read playback speed from the manifest. Catalogue exports use 24 frames per second: a two-second export contains 48 frames and a four-second export contains 96. AI-created impacts instead contain eight original frames at 8 FPS for a one-second animation. Use the exact frame count rather than playing every possible cell in a grid.

Check transparency and filtering

Import the original RGBA PNG. Do not flatten it onto a background before import. Review the engine's texture filtering and alpha settings using a light and a dark test scene. Soft glows need different filtering from intentionally sharp pixel art; the correct choice depends on the visual style and the engine.

Loops and one-shot effects are different

Portals, auras, shields, beams, and area effects are designed for continuous playback. An impact is a one-shot effect: play it once and hide or remove it when the animation finishes. The Sprixen preview replays impacts so you can inspect them, but that does not mean your game should loop the impact forever.

When testing a loop, look at the transition between the last frame and the first. Do not add an extra copy of the first frame at the end: that creates a repeated frame and can introduce a small pause.

Build a reusable spell palette

Choose a consistent pair of colors for a spell family. A frost shield, frost impact, and frost aura can feel related even when their silhouettes are different. Keep the settings with your project so you can remix the same family for upgrades or enemies later.

In Sprixen VFX Studio, the preview uses the same effect recipe as the exported frames. Customize a preset, inspect it over a map, and export the pack when it fits. A pack costs 2 credits and includes both workflows, so you do not need to purchase a separate export for each format.

For the tabletop side, follow the Foundry transparent-effects walkthrough. To compare the effects before signing in, open the live VFX preview.

VFX spritesheetspell animationgame assetsWebM

Ready to try Sprixen?

Generate consistent, style-locked sprites for your game. 6 free credits on signup, no credit card required.

Get Started Free