How to do Animated Particles with multiatlas?

Phaser 3
1

I followed a tutorial for custom animated particles here and that worked out pretty well.

However I wanted to use a multiatlas I generated with TexturePacker and I’ve hit a snag. Any input would be great. The following generates null is not an object (evaluating 'frame.halfWidth')

function preload() {
	this.load.multiatlas('gameSheet', path('gameShee.json'), '/src/assets');
	...
	...
}

function create() {
	const dust = this.anims.create({
		key: 'dust',
		frames: this.anims.generateFrameNames('gameSheet', {
			start: 1,
			end: 8,
			prefix: 'smoke/',
			suffix: '.png',
		}),
		frameRate: 10,
		repeat: -1,
	});

	class AnimatedParticle extends Phaser.GameObjects.Particles.Particle {
		constructor(emitter) {
			super(emitter);
			this.t = 0;
			this.i = 0;
		}
	
		update(delta, step, processors) {
			const result = super.update(delta, step, processors);
			this.t += delta;
			if (this.t >= animation.msPerFrame) {
				this.i += 1;
				if (this.i > 17) {
					this.i = 0;
				}
				this.frame = animation.frames[this.i].frame;
				this.t -= animation.msPerFrame;
			}
			return result;
		}
	};

	const particles = this.add.particles('gameSheet');
	particles.createEmitter({
		x: start.x,
		y: start.y,
		frame: 0,
		quantity: 1,
		frequency: 200,
		angle: { min: 0, max: 30 },
		speed: 200,
		gravityY: 100,
		lifespan: { min: 1000, max: 2000 },
		particleClass: AnimatedParticle,
	});
}
2

Welcome Sean,
Unfortunately if you have a multiatlas and your particle’s frames are located on different sheets, you’ll get this error. I would assume it doesn’t look across all of the sheets to keep processing as efficient as possible. I would suggest creating a second atlas that is dedicated to particles, that consists of only one sheet.

3

@Jake.Caron thanks for the reply. I’ll make separate sheets for particles then.