# How to do Animated Particles with multiatlas?

**URL:** <https://phaser.discourse.group/t/how-to-do-animated-particles-with-multiatlas/2850>\
**Category:** Phaser 3\
**Created:** [June 21, 2019, 5:19am UTC](https://phaser.discourse.group/t/how-to-do-animated-particles-with-multiatlas/2850 "2019-06-21T05:19:30Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sean256](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sean256/32/1602_2.png) [@sean256](https://phaser.discourse.group/u/sean256)\
**Post date:** [June 21, 2019, 5:19am UTC](https://phaser.discourse.group/t/how-to-do-animated-particles-with-multiatlas/2850/1 "2019-06-21T05:19:30Z")

</div>

I followed a tutorial for custom animated particles [here](http://labs.phaser.io/edit.html?src=src%5Cgame%20objects%5Cparticle%20emitter%5Ccustom%20particles.js) 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')`

```javascript
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,
	});
}

```

---

<div class="post-metadata">

**Author:** ![Jake.Caron](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/jake.caron/32/1841_2.png) [@Jake.Caron](https://phaser.discourse.group/u/Jake.Caron)\
**Post date:** [June 21, 2019, 11:10am UTC](https://phaser.discourse.group/t/how-to-do-animated-particles-with-multiatlas/2850/2 "2019-06-21T11:10:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sean256](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/sean256/32/1602_2.png) [@sean256](https://phaser.discourse.group/u/sean256)\
**Post date:** [June 22, 2019, 2:52am UTC](https://phaser.discourse.group/t/how-to-do-animated-particles-with-multiatlas/2850/3 "2019-06-22T02:52:41Z")

</div>

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