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
Add the plugin
// in package.json{"dependencies": {// ... other dependencies"@dill-pixel/plugin-matter-physics": "latest"}}Configure the plugin in your dill-pixel.config.ts:
export const config = defineConfig({// ... rest of your configplugins: [['matter-physics',{autoLoad: false,options: {debug:true,},},],],});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 sceneasync 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: