Noțiuni de bază cu Matter.js Modulul corpului

În tutorialul anterior al seriei, ați aflat despre modulele World and Engine în Matter.js. Metodele disponibile în aceste două module sunt menite să controleze simultan comportamentul mai multor corpuri sau al întregii lumi. Cu toate acestea, la un moment dat va deveni necesar să aveți control asupra proprietăților corpurilor individuale din lumea voastră. 

De exemplu, poate doriți să aplicați o anumită forță asupra unui anumit obiect sau să modificați coeficientul său de frecare. În astfel de cazuri, modulul Body din Matter.js poate fi de mare ajutor. Acest modul conține multe metode și proprietăți care vă permit să specificați valori pentru toate tipurile de atribute fizice, de la masă la coeficientul de restituire. În acest tutorial, veți afla despre toate aceste metode și proprietăți și cum să le utilizați în mod corespunzător.

Scalarea, rotirea și traducerea unui corp

Puteți roti orice corp rigid în lumea Matter.js folosind roti (corp, rotație) metodă. Rotația este relativă la unghiul actual al corpului și nu va conferi o viteză unghiulară. Unghiul de rotație este specificat în radiani.

De asemenea, puteți scala un corp folosind scara (corp, scaleX, scaleY, [punctul]) metodă. Parametrii scaleX și scaleY specificați cantitatea de scalare în direcția orizontală și respectiv verticală. Rețineți că orice astfel de scalare va actualiza, de asemenea, proprietățile fizice ale corpului, cum ar fi masa, zona și inerția. Al patrulea parametru specifică punctul în jurul căruia are loc scalarea. Dacă nu este specificat, se presupune că valoarea implicită a punctului de scalare este centrul corpului.

Este posibil să mutați un corp cu un vector dat în funcție de poziția sa curentă folosind traduce (corp, traducere) metodă. Parametrul de traducere specifică noua poziție a obiectului față de poziția sa actuală. Iată porțiunea de cod din demo care scaldă, rotește și se mișcă în jurul casetei.

var corp = materie; caseta var = Corpuri. dreapta (460, 120, 40, 40); $ ('. scară') pe ('click', funcția () Body.scale (caseta 1.5, 1.2);); $ ('.rotate') pe ('click', functie () Body.rotate (caseta, Math.PI / 6);); $ ('click', functie () Body.translate (caseta, x: -10, y: 20););

Stabilirea vitezelor și a forțelor de aplicare

De asemenea, puteți distribui o viteză liniară unui obiect folosind setVelocity (corp, viteză) metodă. Aplicarea unei viteze în acest mod nu modifică unghiul, forța aplicată sau poziția obiectului în cauză. Poziția obiectului sau unghiul său se va schimba probabil, însă biblioteca nu le-a stabilit în mod specific la nici o valoare. Valorile lor sunt determinate de alte forțe care acționează asupra obiectului, precum frecare. 

La fel ca viteza liniară, puteți schimba și viteza unghiulară a unui obiect folosind setAngularVelocity (corp, viteză) metodă. Și în acest caz, poziția, unghiul și forța aplicate asupra obiectului rămân neschimbate.

Un lucru pe care ar trebui să-l țineți cont este că viteza este un vector în setVelocity () și un număr în setAngularVelocity ().

