Komma igång med Matter.js Kroppsmodulen

I den tidigare handledningen i serien lärde du dig om World and Engine-modulerna i Matter.js. De metoder som finns i dessa två moduler är avsedda att styra beteendet hos flera kroppar eller hela världen på en gång. Men vid något tillfälle blir det nödvändigt att ha kontroll över egenskaperna hos enskilda kroppar i din värld. 

Till exempel kanske du vill använda lite kraft på ett visst objekt eller ändra dess friktionskoefficient. I sådana fall kan kroppsmodulen i Matter.js vara till stor hjälp. Den här modulen innehåller många metoder och egenskaper för att låta dig ange värden för alla typer av fysiska attribut, från massa till återbetalningskoefficient. I denna handledning läser du om alla dessa metoder och egenskaper och hur du använder dem ordentligt.

Skalning, rotering och översättning av en kropp

Du kan rotera en styv kropp i Matter.js-världen genom att använda rotera (kropp, rotation) metod. Rotationen är i förhållande till kroppens aktuella vinkel och det ger inte någon vinkelhastighet till den. Rotationsvinkeln anges i radianer.

Du kan också skala en kropp med hjälp av skala (kropp, scaleX, scaleY, [punkt]) metod. Parametrarna scaleX och scaleY Ange mängden skalning i respektive horisontell och vertikal riktning. Tänk på att en sådan skalning också uppdaterar kroppens fysiska egenskaper som dess massa, areal och tröghet. Den fjärde parametern anger den punkt runt vilken skalningen sker. När det inte anges, antas standardvärdet för skaleringspunkten vara mitt i kroppen.

Det är möjligt att flytta en kropp med en given vektor i förhållande till sin nuvarande position med hjälp av late (kropp, översättning) metod. Översättningsparametern anger objektets nya position i förhållande till dess aktuella position. Här är delen av kod från den demo som skalar, roterar och flyttar rutan runt.

var Body = Matter.Body; var box = Bodies.rectangle (460, 120, 40, 40); $ ('.skala'). på ('klick', funktion () Body.scale (box, 1,5, 1,2);); $ ('. rotera'). på ('klick', funktion () Body.rotate (rutan, Math.PI / 6);); $ ('translate'). på ('klick', funktion () Body.translate (box, x: -10, y: 20););

Ställa in hastigheter och tillämpa styrkor

Du kan också ge linjär hastighet till ett objekt med hjälp av setVelocity (kropp, hastighet) metod. Att tillämpa en hastighet på detta sätt ändrar inte vinkeln, applicerad kraft eller position hos det aktuella objektet. Positionen för objektet eller dess vinkel kommer förmodligen att förändras, men biblioteket ställer inte specifikt dem på något värde. Deras värden bestäms av andra krafter som verkar på objektet, som friktion. 

Precis som den linjära hastigheten kan du också ändra vinkelhastigheten hos ett objekt med hjälp av setAngularVelocity (kropp, hastighet) metod. Även i detta fall förblir position, vinkel och kraft som appliceras på objektet oförändrat.

En sak som du bör tänka på är att hastigheten är en vektor i setVelocity () och ett nummer i setAngularVelocity ().

$ ('.linjär'). på ('klick', funktion () Body.setVelocity (lådan, x: 10, y: -10);); $ ('.vinkel'). på ('klick', funktion () Body.setAngularVelocity (lådan, Math.PI / 6););

Förutom att ge hastigheter till föremål kan du också applicera en kraftvektor på dem. De applyForce (kropp, läge, kraft) Metod kan användas för att tillämpa a tvinga vektor på en kropp från en given placera. Denna kraft kan eller inte resultera i att vridmomentet appliceras på en given kropp. 

Följande kod gäller en kraft rätt i mitten av kroppen. Kraftvektorn är x: 0, y: -0,05. Detta betyder att den applicerade kraften kommer att vara rent vertikal och i en uppåtriktad riktning. Du bör komma ihåg att vertikala krafter i en uppåtriktad riktning har ett negativt tecken i Matter.js. En annan sak som är värt att notera är hur liten det antal som anger den vertikala kraften är. Tyngdkraften själv har ett värde av bara 1 i Matter.js.

Bollens rörelse efter att krafterna applicerats verkar vara naturliga så länge den bollen inte kolliderar med någon av väggarna eller golvet. Normalt, när saker kolliderar med något, förväntar vi oss att studsa tillbaka. Den energi med vilken ett föremål springer tillbaka bestäms av återbetalningskoefficienten. 

I Matter.js är dess värde noll som standard. Det innebär att varje objekt som har återbetalning sätts till noll och kolliderar med något annat inte kommer att studsa alls. Ett värde av 1 betyder att objektet kommer att studsa tillbaka med kinetisk energi lika med vad det hade före kollisionen. Ett värde som 0,5 betyder att objektet kommer att studsa endast med 50% av sin tidigare kinetiska energi. Värdet på återbetalning för ett objekt kan styras med hjälp av återbetalning nyckel-.

