Share
Matter.js er en 2D stiv kroppsfysikkmotor skrevet i JavaScript. Dette biblioteket kan hjelpe deg med å simulere 2D-fysikk i nettleseren. Den tilbyr mange funksjoner som evnen til å lage stive legemer og tildele fysiske egenskaper som masse, areal eller tetthet til dem. Du kan også simulere ulike typer kollisjoner og krefter som tyngdekraften og friksjonen.
Matter.js støtter alle de store nettleserne, inkludert IE8 +. I tillegg er den egnet for bruk på mobile enheter, da den kan oppdage berøring og har respons. Alle disse funksjonene gjør det verdt å investere din tid til å lære å bruke motoren, da du vil da kunne lage fysisk-baserte 2D-spill eller simuleringer enkelt. I denne veiledningen vil jeg dekke grunnleggende om dette biblioteket, inkludert installasjon og bruk, og jeg vil gi et fungerende eksempel.
Du kan installere Matter.js ved hjelp av pakkeforvaltere som Bower eller NPM ved hjelp av følgende kommandoer:
bower install matter-js npm installere matter-js
Du kan også få en kobling til biblioteket fra en CDN og direkte inkludere den i dine prosjekter som dette:
Den beste måten å lære om Matter.js er å se noen faktisk kode og forstå hvordan det fungerer. I denne delen skal vi opprette noen få kropper og gå gjennom den nødvendige koden etter linje.
Var Engine = Matter.Engine, Render = Matter.Render, World = Matter.World, Bodies = Matter.Bodies; var motor = Engine.create (); var render = Render.create (element: document.body, motor: motor, alternativer: bredde: 800, høyde: 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 jordet = Bodies.rectangle (400, 380, 810, 60, isStatic: true); World.add (engine.world, [boxA, ballA, ballB, bakken]); Engine.run (motor); Render.run (render);
Vi begynner med å opprette aliaser for alle Matter.js-modulene som vi kanskje trenger i vårt prosjekt. De Matter.Engine Modulen inneholder metoder for å skape og manipulere motorer. Motorer kreves i et prosjekt for å oppdatere simuleringen av verden. De Matter.Render Modulen er en grunnleggende HTML5 lerretbasert renderer. Denne modulen er nødvendig for å visualisere forskjellige motorer.
De Matter.World Modulen brukes til å skape og manipulere verden der motoren går. Det ligner på Matter.Composite modul, men det lar deg justere noen ekstra egenskaper som tyngde og grensene. Den siste modulen i koden vår, kalt Matter.Bodies, lar deg lage stive kroppsobjekter. En annen lignende modul kalt Matter.Body lar deg manipulere individuelle legemer.
Neste linje bruker lag ([innstillinger]) metode av Matter.Engine modul for å lage en ny motor. De innstillinger parameteren i fremgangsmåten ovenfor er faktisk et objekt med nøkkelverdierpar for å overstyre standardverdiene for noen få egenskaper relatert til motoren.
For eksempel kan du kontrollere den globale skaleringsfaktoren for tid for alle kroppene i verden. Innstilling av en verdi mindre enn 1 vil resultere i at verden interagerer i slowmotion. På samme måte vil en verdi større enn 1 gjøre verden raskere. Du vil lære mer om Matter.Engine modul i neste opplæring i serien.
Etter det bruker vi lag ([innstillinger]) metode av Matter.Render modul for å lage en ny renderer. På samme måte som motormodulen er innstillingsparameteren i fremgangsmåten ovenfor et objekt som brukes til å angi forskjellige alternativer for parameteren. Du kan bruke element nøkkel for å spesifisere elementet der biblioteket skal sette inn lerretet. På samme måte kan du også bruke lerret nøkkel for å angi lerretelementet der Matter.js-verdenen skal gjengis.
Det er en motor nøkkel som du kan bruke til å spesifisere motoren som skal brukes til å gjengi verden. Det er også en opsjoner nøkkel som faktisk aksepterer et objekt som dets verdi. Du kan bruke denne tasten til å angi verdier for forskjellige parametere som bredde eller høyde av lerretet. Du kan også slå wireframes på eller av ved å sette verdien av wireframe nøkkelen til ekte eller falsk henholdsvis.
De neste linjene lager forskjellige organer som vil samhandle i vår verden. Kroppene er opprettet med hjelp av Matter.Bodies modul i Matter.js. I dette eksemplet har vi nettopp opprettet to sirkler og et rektangel ved hjelp av sirkel() og rektangel() metode. Andre metoder er også tilgjengelige for å lage forskjellige polygoner.
Når vi har opprettet kroppene, må vi legge dem til en verden av vårt valg ved hjelp av Legg til() metode fra Matter.World modul. Etter å ha lagt til de nødvendige kroppene i vår verden, trenger vi bare å kjøre motoren og rendereren ved hjelp av løpe() metode fra de respektive modulene. Det er egentlig all koden du trenger for å lage og gjengi en verden i Matter.js.
Koden i begynnelsen av denne delen oppretter følgende resultat.
Det finnes mer enn 20 forskjellige moduler i Matter.js. Alle disse modulene gir forskjellige metoder og egenskaper som er nyttige for å skape forskjellige typer simuleringer og lar deg kommunisere med dem. Noen av disse modulene håndterer kollisjoner, mens andre håndterer gjengivelse og simulering.
Eksemplet i forrige avsnitt brukte fire forskjellige moduler for å håndtere gjengivelse, simulering og opprettelse av organer. I denne delen lærer du om rollene til noen vanlige moduler som er tilgjengelige i Matter.js.
Accentsconagua
Motor Modulen gir forskjellige metoder og egenskaper som gjør at du kan kontrollere oppførselen til ulike motorer.Verden er faktisk en Sammensatte kropp med ekstra egenskaper som tyngdekraften og grensene.Bodies Modulen inneholder forskjellige metoder for å hjelpe deg med å lage stive legemer med vanlige former som en sirkel, rektangel eller trapes.Bodies modul. Denne modulen lar deg skalere, rotere eller oversette individuelle legemer. Det har også funksjoner som lar deg spesifisere hastigheten, tettheten eller trögheten til forskjellige organer. På grunn av så mange funksjoner, diskuterer den tredje opplæringen i denne serien bare metodene og egenskapene som er tilgjengelige i kroppsmodulen.Bodies modul, inneholder denne modulen forskjellige metoder som du kan bruke til å lage sammensatte organer med vanlige konfigurasjoner. For eksempel kan du lage en stabel eller pyramide av rektangulære bokser ved hjelp av bare en enkelt metode ved hjelp av Composites modul.Sammensatte Modulen har metoder og egenskaper som lar deg lage og manipulere sammensatte organer. Du kan lese mer om Sammensatte og Composites moduler i den fjerde opplæringen av serien.Denne opplæringen var ment å introdusere deg til Matter.js biblioteket. Med dette i bakhodet har jeg gitt en rask oversikt over funksjonene og installasjonen av biblioteket. Det grunnleggende eksemplet med to sirkler og en boks viser hvor enkelt det er å lage enkle simuleringer ved hjelp av biblioteket.
Siden Matter.js har mange moduler som hver legger til sine egne unike metoder for motoren, har jeg skrevet en kort oppsummering av få vanlige moduler. Resten av serien vil fokusere på å lære deg mer om disse vanlige modulene.
