Particle effect atlases for Phaser and PixiJS

Phaser and PixiJS both read TexturePacker JSON, the most common atlas format on the web. ParticleFX Studio writes it with frame names and an animation list, so the effect plays without hand-made frame data. For effects that should react live, see the live runtime.

Phaser 3, free: a plain spritesheet

Export Spritesheet with Engine data set to Image only and note the frame size the export dialog shows.

// preload
this.load.spritesheet('boom', 'boom.png', { frameWidth: 256, frameHeight: 256 });

// create
this.anims.create({
  key: 'boom',
  frames: this.anims.generateFrameNumbers('boom'),
  frameRate: 30,
  repeat: -1, // 0 for a one-shot
});
this.add.sprite(400, 300, 'boom').play('boom');

Phaser 3, with a plan: the TexturePacker atlas

Set Engine data to Phaser / PixiJS (TexturePacker hash). Frames are named name_0000.png, name_0001.png and so on, and you can use Packed layout for a smaller sheet.

// preload
this.load.atlas('boom', 'boom.png', 'boom.json');

// create
this.anims.create({
  key: 'boom',
  frames: this.anims.generateFrameNames('boom', { prefix: 'boom_', suffix: '.png', start: 0, end: 29, zeroPad: 4 }),
  frameRate: 30,
  repeat: -1,
});
this.add.sprite(400, 300, 'boom').play('boom');

PixiJS

PixiJS reads the same JSON. The atlas lists the frames under animations, keyed by the effect name.

import { Assets, AnimatedSprite } from 'pixi.js';

const sheet = await Assets.load('boom.json');
const fx = new AnimatedSprite(sheet.animations.boom);
fx.animationSpeed = 30 / 60; // export fps / ticker fps
fx.play();
app.stage.addChild(fx);

• Glow: export with Transparent off and Black background on, then set sprite.setBlendMode(Phaser.BlendModes.ADD) in Phaser or fx.blendMode = 'add' in PixiJS.
• Pixel art: set pixelArt: true in the Phaser game config, or scaleMode: 'nearest' on the PixiJS texture source.

Effects that work well on the web

Coin PickupGem Match PopJackpot WinPixel Level UpShip ExplosionDash Afterimage

A free account exports 3 effects a day as GIF, APNG, WebP, PNG frames or a plain PNG spritesheet (a grid of frames, no data file). The data file your engine reads, packed sheets, 2x to 4x scale, normal maps and video come with any plan, from $7.99 a month.