Matter Physics Plugin

The Matter Physics Plugin integrates the popular Matter.js 2D physics engine into your dill pixel game. It’s ideal for games requiring realistic physics simulations including gravity, collisions, constraints, and complex body interactions.

Key Features

• Full Matter.js physics engine integration
• Debug visualization support
• Configurable walls and boundaries
• Support for circles, rectangles, and complex polygon bodies
• Custom body definitions and properties

1. Add the plugin

   // in package.json
   {
       "dependencies": {
           // ... other dependencies
           "@dill-pixel/plugin-matter-physics": "latest"
       }
   }

2. Configure the plugin in your dill-pixel.config.ts:

   export const config = defineConfig({
       // ... rest of your config
       plugins: [
           [
               'matter-physics',
               {
                   autoLoad: false,
                   options: {
                       debug:true,
                   },
               },
           ],
       ],
   });

3. Initialize physics in your scene:

   import { MatterPhysics } from '@dill-pixel/plugin-matter-physics';
   
   export default class MatterPhysicsScene extends Scene {
       protected get physics(): MatterPhysics {
           return this.app.getPlugin('matter-physics') as unknown as MatterPhysics;
       }
   
       async initialize() {
           this.physics.system.initialize({
               debug: true,
               container: this.level,
               engine: {
                   gravity: { y: 0.98 }
               },
               createWalls: {
                   thickness: 10,
                   bottom: true,
                   left: true,
                   right: true
               },
               worldBounds: new Rectangle(0, 0, this.app.size.width, this.app.size.height - 20)
           });
       }
   
   }

Physics Objects

The plugin supports different types of physics entities. Here’s an example of creating various physics objects:

import { Entity } from '@dill-pixel/plugin-matter-physics';

// somewhere in your scene
async initialize() {
    // Create a circular physics object
    const circleEntity = new Entity({
        bodyType: 'circle',
        view: this.make.sprite({
            asset: 'circle-texture',
            scale: 0.1,
            anchor: 0.5,
        }),
    });

    // Create a rectangular physics object
    const rectangleEntity = new Entity({
        bodyType: 'rectangle',
        bodyDefinition: {
            restitution: 0.1,
            friction: 0.5,
            angle: Math.random() * Math.PI,
        },
        view: this.make.graphics().rect(0, 0, width, height).fill({ color: 0xff0000 }),
    });
}

Configuration Options

The Matter Physics Plugin accepts several configuration options:

export type MatterPhysicsPluginOptions = {
  debug: boolean;
  autoInit: boolean;
  container?: Container;
  worldBounds?: Rectangle;
  createWalls?: {
    thickness: number;
    top?: boolean;
    bottom?: boolean;
    left?: boolean;
    right?: boolean;
  };
  engine: Partial<IEngineDefinition>;
  runner: Partial<IRunnerOptions>;
};

Example Implementation

For a complete example implementation, you can reference the Matter Physics Scene:

Matter Scene: Demo | Source