Esempio d'uso minimo di Matter.js
// height=300 lines=auto
let cube; // oggetto che cade
let ball; // oggetto che rimbalza
let ground; // piano statico
function setup() {
createCanvas( 300, 300 );
let engine = Matter.Engine.create();
cube = Matter.Bodies.rectangle( 120,0, 30,30 );
ball = Matter.Bodies.circle( 180,0, 18, {restitution:1.0} );
ground = Matter.Bodies.rectangle( 150,260, 200,20, {isStatic:true} );
Matter.World.add( engine.world, [ball, cube, ground] );
Matter.Engine.run(engine);
}
function draw() {
background(220);
rectMode( CENTER );
square( cube.position.x, cube.position.y, 30 );
circle( ball.position.x, ball.position.y, 36 );
rect( ground.position.x, ground.position.y, 200, 20 );
}
let engine = Matter.Engine.create();
Inizializzazione della libreria.
square = Matter.Bodies.rectangle( 120,0, 30,30 );
circle = Matter.Bodies.circle( 180,0, 18, {restitution:1.0} );
ground = Matter.Bodies.rectangle( 150,260, 200,20, {isStatic:true} );
Creazione degli oggetti con preimpostazione dei parametri per far rimbalzare circle
e rendere immobile ground
.
Matter.World.add( engine.world, [circle, square, ground] );
Aggiunta degli oggetti al "mondo" (engine.world
) che gestirà le interazioni fra loro e con lo "ambiente".
Matter.Engine.run(engine);
Avvio degli aggiornamenti automatici delle proprietà di tutti gli oggetti del "mondo".
Per poter interagire con gli oggetti attraverso il mouse è necessario sostituire le prime due righe del setup()
:
createCanvas( 300, 300 );
let engine = Matter.Engine.create();
con:
let canvas = createCanvas( 300,300 );
let engine = Matter.Engine.create();
let canvasM = Matter.Mouse.create( canvas.elt );
let mouseC = Matter.MouseConstraint.create(engine,{mouse:canvasM});
Matter.World.add( engine.world, mouseC );
Strutturazione dei file: