Share
Nel terzo tutorial della serie, hai appreso diversi metodi e proprietà del modulo Body in Matter.js. Il modulo Corpo ti consente di manipolare corpi semplici come cerchi, rettangoli e trapezi. Matter.js ha anche altri moduli per aiutarti a creare e manipolare alcuni corpi compositi complessi ma comuni come automobili, catene, piramidi, pile e corpi morbidi.
Tutti questi materiali compositi e i metodi per manipolarli sono disponibili in Composito e compositi moduli in Matter.js. In questo tutorial, inizierai imparando a conoscere diversi compositi come piramidi e automobili, ecc. Che possono essere creati usando il compositi modulo. Dopodiché, esamineremo alcuni metodi e proprietà importanti disponibili in Composito modulo.
Uno stack e una piramide sono entrambi molto simili tra loro. Uno stack può essere creato usando il pila (xx, yy, colonne, righe, columnGap, rowGap, callback) funzione. Allo stesso modo, puoi creare una piramide con l'aiuto di piramide (xx, yy, colonne, righe, columnGap, rowGap, callback) funzione. Come puoi vedere, tutti i parametri sono gli stessi in entrambi i casi. In effetti, la formazione della piramide deriva dalla formazione della pila.
I nomi di tutti i parametri sono auto-esplicativi. Il xx e aa i parametri utilizzati in questa funzione vengono utilizzati per specificare il punto iniziale del composito. Il colonne e righe i parametri determinano il numero di colonne e righe nel composito. Il divario tra diverse righe e colonne può essere controllato utilizzando il columnGap e rowGap parametri.
Sotto l'influenza della gravità, il rowGap generalmente scompare nella maggior parte dei casi senza modificare il composito. Tuttavia, a volte il momento risultante dei singoli corpi può spostare i corpi sotto di loro. Questo può cambiare la forma del composito.
La funzione di callback viene utilizzata per creare corpi che possono essere disposti in una disposizione a griglia o in una disposizione a piramide basata sulla funzione utilizzata. Ciò significa che puoi usarlo per creare una pila o una piramide di scatole rettangolari o trapezi. Dovresti tenere presente che l'uso di un cerchio renderà instabili gli arrangiamenti. Ecco il codice per creare una pila di rettangoli:
var stack = Composites.stack (550, 100, 5, 3, 0, 0, function (x, y) return Bodies.rectangle (x, y, 40, 20, render: fillStyle: 'orange', strokeStyle : 'nero' ); );
È possibile rendere la funzione di callback complessa come si desidera. In questo caso, ho utilizzato le opzioni di rendering che abbiamo imparato nel tutorial del modulo Body per creare solo rettangoli arancioni con contorni neri.
Ecco un codice molto simile per creare forme piramidali in Matter.js:
var pyramid = Composites.pyramid (0, 220, 11, 6, 0, 0, function (x, y) return Bodies.rectangle (x, y, 30, 30, render: fillStyle: 'cornflowerblue', strokeStyle : 'nero' ); );
Quando inizi a creare un sacco di piramidi con parametri diversi, noterai che il numero di righe create a volte è inferiore al numero di righe specificato. Questo perché la libreria utilizza la seguente formula per calcolare il numero di righe:
Math.min (rows, Math.ceil (columns / 2))
Puoi posizionare con cura una pila o un'altra piramide su una piramide per creare motivi interessanti. Ad esempio, puoi posizionare una piramide più piccola su quella rossa per creare una piramide completa con due colori.
Una macchina in Matter.js è una struttura composta da due ruote e un corpo. Le ruote sono create con un attrito di 0,8 e una densità pari a 0,01. Puoi creare un'auto usando la funzione auto (xx, yy, larghezza, altezza, Diametro ruota). Il xx e aa i parametri sono usati per specificare la posizione della macchina.
Il larghezza e altezza determinare le dimensioni del corpo principale dell'auto. Il dimensioni della ruota parametro è usato per specificare il raggio delle ruote. Non è necessaria una funzione di callback in quanto il tipo di corpi necessari per creare un'auto è predeterminato.
Accentsconagua
var car = Composites.car (190, 100, 100, 45, 30); $ ('. force'). on ('click', function () Body.applyForce (car.bodies [0], x: car.bodies [0] .position.x, y: car.bodies [0 ] .position.y, x: 0.5, y: 0););Puoi usare il catena (composito, xOffsetA, yOffsetA, xOffsetB, yOffsetB, opzioni) funzione in Matter.js per concatenare tutti i corpi di un dato composito usando i vincoli. I parametri di offset nella funzione vengono utilizzati per determinare la posizione relativa dei vincoli che connettono diverse caselle.
Avrai anche bisogno di ulteriori vincoli per appendere la catena da un punto del mondo. Ecco il codice per creare una catena e appenderla al soffitto del nostro mondo.
var boxes = Composites.stack (500, 80, 3, 1, 10, 0, function (x, y) return Bodies.rectangle (x, y, 50, 40);); var chain = Composites.chain (boxes, 0.5, 0, -0.5, 0, rigidità: 1); Composite.add (boxes, Constraint.create (bodyA: boxes.bodies [0], pointB: x: 500, y: 15, rigidità: 0.8));
Le scatole della nostra catena sono state create usando il pila() funzione che hai imparato prima. I vincoli creati dal catena() la funzione ha una rigidità di 1.
Ciò impedisce che la lunghezza della corda tra le diverse scatole non cambi affatto. Il vincolo aggiuntivo che abbiamo creato qui tiene le nostre scatole appese al soffitto.
Ecco una demo con un'auto e la catena creata dal codice precedente. Puoi spostare la macchina avanti e indietro usando i pulsanti arancioni. Ogni clic applica una forza al centro della prima ruota, spostando l'intera macchina.
Un corpo morbido è simile a uno stack, con due differenze principali. I singoli elementi del corpo morbido sono tenuti insieme da vincoli, e un corpo morbido può avere solo cerchi come elementi costitutivi. Puoi considerare un corpo morbido come un incrocio tra una maglia e una pila. Creare un corpo morbido è semplice come chiamare softbody (xx, yy, colonne, righe, colGap, rowGap, crossbrace, pRadius, pOptions, cOptions) con i valori dei parametri appropriati.
Conoscete già i primi sei parametri della funzione. Il crossbrace parametro è un valore booleano che determina se le parentesi graffe devono essere rese o meno. Il pRadius parametro determina il raggio dei cerchi e il pOptions parametro può essere usato per controllare altre proprietà delle particelle, come massa e inerzia.
Il cOptions parametro specifica varie opzioni per i vincoli che uniscono le particelle insieme. Il seguente codice creerà un corpo morbido per il nostro mondo Matter.js.
var particleOptions = attrito: 0.05, frictionStatic: 0.1, render: visible: true; var constraintOptions = render: visible: false; var softBody = Composites.softBody (450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);
Anche la creazione di una culla di Newton è molto semplice usando il built-in newtonsCradle (xx, yy, numero, dimensioni, lunghezza) funzione. Il numero parametro determina il numero di palline nella culla. Il taglia parametro determina il loro raggio, e il lunghezza parametro determina la lunghezza della corda a cui sono attaccate le sfere. La libreria imposta i valori di restituzione e di attrito a zero in modo che possano continuare il loro movimento per un lungo periodo.
Il codice seguente crea la base e sposta la prima palla in una posizione più alta in modo che abbia una certa velocità quando cade e colpisce altre palle. La posizione specificata dal tradurre() la funzione è relativa alla posizione corrente del corpo. Tutte queste funzioni e proprietà del Corpo modulo sono stati discussi in modo più dettagliato nel precedente tutorial della serie.
var cradleA = Composites.newtonsCradle (200, 50, 5, 20, 250); Body.translate (cradleA.bodies [0], x: -100, y: -100);
Ora che hai imparato a creare diversi tipi di corpi compositi, è tempo per te di apprendere i diversi metodi e proprietà disponibili nel modulo Composito per manipolare questi materiali compositi. Puoi usare ruotare (composito, rotazione, punto, [recursive = true]), scala (composito, scaleX, scaleY, punto, [recursive = true]) e translate (composito, traduzione, [recursive = true]) per ruotare, ridimensionare e tradurre qualsiasi composito. Queste funzioni sono molto simili alle loro controparti modulo Body.
È inoltre possibile aggiungere o rimuovere uno o più body, vincoli e compositi da un determinato composito utilizzando il aggiungere (composito, oggetto) e rimuovere (composito, oggetto, [profondo = false]) funzioni rispettivamente. Se vuoi spostare alcuni corpi da un composito all'altro, puoi farlo con l'aiuto di spostare (compositeA, oggetti, compositeB) funzione. Questa funzione sposterà gli oggetti dati dal composito A al composto B.
Se si desidera accedere a tutti i corpi, i materiali compositi e i vincoli che sono figli diretti del dato composito, è possibile utilizzare il comando composite.bodies, composite.composites e composite.constraints proprietà per ottenere l'accesso a tutti sotto forma di un array.
Abbiamo già visto come usare il corpi proprietà per tradurre una palla dalla culla di Newton a sinistra e applicare una forza sulla ruota del nostro composito per auto. Una volta che hai un riferimento ai singoli corpi dal composito, puoi usare tutti i metodi e le proprietà del modulo Corpo per manipolarli.
In questo tutorial, hai imparato come creare alcuni compositi complessi usando i moduli Composite e Composites in Matter.js. Hai anche imparato a conoscere diversi metodi e proprietà che puoi usare per manipolare questi materiali compositi.
Questa serie aveva lo scopo di far iniziare le persone con la libreria Matter.js in un modo facile per i principianti. Tenendo presente ciò, abbiamo coperto funzioni e proprietà importanti dei moduli più comuni nella libreria.
Matter.js ha anche molti altri moduli, che abbiamo brevemente discusso nel primo tutorial della serie. Se vuoi utilizzare questa libreria al massimo delle sue potenzialità, dovresti leggere la documentazione di tutti questi moduli sul sito ufficiale.
Se hai utilizzato Matter.js in uno dei tuoi progetti, ti preghiamo di comunicarci la tua esperienza nei commenti.
