Drawing Smooth Physics Lines
Demonstrates how to create smooth visual paths using Spline curves while simultaneously generating a chain of static Matter.js bodies and constraints to act as physical barriers.
800 × 600
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://cdn.phaserfiles.com/v410');
this.load.image('ball', 'assets/sprites/pangball.png');
}
create ()
{
this.matter.world.setBounds(0, 0, 800, 600, 32, true, true, false, true);
const lineCategory = this.matter.world.nextCategory();
const ballsCategory = this.matter.world.nextCategory();
const sides = 4;
const size = 14;
const distance = size;
const stiffness = 0.1;
const lastPosition = new Phaser.Math.Vector2();
const options = { friction: 0, frictionAir: 0, restitution: 0, ignoreGravity: true, inertia: Infinity, isStatic: true, angle: 0, collisionFilter: { category: lineCategory } };
let current = null;
let previous = null;
const curves = [];
let curve = null;
const graphics = this.add.graphics();
this.input.on('pointerdown', function (pointer)
{
lastPosition.x = pointer.x;
lastPosition.y = pointer.y;
previous = this.matter.add.polygon(pointer.x, pointer.y, sides, size, options);
curve = new Phaser.Curves.Spline([ pointer.x, pointer.y ]);
curves.push(curve);
}, this);
this.input.on('pointermove', function (pointer)
{
if (pointer.isDown)
{
const x = pointer.x;
const y = pointer.y;
if (Phaser.Math.Distance.Between(x, y, lastPosition.x, lastPosition.y) > distance)
{
options.angle = Phaser.Math.Angle.Between(x, y, lastPosition.x, lastPosition.y);
lastPosition.x = x;
lastPosition.y = y;
current = this.matter.add.polygon(pointer.x, pointer.y, sides, size, options);
this.matter.add.constraint(previous, current, distance, stiffness);
previous = current;
curve.addPoint(x, y);
graphics.clear();
graphics.lineStyle(size * 1.5, 0xffffff);
curves.forEach(c =>
{
c.draw(graphics, 64);
});
}
}
}, this);
this.input.once('pointerup', function (pointer)
{
this.time.addEvent({
delay: 1000,
callback: function ()
{
const ball = this.matter.add.image(Phaser.Math.Between(100, 700), Phaser.Math.Between(-600, 0), 'ball');
ball.setCircle();
ball.setCollisionCategory(ballsCategory);
ball.setFriction(0.005).setBounce(0.9);
},
callbackScope: this,
repeat: 100
});
}, this);
}
}
const config = {
scale: { mode: Phaser.Scale.FIT },
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'game-container',
physics: {
default: 'matter',
matter: {
gravity: {
y: 0.8
},
enableSleep: true,
debug: false
}
},
scene: Example
};
const game = new Phaser.Game(config);