dust-phaser-plugin

a Phaser 3 plugin for floating dust particles

Usage no npm install needed!

<script type="module">
  import dustPhaserPlugin from 'https://cdn.skypack.dev/dust-phaser-plugin';
</script>

README

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