Share
Nel tutorial introduttivo di questa serie, sei stato brevemente presentato a diversi moduli in Matter.js. La libreria contiene molti moduli, quindi non è pratico scrivere in dettaglio su ciascuno di essi in un singolo tutorial. Dopo aver letto la prima parte della serie, ora dovresti avere un'idea generale della libreria e delle sue caratteristiche.
In questo tutorial, ci concentreremo solo sul modulo World e sul modulo Engine in Matter.js. Il modulo Mondo ci fornisce i metodi e le proprietà necessarie per creare e manipolare il mondo composito. Puoi usarlo per aggiungere o rimuovere corpi diversi dal mondo. Il modulo Motore contiene i metodi per creare e manipolare i motori responsabili della creazione della simulazione del tuo mondo.
In questa sezione, imparerai i diversi metodi, proprietà ed eventi del modulo Mondo. Mondo è in realtà a Composito con proprietà aggiuntive come gravità e misura aggiunto ad esso. Ecco un elenco di importanti metodi disponibili in questo modulo:
Accentsconagua
aggiungi (composito, oggetto): Questo metodo è ereditato dal modulo Composite e consente di aggiungere uno o più body, compositi o vincoli al composito o al mondo dato. addBody (mondo, corpo): Questo metodo consente di aggiungere singoli elementi del corpo al mondo dato. Ci sono anche addComposite () e addConstraint () metodi che ti permettono di aggiungere un composito o vincolo al mondo.Il codice seguente utilizza entrambi questi metodi per aggiungere corpi diversi al mondo. Il Inserisci() il metodo aggiunge tre rettangoli statici che fungono da muri. Il ADDBODY () il metodo aggiunge un cerchio, un quadrato o un rettangolo basato sul pulsante cliccato dall'utente.
var topWall = Bodies.rectangle (400, 0, 810, 30, isStatic: true); var leftWall = Bodies.rectangle (0, 200, 30, 420, isStatic: true); var ball = Bodies.circle (460, 10, 40, 10); var bottomWall = Bodies.rectangle (400, 400, 810, 30, isStatic: true); World.add (engine.world, [topWall, leftWall, ball, bottomWall]); var addCircle = function () return Bodies.circle (Math.random () * 400 + 30, 30, 30); ; $ ('. add-circle'). on ('click', function () World.add (engine.world, addCircle ()););Puoi vedere che il isStatic la chiave è stata impostata su vero per le tre pareti nel nostro mondo. Impostare questa chiave su vero per ogni oggetto rende quell'oggetto completamente statico. L'oggetto non cambierà mai la sua posizione o l'angolo ora. Ci sono molte altre proprietà che possono essere specificate per controllare il comportamento di oggetti diversi. Verrai a conoscenza di tutti loro nel tutorial del modulo Body di questa serie.
rimuovi (composito, oggetto, [profondo = falso]): Questo è un metodo generico per rimuovere uno o più body (s), composito (i) o vincoli (s) dal dato composito o mondo. Ad esempio, è possibile utilizzare la seguente riga per rimuovere le pareti superiore e sinistra dal mondo.World.remove (engine.world, [topWall, leftWall]);
chiaro (mondo, keepStatic): Questo metodo è un alias per il suo Composito controparte. Puoi usarlo per rimuovere tutti gli elementi dal mondo in una volta. Il secondo parametro è un booleano che può essere utilizzato per impedire la cancellazione degli elementi statici. Il suo valore è falso per impostazione predefinita. Ciò significa che la chiamata World.clear (mondo) rimuoverà tutti gli elementi da quel particolare mondo.ruota (composto, rotazione, punto, [ricorsivo = vero]): Questo metodo può essere utilizzato per ruotare tutti i bambini in un dato mondo o compositi da un angolo specifico attorno al punto fornito. L'angolo indicato qui è in radianti. Il punto parametro determina il punto di rotazione.scala (composito, scaleX, scaleY, point, [recursive = true]): Puoi utilizzare questo metodo per ridimensionare tutti i figli del tuo composito o mondo in base ai valori indicati. Questo metodo ridimensiona tutto da larghezza, altezza e area a massa e inerzia.translate (composito, traduzione, [recursive = true]): Il metodo di traduzione è utile quando si desidera tradurre o spostare tutti i figli di un mondo o compositi da un dato vettore rispetto alle loro posizioni correnti. Una cosa che dovresti tenere a mente è che neanche tradurre() né ruotare() impartisce qualsiasi tipo di velocità ai corpi nel mondo. Qualsiasi movimento che si verifica è solo il risultato di cambiamenti nella forma o nella posizione di corpi diversi. Ecco un codice per ridimensionare, ruotare e tradurre un mondo in base ai clic del pulsante:
$ ('. scale'). on ('click', function () Matter.Composite.scale (engine.world, 0.5, 0.7, x: 400, y: 200);); $ ('. rotate'). on ('click', function () Matter.Composite.rotate (engine.world, Math.PI / 4, x: 400, y: 200);); $ ('. translate'). on ('click', function () Matter.Composite.translate (engine.world, x: 10, y: 10););Si noti che il codice sopra riportato applica una scala diversa sull'asse xe y. Questo trasforma il cerchio nel nostro mondo Matter.js in un ovale. L'ovale si rovescia per raggiungere uno stato più stabile con energia potenziale inferiore.
Prova a premere il tasto Scala pulsante nella demo sopra. Quindi, premere il tasto Ruotare pulsante per vedere quanto strettamente Matter.js simula il movimento reale di un ovale.
Oltre a tutti questi metodi, il Mondo il modulo ha anche molte proprietà utili. Ad esempio, puoi ottenere una serie di tutti i corpi che sono figli diretti del mondo composito usando world.bodies. Allo stesso modo, puoi ottenere una matrice di tutti i materiali compositi e i vincoli usando world.composites e world.constraints.
Puoi anche specificare i limiti del mondo entro il quale Matter.js dovrebbe rilevare le collisioni usando world.bounds. Una cosa interessante che puoi cambiare con le proprietà del mondo è la gravità. La gravità lungo l'asse xey è impostata su 0 e 1 per impostazione predefinita. Puoi cambiare questi valori usando world.gravity.x e world.gravity.y rispettivamente.
Dovresti visitare la pagina della documentazione di Matter.World per saperne di più su questo modulo.
Il modulo motore è necessario per aggiornare correttamente la simulazione del mondo. Ecco una lista di alcuni metodi importanti del modulo Engine.
creare ([opzioni]): Questo metodo è utile quando si desidera creare un nuovo motore. Il opzioni il parametro in questo metodo è in realtà un oggetto con coppie chiave-valore. Puoi usare opzioni per sovrascrivere i valori predefiniti per le diverse proprietà del motore. Ad esempio, puoi usare il Orizzonte temporale proprietà per rallentare o accelerare la simulazione. aggiornamento (motore, [delta = 16,666], [correzione = 1]): Questo metodo sposterà la simulazione in avanti nel tempo delta Signorina. Il valore del correzione parametro specifica il fattore di correzione temporale da applicare dopo l'aggiornamento. Questa correzione è solitamente necessaria solo quando il delta sta cambiando tra ogni aggiornamento.merge (motoreA, motoreB): Questo metodo unirà due motori specificati dai parametri specificati. Durante l'unione, la configurazione viene applicata da motoreA e il mondo è preso da motoreB.Il modulo Engine ha anche molte altre proprietà per aiutarti a controllare la qualità della simulazione. È possibile impostare un valore per constraintIterations, positionIterations o velocityIterations per specificare il numero di iterazioni di vincolo, posizione e velocità da eseguire durante ciascun aggiornamento. Un valore più alto in ogni caso fornirà una simulazione migliore. Tuttavia, un valore più elevato influirà negativamente anche sulle prestazioni della libreria.
È possibile impostare un valore per il timing.timeScale proprietà per controllare la velocità con cui avviene la simulazione. Qualsiasi valore inferiore a 1 produrrà una simulazione al rallentatore. L'impostazione di questa proprietà a zero bloccherà completamente il mondo. L'esempio seguente dovrebbe essere chiaro.
$ ('. slow-mo'). on ('click', function () engine.timing.timeScale = 0.5;); $ ('. norm-mo'). on ('click', function () engine.timing.timeScale = 1;); $ ('. fast-mo'). on ('click', function () engine.timing.timeScale = 1.5;);Potresti aver notato che le palle stanno rimbalzando da terra questa volta. Per impostazione predefinita, ogni corpo rigido ha un coefficiente di restituzione impostato su 0. Ciò conferisce loro proprietà simili all'argilla e non rimbalzano in caso di collisione. Ho cambiato il valore di restituzione in 1 in modo che le palline possano facilmente riprendersi.
Imparerai a conoscere tutte queste proprietà dei corpi rigidi nel prossimo tutorial della serie. Per ora, aggiungi alcuni cerchi o sfere al mondo e prova a premere i pulsanti di movimento lento e movimento veloce per notare la differenza.
Dovresti visitare la pagina della documentazione di Matter.Engine per ulteriori informazioni su questo modulo.
In questa esercitazione sono stati discussi due moduli molto importanti in Matter.js che è necessario conoscere per poter eseguire eventuali simulazioni. Dopo aver letto questo tutorial, dovresti essere in grado di ridimensionare, ruotare, rallentare o accelerare il tuo mondo. Ora sai anche come rimuovere o aggiungere corpi in un mondo. Questo può essere utile quando stai sviluppando giochi 2D.
Nel prossimo tutorial della serie, imparerai a conoscere i diversi metodi, proprietà ed eventi disponibili nel Bodies modulo.
