Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Phaser Water Body Plugin

View demo


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', // Currently required..

This will render a body of water, but it will not allow it to interact with your world. There is no feasible way to create an out of the box solution for all games so it is up to you to configure this to your needs.

You will need to setup collisions for any possible object you'd like to interact with. You are also responsible for determining where an impact has occurred as well as how large of an impact it was. I recommend using the excellent phaser-matter-collision-plugin but ultimately it is up to you.

    objectA: waterBody.sensor,
    callback: ({ gameObjectA: waterBody, gameObjectB, }) => {

        // Find the surface position directly under the colliding game object
        const impactPosition = waterBody.columns.findIndex((col, i) => col.x >= gameObjectB.x && i);

        // Calculate speed of game object on impact
        const speed = gameObjectB.body.speed * 3;

        // More speed means more droplets
        const numDroplets = Math.ceil(gameObjectB.body.speed) * 5;

        // Slow the colliding game object down

        // Splash!
        waterBody.splash(impactPosition, speed, numDroplets);

Check out the demo for a full example.


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

Create a new WaterBody object in the Scene.


  • 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.


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


A water body physics simulation plugin for Phaser v3






No packages published