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: 4 months 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 (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-25T11:57:12.000Z (over 2 years ago)
- Last Synced: 2025-01-20T02:05:42.068Z (4 months 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