Share
Matter.js è un motore di fisica del corpo rigido 2D scritto in JavaScript. Questa libreria può aiutarti a simulare facilmente la fisica 2D nel browser. Offre molte funzionalità come la capacità di creare corpi rigidi e assegnare a loro proprietà fisiche come massa, area o densità. Puoi anche simulare diversi tipi di collisioni e forze come la gravità e l'attrito.
Matter.js supporta tutti i principali browser tra cui IE8 +. Inoltre, è adatto per l'uso su dispositivi mobili in quanto può rilevare il tocco e ha una reattività. Tutte queste caratteristiche fanno sì che valga la pena investire il tuo tempo per imparare come utilizzare il motore, in quanto sarai in grado di creare facilmente giochi o simulazioni 2D basati sulla fisica. In questo tutorial illustrerò le basi di questa libreria, inclusa l'installazione e l'utilizzo, e fornirò un esempio funzionante.
Puoi installare Matter.js utilizzando i gestori di pacchetti come Bower o NPM con l'aiuto dei seguenti comandi:
installa bower importa-js npm installa importa-js
Puoi anche ottenere un collegamento alla libreria da un CDN e includerlo direttamente nei tuoi progetti in questo modo:
Il modo migliore per conoscere Matter.js è vedere un codice reale e capire come funziona. In questa sezione creeremo alcuni corpi e passeremo attraverso il codice richiesto riga per riga.
var Engine = Matter.Engine, Render = Matter.Render, World = Matter.World, Bodies = Matter.Bodies; var engine = Engine.create (); var render = Render.create (element: document.body, engine: engine, options: width: 800, height: 400, wireframes: false); var boxA = Bodies.rectangle (400, 200, 80, 80); var ballA = Bodies.circle (380, 100, 40, 10); var ballB = Bodies.circle (460, 10, 40, 10); var ground = Bodies.rectangle (400, 380, 810, 60, isStatic: true); World.add (engine.world, [boxA, ballA, ballB, ground]); Engine.run (motore); Render.run (rendering);
Iniziamo creando alias per tutti i moduli Matter.js di cui potremmo aver bisogno nel nostro progetto. Il Matter.Engine modulo contiene metodi per creare e manipolare i motori. I motori sono necessari in un progetto per aggiornare la simulazione del mondo. Il Matter.Render module è un renderer basato su canvas HTML5 di base. Questo modulo è necessario per visualizzare diversi motori.
Il Matter.World il modulo viene utilizzato per creare e manipolare il mondo in cui viene eseguito il motore. È simile al Matter.Composite modulo, ma ti consente di modificare alcune proprietà aggiuntive come gravità e misura. L'ultimo modulo nel nostro codice, chiamato Matter.Bodies, ti consente di creare oggetti del corpo rigidi. Un altro modulo simile chiamato Matter.Body ti permette di manipolare i singoli corpi.
La prossima linea usa il creare ([Impostazioni]) metodo del Matter.Engine modulo per creare un nuovo motore. Il impostazioni il parametro nel metodo precedente è in realtà un oggetto con coppie chiave-valore per sovrascrivere i valori predefiniti di alcune proprietà correlate al motore.
Ad esempio, puoi controllare il fattore di scala globale del tempo per tutti i corpi del mondo. Impostando un valore inferiore a 1, il mondo interagirà al rallentatore. Allo stesso modo, un valore maggiore di 1 renderà il mondo frenetico. Imparerai di più sul Matter.Engine modulo nel prossimo tutorial della serie.
Dopo ciò, usiamo il creare ([Impostazioni]) metodo del Matter.Render modulo per creare un nuovo renderer. Proprio come il modulo Motore, il parametro delle impostazioni nel metodo precedente è un oggetto utilizzato per specificare diverse opzioni per il parametro. Puoi usare il elemento chiave per specificare l'elemento in cui la libreria deve inserire la tela. Allo stesso modo, puoi anche usare il tela chiave per specificare l'elemento canvas in cui deve essere visualizzato il mondo Matter.js.
C'è un motore chiave che puoi usare per specificare il motore che dovrebbe essere usato per rendere il mondo. C'è anche un opzioni chiave che accetta effettivamente un oggetto come valore. È possibile utilizzare questo tasto per impostare valori per diversi parametri come il larghezza o altezza della tela. È inoltre possibile attivare o disattivare i wireframe impostando il valore di wireframe chiave per vero o falso rispettivamente.
Le prossime linee creano corpi diversi che interagiranno nel nostro mondo. I corpi sono creati con l'aiuto di Matter.Bodies modulo in Matter.js. In questo esempio, abbiamo appena creato due cerchi e un rettangolo usando il cerchio() e rettangolo() metodo. Sono disponibili anche altri metodi per creare diversi poligoni.
Una volta creati i corpi, dobbiamo aggiungerli a un mondo di nostra scelta usando il Inserisci() metodo dal Matter.World modulo. Dopo aver aggiunto gli elementi necessari al nostro mondo, abbiamo solo bisogno di eseguire il motore e il renderer usando il correre() metodo dai rispettivi moduli. Questo è praticamente tutto il codice che devi creare e rendere un mondo in Matter.js.
Il codice all'inizio di questa sezione crea il seguente risultato.
Ci sono più di 20 diversi moduli in Matter.js. Tutti questi moduli forniscono diversi metodi e proprietà che sono utili per creare diversi tipi di simulazioni e consentono di interagire con essi. Alcuni di questi moduli gestiscono le collisioni, mentre altri gestiscono il rendering e la simulazione.
L'esempio nella sezione precedente utilizzava quattro diversi moduli per gestire il rendering, la simulazione e la creazione di corpi. In questa sezione verranno illustrati i ruoli di alcuni moduli comuni disponibili in Matter.js.
Accentsconagua
Motore modulo fornisce diversi metodi e proprietà che consentono di controllare il comportamento di diversi motori.Mondo è in realtà a Composito corpo con proprietà aggiuntive come gravità e limiti.Bodies modulo contiene diversi metodi per aiutarti a creare corpi rigidi con forme comuni come un cerchio, un rettangolo o un trapezio.Bodies modulo. Questo modulo ti consente di ridimensionare, ruotare o tradurre i singoli corpi. Ha anche funzioni che ti permettono di specificare la velocità, la densità o l'inerzia di corpi diversi. A causa di così tante funzioni, il terzo tutorial di questa serie discute solo i metodi e le proprietà disponibili nel modulo Body.Bodies modulo, questo modulo contiene diversi metodi che è possibile utilizzare per creare corpi compositi con configurazioni comuni. Ad esempio, puoi creare una pila o una piramide di riquadri rettangolari usando solo un singolo metodo con l'aiuto di compositi modulo.Composito modulo ha metodi e proprietà che ti permettono di creare e manipolare corpi compositi. Puoi leggere di più su Composito e compositi moduli nel quarto tutorial della serie.Questo tutorial intendeva introdurti alla libreria Matter.js. Tenendo presente ciò, ho fornito una rapida panoramica delle funzionalità e dell'installazione della libreria. L'esempio di base che comprende due cerchi e una casella mostra quanto sia facile creare semplici simulazioni usando la libreria.
Poiché Matter.js ha molti moduli ognuno dei quali aggiunge i propri metodi unici al motore, ho scritto un breve sommario di alcuni moduli comuni. Il resto della serie si concentrerà sull'insegnamento di questi moduli comuni in modo più dettagliato.
