Share
Nel tutorial precedente della serie, hai appreso i moduli World e Engine in Matter.js. I metodi disponibili in questi due moduli hanno lo scopo di controllare il comportamento di più corpi o di tutto il mondo contemporaneamente. Tuttavia, ad un certo punto diventerà necessario avere il controllo sulle proprietà dei singoli corpi nel tuo mondo.
Ad esempio, potresti voler applicare un po 'di forza su un particolare oggetto o modificare il suo coefficiente di attrito. In questi casi, il modulo Body in Matter.js può essere di grande aiuto. Questo modulo contiene molti metodi e proprietà per consentire di specificare i valori per tutti i tipi di attributi fisici, dalla massa al coefficiente di restituzione. In questo tutorial, imparerai tutti questi metodi e proprietà e come usarli correttamente.
Puoi ruotare qualsiasi corpo rigido nel mondo Matter.js usando il ruotare (corpo, rotazione) metodo. La rotazione è relativa all'angolo corrente del corpo e non impartirà alcuna velocità angolare ad esso. L'angolo di rotazione è specificato in radianti.
Puoi anche ridimensionare un corpo usando il scala (corpo, scaleX, scaleY, [punto]) metodo. I parametri scaleX e scaleY specificare la quantità di ridimensionamento rispettivamente nelle direzioni orizzontale e verticale. Tieni presente che qualsiasi ridimensionamento di questo tipo aggiornerà anche le proprietà fisiche del corpo come la sua massa, area e inerzia. Il quarto parametro specifica il punto attorno al quale si verifica il ridimensionamento. Se non specificato, si assume che il valore predefinito del punto di ridimensionamento sia il centro del corpo.
È possibile spostare un corpo di un dato vettore rispetto alla sua posizione corrente usando il translate (corpo, traduzione) metodo. Il parametro di traduzione specifica la nuova posizione dell'oggetto rispetto alla sua posizione corrente. Ecco la porzione di codice della demo che ridimensiona, ruota e sposta il riquadro.
Accentsconagua
var Body = Matter.Body; var box = Bodies.rectangle (460, 120, 40, 40); $ ('. scale'). on ('click', function () Body.scale (box, 1.5, 1.2);); $ ('. rotate'). on ('click', function () Body.rotate (box, Math.PI / 6);); $ ('. translate'). on ('click', function () Body.translate (box, x: -10, y: 20););Puoi anche impartire velocità lineare a un oggetto usando il setVelocity (corpo, velocità) metodo. L'applicazione di una velocità in questo modo non modifica l'angolo, la forza applicata o la posizione dell'oggetto interessato. La posizione dell'oggetto o della sua angolazione probabilmente cambierà, ma la libreria non li imposta in modo specifico su alcun valore. I loro valori sono determinati da altre forze che agiscono sull'oggetto, come l'attrito.
Proprio come la velocità lineare, puoi anche cambiare la velocità angolare di un oggetto usando il setAngularVelocity (corpo, velocità) metodo. Anche in questo caso la posizione, l'angolo e la forza applicati sull'oggetto rimangono invariati.
Una cosa che dovresti tenere a mente è che la velocità è un vettore dentro setVelocity () e un numero in setAngularVelocity ().
$ ('. linear'). on ('click', function () Body.setVelocity (box, x: 10, y: -10);); $ ('. angular'). on ('click', function () Body.setAngularVelocity (box, Math.PI / 6););Oltre a impartire velocità agli oggetti, puoi anche applicare un vettore di forza su di essi. Il applyForce (corpo, posizione, forza) il metodo può essere utilizzato per applicare a vigore vettore su un corpo da un dato posizione. Questa forza può o meno risultare nell'applicazione della coppia su un dato corpo.
Il codice seguente applica una forza proprio al centro del corpo. Il vettore della forza è x: 0, y: -0.05. Ciò significa che la forza applicata sarà puramente verticale e verso l'alto. Dovresti tenere presente che le forze verticali in una direzione verso l'alto hanno un segno negativo in Matter.js. Un'altra cosa che vale la pena di notare è quanto è piccolo il numero che specifica la forza verticale. La forza di gravitazione stessa ha un valore di appena 1 in Matter.js.
Il movimento della palla dopo l'applicazione delle forze sembra naturale purché quella palla non entri in collisione con nessuna delle pareti o del pavimento. Normalmente, quando le cose si scontrano con qualcosa, ci aspettiamo che si riprendano. L'energia con cui un oggetto rimbalza è determinata dal coefficiente di restituzione.
In Matter.js, il suo valore è impostato su zero per impostazione predefinita. Ciò significa che qualsiasi oggetto che ha la restituzione impostata su zero e collide con qualcos'altro non riprenderà affatto. Un valore di 1 significherà che l'oggetto si riprenderà con un'energia cinetica uguale a quella che aveva prima della collisione. Un valore come 0.5 significa che l'oggetto si riprenderà solo con il 50% della sua precedente energia cinetica. Il valore della restituzione per un oggetto può essere controllato usando il restituzione chiave.
In alcune simulazioni, potrebbe rendersi necessario modificare l'attrito tra diversi corpi. Questo può essere ottenuto usando il attrito, frictionAir e frictionStatic chiavi.
attrito chiave specifica il valore dell'attrito cinetico per un corpo. Può avere un valore compreso tra 0 e 1. Un valore di 0 implica che un corpo possa continuare a muoversi indefinitamente una volta che è stato messo in movimento. L'unico modo per fermarlo sarà di applicare qualche altra forza esterna. Il valore finale di attrito tra due oggetti è determinato utilizzando la formula Math.min (bodyA.friction, bodyB.friction). frictionStatic chiave specifica il valore di attrito quando un corpo è a riposo. Il valore predefinito per l'attrito statico è 0,5. Un valore più alto significa che sarà necessaria una maggiore quantità di forza per far muovere il corpo.frictionAir la chiave è usata per specificare il valore di attrito tra un corpo e l'aria circostante. Un valore più alto significa che il corpo rallenta molto velocemente quando si muove nell'aria. L'effetto dell'attrito dell'aria non è lineare.$ ('. red-friction'). on ('click', function () circleA.friction = 0.05; circleA.frictionAir = 0.0005; circleA.restitution = 0.9;); $ ('. res-friction'). on ('click', function () circleA.friction = 0.1; circleA.frictionAir = 0.001; circleA.restitution = 0;);Fino a questo punto, non abbiamo specificato il colore, la larghezza del contorno o lo stile del tratto da usare durante il rendering di un corpo. Tutte queste proprietà sono nidificate all'interno del rendere chiave. Il fillStyle proprietà accetta una stringa per specificare lo stile di riempimento che rende il corpo. Il larghezza della linea proprietà accetta un numero che definisce la larghezza della linea da utilizzare quando si crea il contorno di un corpo.
Un valore pari a zero significa che nessuna linea sarà resa affatto. Il strokeStyle la proprietà può essere utilizzata per specificare lo stile del tratto da utilizzare durante il rendering del contorno del corpo. È possibile impedire a un corpo di eseguire il rendering impostando il visibile chiave per falso. L'opacità del corpo che vuoi rendere può essere controllata usando il opacità chiave.
Puoi anche usare un'immagine anziché semplici colori e contorni per rendere un corpo. I parametri per il rendering di un corpo utilizzando gli sprite sono specificati utilizzando un diverso insieme di proprietà. Il struttura proprietà definisce il percorso dell'immagine che dovrebbe essere usata come texture sprite.
Il xOffset e YOffset le proprietà possono essere utilizzate per definire l'offset nei rispettivi assi per lo sprite. Allo stesso modo, puoi usare il xScale e yScale proprietà per definire il ridimensionamento nell'asse xe l'asse y per lo sprite. Ecco un codice che sostituisce lo sfondo azzurro della nostra palla con un folletto di calcio dal sito web Open Game Art.
var ball = Bodies.circle (90, 280, 20, render: sprite: texture: "path / to / soccer_ball.png", xScale: 0.4, yScale: 0.4);
Hai già visto come specificare l'attrito o il coefficiente di restituzione per un oggetto in Matter.js. Ci sono molte altre proprietà i cui valori possono essere specificati nello stesso modo. D'altra parte, ci sono proprietà che sono di sola lettura e non possono essere modificate da voi.
Puoi impostare la posizione di un corpo nel mondo usando il posizione chiave, che accetta un vettore come valore. Puoi anche specificare la massa di un corpo usando il massa proprietà, ma poi dovrai anche impostare un valore per il inverseMass proprietà, che viene calcolata usando 1 / massa. Un modo migliore per controllare la massa di un corpo è con l'aiuto di densità proprietà.
Una volta modificata la densità di un corpo, la sua massa verrà calcolata automaticamente in base alla sua area. In questo modo puoi anche distinguere tra diversi oggetti in base alla loro densità. Ad esempio, un corpo che usa una roccia come suo folletto dovrebbe avere una densità maggiore di un corpo della stessa misura che usa un pallone da calcio come suo folletto.
Alcune proprietà come velocità, velocità e velocità angolare sono di sola lettura, ma i loro valori possono essere impostati usando metodi appropriati come setAngularVelocity () e setVelocity (). Puoi leggere di più sulle diverse proprietà del modulo Body nella documentazione.
In questo tutorial, hai imparato tutti i metodi e le proprietà importanti nel modulo Body della libreria Matter.js. Conoscere queste diverse proprietà e ciò che fanno può aiutarti a creare simulazioni più realistiche della fisica della vita reale. Nel prossimo e ultimo tutorial della serie, imparerai a conoscere il modulo Composite in Matter.js.
Se hai domande relative a questo tutorial o alcuni suggerimenti per l'utilizzo della libreria, condividili con noi.
