Share
În cel de-al treilea tutorial al seriei, ați aflat despre diferite metode și proprietăți ale modulului Body în Matter.js. Modulul Body vă permite să manipulați corpuri simple, cum ar fi cercuri, dreptunghiuri și trapezuri. Matter.js are și alte module care vă ajută să creați și să manipulați câteva corpuri complexe, dar comune, cum ar fi mașini, lanțuri, piramide, stive și corpuri moi.
Toate aceste compozite și metodele de manipulare a acestora sunt disponibile în Compozit și compozite module în Matter.js. În acest tutorial, veți începe prin a învăța despre diferite compozite cum ar fi piramidele și mașinile etc. care pot fi create folosind compozite modul. După aceasta, vom trece peste câteva metode și proprietăți importante disponibile în Compozit modul.
O stivă și o piramidă sunt ambele foarte asemănătoare. Un teanc poate fi creat folosind stivă (xx, yy, coloane, rânduri, columnGap, rowGap, callback) funcţie. În mod similar, puteți crea o piramidă cu ajutorul piramidă (xx, yy, coloane, rânduri, columnGap, rowGap, callback) funcţie. După cum puteți vedea, toți parametrii sunt aceiași în ambele cazuri. De fapt, formarea piramidei derivă din formarea stivei.
Numele tuturor parametrilor sunt explicați. xx și yy parametrii utilizați în această funcție sunt utilizați pentru a specifica punctul de pornire al compozitului. coloane și rânduri parametrii determină numărul de coloane și rânduri din compozit. Diferența dintre rânduri și coloane diferite poate fi controlată utilizând columnGap și rowGap parametrii.
Sub influența gravitației, rowGap în general dispare în majoritatea cazurilor fără a schimba compozitul. Cu toate acestea, uneori, impulsul rezultat al corpurilor individuale poate muta corpurile sub ele. Aceasta poate schimba forma compozitului.
Funcția de apel invers este utilizată pentru a crea corpuri care pot fi aranjate fie într-un aranjament de rețea, fie într-un aranjament piramidal bazat pe funcția utilizată. Acest lucru înseamnă că îl puteți folosi pentru a crea o teanc sau o piramida de cutii dreptunghiulare sau trapezoidale. Trebuie să rețineți că folosirea unui cerc va face aranjamentele instabile. Iată codul pentru a crea un teanc de dreptunghiuri:
var stack = Composites.stack (550, 100, 5, 3, 0, 0, funcția (x, y) return Bodies.rectangle (x, y, 40, 20, render: fillStyle: : 'negru'););
Puteți face funcția de apel invers atât de complexă pe cât doriți. În acest caz, am folosit opțiunile de randare pe care le-am învățat în modulul Body tutorial pentru a crea doar dreptunghiuri portocalii cu contururi negre.
Iată câteva coduri similare pentru a crea forme de piramide în Matter.js:
var piramidă = Composites.pyramid (0, 220, 11, 6, 0, 0, funcția (x, y) return Bodies.rectangle (x, y, 30, 30, render: fillStyle: : 'negru'););
Când începeți să creați o mulțime de piramide cu parametri diferiți, veți observa că numărul de rânduri create este uneori mai mic decât numărul de rânduri specificate. Acest lucru se datorează faptului că biblioteca utilizează următoarea formulă pentru a calcula numărul de rânduri:
Math.min (rânduri, Math.ceil (coloane / 2))
Puteți așeza cu atenție un teanc sau o altă piramidă peste o piramidă pentru a crea modele interesante. De exemplu, ați putea plasa o piramidă mai mică peste cea roșie pentru a crea o piramidă completă cu două culori.
O mașină în Matter.js este o structură formată din două roți și un corp. Roțile sunt create cu o frecare de 0,8 și o densitate egală cu 0,01. Puteți crea o mașină utilizând funcția masina (xx, yy, latime, inaltime, wheelSize). xx și yy parametrii sunt utilizați pentru a specifica poziția mașinii.
lăţime și înălţime determină dimensiunile corpului principal al mașinii. mărimea roții parametrul este utilizat pentru a specifica raza roților. Nu este nevoie de o funcție de apel invers deoarece tipul de corpuri necesar pentru a crea o mașină este predeterminat.
Accentsconagua
var car = compozite.car (190, 100, 100, 45, 30); $ ('. force') la ('click', functie () Body.applyForce (car.bodies [0], x: car.bodies [0] .position.x, y: car.bodies [ ] .position.y, x: 0.5, y: 0););Puteți utiliza funcția lanț (compozit, xOffsetA, yOffsetA, xOffsetB, yOffsetB, opțiuni) funcția în Matter.js pentru a lega toate corpurile într-un compozit dat folosind constrângeri. Parametrii offset din funcție sunt utilizați pentru a determina poziția relativă a constrângerilor care conectează diferitele casete.
De asemenea, veți avea nevoie de constrângeri suplimentare pentru a atârna lanțul dintr-un punct din lume. Iată codul care creează un lanț și îl atârna de tavanul lumii noastre.
variante de câmpuri = Composites.stack (500, 80, 3, 1, 10, 0, funcția (x, y) returnați Bodies.rectangle (x, y, 50, 40); var lanț = Composites.chain (cutii, 0,5, 0, -0,5, 0, rigiditate: 1); Composite.add (cutii, Constraint.create (bodyA: boxes.bodies [0], pointB: x: 500, y: 15, rigiditate: 0.8));
Cutiile din lanțul nostru au fost create folosind grămadă() funcția pe care ați învățat-o mai devreme. Constrângerile create de lanţ() au o rigiditate de 1.
Acest lucru împiedică lungimea coardei între diferite casete să se schimbe deloc. Constrângerea suplimentară pe care am creat-o aici ține casetele noastre agățate de tavan.
Aici este un demo cu o mașină și lanțul creat din codul de mai sus. Puteți deplasa mașina înainte și înapoi utilizând butoanele portocalii. Fiecare clic aplică o forță în centrul primei roți, deplasând întreaga mașină.
Un corp moale este similar cu un teanc, cu două diferențe majore. Elementele individuale ale corpului moale sunt ținute împreună de constrângeri, iar un corp moale poate avea doar cercuri ca elemente constitutive. Puteți considera un corp moale a fi o cruce între o plasă și un teanc. Crearea unui corp moale este la fel de simplă ca și apelarea softBody (xx, yy, coloane, rânduri, colGap, rowGap, crossBrace, pRadius, pOptions, cOptions) cu valorile parametrilor corespunzători.
Sunteți deja familiarizați cu primii șase parametri ai funcției. crossBrace parametrul este o valoare Boolean care determină dacă arcușele încrucișate ar trebui să fie redate sau nu. pRadius parametrul determină raza cercurilor și pOptions parametrul poate fi folosit pentru a controla alte proprietăți ale particulelor, cum ar fi masa și inerția.
cOptions parametrul specifică diferite opțiuni pentru constrângerile care leagă particulele împreună. Următorul cod va crea un corp moale pentru lumea noastră Matter.js.
var particleOptions = frecare: 0,05, frictionStatic: 0,1, randare: visible: true; var constraintOptions = render: vizibil: fals; var softBody = Composites.softBody (450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);
Crearea unui leagan al Newton-ului este, de asemenea, foarte simplă folosind built-in-ul newtonsCradle (xx, yy, număr, dimensiune, lungime) funcţie. număr parametrul determină numărul de bile din suport. mărimea parametru determină raza lor, și lungime parametrul determină lungimea coardei la care sunt atașate bilele. Biblioteca stabilește valorile de restituire și fricțiune la zero, astfel încât să poată continua mișcarea pentru o lungă perioadă de timp.
Următorul cod creează suportul și mută prima minge într-o poziție mai înaltă, astfel încât are o anumită viteză când cade și lovește alte bile. Poziția specificată de Traduceți() funcția este relativă la poziția actuală a corpului. Toate aceste funcții și proprietăți ale Corp modul au fost discutate mai detaliat în tutorialul anterior al seriei.
var cradleA = Composites.newtonsCadul (200, 50, 5, 20, 250); Body.translate (cradleA.bodies [0], x: -100, y: -100);
Acum că ați învățat cum să creați diferite tipuri de corpuri compozite, este timpul să aflați despre diferitele metode și proprietăți disponibile în modulul Composite pentru a manipula aceste compozite. Poți să folosești roti (compozit, rotire, punct, [recursive = true]), scara (compozit, scaleX, scaleY, punct, [recursive = true]) și traduce (compozit, traducere, [recursive = true]) pentru a roti, scala și traduce orice compozit. Aceste funcții sunt foarte asemănătoare cu omologii modulului corp.
De asemenea, puteți adăuga sau elimina unul sau mai multe corpuri, constrângeri și compozite dintr-un anumit compozit utilizând add (compozit, obiect) și îndepărtați (compozit, obiect, [adânc = false]) funcții. Dacă doriți să mutați câteva corpuri de la un compozit la altul, puteți face acest lucru cu ajutorul lui deplasa (compositeA, obiecte, compositeB) funcţie. Această funcție va muta obiectele date de la compozitul A la compozitul B.
Dacă vreți să accesați toate corpurile, compozitele și constrângerile care sunt copii direcți ai compozitului dat, puteți utiliza composite.bodies, composite.composites și composite.constraints proprietăți pentru a avea acces la toate acestea sub forma unui matrice.
Am văzut deja cum să folosim organisme proprietatea de a traduce o minge de la leagănul lui Newton la stânga și de a aplica o forță pe roata compozitului nostru auto. Odată ce ai o referință la corpurile individuale din compozit, poți să folosești toate metodele și proprietățile modulului Body pentru a le manipula.
În acest tutorial, ați învățat cum să creați compozite complexe utilizând modulele Composite și Composites din Matter.js. De asemenea, ați învățat despre diferite metode și proprietăți pe care le puteți utiliza pentru a manipula aceste compozite.
Această serie a avut ca scop să-i facă pe oameni să înceapă cu biblioteca Matter.js într-o manieră prietenoasă pentru începători. Ținând cont de acest lucru, am abordat funcțiile și proprietățile importante ale celor mai comune module din bibliotecă.
Matter.js are de asemenea o mulțime de alte module, pe care le-am discutat pe scurt în primul tutorial al seriei. Dacă doriți să utilizați această potențială bibliotecă, ar trebui să citiți documentația tuturor acestor module pe site-ul oficial.
Dacă ați folosit Matter.js în oricare dintre proiectele dvs., vă rugăm să ne spuneți despre experiența dumneavoastră în comentarii.
