Phaser Water Body Plugin

View demo

Installation

npm i phaser-plugin-water-body -S

Then add to your game config:

import WaterBodyPlugin from 'phaser-plugin-water-body';

new Phaser.Game({
    plugins: [
        global: [
            {
                key: 'WaterBodyPlugin',
                plugin: WaterBodyPlugin,
                start: true,
            }
        ]
    ]
});

Basic Usage

The plugin registers a new custom Game Object that is available from within your scenes:

const waterBody = this.add.water(0, 0, 600, 600, 350, {
    texture: 'water',
});

API

WaterBody(x, y, width, height, depth, options)

Create a new WaterBody object in the Scene.

Arguments

• x (Number) — The x position to render the body. Default value is 0.
• y (Number) — The y position to render the body. Default value is 0.
• width (Number) — The width to render the bodyy. Default value is 100.
• height (Number) — The height to render the bodyy. Default value is 100.
• depth (Number) — The depth of water in the body (Note: cannot be larger than the height). Default value is 100.
• options (Object) — An object containing the following optional properties:
  • texture (String) — The texture key to use as the surface image (Note: currently required)

Returns a WaterBody object.

TODO

• [ ] Additional documentation
• [x] Demo
• [ ] Fallback surface colour if texture is not provided
• [ ] Resize after creation
• [ ] Dynamic runtime depth
• [ ] Support for floating objects