Jump to content

Scaling particle emitters / adding them to a container


Recommended Posts


I tried to scale up and down the particle emitter using it's setScale (or setScaleX, setScaleY), but it's not really working. Calling the setScale(1) makes the particles being huge. I have also tried updating it's scaleX and scaleY properties, but also without any success.

Could you please show me how should it be done?

Also, I thought to add it to a container, and scale that down or up, but as I see the particle emitters can not be added to containers. Any chance for this to be implemented in the future?

Lehel Kolumban

Link to comment
Share on other sites

I have tried adding both the emitter and emitterManager to the container using it's add method, but both of them threw an error. Then I tried setting the emitterManager's parentContainer to an existing container, but also without any success.

Link to comment
Share on other sites

Scaling an emitter works fine, you can either scale using setScale or using a config object (which allows for more control and things like random scales, eased scales, etc)

Using setScale:

var particles = this.add.particles('crate');

var emitter = particles.createEmitter();

emitter.setPosition(400, 300);

Particles will be 0.5 of their texture size.

If your particles appear 'huge' at scale 1 then that is because that's the un-scaled size of their texture.

Containers cannot include emitters at the moment. We will consider adding it in a future version, however, it's not going to solve your scaling problem.

Link to comment
Share on other sites

@rich thank you for your answer. I have tried the setScale function, but it isn't exactly scaling it down as I thought it would. This is how my emitter looks like without any scale:


This is how it looks like after setScale(0.5):


This is how it looks like after setScale(1):


I have used the fireball example from lab.phaser:io:
http://labs.phaser.io/view.html?src=src\game objects\particle emitter\fireballs.js
with some small modifications:
var fireBallConfig = {
        frame: 'yellow',
        radial: false,
        x: 1200,
        y: 250,
        lifespan: 500,
        speedX: { min: -50, max: 50 },
        speedY: { min: -50, max: 50 },
        quantity: 4,
        scale: { start: 0.6, end: 0, ease: 'Power3' },
        blendMode: 'ADD', 
        on: false
and moving the emitter from right to left using a tween.

What is strange is the particles seem not getting scaled down anymore after calling the setScale function of the emitter, as they should be based on the fireBallConfig.

Link to comment
Share on other sites

Calling setScale on an emitter will overwrite any scale previously set in the config. It doesn't get added to it, it replaces it. The emitter itself cannot scale, as it has no size, it's the particles you're modifying by calling that.

Link to comment
Share on other sites

Oh, I got it now :) thank you!
So if I want to get proportionally scaled down fireball from the original one, I will have to scale down more of it's properties, like the start and end values of the scale, speedX, speedY, lifespan, etc.

Link to comment
Share on other sites

Yes, at the moment you'd need to calculate the scale into the values used in the config, or use one of the events (like the onEmit callback) to set a base scale in there.

Probably worth opening a feature request on GitHub to let an emitter have a baseScale, which all particles derive from.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...