Share
I den tredje opplæringen av serien lærte du om ulike metoder og egenskaper til kroppsmodulen i Matter.js. Kroppsmodulen lar deg manipulere enkle kropper som sirkler, rektangler og trapeser. Matter.js har også andre moduler som kan hjelpe deg med å lage og manipulere noen komplekse, men vanlige sammensatte organer som biler, kjeder, pyramider, stabler og myke kropper.
Alle disse komposittene og metodene for å manipulere dem er tilgjengelige i Sammensatte og Composites moduler i Matter.js. I denne opplæringen begynner du ved å lære om forskjellige kompositter som pyramider og biler etc. som kan opprettes ved hjelp av Composites modul. Etter det vil vi gå over noen viktige metoder og egenskaper som er tilgjengelige i Sammensatte modul.
En bunke og en pyramide er begge veldig lik hverandre. En stabel kan opprettes ved å bruke stabel (xx, yy, kolonner, rader, columnGap, rowGap, tilbakeringings) funksjon. På samme måte kan du opprette en pyramide ved hjelp av pyramide (xx, yy, kolonner, rader, columnGap, rowGap, tilbakeringings) funksjon. Som du ser, er alle parametrene de samme i begge tilfeller. Faktisk er pyramiddannelsen avledet fra stablingsformasjonen.
Navnene på alle parametrene er selvforklarende. De xx og yy parametere som brukes i denne funksjonen, brukes til å spesifisere utgangspunktet for kompositten. De kolonner og rader parametere bestemmer antall kolonner og rader i kompositten. Gapet mellom forskjellige rader og kolonner kan styres ved hjelp av columnGap og rowGap parametere.
Under påvirkning av tyngdekraften, den rowGap Vanligvis forsvinner vanligvis i de fleste tilfeller uten å endre kompositten. Imidlertid kan den resulterende momentum i enkelte legemer noen ganger flytte kroppene under dem. Dette kan forandre sammensetningens form.
Tilbakeringingsfunksjonen brukes til å skape legemer som kan ordnes i enten et rutenett eller et pyramidearrangement basert på funksjonen som brukes. Dette betyr at du kan bruke den til å lage en stabel eller pyramide av rektangulære bokser eller trapeser. Du bør huske på at bruk av en sirkel vil gjøre arrangementene ustabile. Her er koden for å lage en stabel med rektangler:
var stack = Composites.stack (550, 100, 5, 3, 0, 0, funksjon (x, y) return Bodies.rectangle (x, y, 40, 20, render: fillStyle: 'orange', strokeStyle : 'svart' ); );
Du kan gjøre tilbakeringingsfunksjonen så kompleks som du ønsker. I dette tilfellet har jeg brukt gjengivelsesalternativene som vi lærte om i kroppsmodulets opplæring for å lage bare oransje rektangler med svarte konturer.
Her er noen veldig lignende kode for å lage pyramideformer i Matter.js:
var pyramide = Composites.pyramid (0, 220, 11, 6, 0, 0, funksjon (x, y) return Bodies.rectangle (x, y, 30, 30, render: fillStyle: 'cornflowerblue', strokeStyle : 'svart' ); );
Når du begynner å lage mange pyramider med forskjellige parametere, vil du legge merke til at antall rader som er opprettet, er noen ganger mindre enn antall rader du angir. Dette skyldes at biblioteket bruker følgende formel til å beregne antall rader:
Math.min (rader, Math.ceil (kolonner / 2))
Du kan nøye plassere en stabel eller en annen pyramide over en pyramide for å skape interessante mønstre. For eksempel kan du plassere en mindre pyramide over den røde for å lage en komplett pyramide med to farger.
En bil i Matter.js er en struktur bestående av to hjul og en kropp. Hjulene er opprettet med en friksjon på 0,8 og tetthet lik 0,01. Du kan lage en bil ved hjelp av funksjonen bil (xx, yy, bredde, høyde, helt Hjul). De xx og yy parametere brukes til å spesifisere posisjonen til bilen.
De bredde og høyde bestemme dimensjonene til bilens hoveddel. De hjulstørrelse parameter brukes til å spesifisere hjulets radius. Det er ikke behov for tilbakeringingsfunksjonen, da den type organer som trengs for å lage en bil, er forutbestemt.
Accentsconagua
varbil = Composites.car (190, 100, 100, 45, 30); $ ('. force'). På ('klikk', funksjon () Body.applyForce (car.bodies [0], x: car.bodies [0] .position.x, y: car.bodies [0 ] .position.y, x: 0.5, y: 0););Du kan bruke kjede (kompositt, xOffsetA, yOffsetA, xOffsetB, yOffsetB, alternativer) Funger i Matter.js for å kjede alle kroppene i en gitt sammensatt sammen med begrensninger. Forskjellige parametere i funksjonen brukes til å bestemme den relative plasseringen av begrensningene som forbinder forskjellige bokser.
Du vil også trenge ytterligere begrensninger for å henge kjeden fra et punkt i verden. Her er koden for å lage en kjede og henge den til taket av vår verden.
var bokser = Composites.stack (500, 80, 3, 1, 10, 0, funksjon (x, y) return Bodies.rectangle (x, y, 50, 40);); varkjede = Composites.chain (bokser, 0,5, 0, -0,5, 0, stivhet: 1); Composite.add (bokser, Constraint.create (bodyA: boxes.bodies [0], punktB: x: 500, y: 15, stivhet: 0,8));
Boksene i vår kjede er opprettet ved hjelp av stable() funksjon som du lærte om tidligere. Begrensningene som skapes av kjede() funksjon har en stivhet på 1.
Dette forhindrer at tauets lengde mellom forskjellige bokser endrer seg i det hele tatt. Den ekstra begrensningen som vi har opprettet her holder våre bokser hengende fra taket.
Her er en demo med en bil og kjeden opprettet fra koden ovenfor. Du kan flytte bilen fremover og bakover med oransje knappene. Hvert klikk gjelder en kraft i midten av førstehjulet, og beveger hele bilen.
En myk kropp ligner en stabel, med to store forskjeller. De enkelte elementene i den myke kroppen holdes sammen av begrensninger, og en myk kropp kan bare ha sirkler som dens bestanddeler. Du kan vurdere en myk kropp som et kryss mellom et maske og en stabel. Å lage en myk kropp er like enkelt som å ringe softBody (xx, yy, kolonner, rader, colGap, rowGap, crossBrace, pRadius, pOptions, cOptions) med passende parameterverdier.
Du er allerede kjent med de første seks parametrene til funksjonen. De crossBrace parameter er en boolsk verdi som bestemmer om korsbraketter skal gjengis eller ikke. De pRadius parameteren bestemmer radius av sirkler, og pOptions parameter kan brukes til å kontrollere andre egenskaper av partiklene, som masse og tröghet.
De cOptions parameteren angir ulike alternativer for de begrensningene som binder partiklene sammen. Følgende kode vil skape en myk kropp for vår Matter.js verden.
var particleOptions = friksjon: 0.05, friksjonStatic: 0,1, gjengi: synlig: true; var constraintOptions = render: synlig: false; var softBody = Composites.softBody (450, 200, 10, 5, 0, 0, true, 15, particleOptions, constraintOptions);
Å lage en Newtons vugge er også veldig grei å bruke den innebygde newtonsCradle (xx, yy, antall, størrelse, lengde) funksjon. De Nummer parameteren bestemmer antall baller i vuggen. De størrelse parameteren bestemmer deres radius, og lengde parameteren bestemmer lengden på tauet som ballene er festet til. Biblioteket setter restitusjon og friksjonsverdiene til null slik at de kan fortsette bevegelsen i lang tid.
Følgende kode skaper vuggen og beveger den første ballen til en høyere posisjon slik at den har litt fart når den faller ned og slår andre baller. Stillingen spesifisert av oversette() funksjonen er i forhold til kroppens nåværende stilling. Alle disse funksjonene og egenskapene til Kropp modul har blitt diskutert mer detaljert i den tidligere opplæringen av serien.
var cradleA = Composites.newtonsCradle (200, 50, 5, 20, 250); Body.translate (cradleA.bodies [0], x: -100, y: -100);
Nå som du har lært å lage forskjellige typer sammensatte organer, er det på tide å lære om forskjellige metoder og egenskaper som er tilgjengelige i Composite-modulen for å manipulere disse komposittene. Du kan bruke rotere (kompositt, rotasjon, punkt, [rekursiv = true]), skala (kompositt, scaleX, Scaley, punkt, [rekursiv = true]) og sette (kompositt, oversettelse, [rekursiv = true]) å rotere, skala og oversette noen kompositt. Disse funksjonene er svært lik kroppsmodulets kolleger.
Du kan også legge til eller fjerne en eller flere kropp (er), begrensninger og kompositt (er) fra en gitt sammensatt ved å bruke legg (kompositt, objekt) og fjerne (kompositt, objekt, [dyp = false]) funksjoner henholdsvis. Hvis du vil flytte noen kropper fra en sammensatt til en annen, kan du gjøre det ved hjelp av Flytt (compositeA, objekter, compositeB) funksjon. Denne funksjonen flytter de gitte objektene fra kompositt A til kompositt B.
Hvis du noen gang vil få tilgang til alle kroppene, komposittene og begrensningene som er direkte barn av det gitte komposittet, kan du bruke composite.bodies, composite.composites og composite.constraints egenskaper for å få tilgang til alle dem i form av en matrise.
Vi har allerede sett hvordan du bruker organer eiendom å oversette en ball fra Newtons vugge til venstre og bruke en kraft på rattet på bilens kompositt. Når du har en referanse til individuelle legemer fra kompositten, kan du bruke alle metodene og egenskapene til kroppsmodulen til å manipulere dem.
I denne opplæringen lærte du hvordan du lager noen komplekse kompositter ved hjelp av Composite and Composites-modulene i Matter.js. Du lærte også om forskjellige metoder og egenskaper som du kan bruke til å manipulere disse komposittene.
Denne serien var rettet mot å få folk startet med Matter.js biblioteket på en nybegynnerlig måte. Med dette i betraktning har vi dekket viktige funksjoner og egenskaper til de vanligste modulene i biblioteket.
Matter.js har også mange andre moduler, som vi kort diskuterte i den første opplæringen av serien. Hvis du vil bruke dette biblioteket fullt ut, bør du lese dokumentasjonen for alle disse modulene på den offisielle nettsiden.
Hvis du har brukt Matter.js i noen av prosjektene dine, vennligst fortell oss om din erfaring i kommentarene.
