Matter.js Cloth

Create a cloth-like simulation using a soft body composed of particles and constraints. The example demonstrates how to pin the top row of particles to make it hang and interact with it using a mouse spring.

800 × 600

GitHub

class Example extends Phaser.Scene {

    constructor() {
        super();
    }

    preload()
    {
        this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
        this.load.image('ball', 'assets/sprites/crate32.png');
        this.load.spritesheet('balls', 'assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
    }

    create()
    {
        this.matter.world.setBounds();
        this.matter.add.mouseSpring();

        const group = this.matter.world.nextGroup(true);

        const particleOptions = { friction: 0.00001, collisionFilter: { group: group }, render: { visible: false } };
        const constraintOptions = { stiffness: 0.06 };

        // softBody: function (x, y, columns, rows, columnGap, rowGap, crossBrace, particleRadius, particleOptions, constraintOptions)

        this.cloth = this.matter.add.softBody(200, 140, 20, 12, 5, 5, false, 8, particleOptions, constraintOptions);

        for (let i = 0; i < this.cloth.bodies.length; i++)
        {
            const body = this.cloth.bodies[i];

            if (i < 20)
            {
                body.isStatic = true;
            }
        }

        this.matter.add.circle(300, 500, 80, { isStatic: true,  chamfer: { radius: 20 } });
        this.matter.add.rectangle(500, 480, 80, 80, { isStatic: true });
        this.matter.add.rectangle(400, 609, 800, 50, { isStatic: true });
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    backgroundColor: '#000000',
    parent: 'game-container',
    physics: {
        default: 'matter',
        matter: {
            debug: true,
            debugBodyColor: 0xffffff
        }
    },
    scene: [ Example]
};

const game = new Phaser.Game(config);

More in Matterjs67 examples

Matter.js Collision EventListen for the collisionstart event in the Matter physics world to detect when two bodies collide and manipulate their parent Game Objects.

Matter.js Container CollisionThis example demonstrates how to apply Matter.js physics to a Container. It highlights the requirement of setting the container size before enabling physics and shows how to handle collision events for a physics-enabled container and its children.

Matter.js Custom Physics Shapes from JSONDemonstrates how to load complex Matter.js physics bodies from a JSON file exported by PhysicsEditor and apply them to sprites.

Matter.js Point IntersectionsDemonstrates how to use the intersectPoint method to detect and retrieve all Matter.js physics bodies located at a specific coordinate, such as under the mouse pointer.