$ ('. linear') pe ('click', functie () Body.setVelocity (caseta, x: 10, y: -10); $ ('.inual') pe ('click', functie () Body.setAngularVelocity (caseta, Math.PI / 6););

În afară de a transmite viteze obiectelor, puteți aplica și pe acestea un vector de forță. applyForce (corp, poziție, forță) metoda poate fi folosită pentru a aplica a forta vector pe un corp dintr-un anumit poziţie. Această forță poate sau nu poate duce la aplicarea cuplului pe un anumit corp. 

Următorul cod aplică o forță dreaptă în centrul corpului. Vectorul de forță este x: 0, y: -0,05. Aceasta înseamnă că forța aplicată va fi pur verticală și într-o direcție ascendentă. Trebuie să rețineți că forțele verticale în direcție ascendentă au un semn negativ în Matter.js. Un alt lucru demn de remarcat este cât de mic este numărul care specifică forța verticală. Forța de gravitație are o valoare de doar 1 în Matter.js.

Mișcarea mingii după aplicarea forțelor pare naturală atât timp cât mingea nu se ciocnește cu niciunul dintre pereți sau podea. În mod normal, când lucrurile se ciocnesc cu ceva, ne așteptăm ca ei să se întoarcă. Energia cu care un obiect revine este determinată de coeficientul de restituire. 

În Matter.js, valoarea sa este setată la zero în mod implicit. Aceasta înseamnă că orice obiect care are o restituire stabilită la zero și se ciocnește cu altceva nu va mai reveni deloc. O valoare de 1 va însemna că obiectul va reveni cu energia cinetică egală cu ceea ce a avut înainte de coliziune. O valoare de 0,5 înseamnă că obiectul va reveni doar cu 50% din energia sa cinetică anterioară. Valoarea restituirii pentru un obiect poate fi controlată folosind restituire cheie.

În anumite simulări, s-ar putea să vă fie necesar să modificați frecarea între diferitele corpuri. Acest lucru se poate realiza folosind frecare, frictionAir și frictionStatic chei.

  • frecare cheia specifică valoarea fricțiunii cinetice pentru un corp. Poate avea o valoare cuprinsă între 0 și 1. O valoare de 0 înseamnă că un organism poate continua să se deplaseze pe termen nelimitat după ce a fost pus în mișcare. Singura modalitate de ao opri va fi aplicarea unei alte forțe externe. Valoarea finală a fricțiunii dintre două obiecte este determinată folosind formula Math.min (bodyA.friction, bodyB.friction)
  • frictionStatic cheia specifică valoarea fricțiunii atunci când un corp este în repaus. Valoarea implicită pentru fricțiunea statică este de 0,5. O valoare mai mare înseamnă că o cantitate mai mare de forță va fi necesară pentru a face corpul să se miște.
  • frictionAir cheia este utilizată pentru a specifica valoarea fricțiunii dintre un corp și aerul din jur. O valoare mai mare înseamnă că corpul va încetini foarte repede când se deplasează prin aer. Efectul de frecare a aerului este neliniar.
$ (("roșu-frecare") pe ("clic", funcția () circleA.friction = 0.05; circleA.frictionAir = 0.0005; circleA.restitution = 0.9;); $ ('click', function () circleA.friction = 0.1; circleA.frictionAir = 0.001; circleA.restitution = 0;);

Controlați redarea corpurilor

Până în acest moment, nu am specificat culoarea, lățimea conturului sau stilul cursei pe care să o folosim atunci când redăm un corp. Toate aceste proprietăți sunt imbricate în interiorul face cheie. stil de completare proprietatea acceptă un șir pentru a specifica stilul de umplere care redă corpul. lățimea liniei proprietatea acceptă un număr care definește lățimea liniei de utilizat la crearea conturului unui corp. 

O valoare de zero înseamnă că nici o linie nu va fi redată deloc. strokeStyle proprietatea poate fi utilizată pentru a specifica stilul de lovire care trebuie folosit atunci când se redă conturul corpului. Puteți împiedica un corp de redare la toate prin setarea vizibil cheia pentru fals. Opacitatea corpului pe care doriți să o redați poate fi controlată utilizând opacitate cheie.

De asemenea, puteți utiliza o imagine în loc de culori simple și contururi pentru a face un corp. Parametrii pentru redarea unui corp folosind sprite sunt specificați utilizând un set diferit de proprietăți. textură proprietatea definește calea imaginii care ar trebui utilizată ca textura sprite. 

xOffset și yOffset proprietățile pot fi utilizate pentru a defini deplasarea în axele respective pentru sprite. În mod similar, puteți utiliza funcția XScale și yScale proprietăți pentru a defini scalarea în axa x și axa y pentru sprite. Iată un cod care înlocuiește fundalul albastru al mingii noastre cu un sprite de fotbal de pe site-ul Open Game Art.

var ball = Bodies.circle (90, 280, 20, render: sprite: textură: "cale / spre / soccer_ball.png", xScale: 0.4, yScale: 0.4);

Schimbarea proprietăților fizice

Ați văzut deja cum să precizați frecarea sau coeficientul de restituire pentru un obiect în Matter.js. Există o mulțime de alte proprietăți ale căror valori pot fi specificate în același mod. Pe de altă parte, există proprietăți care sunt doar pentru citire și nu pot fi modificate de dvs..

Puteți stabili poziția unui corp în lume utilizând poziţie cheie, care acceptă un vector ca valoare. De asemenea, puteți specifica masa unui corp folosind masa proprietate, dar va trebui, de asemenea, să setați o valoare pentru inverseMass proprietate, care este calculat folosind 1 / masa. O modalitate mai bună de a controla masa unui corp este cu ajutorul lui densitate proprietate. 

Odată ce schimbați densitatea unui corp, masa acestuia va fi calculată automat pe baza ariei sale. În acest fel, puteți diferenția obiecte diferite pe baza densității lor. De exemplu, un corp care utilizează o piatră ca sprite trebuie să aibă densitate mai mare decât un corp de aceeași dimensiune care folosește o minge de fotbal ca sprite.

Unele proprietăți cum ar fi viteză, viteză și viteză unghiulară sunt doar pentru citire, dar valorile lor pot fi stabilite utilizând metode adecvate, cum ar fi setAngularVelocity () și setVelocity (). Puteți citi mai multe despre diferitele proprietăți ale modulului Body din documentație.

Concluzie

În acest tutorial, ați învățat despre toate metodele și proprietățile importante din modulul Body al bibliotecii Matter.js. Știind despre aceste proprietăți diferite și ce fac ei vă pot ajuta să creați simulări mai realiste ale fizicii din viața reală. În următorul tutorial final al seriei, veți afla despre modulul Composite din Matter.js.

Dacă aveți întrebări legate de acest tutorial sau câteva sfaturi pentru utilizarea bibliotecii, vă rugăm să le trimiteți la noi.

Cod