physics-matter
Use this skill when using Matter.js physics in Phaser 4. Covers rigid bodies, constraints, composite bodies, sensors, collision filtering, world configuration, and advanced physics shapes. Triggers on: Matter, matter physics, constraint, joint, rigid body, sensor.
By phaserjs · 507 installs
npx skills add phaserjs/phaser --skill physics-matter
Source repository · Upstream listing
Matter.js Physics
Setting up and using Matter.js physics in Phaser 4 full body physics with rigid bodies, compound bodies, constraints, composites, sensors, collision filtering, pointer dragging, tilemap integration, and debug rendering.
Key source paths: src/physics/matter js/MatterPhysics.js , src/physics/matter js/World.js , src/physics/matter js/Factory.js , src/physics/matter js/MatterSprite.js , src/physics/matter js/MatterImage.js , src/physics/matter js/MatterGameObject.js , src/physics/matter js/PointerConstraint.js , src/physics/matter js/MatterTileBody.js , src/physics/matter js/components/ , src/physics/matter js/events/ , src/physics/matter js/typedefs/
Related skills: ../game setup and config/SKILL.md, ../sprites and images/SKILL.md, ../physics arcade/SKILL.md, ../tilemaps/SKILL.md
Quick Start
Core Concepts
Scene Plugin ( this.matter )
The MatterPhysics class is the scene level plugin. Key properties:
this.matter.add Factory for creating bodies, constraints, Game Objects (auto added to world).
this.matter.world World instance managing the engine, bounds, debug rendering. Extends EventEmitter .
this.matter.body / bodies / composite / composites / constraint Direct references to Matter.js modules for low level use.
this.matter.bodyBounds Helper for aligning bodies by visual bounds.
World ( this.matter.world )
engine The MatterJS.Engine instance.
localWorld The MatterJS.World composite containing all bodies and constraints.
enabled Boolean; false pauses simulation. autoUpdate true = engine updates each game step.
walls { left, right, top, bottom } boundary wall bodies (or null).
World Config ( MatterWorldConfig )
Passed under physics.matter in game or scene config:
Property Default Purpose
gravity { x: 0, y: 1 } Gravity vector. Set false to disable
setBounds false true or { x, y, width, height, thickness, left, right, top, bottom }
enableSleeping false Allow bodies to sleep when at rest
positionIterations 6 Position solving accuracy
velocityIterations 4 Velocity solving accuracy
constraintIterations 2 Constraint stability
timing.timeScale 1 0 freezes, 0.5 slow motion
autoUpdate true Auto step each game frame
debug false true or MatterDebugConfig object
runner {} Use runner.fps for fixed timestep
Matter Game Objects
Phaser provides two physics aware Game Object classes and a function to add physics to any Game Object:
Phaser.Physics.Matter.Sprite Extends Sprite with all Matter components. Created via this.matter.add.sprite(x, y, key, frame, options) . Supports animations.
Phaser.Physics.Matter.Image Extends Image with all Matter components. Created via this.matter.add.image(x, y, key, frame, options) . No animation support, lighter weight.
MatterGameObject(world, gameObject, options) Injects all Matter components into any existing Game Object. Created via this.matter.add.gameObject(mySprite, options) .
Both MatterSprite and MatterImage default to a rectangle body matching the texture size. Pass options.shape to override.
Matter Components (Mixins)
All Matter Game Objects have these component methods mixed in:
Component Key Methods
Velocity setVelocity(x, y) , setVelocityX(x) , setVelocityY(y) , getVelocity() , setAngularVelocity(v) , getAngularVelocity() , setAngularSpeed(s) , getAngularSpeed()
Force applyForce(vec2) , applyForceFrom(position, force) , thrust(speed) , thrustLeft(speed) , thrustRight(speed) , thrustBack(speed)
Bounce setBounce(value) restitution, 0 to 1
Friction setFriction(value, air?, fstatic?) , setFrictionAir(value) , setFrictionStatic(value)
Mass setMass(value) , setDensity(value) , centerOfMass (getter)
Gravity setIgnoreGravity(bool)
Sensor setSensor(bool) , isSensor()
Static setStatic(bool) , isStatic()
Sleep setToSleep() , setAwake() , setSleepThreshold(n) , setSleepEvents(start, end)
Collision setCollisionCategory(cat) , setCollisionGroup(group) , setCollidesWith(cats) , setOnCollide(cb) , setOnCollideEnd(cb) , setOnCollideActive(cb) , setOnCollideWith(body, cb)
SetBody setRectangle(w, h, opts) , setCircle(r, opts) , setPolygon(r, sides, opts) , setTrapezoid(w, h, slope, opts) , setBody(config, opts) , setExistingBody(body)
Transform Position sync between Matter body and Game Object
Common Patterns
Setup and World Configuration
Creating Matter Sprites and Images
Body Configuration Options ( MatterBodyConfig )
Pass as the options parameter to any factory method or as the options for a Matter Game Object:
label , isStatic , isSensor , angle (radians), timeScale , ignoreGravity , ignorePointer
density (0.001 default, auto calculates mass), mass , restitution (bounce 0 1)
friction (0 1), frictionAir (air resistance), frictionStatic (stickiness when still)
slop (overlap tolerance), chamfer ( { radius: 5 } for rounded corners)
collisionFilter: { category: 0x0001, mask: 0xFFFFFFFF, group: 0 }
onCollideCallback , onCollideEndCallback , onCollideActiveCallback
shape (for Game Objects): { type: 'circle', radius: 24 } or PhysicsEditor data
Velocity, Forces, and Thrust
Constraints (Joints and Springs)
Composites (Stacks, Chains, Soft Bodies)
Compound Bodies
Combine multiple shapes into a single body. The first part is the parent.
Parts share position, angle, and velocity. Constraints must target the parent body, not parts.
Sleep System
Bodies at rest can sleep to skip simulation. Requires enableSleeping: true in config.
Sensors
Sensors detect collisions but do not physically react. Useful for trigger zones, pickups, detection areas.
Collision Categories and Filtering
Matter uses bitmasks: category (which group this body belongs to, power of 2), mask (which categories it collides with), and group (shortcut: same positive = always collide, same negative = never collide, 0 = use category/mask).
Collision Callbacks
Tilemap Integration
Friction Types
Matter.js has three independent friction values:
Complex Shapes from Vertices
Pointer Constraint (Mouse/Touch Dragging)
Queries (Raycasting and Hit Testing)
Debug Rendering
Events
All events are emitted on this.matter.world (which extends EventEmitter ):
Event Callback Signature When
'collisionstart' (event, bodyA, bodyB) Two bodies first start colliding
'collisionactive' (event, bodyA, bodyB) Two bodies are still colliding
'collisionend' (event, bodyA, bodyB) Two bodies stop colliding
'beforeupdate' (event) Before engine update step
'afterupdate' (event) After engine update step
'beforeadd' (event) Before a body/constraint is added
'afteradd' (event) After a body/constraint is added
'beforeremove' (event) Before a body/constraint is removed
'afterremove' (event) After a body/constraint is removed
'dragstart' (body, part, constraint) Pointer starts dragging body
'drag' (body, constraint) Pointer is dragging body
'dragend' (body, constraint) Pointer stops dragging body
'sleepstart' (event, body) Body goes to sleep (requires setSleepEvents )
'sleepend' (event, body) Body wakes up (requires setSleepEvents )
'pause' none World paused
'resume' none World resumed
Collision events include event.pairs an array of collision pair objects with bodyA , bodyB , collision depth, and normal.
API Quick Reference
this.matter.add (Factory)
Game Objects: sprite(x, y, key, frame?, opts?) , image(x, y, key, frame?, opts?) , gameObject(go, opts?) , tileBody(tile, opts?)
Body shapes: rectangle(x, y, w, h, opts?) , circle(x, y, r, opts?) , polygon(x, y, sides, r, opts?) , trapezoid(x, y, w, h, slope, opts?) , fromVertices(x, y, verts, opts?) , fromPhysicsEditor(x, y, config, opts?) , fromSVG(x, y, xml, scale?, opts?) , fromJSON(x, y, config, opts?)
Constraints: constraint(a, b, len?, stiff?, opts?) (aliases: joint , spring ), worldConstraint(body, len?, stiff?, opts?) , mouseSpring(opts?) (alias: pointerConstraint )
Composites: stack(x, y, cols, rows, colGap, rowGap, cb) , imageStack(key, frame, x, y, cols, rows) , pyramid(...) , chain(composite, xA, yA, xB, yB, opts?) , mesh(composite, cols, rows, cross, opts?) , softBody(...) , car(x, y, w, h, wheelSize) , newtonsCradle(x, y, num, size, len)
this.matter (MatterPhysics) batch and utility
pause() , resume() , set60Hz() , set30Hz() , step(delta?) , setVelocity(bodies, x, y) , setAngularVelocity(bodies, v) , applyForce(bodies, force) , applyForceFromAngle(bodies, speed, angle?) , containsPoint(body, x, y) , intersectPoint(x, y) , intersectRect(x, y, w, h, outside?) , intersectRay(x1, y1, x2, y2, width?) , intersectBody(body) , overlap(target, bodies?, cb?) , setCollisionCategory(bodies, value) , setCollisionGroup(bodies, value) , setCollidesWith(bodies, cats) , alignBody(body, x, y, align)
this.matter.world (World)
setBounds(x?, y?, w?, h?, thickness?, l?, r?, t?, b?) , setGravity(x?, y?, scale?) , disableGravity() , add(object) , remove(object, deep?) , removeConstraint(constraint) , convertTilemapLayer(layer, opts?) , convertTiles(tiles, opts?) , nextCategory() , nextGroup(isNonColliding?) , getAllBodies() , has(body) , pause() , resume()
Direct Matter.js module references on this.matter
body (Matter.Body), bodies (Matter.Bodies), composite (Matter.Composite), composites (Matter.Composites), constraint (Matter.Constraint), detector , query , pair , pairs , resolver , axes , bounds , svg , vector , vertices
Gotchas
Force values are tiny. Use 0.01 0.1 for forces, 1 15 for velocity. Not pixel based.
setBody / setRectangle /etc. resets all properties mass, friction, collision filters, callbacks are wiped. Re apply after changing shape.
Constraints must target parent body , not compound body parts .
32 collision categories max. Each nextCategory() uses one bit.
collisionFilter.group overrides category/mask. Same positive = always collide; same negative = never collide; zero/different = use category/mask.
Sensors still need matching collision filters to fire events.
Matter position is center of mass , not top left (unlike Arcade Physics).
Sleep events require opt in: sprite.setSleepEvents(true, true) .
Tilemap conversion requires collision set first via setCollisionByProperty etc.
Restitution uses Math.max(bodyA.restitution, bodyB.restitution) the bouncier value wins.
body.ignorePointer = true prevents pointer constraint from dragging that body.
Source File Map
Path Purpose
src/physics/matter js/MatterPhysics.js Scene plugin ( this.matter ), exposes all Matter modules
src/physics/matter js/World.js World management, engine, bounds, debug, events proxy
src/physics/matter js/Factory.js this.matter.add all creation methods
src/physics/matter js/MatterSprite.js Physics sprite (Sprite + Matter components)
src/physics/matter js/MatterImage.js Physics image (Image + Matter components)
src/physics/matter js/MatterGameObject.js Injects Matter components into any Game Object
src/physics/matter js/MatterTileBody.js Wraps a Tile with a Matter body
src/physics/matter js/PointerConstraint.js Click and drag body constraint
src/physics/matter js/BodyBounds.js Body alignment by visual bounds