https://github.com/quinten/dust-phaser-plugin

a Phaser 3 plugin for floating dust particles
https://github.com/quinten/dust-phaser-plugin

html5-game-development phaser phaser-plugin phaserjs

Last synced: about 14 hours ago
JSON representation

a Phaser 3 plugin for floating dust particles

• Host: GitHub
• URL: https://github.com/quinten/dust-phaser-plugin
• Owner: Quinten
• License: mit
• Created: 2019-03-09T10:14:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-25T11:57:12.000Z (almost 2 years ago)
• Last Synced: 2024-09-23T17:32:12.395Z (4 days ago)
• Topics: html5-game-development, phaser, phaser-plugin, phaserjs
• Language: JavaScript
• Size: 12.7 KB
• Stars: 4
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

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