Vid vissa simuleringar kan det bli nödvändigt att du ändrar friktionen mellan olika kroppar. Detta kan uppnås med hjälp av friktion, frictionAir och frictionStatic nycklar.

  • De friktion nyckeln specificerar värdet av kinetisk friktion för en kropp. Det kan ha ett värde mellan 0 och 1. Ett värde av 0 innebär att en kropp kan fortsätta att flytta på obestämd tid när den är igång. Det enda sättet att stoppa det kommer att vara att tillämpa någon annan extern kraft. Det slutliga värdet av friktion mellan två objekt bestäms med användning av formeln Math.min (bodyA.friction, bodyB.friction)
  • De frictionStatic nyckeln specificerar värdet av friktion när en kropp ligger i vila. Standardvärdet för statisk friktion är 0,5. Ett högre värde innebär att en större mängd kraft kommer att krävas för att få kroppen att röra sig.
  • De frictionAir nyckeln används för att ange värdet av friktion mellan en kropp och omgivande luft. Ett högre värde innebär att kroppen kommer att sakta ner mycket snabbt när den rör sig genom luften. Effekten av luftfriktion är icke-linjär.
$ ('red-friktion') på ('klick', funktion () circleA.friction = 0.05; circleA.frictionAir = 0.0005; circleA.restitution = 0,9;); $ ('res-friktion'). på ('klick', funktion () circleA.friction = 0,1; circleA.frictionAir = 0.001; circleA.restitution = 0;);

Kontrollera rendering av organ

Fram till den här punkten har vi inte angett färg, skissbredd eller slagstil som ska användas när en kropp görs. Alla dessa egenskaper är inbädda inuti göra nyckel. De Fillstyle egendom accepterar en sträng för att ange fyllnadsstil som ger kroppen. De linjebredd egendom accepterar ett tal som definierar den linjebredd som ska användas när en kropps kontur skapas. 

Ett värde på noll betyder att ingen linje kommer att ges alls. De strokeStyle Egenskapen kan användas för att ange strokeformat som ska användas när kroppsramen görs. Du kan förhindra att en kropp görs alls genom att ställa in synlig nyckel till falsk. Opaciteten hos kroppen som du vill göra kan styras med hjälp av opacitet nyckel-.

Du kan också använda en bild istället för enkla färger och konturer för att göra en kropp. Parametrarna för att göra en kropp med sprites specificeras med en annan uppsättning egenskaper. De textur egendom definierar sökvägen för bilden som ska användas som en spritstruktur. 

De XOffset och 'Yoffset' Egenskaper kan användas för att definiera förskjutningen i respektive axlar för sprite. På samma sätt kan du använda xScale och yScale egenskaper för att definiera skalan i x-axeln och y-axeln för sprite. Här är en kod som ersätter den ljusblå bakgrunden av vår boll med en fotbollsprite från Open Game Art-webbplatsen.

var boll = Bodies.circle (90, 280, 20, render: sprite: textur: "path / to / soccer_ball.png", xScale: 0.4, yScale: 0.4);

Ändra fysiska egenskaper

Du har redan sett hur du anger friktionen eller återbetalningskoefficienten för ett objekt i Matter.js. Det finns många andra egenskaper vars värden kan specificeras på samma sätt. Å andra sidan finns det egenskaper som är skrivskyddade och kan inte ändras av dig.

Du kan ställa in en kropps position i världen genom att använda placera nyckel som accepterar en vektor som dess värde. Du kan också ange massan av en kropp med hjälp av massa egendom, men då måste du också ange ett värde för inverseMass egendom som beräknas med 1 / massa. Ett bättre sätt att kontrollera kroppens massa är med hjälp av densitet fast egendom. 

När du ändrar kroppens densitet kommer din massa att beräknas automatiskt baserat på dess område. På så sätt kan du också skilja mellan olika objekt baserat på densitet. Till exempel ska en kropp som använder en sten som sin sprite ha högre densitet än en kropp av samma storlek som använder en fotboll som sin sprite.

Vissa egenskaper som fart, hastighet och vinkelhastighet är skrivskyddade, men deras värden kan ställas in med lämpliga metoder som setAngularVelocity () och setVelocity (). Du kan läsa mer om kroppsmodulens olika egenskaper i dokumentationen.

Slutsats

I den här handledningen har du lärt dig alla viktiga metoder och egenskaper i kroppsmodulen i Matter.js-biblioteket. Att veta om dessa olika egenskaper och vad de gör kan hjälpa dig att skapa mer realistiska simuleringar av fysisk fysik. I nästa och sista handledning i serien kommer du att lära dig om kompositmodulen i Matter.js.

Om du har några frågor relaterade till denna handledning eller några tips för att använda biblioteket, dela dem med oss.