Skip to content
a Phaser 3 plugin for floating dust particles
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
LICENSE
README.md
package-lock.json
package.json

README.md

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

You can’t perform that action at this time.