Komma igång med Matter.js Motor och världsmoduler

I den inledande handledningen av denna serie introducerades du kortfattat till olika moduler i Matter.js. Biblioteket innehåller många moduler, så det var opraktiskt att skriva i detalj om var och en i en enda handledning. Efter att ha läst den första delen av serien, borde du nu ha en allmän uppfattning om biblioteket och dess funktioner.

I den här handledningen fokuserar vi bara på världsmodulen och motormodulen i Matter.js. Världsmodulen ger oss nödvändiga metoder och egenskaper för att skapa och manipulera världskompositmaterialet. Du kan använda den för att lägga till eller ta bort olika kroppar från världen. Motormodulen innehåller metoder för att skapa och manipulera de motorer som är ansvariga för att skapa simulering av din värld.

Världsmodulen

I det här avsnittet kommer du att lära dig om olika metoder, egenskaper och händelser i världsmodulen. Värld är faktiskt en Sammansatt med ytterligare egenskaper som allvar och gräns läggas till det. Här är en lista över viktiga metoder som finns i denna modul:

  • lägg till (komposit, objekt): Den här metoden är ärvd från Composite-modulen och låter dig lägga till en eller flera organ (er), komposit (er) eller begränsningar till den givna kompositören eller världen. 
  • addBody (värld, kropp): Med den här metoden kan du lägga till enskilda kroppsdelar till den givna världen. Det finns också addComposite () och addConstraint () metoder som låter dig lägga till en komposit eller begränsning till världen.

Koden nedan använder båda dessa metoder för att lägga till olika kroppar till världen. De Lägg till() Metoden lägger till tre statiska rektanglar som fungerar som väggar. De addBody () Metoden lägger till en cirkel, kvadrat eller rektangel baserat på knappen som användaren klickar på.

var topWall = Bodies.rectangle (400, 0, 810, 30, isStatic: true); var leftWall = Bodies.rectangle (0, 200, 30, 420, isStatic: true); var boll = Bodies.circle (460, 10, 40, 10); var bottomWall = Bodies.rectangle (400, 400, 810, 30, isStatic: true); World.add (engine.world, [topWall, leftWall, boll, bottomWall]); var addCircle = function () returnera Bodies.circle (Math.random () * 400 + 30, 30, 30); ; $ ('.cirkel'). på ('klick', funktion () World.add (engine.world, addCircle ()););

Du kan se att isStatic nyckeln har ställts in Sann för de tre väggarna i vår värld. Ställer in den här nyckeln till Sann för ett objekt gör det objektet helt statiskt. Föremålet kommer aldrig att ändra sin position eller vinkel nu. Det finns många andra egenskaper som kan specificeras för att styra beteendet hos olika objekt. Du kommer att lära dig om dem alla i kroppsmodulens handledning i denna serie.

  • ta bort (komposit, objekt, [deep = false]): Detta är en generisk metod för att ta bort en eller flera kroppar, komposit (er) eller begränsningar från den givna kompositören eller världen. Till exempel kan du använda följande rad för att ta bort de översta och vänstra väggarna från världen.
World.remove (engine.world, [topWall, leftWall]);
  • klar (värld, keepStatic): Denna metod är ett alias för dess Sammansatt motsvarighet. Du kan använda den för att ta bort alla element från världen på en gång. Den andra parametern är en booleska som kan användas för att förhindra att statiska element rensas. Dess värde är falsk som standard. Det innebär att ringer World.clear (world) kommer att ta bort alla element från den särskilda världen.
  • rotera (komposit, rotation, punkt, [rekursiv = sann]): Denna metod kan användas för att rotera alla barn i en viss värld eller komposit med en viss vinkel runt den angivna punkten. Vinkeln som ges här är i radianer. De punkt parameteren bestämmer rotationspunkten.
  • skala (komposit, skalaX, skalaY, punkt, [rekursiv = sann]): Du kan använda denna metod för att skala alla barn i din komposit eller värld med de angivna värdena. Denna metod skala allt från bredd, höjd och yta till massa och tröghet.
  • late (komposit, översättning, [rekursiv = true]): Översättmetoden är användbar när du vill översätta eller flytta alla barn i en värld eller komposit med en given vektor i förhållande till deras nuvarande positioner. 

En sak du bör tänka på är det heller inte Översätt() inte heller rotera() ger någon form av hastighet till kropparna i världen. Varje rörelse som uppstår är bara resultatet av förändringar i formen eller positionen hos olika kroppar. Här är en kod som ska skala, rotera och översätta en värld baserad på knapptryckningar:

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

