How to create a little dust trail being left behind the character when running in Phaser

Question

I'm trying to create an arcade platform where some little dust particles are emitted from my character when running. But I still can make it look good, I'm super newbie when it comes to particle emitters, so many variables to change that I'm kinda lost, and also couldn't find any tutorials about Phaser particle emitters but just some examples. I even purchased ParticleStorm from Phaser, but still couldn't make it work well.

This is the particle code and the character in Player.ts class.

this.game = game;
game.physics.arcade.enable(this);

this.body.gravity.y = Player.GRAVITY;
this.body.velocity.x = 0;
this.body.maxVelocity = 500;

// Allow finger inputs on iOS/Android
this.inputEnabled = true;
this.events.onInputDown.add(this.handleInputDown, this);

// Setup keyboard cursors
this.cursors = this.game.input.keyboard.createCursorKeys();

this.animations.add('running', [5, 6, 7, 8], 20, true);

this.dustEmitter = this.game.add.emitter(0, 0, 5);
this.dustEmitter.makeParticles('dust');
this.dustEmitter.setAlpha(0.9, 1, 200);
this.dustEmitter.setScale(0.3, 1, 0.3, 1, 100, Phaser.Easing.Circular.Out);
// this.dustEmitter.minParticleScale = 0.8;
// this.dustEmitter.maxParticleScale = 1;
// this.dustEmitter.minRotation = -360;
// this.dustEmitter.maxRotation = 360;
this.dustEmitter.setXSpeed(0, 0);
this.dustEmitter.setYSpeed(0, 0);
this.dustEmitter.enableBody = true;
this.dustEmitter.gravity.set(-100, -100);

this.dustEmitter.start(false, 300, 25, -1);

Then during the update() function on my player code i update the emitter position based on player's position:

if (this.playerState === PlayerState.RUNNING) {
    this.dustEmitter.visible = true;

    this.dustEmitter.emitX = this.x;
    this.dustEmitter.emitY = this.y + (this.height / 2);
} else {
    this.dustEmitter.visible = false;
}

I tried so many things, changing variables, even tried to use phaser-particle-editor website to play with the values, but I even couldn't replicate it on my Phaser game even though I put the same exact values i had in the site.

What's the best approach for this? is it good to update emitter position based on player's position? or should I do something else? i think the main idea or what i have in my mind is... particles shouldn't actually follow the player but remain in the place they showed up in the first place. And as soon as player starts moving, respawn of dust will follow the player's X and Y. But how can I achieve this with particle emitters?

Thanks in advance.

Can you please provide a working example? The first thing that comes to mind is that the emitter stays attached to the player because it's a child of it. What does `this.dustEmitter.parent` return? — Kamen Minkov, Feb 16 '18 at 09:32
sure i will attach an example. Nope, i add emitter to game and not to player via addChild() and then i just change its coordinates — msqar, Feb 16 '18 at 10:32

score 1 · Accepted Answer · answered Feb 16 '18 at 11:19

1

You mention that you run this piece of code

if (this.playerState === PlayerState.RUNNING) {
    this.dustEmitter.visible = true;

    this.dustEmitter.emitX = this.x;
    this.dustEmitter.emitY = this.y + (this.height / 2);
} else {
    this.dustEmitter.visible = false;
}

inside the player update loop. This means that even if you set the emitter's position properly once, it's going to move along with the player as long as it is running (according to PlayerState) because update() is called once for each frame. What you can do is to introduce a timed event that would raise a bool which you then can use to check whether to update the emitter position. Something along these lines:

class Player extends Phaser.Sprite {
    // ...

    private shouldUpdateEmitterPosition: boolean;

    constructor() {
        // ...

        this.game.time.events.loop(2000, () => this.shouldUpdateEmitterPosition = true, this);
    }

    public update() {
        if (this.shouldUpdateEmitterPosition && this.playerState === PlayerState.RUNNING) {
            this.dustEmitter.visible = true;

            this.dustEmitter.emitX = this.x;
            this.dustEmitter.emitY = this.y + (this.height / 2);

            this.shouldUpdateEmitterPosition = false;   
        } else {
            this.dustEmitter.visible = false;
        }
    }
}

answered Feb 16 '18 at 11:19

Kamen Minkov

3,324
1
14
21

Nice! i will try it out whenever possible! what do you think about the effect? should it leave some dust clouds that remain static where they spawned and start to render more while player is running? – msqar Feb 16 '18 at 11:22
1

Depends on what you're trying to achieve, how the game's assets look and what you find looking nice - after all it's you who's making the game. – Kamen Minkov Feb 16 '18 at 11:37
Yes, i'm still creating the gameplay core, the idea is to make a pixel-art platformer. So the dust would be translated into little squares with different scales and alphas. – msqar Feb 16 '18 at 11:40
I'm getting close to what i want based on your approach! the only thing i'm not getting is, even though i set gravity.set(0,0) for the particle emitter, the particles are still dropping. I noticed that most tutorials indicate that gravity is set like emitter.gravity = value, but that is no longer true. Since gravity receives a Pointer object (X,Y) – msqar Feb 16 '18 at 12:13
1

Ohhh i had to set the same gravity on Y that in the game itself, so if i set -1400, i had to put -1400 on these particles, makes sense. Thanks man! it looks awesome now, i'm using emitter.explode() method to create the effect i wanted! – msqar Feb 16 '18 at 12:23
1

Glad you had it sorted out and glad I helped! – Kamen Minkov Feb 16 '18 at 14:56

How to create a little dust trail being left behind the character when running in Phaser

1 Answers1