Share
Matter.js este un motor fizic rigid 2D corp fizic scrise în JavaScript. Această bibliotecă vă poate ajuta să simulați cu ușurință fizica 2D în browser. Acesta oferă o mulțime de caracteristici cum ar fi capacitatea de a crea corpuri rigide și de a atribui proprietăți fizice cum ar fi masa, suprafața sau densitatea lor. De asemenea, puteți simula diferite tipuri de coliziuni și forțe precum gravitatea și frecare.
Matter.js acceptă toate browserele importante, inclusiv IE8 +. În plus, este potrivit pentru utilizarea pe dispozitive mobile, deoarece poate detecta atingerea și are capacitate de reacție. Toate aceste caracteristici fac să merite să investești timpul pentru a învăța cum să folosești motorul, după cum vei putea apoi să creezi cu ușurință jocuri 2D bazate pe fizică sau simulări. În acest tutorial, voi acoperi elementele de bază ale acestei biblioteci, inclusiv instalarea și utilizarea acesteia, și voi oferi un exemplu de lucru.
Puteți instala Matter.js utilizând administratori de pachete, cum ar fi Bower sau NPM, cu ajutorul următoarelor comenzi:
bower instalează material-js npm instalează materialul-js
De asemenea, puteți obține un link către bibliotecă dintr-un CDN și includeți-l direct în proiectele dvs., cum ar fi:
Cea mai bună modalitate de a afla despre Matter.js este să vedeți un cod real și să înțelegeți cum funcționează. În această secțiune, vom crea câteva corpuri și vom trece prin linia de coduri cerută.
var Motor = Matter.Engine, Render = Matter.Render, Lumea = Matter.World, Bodies = Matter.Bodies; var motor = Engine.create (); var randare = Render.create (element: document.body, motor: motor, opțiuni: lățime: 800, înălțime: 400, frame-uri: false); caseta VarAA = Corpuri de fixare (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 (motorul.world, [boxA, ballA, ballB, ground]); Engine.run (motor); Render.run (da);
Începem prin a crea aliasuri pentru toate modulele Matter.js de care am putea avea nevoie în proiectul nostru. Matter.Engine modulul conține metode pentru crearea și manipularea motoarelor. Motoarele sunt necesare într-un proiect pentru a actualiza simularea lumii. Matter.Render modulul este un renderer bazat pe canvas HTML5. Acest modul este necesar pentru vizualizarea diferitelor motoare.
Matter.World modulul este folosit pentru a crea și a manipula lumea în care rulează motorul. Este similar cu Matter.Composite modul, dar vă permite să tweak câteva alte proprietăți cum ar fi gravitatie și hotar. Ultimul modul din codul nostru, numit Matter.Bodies, vă permite să creați obiecte rigide ale corpului. Un alt modul similar numit Matter.Body vă permite să manipulați corpurile individuale.
Următoarea linie utilizează crea ([Setări]) metodă a Matter.Engine pentru a crea un motor nou. setări parametru în metoda de mai sus este de fapt un obiect cu perechi cheie-valoare pentru a suprascrie valorile implicite ale câtorva proprietăți legate de motor.
De exemplu, puteți controla factorul global de scalare a timpului pentru toate corpurile din lume. Stabilirea unei valori mai mici de 1 va determina interacțiunea mondială în mișcare lentă. În mod similar, o valoare mai mare decât 1 va face lumea să aibă ritm rapid. Veți afla mai multe despre Matter.Engine modul în următorul tutorial al seriei.
Apoi, folosim crea ([Setări]) metodă a Matter.Render modul pentru a crea un nou renderer. La fel ca modulul motor, parametrul de setări din metoda de mai sus este un obiect utilizat pentru a specifica diferite opțiuni pentru parametru. Puteți utiliza funcția element cheie pentru a specifica elementul în care biblioteca ar trebui să introducă pânza. În mod similar, puteți utiliza și pânză cheie pentru a specifica elementul de panza în care lumea Matter.js ar trebui să fie redată.
Este o motor cheie pe care o puteți utiliza pentru a specifica motorul care ar trebui utilizat pentru a face lumea. Există, de asemenea, un Opțiuni cheia care acceptă de fapt un obiect ca valoare. Puteți utiliza această tastă pentru a seta valori pentru diferiți parametri, cum ar fi lăţime sau înălţime a pânzei. Puteți, de asemenea, să activați sau să dezactivați caracterele prin setarea valorii cadru de sarma cheia pentru Adevărat sau fals respectiv.
Următoarele câteva linii creează diferite organisme care vor interacționa în lumea noastră. Organismele sunt create cu ajutorul Matter.Bodies modul în Matter.js. În acest exemplu, tocmai am creat două cercuri și un dreptunghi folosind cerc() și dreptunghi() metodă. Sunt disponibile și alte metode pentru a crea poligoane diferite.
Odată ce am creat cadavrele, trebuie să le adăugăm într-o lume aleasă de noi, folosind adăuga() metoda de la Matter.World modul. După adăugarea corpurilor necesare lumii noastre, trebuie doar să rulați motorul și funcția de randare folosind alerga() de la modulele respective. Acesta este în esență tot codul de care aveți nevoie pentru a crea și a face o lume în Matter.js.
Codul de la începutul acestei secțiuni creează următorul rezultat.
Există mai mult de 20 de module diferite în Matter.js. Toate aceste module oferă diferite metode și proprietăți care sunt utile pentru crearea de diferite tipuri de simulări și care vă permit să interacționați cu ele. Unele dintre aceste module gestionează coliziunile, în timp ce altele se ocupă de redare și simulare.
Exemplul din secțiunea anterioară a utilizat patru module diferite pentru a face față redării, simulării și creării de corpuri. În această secțiune, veți afla despre rolurile unor module comune disponibile în Matter.js.
Accentsconagua
Motor modulul oferă diferite metode și proprietăți care vă permit să controlați comportamentul diferitelor motoare.Lume este de fapt a Compozit corp cu proprietăți suplimentare cum ar fi gravitatea și limitele.Organisme modulul conține diferite metode care vă ajută să creați corpuri rigide cu forme comune cum ar fi un cerc, dreptunghi sau trapez.Organisme modul. Acest modul vă permite să scalați, rotiți sau traduceți corpuri individuale. De asemenea, are funcții care vă permit să specificați viteza, densitatea sau inerția diferitelor corpuri. Din cauza a numeroase funcții, cel de-al treilea tutorial din această serie discută doar metodele și proprietățile disponibile în modulul Body.Organisme modulul, acest modul conține diferite metode pe care le puteți utiliza pentru a crea corpuri compozite cu configurații comune. De exemplu, puteți crea o teanc sau o piramidă de cutii dreptunghiulare utilizând doar o singură metodă cu ajutorul compozite modul.Compozit modulul are metode și proprietăți care vă permit să creați și să manipulați corpuri compozite. Puteți citi mai multe despre Compozit și compozite module din al patrulea tutorial al seriei.Acest tutorial a fost menit să vă prezinte biblioteca Matter.js. Ținând cont de acest lucru, am oferit o prezentare generală rapidă a caracteristicilor și a instalării bibliotecii. Exemplul de bază care implică două cercuri și o casetă arată cât de ușor este să creați simulări simple folosind biblioteca.
Deoarece Matter.js are o mulțime de module, fiecare dintre acestea adăugând propriile sale metode unice la motor, am scris un scurt rezumat al câtorva module comune. Restul seriei se va concentra pe învățarea mai detaliată a acestor module comune.
