Share
Acest tutorial vă va învăța noțiunile de bază ale bibliotecii QuickBox2D. După ce ați citit pașii următori, veți putea crea o mare varietate de efecte de simulare fizică. În cursul acestui tutorial vom crea câteva demonstrații mici pentru a vă familiariza cu funcționalitatea de bază QuickBox2D.
Dacă nu sunteți deja conștient, Box2D este o mare bibliotecă de fizică creată de Erin Catto.
A fost portat la AS3 de Matthew Bush și John Nesky.
QuickBox2D este o mini-bibliotecă pe care am creat-o pentru a lucra cu Box2DFlashAS3. Scopul principal al acestei biblioteci este de a simplifica în mod semnificativ instantierea corpurilor rigide și de a le oferi un mod simplu pentru a le oferi corpurilor cu grafică personalizată.
Pentru a urma acest tutorial, veți avea nevoie de Box2DFlashAS3 versiunea 2.0.2. Puteți să o descărcați la sourceforge.net.
Asigurați-vă că nu descărcați 2.1a, deoarece este încă într-o stare alfa. Box2D 2.1 nu este încă în afara și API este încă în curs de desfășurare
schimbări semnificative. Atunci când 2.1 este în afara alfa, QuickBox2D o va sprijini, dar pentru moment nu va funcționa corect cu QuickBox2D.
În continuare, trebuie să descărcați cea mai recentă versiune a QuickBox2D de la actionsnippet.com.
Acest tutorial va funcționa cu QuickBox2D 1.1 sau o versiune ulterioară.
Deschideți Flash și creați un nou fișier ActionScript 3.0.
Salvați fișierul și asigurați-vă că Box2D și QuickBox2D sunt fie în calea de clasă, fie direct lângă fișierul dvs. fla.
Vom plasa codul nostru în primul cadru al liniei de timp, deschideți astfel acțiunile (opțiunea + F9) și inserați următorul fragment de cod:
[SWF (lățime = 800, înălțime = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = noul QuickBox2D (acest lucru); sim.createStageWalls (); sim.addBox (x: 3, y: 3, lățimea: 1, înălțimea: 1); sim.addCircle (x: 4, y: 6, rază: 1); sim.start (); sim.mouseDrag ()
Continuați și testați-vă filmul (comanda + introduceți). Ar trebui să ajungeți cu o cutie și un corp rigid în cerc pe care îl puteți trage și arunca în jurul scenei.
După importarea bibliotecii, instanțiăm o instanță a QuickBox2D. Transmitem o referință la linia de timp în constructorul QuickBox2D, ceea ce face ca toate corpurile rigide să fie trase la linia de timp principală. Aveți posibilitatea să transmiteți orice filmClip în constructorul QuickBox2D. Stocăm instanța noastră QuickBox2D într-o variabilă numită sim (scurt pentru simulare).
Apoi sunăm createStageWalls () metodă. Acest lucru atrage cutiile în jurul marginilor scării astfel încât corpurile rigide să nu cadă de pe ecran.
Pe linia 9 vom crea primul nostru corp rigid folosind addBox () metoda de creare. addBox () o ia Obiect
ca argument. Aceasta funcționează ca motoarele de tweening populare, permițându-vă să introduceți un număr variabil de argumente în orice ordine, cu o sintaxă ușor de citit. În acest caz, vom crea o casetă cu un X și y poziția de 3 metri și a lăţime și înălţime de 1 metru. Aceste valori pot părea ciudate, dar le voi explica în scurt timp.
Apoi, vom crea un cerc folosind addCircle () metodă. Acest lucru funcționează cam la fel ca și addBox () metodă. Folosim paramurile Obiect pentru a spune QuickBox2D să poziționeze cercul în punctul (4,6) și să dăm cercului o rază de 1 metru.
Pentru a începe simularea pe care o numim start() și pentru a permite tragerea pentru corpurile rigide pe care le numim mouseDrag ().
Singura parte complicată cu acest fragment de cod este sistemul de coordonate. Este destul de evident ca noi X și y valorile nu sunt în pixeli. Box2D folosește metri în loc de pixeli. Acest lucru ia un pic de obișnuit, dar după o oră sau două nu veți avea probleme gândesc în metri în loc de pixeli. Este important să rețineți că 1 metru este de 30 de pixeli. Vom vedea ceva mai mult despre asta mai târziu când vom ajunge la jupuire.
Să facem acest lucru mai interesant. Înlocuiți-vă anterioare addBox () și addCircle () solicită următoarele:
sim.addBox (x: 4, y: 3, lățimea: 1, înălțime: 1); sim.addBox (x: 3, y: 6, lățimea: 4, înălțimea: 0,25, densitatea: 0, unghiul: 0,1); sim.addCircle (x: 3, y: 10, rază: 1); sim.addCircle (x: 8, y: 10, rază: 0,5);
Continuați și testați-vă filmul. Suntem deja familiarizați cu x, y, lățime, înălțime și rază, dar am adăugat încă două paramuri:
densitate și unghi. reglaj densitate la 0 determină Box2D să creeze un corp rigid static. Elementele statice nu
cad în jos sau reacționează la coliziuni cu alte corpuri rigide. Stabilirea densității la alte valori controlează modul în care se calculează masa corpului rigid. Încercați să modificați densitatea la 100 și veți observa că devine dreptunghiul foarte greu.
reglaj unghi modifică valoarea rotației de pornire pentru un corp rigid. Această valoare este în radiani în loc de grade. Prefer sa lucrez direct in radiani, dar daca nu vrei sa faci asta poti crea o functie helper pentru a converti:
// ia o valoare de grad și o convertește la radiani de funcții radiane (deg: Number): Număr return degs * Math.PI / 180;
În acest moment, vă recomand să luați cinci sau zece minute pentru a crea ceva simplu. Aveți deja cunoștințe suficiente pentru a crea simulări destul de frumoase ... Dacă creați ceva interesant, asigurați-vă că îl salvați.
Acum, când începeți să vă simțiți lucrurile, ștergeți codul temporal și înlocuiți-l cu acesta:
[SWF (lățime = 800, înălțime = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = noul QuickBox2D (acest lucru); sim.createStageWalls (); // face un cerc greu sim.addCircle (x: 3, y: 3, rază: 0.5, densitate: 5); // creați câteva platforme sim.addBox (x: 4, y: 4, lățimea: 6, înălțimea: 0,35, unghiul: 0,1, densitatea: 0); sim.addBox (x: 9, y: 6, lățimea: 6, înălțimea: 0,35, unghiul: 0,1, densitatea: 0); sim.addBox (x: 14, y: 9, lățimea: 12, înălțimea: 0,35, unghiul: -0,2, densitatea: 0); sim.addBox (x: 4, y: 12, lățimea: 0,35, înălțimea: 4, unghiul: -0,1, densitatea: 0); sim.addBox (x: 10, y: 14, lățimea: 14, înălțimea: 0,35, densitatea: 0); // face 26 de domino pentru (var i: int = 0; i<13; i++) sim.addBox(x:7 + i * 0.8, y:13, width:0.25, height:1.6); sim.addBox(x:8 + i * 0.8, y:18.7, width:0.25, height:1.6) sim.start(); sim.mouseDrag();
Continuați și testați-vă filmul.
Nu se întâmplă nimic nou în acest exemplu. Noi pur și simplu facem uz de x, y, lățime, înălțime, rază și densitate.
Aceste câteva paramuri te vor duce destul de departe. Vom încerca să acoperim mai multe paramuri legate de comportamentul sau corpurile rigide din a doua parte a acestui tutorial, dar dacă vă simțiți că ați sărit peste el, o listă completă poate fi găsită în Documentele QuickBox2D.
Paramurile pentru addBox () pot fi găsite aici.
Box2D vă permite să creați forme compuse. Aceasta înseamnă a lua cercuri, cutii și poligoane și a le grupa pentru a face forme mai complexe.
QuickBox2D simplifică foarte mult ceea ce trebuie să faceți pentru a crea forme compuse:
[SWF (lățime = 800, înălțime = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = noul QuickBox2D (acest lucru); sim.createStageWalls (); // memorați referințele la fiecare parte a grupului var cercA: QuickObject = sim.addCircle (x: 0, y: 0, rază: 0.5); var cercB: QuickObject = sim.addCircle (x: 2, y: 0, rază: 0.5); var middleBox: QuickObject = sim.addBox (x: 1, y: 0, lățime: 1,5, înălțime: 0,5); // creați grupul folosind metoda add_group () sim.addGroup (obiecte: [circleA, cercB, middleBox], x: 6, y: 6); sim.start (); sim.mouseDrag ();
Ștergeți codul dvs. de timp și înlocuiți-l cu cele de mai sus. Continuați și testați-vă filmul.
Toate metodele de creare QuickBox2D (cum ar fi addBox () și addCircle ()) returnează instanțele QuickObject. QuickObjects sunt wrappers pentru instanțele de clasă Box2D care sunt necesare pentru a crea corpuri rigide. La crearea obiectelor de grup, primul lucru pe care trebuie să-l facem este să stocăm referințe la câteva QuickObjects. Noi numim aceste QuickObjects cercA, cercB și middleBox. Observa asta X și y
coordonatele pentru acestea sunt relative la (0,0) - această cerință are scopul de a simplifica orice logică de poziționare pe care trebuie să o faceți atunci când plasați diferitele părți ale unui grup.
Acum că avem referințele noastre, putem să le transmitem ca o matrice la obiecte param al Adăugare grup() metoda de creare. Apoi, mutăm întregul grup în punctul (6, 6).
Numai cu cutii și cercuri puteți construi câteva forme de grup destul de complicate. Ștergeți codul temporal și înlocuiți-l cu acesta:
[SWF (lățime = 800, înălțime = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = noul QuickBox2D (acest lucru); sim.createStageWalls (); // creați un cerc sim.addCircle (x: 16, y: 3, raza: 1, densitatea: 0,2); // creați o grămadă de casete var boxes: Array = []; pentru (var i: int = 0; i<20; i++) var h:Number = 1 - i / 20; boxes.push(sim.addBox(x:i, y:i * h, width:1, height:h)); // group all the boxes together sim.addGroup(objects:boxes, x:3, y:3); sim.start(); sim.mouseDrag();
Continuați și testați-vă filmul.
Există câteva paramuri pe care le puteți utiliza pentru a schimba culorile și stilul de redare a QuickObjects. Acestea sunt fillColor, fillAlpha, lineColor, lineAlpha și lineThickness. Ar trebui să fie destul de explicativ. Uita-te la asta:
[SWF (lățime = 800, înălțime = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = noul QuickBox2D (acest lucru); sim.createStageWalls (); fișierul sim.addCircle (x: 3, y: 3, raza: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); fișierul sim.addCircle (x: 6, y: 3, raza: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 9, y: 3, rază: 1, umplere culoare: 0x000022, linieThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, lățimea: 2, înălțimea: 2, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Încearcă asta pe linia temporală.
În timp ce acest lucru este ușor de înțeles, puteți vedea cum rezolvarea acestor paramuri poate deveni rapid greoaie. În următorul pas vom examina o modalitate de a scăpa de un anumit cod repetitiv.
Pentru a scăpa de codul repetitiv, QuickBox2D are o metodă numită setDefault (). Această metodă forțează valorile implicite pentru toate apelurile la metode de creare. Deci, puteți simplifica exemplul anterior pentru a arăta astfel:
[SWF (lățime = 800, înălțime = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = noul QuickBox2D (acest lucru); sim.createStageWalls (); sim.setDefault (fillColor: 0xFF0000, liniaThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 3, y: 3, rază: 1); sim.addCircle (x: 6, y: 3, rază: 1); sim.addCircle (x: 9, y: 3, rază: 1, umplere culoare: 0x000022, linieThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, lățimea: 2, înălțimea: 2, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Continuați și încercați acest lucru în linia de timp.
setDefault () metoda nu se limitează la lucrul cu lucruri de genul fillColor și lineThickness. Poate fi utilizat împreună cu orice PARAM. În timp ce mă simt în cea mai mare parte de a face uz de setDefault () pentru stilul de render și anumite paramuri legate de articulații, voi ar putea faceți ceva de genul:
sim.setDefault (fillColor: 0xFF0000, linieThickness: 10, lineColor: 0xFFFF00, y: 3, rază: 1); sim.addCircle (x: 3); sim.addCircle (x: 6); fișierul sim.addCircle (x: 9, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF);
Acest lucru ar putea deveni rapid confuz, deci aveți grijă atunci când decideți să utilizați setDefault () în acest fel.
Una dintre principalele caracteristici ale QuickBox2D este jupuirea ușoară a corpurilor rigide. Deoarece jupuirea necesită, în general, utilizarea unor active de bibliotecă, va trebui să descărcați acest fișier sursă.
Există trei filme MovieClips în bibliotecă, CircleFace, OddPizza și Mail. Fiecare clip este exportat pentru utilizarea cu ActionScript. Pe cronologie veți găsi următorul cod:
[SWF (lățime = 800, înălțime = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = noul QuickBox2D (acest lucru); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, rază: 45/30, piele: CircleFace, scaleSkin: false); sim.addCircle (x: 6, y: 3, raza: 1, piele: OddPizza); sim.addCircle (x: 6, y: 6, raza: 0.5, piele: OddPizza); sim.addCircle (x: 6, y: 10, rază: 2, piele: OddPizza); sim.addBox (x: 12, y: 3, lățimea: 3, înălțimea: 50/30, piele: Mail); sim.addBox (x: 18, y: 3, lățimea: 3, înălțimea: 3, pielea: Mail); sim.start (); sim.mouseDrag ();
Continuați și testați filmul.
Pentru a crea skinuri personalizate, folosim piele PARAM. În acest exemplu, am setat toate paramurile noastre de piele pentru a lega clase din biblioteca noastră. În mod implicit, QuickBox2D va crea o instanță a acestei clase și va încerca să o scaldeze pentru a se potrivi corpului rigid. Acest lucru este util pentru forme simple, cum ar fi cercuri și cutii, dar pentru piei mai complexe, vă recomandăm să dezactivați această caracteristică utilizând scaleSkin PARAM. Facem acest lucru pe linia 8, astfel încât pielea CircleFace să fie utilizată corespunzător.
Veți observa că pentru rază am pus 45/30 în loc de 1,5. Așa cum am menționat mai devreme în acest tutorial, 1 metru este de 30 de pixeli, astfel încât pentru a converti de la pixeli la metri, împărțim la 30. Cercul din pielea CircleFace are o rază de 45 de pixeli, așa că am lăsat conversia hard codată pentru claritate decât scrierea 1.5.
Linile 10-12 creează cercuri care utilizează pielea OddPizza. scaleSkin param este adevărat în mod implicit, astfel încât fiecare piele este scalată automat
în funcție de raza param. Linile 14 și 15 creează casete care sunt jupuite cu clipul Mail.
În ultimele luni, au fost adăugate mai multe caracteristici de jupuire la cererea dezvoltatorilor care utilizează QuickBox2D. Folosesc exclusiv tehnicile descrise mai sus, dar dacă sunteți interesat să vedeți câteva tehnici de jupuire suplimentare, aruncați o privire la acest post pe acțiunile.
Articolele ActionSnippet QuickBox2D - Există o grămadă de exemple QuickBox2D pe acțiunipubet.com sub formă de postări. Posturile anterioare sunt mult mai simple decât cele mai noi. Din acest motiv, vă recomand să reveniți câteva pagini și să vă deplasați până la unele dintre posturile ulterioare. Aproape fiecare aspect al QuickBox2D este acoperit în aceste exemple.
Documente QuickBox2D - Aceasta este doar documentația pentru QuickBox2D. În unele locuri, acesta își asumă cunoștințele de bază pentru Box2D.
Box2D Manual - O resursă excelentă care acoperă toate aspectele Box2D. C++
sintaxa ar putea să vă sperie ... dar dacă înlocuiți săgețile de genul acesta -> cu sintaxa de puncte și ignorarea asteriscurilor *... veți găsi că înțelegeți o afacere bună.
Documentele Box2D - Documente pentru toate clasele C ++. Consider că acest lucru este foarte util pentru unele dintre tehnicile discutate în partea a doua a acestui tutorial.
Am acoperit o mulțime de teren și am zgâriat cu adevărat suprafața. Mai jos sunt rezumate ale tutorialelor QuickBox2D viitoare:
QuickBox2D Partea 2
În a doua parte a acestui tutorial vom explora unele dintre caracteristicile de nivel mai intermediar ale QuickBox2D. Ne vom uita la modul de a crea corpuri rigide poligonale. Vom învăța cum să finalizăm simularea folosind valori suplimentare de param, cum ar fi restituire, linearDamping și angularDamping. Vom discuta câteva metode Box2D puternice care sunt expuse de QuickBox2D și vom vorbi despre FRIM (mișcare independentă framerată).
QuickBox2D Partea 3
În a treia parte a acestui tutorial vom aborda câteva tehnici avansate. Ne vom uita la modul în care QuickBox2D se ocupă de toate tipurile de articulații Box2D. De asemenea, vom trece peste punctele de contact și tipuri speciale de coliziuni.
Sper că vă place să citiți această primă parte!
Accentsconagua