Dynamically creating particles from a sprite

Phaser 3
1

I’m making a platformer with a world composed of different blocks. I’m trying to create a shatter effect when the player breaks a block or lands at high speed (similar to Minecraft), with fragments of the block sprite being scattered out.

Currently, I’m using a spritesheet containing the block particles and emitting them with random frames. This works, but the issue is I would need a set of particle sprites for every single block type, which would be difficult long term.

Is there a better way of doing this? Would it be possible to dynamically create these particles from segments of the block’s sprite?

Thanks

2

Yes, see setCrop().

3

How do I provide the cropped image to the particle emitter?

4

I got it to work following the batch draw sprite example

Here’s my code:

let particle = this.scene.make.image({x:0, y:0, key:'tiles'},false);
particle.setFrame(tile.index-1);
particle.setCrop(0,0,20,20);

let rt = this.scene.make.renderTexture({ width: 64, height: 64}, false);
rt.draw(particle, 32, 32);
rt.saveTexture('particles');
  
this.blockEmitter = this.scene.add.particles('particles');

Now I just need to randomize the crop area for each particle and it’ll be sorted :smile: