Komme i gang med Matter.js Motoren og verdensmodulene

I introduksjonsveiledningen til denne serien ble du kort introduksjon til forskjellige moduler i Matter.js. Biblioteket inneholder mange moduler, så det var upraktisk å skrive i detalj om hver av dem i en enkelt opplæring. Etter å ha lest den første delen av serien, bør du nå ha en generell ide om biblioteket og dets funksjoner.

I denne opplæringen vil vi bare fokusere på verdensmodulen og motormodulen i Matter.js. Verdensmodulen gir oss de nødvendige metodene og egenskapene for å skape og manipulere verdenssammensetningen. Du kan bruke den til å legge til eller fjerne forskjellige kropper fra verden. Motormodulen inneholder metoder for å skape og manipulere motorer som er ansvarlige for å skape simulering av din verden.

Verdensmodulen

I denne delen lærer du om forskjellige metoder, egenskaper og hendelser i World-modulen. Verden er faktisk en Sammensatte med flere egenskaper som tyngde og grensene lagt til det. Her er en liste over viktige metoder som er tilgjengelige i denne modulen:

  • legg til (kompositt, objekt): Denne metoden er arvet fra Composite-modulen, og lar deg legge til en eller flere kropp (er), kompositt (er) eller begrensninger til den gitte kompositten eller verdenen. 
  • addBody (verden, kropp): Denne metoden lar deg legge til individuelle kroppselementer i den gitte verden. Det er også addComposite () og addConstraint () metoder som tillater deg å legge til en kompositt eller begrensning for verden.

Koden nedenfor bruker begge disse metodene for å legge til forskjellige kropper til verden. De Legg til() Metoden legger til tre statiske rektangler som fungerer som vegger. De addBody () Metode legger til en sirkel, firkant eller rektangel basert på knappen klikket av brukeren.

var topWall = Bodies.rectangle (400, 0, 810, 30, isStatic: true); var leftWall = Bodies.rectangle (0, 200, 30, 420, isStatic: true); var ball = Bodies.circle (460, 10, 40, 10); var bottomWall = Bodies.rectangle (400, 400, 810, 30, isStatic: true); World.add (engine.world, [topWall, leftWall, ball, bottomWall]); var addCircle = funksjon () return Bodies.circle (Math.random () * 400 + 30, 30, 30); ; $ ('add-circle'). på ('klikk', funksjon () World.add (engine.world, addCircle ()););

Du kan se at isStatic nøkkelen er satt til ekte for de tre veggene i vår verden. Setter denne nøkkelen til ekte for ethvert objekt gjør objektet helt statisk. Objektet vil aldri endre posisjon eller vinkel nå. Det finnes mange andre egenskaper som kan spesifiseres for å kontrollere oppførselen til forskjellige objekter. Du vil lære om dem alle i kroppsmodulets opplæring i denne serien.

  • fjern (kompositt, objekt, [deep = false]): Dette er en generisk metode for å fjerne en eller flere kropp (er), kompositt (er) eller begrensninger fra den angitte kompositten eller verdenen. For eksempel kan du bruke følgende linje for å fjerne de øverste og venstre veggene fra verden.
World.remove (engine.world, [topWall, leftWall]);
  • klare (verden, keepStatic): Denne metoden er et alias for det Sammensatte motstykke. Du kan bruke den til å fjerne alle elementene fra verden samtidig. Den andre parameteren er en boolsk som kan brukes til å forhindre statiske elementer å bli ryddet. Dens verdi er falsk som standard. Dette betyr at du ringer World.clear (verden) vil fjerne alle elementene fra den aktuelle verden.
  • rotere (kompositt, rotasjon, punkt, [rekursiv = sant]): Denne metoden kan brukes til å rotere alle barn i en gitt verden eller kompositt med en bestemt vinkel rundt det angitte punktet. Vinkelen gitt her er i radianer. De punkt parameteren bestemmer dreiepunktet.
  • skala (kompositt, skalaX, skalaY, punkt, [rekursiv = sant]): Du kan bruke denne metoden til å skala alle barn av kompositt eller verden med de oppgitte verdiene. Denne metoden skalerer alt fra bredde, høyde og område til masse og treghet.
  • sette (kompositt, oversettelse, [rekursiv = true]): Oversettermetoden er nyttig når du vil oversette eller flytte alle barn i en verden eller sammensatt av en gitt vektor i forhold til deres nåværende stillinger. 

En ting du bør huske på er det heller ikke oversette() eller rotere() gir noen form for hastighet til kroppene i verden. Enhver bevegelse som oppstår er bare et resultat av endringer i form eller stilling av forskjellige organer. Her er noen kalender å skalere, rotere og oversette en verden basert på knappeklikk:

$ ('. skala') på ('klikk', funksjon () Matter.Composite.scale (engine.world, 0,5, 0,7, x: 400, y: 200);); $ ('. rotere'). ("klikk", funksjon () Matter.Composite.rotate (engine.world, Math.PI / 4, x: 400, y: 200);); $ ('. translate'). på ('klikk', funksjon () Matter.Composite.translate (engine.world, x: 10, y: 10););

Du bør være oppmerksom på at koden ovenfor gjelder en annen skala på x- og y-aksen. Dette gjør sirkelen i vår Matter.js verden til en oval. Den ovale topples deretter for å gå til en mer stabil tilstand med lavere potensiell energi.

Prøv å trykke på Scale knappen i ovennevnte demo. Deretter trykker du på Rotere knappen for å se hvor nært Matter.js simulerer virkningen av en oval.

Foruten alle disse metodene, Verden Modulen har også mange nyttige egenskaper. For eksempel kan du få et utvalg av alle kroppene som er direkte barn i verdenskomposittene world.bodies. På samme måte kan du få et utvalg av alle komposittene og begrensningene ved å bruke world.composites og world.constraints

Du kan også angi grensene til verdenen der Matter.js skal oppdage kollisjoner ved hjelp av world.bounds. En interessant ting som du kan forandre med verdensegenskapene er tyngdekraften. Tyngdekraften langs x- og y-aksen er satt til 0 og 1 som standard. Du kan endre disse verdiene ved hjelp av world.gravity.x og world.gravity.y henholdsvis.

Du bør besøke Matter.World dokumentasjonssiden for å lese mer om denne modulen.

Motormodulen

Motormodulen er nødvendig for riktig oppdatering av simuleringen av verden. Her er en liste over noen viktige metoder for motormodulen.

  • lag ([alternativer]): Denne metoden er nyttig når du vil opprette en ny motor. De opsjoner parameter i denne metoden er faktisk et objekt med nøkkelverdier par. Du kan bruke opsjoner for å overstyre standardverdiene for forskjellige egenskaper til motoren. For eksempel kan du bruke tidsskala egenskap å senke eller øke hastigheten på simuleringen. 
  • oppdatering (motor, [delta = 16,666], [korreksjon = 1]): Denne metoden vil flytte simuleringen fremover i tid av delta ms. Verdien av korreksjon parameteren angir at tidskorreksjonsfaktoren skal brukes etter oppdateringen. Denne korreksjonen er vanligvis bare nødvendig når delta skifter mellom hver oppdatering.
  • flette (engineA, engineB): Denne metoden vil slå sammen to motorer som er angitt av de angitte parametrene. Ved sammenslåing brukes konfigurasjonen fra engineA og verden er hentet fra engineB.

Motormodulen har også mange andre egenskaper som hjelper deg med å kontrollere kvaliteten på simuleringen. Du kan angi en verdi for constraintIterations, positionIterations eller velocityIterations å angi antall begrensninger, posisjon og hastighets iterasjoner som skal utføres under hver oppdatering. En høyere verdi i hvert tilfelle vil gi en bedre simulering. En høyere verdi vil imidlertid også påvirke bibliotekets ytelse negativt.

Du kan angi en verdi for timing.timeScale egenskap for å kontrollere hastigheten der simuleringen skjer. Enhver verdi under 1 vil resultere i en slow-motion simulering. Å sette denne egenskapen til null vil helt fryse verden. Følgende eksempel skal gjøre det klart.

$ ('. slow-mo'). på ('klikk', funksjon () engine.timing.timeScale = 0.5;); $ ('. norm-mo'). på ('klikk', funksjon () engine.timing.timeScale = 1;); $ ('.mast-mo'). på ('klikk', funksjon () engine.timing.timeScale = 1.5;);

Du har kanskje lagt merke til at ballene hopper av bakken denne gangen. Hver stiv kropp har en tilbakebetalingskoeffisient som er satt til 0 som standard. Dette gir dem leirelignende egenskaper, og de spretter ikke tilbake på kollisjon. Jeg har endret restitusjonsverdien til 1 slik at ballene enkelt kan sprette tilbake. 

Du vil lære om alle disse egenskapene til stive legemer i neste veiledning i serien. For nå legger du til noen kretser eller baller til verden, og du kan prøve å trykke på slowmotion og hurtigtastknappene for å legge merke til forskjellen.

Du bør besøke Matter Engine-dokumentasjonen for å lese mer om denne modulen.

Konklusjon

Denne opplæringen diskuterte to svært viktige moduler i Matter.js som du trenger å vite om for å kunne kjøre noen simuleringer. Etter å ha lest denne opplæringen, bør du kunne skalere, rotere, senke eller øke hastigheten på din verden. Nå vet du også hvordan du fjerner eller legger til kropper til en verden. Dette kan være nyttig når du utvikler 2D-spill.

I neste veiledning av serien vil du lære om de ulike metodene, egenskapene og hendelsene som er tilgjengelige i Bodies modul.