Du bör observera att ovanstående kod gäller en annan skala på x- och y-axeln. Detta gör cirkeln i vår Matter.js-värld till en oval. Den ovala topplar sedan för att gå till ett mer stabilt tillstånd med lägre potentiell energi.

Försök med att trycka på Skala knappen i ovanstående demo. Därefter trycker du på Rotera knappen för att se hur nära Matter.js simulerar en ovals verkliga rörelse.

Förutom alla dessa metoder, den Värld modulen har också många användbara egenskaper. Till exempel kan du få en uppsättning av alla kroppar som är direkta barn i världskomposit med world.bodies. På samma sätt kan du få en uppsättning av alla kompositer och begränsningar med world.composites och world.constraints

Du kan också ange gränserna för den värld inom vilken Matter.js ska upptäcka kollisioner med world.bounds. En intressant sak som du kan ändra med världens egenskaper är tyngdkraften. Tyngdkraften längs x- och y-axeln är som standard inställd på 0 och 1. Du kan ändra dessa värden med world.gravity.x och world.gravity.y respektive.

Du bör besöka Matter.Worlds dokumentationssida för att läsa mer om den här modulen.

Motormodulen

Motormodulen är nödvändig för korrekt uppdatering av världens simulering. Här är en lista över några viktiga metoder för motormodulen.

  • skapa ([alternativ]): Den här metoden är användbar när du vill skapa en ny motor. De alternativ parametern i denna metod är faktiskt ett objekt med nyckelvärdespar. Du kan använda alternativ att åsidosätta standardvärdena för olika egenskaper hos motorn. Till exempel kan du använda tidsskala egenskap för att sakta ner eller påskynda simuleringen. 
  • uppdatering (motor, [delta = 16,666], [korrigering = 1]): Denna metod kommer att flytta simuleringen framåt i tid av delta Fröken. Värdet av korrektion parameter anger tidskorrigeringsfaktorn att applicera efter uppdateringen. Denna korrigering är vanligtvis endast nödvändig när delta växlar mellan varje uppdatering.
  • sammanfoga (motornA, engineB): Den här metoden kommer att slå samman två motorer som anges av de angivna parametrarna. Under sammanslagningen tillämpas konfigurationen från motornA och världen är hämtad från engineB.

Motormodulen har också många andra egenskaper som hjälper dig att styra simuleringens kvalitet. Du kan ange ett värde för constraintIterations, positionIterations eller velocityIterations för att ange antalet begränsningar, positioner och hastighets-iterationer som ska utföras under varje uppdatering. Ett högre värde i varje fall kommer att ge en bättre simulering. Ett högre värde påverkar också bibliotekets prestanda negativt.

Du kan ange ett värde för timing.timeScale egenskap för att styra hur snabbt simuleringen sker. Något värde under 1 kommer att resultera i en slow-motion-simulering. Om du ställer in den här egenskapen till noll kommer den att frysa hela världen. Följande exempel ska göra det klart.

$ ('. slow-mo'). på ('klick', funktion () engine.timing.timeScale = 0.5;); $ ('. norm-mo'). på ('klick', funktion () engine.timing.timeScale = 1;); $ ('.max-mo'). på ('klick', funktion () engine.timing.timeScale = 1.5;);

Du kanske har märkt att bollarna hoppar av marken den här gången. Varje styv kropp har en återbetalningskoefficient som är inställd på 0 som standard. Detta ger dem leraliknande egenskaper, och de studsar inte tillbaka på kollision. Jag har ändrat återbetalningsvärdet till 1 så att bollarna enkelt kan studsa tillbaka. 

Du kommer att lära dig om alla dessa egenskaper hos styva kroppar i nästa handledning i serien. För tillfället lägg till några cirklar eller bollar till världen och försök med att trycka på slowmotion och snabbkörningsknapparna för att märka skillnaden.

Du bör besöka Matter Engine-dokumentationen för att läsa mer om den här modulen.

Slutsats

Denna handledning diskuterade två väldigt viktiga moduler i Matter.js som du behöver veta om för att kunna köra några simuleringar. Efter att ha läst den här handledningen borde du kunna skala, rotera, sakta ner eller påskynda din värld. Nu vet du också hur man tar bort eller lägger till kroppar i en värld. Detta kan vara till hjälp när du utvecklar 2D-spel.

I nästa handledning i serien kommer du att lära dig om de olika metoderna, egenskaperna och händelserna som finns i Bodies modul.