Share
Matter.js är en 2D rigid kroppsfysikmotor skriven i JavaScript. Detta bibliotek kan hjälpa dig att enkelt simulera 2D-fysik i webbläsaren. Det erbjuder många funktioner som förmågan att skapa styva kroppar och tilldela fysiska egenskaper som massa, yta eller täthet för dem. Du kan också simulera olika slags kollisioner och krafter som gravitation och friktion.
Matter.js stöder alla större webbläsare, inklusive IE8 +. Dessutom är den lämplig för användning på mobila enheter eftersom det kan upptäcka beröring och har respons. Alla dessa funktioner gör det värt att investera din tid för att lära dig hur du använder motorn, eftersom du då kan skapa fysikbaserade 2D-spel eller simuleringar enkelt. I denna handledning kommer jag att täcka grunderna i det här biblioteket, inklusive installation och användning, och jag ger ett fungerande exempel.
Du kan installera Matter.js genom att använda paketansvariga som Bower eller NPM med hjälp av följande kommandon:
bower installera materia-js npm installera materia-js
Du kan också få en länk till biblioteket från en CDN och inkludera den direkt i dina projekt så här:
Det bästa sättet att lära dig om Matter.js är att se en viss kod och förstå hur det fungerar. I det här avsnittet kommer vi att skapa några kroppar och gå igenom den obligatoriska kodlinjen för rad.
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, alternativ: bredd: 800, höjd: 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 jord = Bodies.rectangle (400, 380, 810, 60, isStatic: true); World.add (engine.world, [boxA, ballA, ballB, ground]); Engine.run (motorn); Render.run (render);
Vi börjar med att skapa alias för alla Matter.js-moduler som vi kanske behöver i vårt projekt. De Matter.Engine modulen innehåller metoder för att skapa och manipulera motorer. Motorer krävs i ett projekt för att uppdatera världens simulering. De Matter.Render modulen är en grundläggande HTML5-kanfasbaserad renderer. Denna modul krävs för att visualisera olika motorer.
De Matter.World modulen används för att skapa och manipulera den värld där motorn körs. Det liknar Matter.Composite modulen, men det låter dig tweak några ytterligare egenskaper som allvar och gräns. Den sista modulen i vår kod, kallad Matter.Bodies, låter dig skapa styva kroppsobjekt. En annan liknande modul kallas Matter.Body låter dig manipulera enskilda kroppar.
Nästa rad använder skapa ([inställningar]) metod för Matter.Engine modul för att skapa en ny motor. De inställningar parametern i ovanstående metod är faktiskt ett objekt med nyckelvärdespar för att åsidosätta standardvärdena för några egenskaper relaterade till motorn.
Till exempel kan du styra den globala skaleringsfaktorn för tiden för alla kroppar i världen. Om du anger ett värde mindre än 1 kommer världen att interagera i slowmotion. På samma sätt kommer ett värde större än 1 att göra världen snabb. Du lär dig mer om Matter.Engine modul i nästa handledning i serien.
Därefter använder vi skapa ([inställningar]) metod för Matter.Render modul för att skapa en ny renderer. Precis som motormodulen är inställningsparametern i ovanstående metod ett objekt som används för att ange olika alternativ för parametern. Du kan använda element nyckel för att ange det element där biblioteket ska infoga kanfasen. På samma sätt kan du också använda duk nyckel för att ange det dukelement där Matter.js-världen ska göras.
Där är en motor nyckel som du kan använda för att ange motorn som ska användas för att göra världen. Det finns också en alternativ nyckel som faktiskt accepterar ett objekt som sitt värde. Du kan använda den här tangenten för att ställa in värden för olika parametrar som bredd eller höjd av duken. Du kan också slå på trådramarna på eller av genom att ange värdet på trådmodell nyckel till Sann eller falsk respektive.
De följande linjerna skapar olika kroppar som kommer att interagera i vår värld. Kroppen skapas med hjälp av Matter.Bodies modul i Matter.js. I det här exemplet har vi just skapat två cirklar och en rektangel med hjälp av cirkel() och rektangel() metod. Andra metoder är också tillgängliga för att skapa olika polygoner.
När vi har skapat kropparna måste vi lägga till dem i en värld av vårt val med hjälp av Lägg till() metod från Matter.World modul. Efter att ha lagt till nödvändiga kroppar i vår värld behöver vi bara köra motorn och renderaren med hjälp av springa() metod från respektive moduler. Det är i princip all kod du behöver skapa och göra en värld i Matter.js.
Koden i början av det här avsnittet skapar följande resultat.
Det finns mer än 20 olika moduler i Matter.js. Alla dessa moduler ger olika metoder och egenskaper som är användbara för att skapa olika typer av simuleringar och låta dig interagera med dem. Några av dessa moduler hanterar kollisioner, medan andra hanterar rendering och simulering.
I exemplet i föregående avsnitt användes fyra olika moduler för hantering av rendering, simulering och skapande av kroppar. I det här avsnittet kommer du att lära dig om rollerna hos vissa vanliga moduler som finns tillgängliga i Matter.js.
Accentsconagua
Motor modulen ger olika metoder och egenskaper som låter dig styra beteendet hos olika motorer.Värld är faktiskt en Sammansatt kropp med ytterligare egenskaper som tyngdkraften och gränserna.Bodies modulen innehåller olika metoder för att hjälpa dig att skapa styva kroppar med vanliga former som en cirkel, rektangel eller trapezium.Bodies modul. Med den här modulen kan du skala, rotera eller översätta enskilda kroppar. Det har också funktioner som låter dig specificera hastigheten, densiteten eller trögheten hos olika kroppar. På grund av så många funktioner diskuterar den tredje handledningen i denna serie endast de metoder och egenskaper som finns i kroppsmodulen.Bodies modulen innehåller denna modul olika metoder som du kan använda för att skapa sammansatta kroppar med vanliga konfigurationer. Du kan till exempel skapa en stapel eller pyramid med rektangulära lådor med bara en enda metod med hjälp av Composites modul.Sammansatt modulen har metoder och egenskaper som gör att du kan skapa och manipulera kompositkroppar. Du kan läsa mer om Sammansatt och Composites moduler i serieens fjärde handledning.Denna handledning var tänkt att introducera dig till Matter.js-biblioteket. Med detta i åtanke har jag gett en snabb översikt över funktionerna och installationen av biblioteket. Det grundläggande exemplet med två cirklar och en ruta visar hur enkelt det är att skapa enkla simuleringar med hjälp av biblioteket.
Eftersom Matter.js har många moduler som vart och ett lägger till sina egna unika metoder för motorn, har jag skrivit en kort sammanfattning av några vanliga moduler. Resten av serien kommer att fokusera på att lära dig mer om dessa gemensamma moduler.
