dust-phaser-plugin

a Phaser 3 plugin for floating dust particles

The goal of this plugin is to provide an easy way to add 1x1 pixels that wander around the screen. This animation effect can give a little bit more life and polish to your pixelart scene.

Install from npm

npm i dust-phaser-plugin

Phaser must also be a dependency of your project.

Use it in your Phaser game

Add it as a scene plugin:

import "phaser";
import Level from "./scenes/Level.js";
import DustPhaserPlugin from "dust-phaser-plugin";

var config = {
    type: Phaser.WEBGL,
    width: 640,
    height: 480,
    backgroundColor: "#000000",
    pixelArt: true,
    zoom: 2,
    plugins: {
        scene: [
            { key: "DustPlugin", plugin: DustPhaserPlugin, mapping: "dust" }
        ]
    },
    scene: [
        Level
    ]
};

// start game
const game = new Phaser.Game(config);

Then in the create method of the scene you want to add the particles to:

class Level extends Phaser.Scene {

    constructor (config)
    {
        super((config) ? config : { key: "level" });
    }

    create()
    {
        this.dust.addOnePixelDust({ count: 12, alpha: .85 , tint: 0xA3CB38 });
    }
}

This will add 12 green 1x1 pixels that wander around the camera viewport.

If you want to use your own image instead of a 1x1 pixel, you have to preload an image with the key dust:

this.load.image("dust", "assets/dust.png");

Then you can call addDust in the create method of your scene:

this.dust.addDust( { count: 10 } );

Parameters

Both addOnePixelDust and addDust take a config object as argument with 3 optional properties:

|Name|Type|Default|Description| |:--:|:--:|:-----:|:----------:| |count|{Integer}|8|The number of particles within the camera viewport at any given time.| |alpha|{Number}|1|A number between 0 and 1, indicating the amount of transparency of the particle.| |tint|{Integer}|0xffffff|A tint to apply to the particle. Use a white texture for best results.|

License

MIT