Share
Denne opplæringen vil lære deg grunnleggende om QuickBox2D-biblioteket. Etter å ha lest gjennom følgende trinn, vil du kunne lage et bredt spekter av fysikk simuleringseffekter. I løpet av denne opplæringen lager vi noen få små demoer for å gjøre deg kjent med QuickBox2Ds grunnleggende funksjonalitet.
Hvis du ikke allerede er klar, er Box2D et flott fysikkbibliotek opprettet av Erin Catto.
Det ble portet til AS3 av Matthew Bush og John Nesky.
QuickBox2D er et mini-bibliotek jeg opprettet for å jobbe med Box2DFlashAS3. Hovedformålet med dette biblioteket er å vesentlig forenkle instantiering av stive legemer og gi en enkel måte til dem kroppene med tilpasset grafikk.
For å følge denne opplæringen trenger du Box2DFlashAS3 versjon 2.0.2. Du kan laste den ned på sourceforge.net.
Pass på at du ikke laster ned 2.1a som det fortsatt er veldig mye i en alfa-tilstand. Box2D 2.1 er fortsatt ikke ute, og API-en er fortsatt gjennomgått
vesentlige endringer. Når 2.1 er ute av alfa, vil QuickBox2D støtte det, men for øyeblikket fungerer det ikke riktig med QuickBox2D.
Deretter må du laste ned den nyeste versjonen av QuickBox2D fra actionsnippet.com.
Denne opplæringen vil fungere med QuickBox2D 1.1 eller nyere.
Åpne Flash og opprett en ny ActionScript 3.0-fil.
Lagre filen og kontroller at Box2D og QuickBox2D er enten i klassestien din, eller direkte ved siden av fla filen.
Vi plasserer all vår kode i den første rammen av tidslinjen, så åpne handlingene dine (alternativ + F9) og lim inn følgende kodestykke:
[SWF (bredde = 800, høyde = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (denne); sim.createStageWalls (); sim.addBox (x: 3, y: 3, bredde: 1, høyde: 1); sim.addCircle (x: 4, y: 6, radius: 1); sim.start (); sim.mouseDrag ()
Gå videre og test filmen din (kommando + skriv inn). Du bør ende opp med en boks og en sirkel stiv kropp som du kan dra og kaste rundt scenen.
Etter at du har importert biblioteket, instanser vi en forekomst av QuickBox2D. Vi sender en referanse til tidslinjen i QuickBox2D-konstruktøren, noe som fører til at alle stive legemer trekkes til hovedlinjen. Du kan overføre noen MovieClip til QuickBox2D-konstruktøren. Vi lagrer vår QuickBox2D-forekomst i en variabel som heter sim (kort for simulering).
Neste kaller vi createStageWalls () metode. Dette trekker bokser rundt kantene på scenen, slik at stive legemer ikke faller av skjermen.
På linje 9 lager vi vår første stive kropp ved hjelp av addBox () opprettelsesmetode. addBox () tar en Gjenstand
som argument. Dette fungerer som populære tweening-motorer, slik at du kan skrive inn et variabelt antall argumenter i hvilken som helst rekkefølge med lett å lese syntaks. I dette tilfellet oppretter vi en boks med en x og y posisjon på 3 meter og a bredde og høyde på 1 meter. Disse verdiene kan virke rart, men jeg skal forklare dem snart.
Deretter lager vi en sirkel ved hjelp av addCircle () metode. Dette fungerer ganske mye på samme måte som addBox () metode. Vi bruker parametrene Gjenstand å fortelle QuickBox2D å plassere sirkelen ved punkt (4,6) og vi gir sirkelen en radius på 1 meter.
For å starte simuleringen vi kaller start() og å tillate å dra for de stive kroppene vi kaller mouseDrag ().
Den eneste vanskelige delen med denne kodestykket er koordinatsystemet. Det er ganske tydelig at vår x og y verdiene er ikke i piksler. Box2D bruker meter i stedet for piksler. Dette tar litt å bli vant til, men etter en time eller to har du ingen problemer med å tenke i meter i stedet for piksler. Det er viktig å merke seg at 1 meter er 30 piksler. Vi ser litt mer om dette senere når vi kommer til å flåte.
La oss gjøre dette litt mer interessant. Erstatt forrige addBox () og addCircle () ringer med disse:
sim.addBox (x: 4, y: 3, bredde: 1, høyde: 1); sim.addBox (x: 3, y: 6, bredde: 4, høyde: 0,25, tetthet: 0, vinkel: 0,1); sim.addCircle (x: 3, y: 10, radius: 1); sim.addCircle (x: 8, y: 10, radius: 0,5);
Gå videre og test filmen din. Vi er allerede kjent med x, y, bredde, høyde og radius, men vi la til to parmer:
tetthet og vinkel. Innstilling tetthet til 0 får Box2D til å skape en statisk stiv kropp. Statiske organer gjør det ikke
falle ned eller reagere på kollisjoner med andre stive legemer. Innstilling av tetthet til andre verdier styrer hvordan massen av den stive kroppen beregnes. Prøv å endre tetthet til 100 og du vil merke at rektangelet blir veldig tung.
Innstilling vinkel endrer startrotasjonsverdien for en stiv kropp. Denne verdien er i radianer i stedet for grader. Jeg foretrekker å jobbe direkte i radianer, men hvis du ikke vil gjøre det, kan du opprette en hjelperfunksjon som skal konverteres:
// tar en gradersverdi og konverterer den til radianer funksjonradianer (degs: Nummer): Nummer return degs * Math.PI / 180;
På dette punktet anbefaler jeg sterkt å ta fem eller ti minutter for å lage noe enkelt. Du har allerede nok kunnskap til å lage noen ganske fine simuleringer ... Hvis du lager noe interessant, må du huske å lagre det.
Nå som du begynner å få en følelse for ting, fjern tidslinjekoden din og erstatt den med dette:
[SWF (bredde = 800, høyde = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (denne); sim.createStageWalls (); // lage en tung sirkel sim.addCircle (x: 3, y: 3, radius: 0.5, tetthet: 5); // lage noen plattformer sim.addBox (x: 4, y: 4, bredde: 6, høyde: 0,35, vinkel: 0,1, tetthet: 0); sim.addBox (x: 9, y: 6, bredde: 6, høyde: 0,35, vinkel: 0,1, tetthet: 0); sim.addBox (x: 14, y: 9, bredde: 12, høyde: 0,35, vinkel: -0,2, tetthet: 0); sim.addBox (x: 4, y: 12, bredde: 0,35, høyde: 4, vinkel: -0,1, tetthet: 0); sim.addBox (x: 10, y: 14, bredde: 14, høyde: 0,35, tetthet: 0); // lage 26 dominoer for (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();
Gå videre og test filmen din.
Det er ikke noe nytt som skjer i dette eksemplet. Vi bruker ganske enkelt x, y, bredde, høyde, radius og tetthet.
Disse få params vil ta deg ganske langt. Vi skal dekke flere parameter relatert til oppførselen eller stive kroppene i den andre delen av denne opplæringen, men hvis du har lyst til å hoppe videre, kan en fullstendig liste finnes i QuickBox2D Docs.
Parametrene for addBox () kan bli funnet her.
Box2D lar deg lage sammensatte former. Dette betyr at du tar sirkler, bokser og polygoner og grupperer dem sammen for å gjøre mer komplekse former.
QuickBox2D forenkler stort sett hva du trenger å gjøre for å lage sammensatte former:
[SWF (bredde = 800, høyde = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (denne); sim.createStageWalls (); // lagre referanser til hver del av gruppen var sirkelA: QuickObject = sim.addCircle (x: 0, y: 0, radius: 0.5); varcirkelB: QuickObject = sim.addCircle (x: 2, y: 0, radius: 0,5); var middleBox: QuickObject = sim.addBox (x: 1, y: 0, bredde: 1,5, høyde: 0,5); // opprett gruppen ved hjelp av addGroup () -metoden sim.addGroup (objekter: [sirkelA, sirkelB, midtboks], x: 6, y: 6); sim.start (); sim.mouseDrag ();
Fjern tidslinjekoden og erstatt den med det som er nevnt ovenfor. Gå videre og test filmen din.
Alle QuickBox2D-etableringsmetodene (som addBox () og addCircle ()) returnerer QuickObject-forekomster. QuickObjects er wrappers for Box2D klasse-forekomster som er nødvendige for å skape stive legemer. Når du oppretter gruppeobjekter, er det første som vi må gjøre, referanser til noen QuickObjects. Vi kaller disse QuickObjects sirkelA, sirkelB og middleBox. Legg merke til det x og y
koordinatene for disse er i forhold til (0,0) - dette kravet er ment å forenkle enhver posisjoneringslogikk du må gjøre når du plasserer de ulike delene av en gruppe.
Nå som vi har våre referanser, kan vi sende dem som en matrise til objekter param av addgroup () opprettelsesmetode. Vi flytter så hele gruppen til punkt (6,6).
Med bokser og sirkler alene kan du bygge noen ganske kompliserte gruppeformer. Fjern tidslinjekoden din og erstatt den med dette:
[SWF (bredde = 800, høyde = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (denne); sim.createStageWalls (); // lage en sirkel sim.addCircle (x: 16, y: 3, radius: 1, tetthet: 0.2); // lage en haug med bokser var-bokser: Array = []; for (var jeg: 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();
Gå videre og test filmen din.
Det er noen params som du kan bruke til å endre farger og gjengivelse av QuickObjects. Disse er fillColor, fillAlpha, lineColor, lineAlpha og lineThickness. De skal være ganske selvforklarende. Se på dette:
[SWF (bredde = 800, høyde = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (denne); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, radius: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 6, y: 3, radius: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 9, y: 3, radius: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, bredde: 2, høyde: 2, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Prøv dette ut på tidslinjen din.
Selv om dette er lett å forstå, kan du se hvordan å håndtere disse parametrene raskt kan bli besværlig. I neste trinn ser vi på en måte å kvitte seg med noen av denne repeterende koden på.
For å kvitte seg med repeterende leter kode, har QuickBox2D en metode som kalles sett standard(). Denne metoden krever standardverdier for alle samtaler til etableringsmetoder. Så du kan forenkle det forrige eksempelet for å se slik ut:
[SWF (bredde = 800, høyde = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (denne); sim.createStageWalls (); sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 3, y: 3, radius: 1); sim.addCircle (x: 6, y: 3, radius: 1); sim.addCircle (x: 9, y: 3, radius: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, bredde: 2, høyde: 2, linjeColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Gå videre og prøv dette ut i tidslinjen din.
De sett standard() Metoden er ikke begrenset til å jobbe med ting som Fyll farge og lineThickness. Den kan brukes sammen med noen param. Mens jeg mest finner meg selv å benytte seg av sett standard() for gjengivelse og visse parameter relatert til ledd, du kunne gjør noe slikt:
sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00, y: 3, radius: 1); sim.addCircle (x: 3); sim.addCircle (x: 6); sim.addCircle (x: 9, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF);
Dette kan raskt bli forvirrende, så vær forsiktig når du bestemmer deg for å bruke sett standard() på denne måten.
En av hovedtrekkene til QuickBox2D er lett avskalling av stive legemer. Fordi skinning vanligvis krever bruk av bibliotekets eiendeler, må du laste ned denne kildefilen.
Det er tre MovieClips i biblioteket, CircleFace, OddPizza og Mail. Hvert klipp eksporteres for bruk med ActionScript. På tidslinjen finner du følgende kode:
[SWF (bredde = 800, høyde = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (denne); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, radius: 45/30, hud: CircleFace, scaleSkin: false); sim.addCircle (x: 6, y: 3, radius: 1, hud: OddPizza); sim.addCircle (x: 6, y: 6, radius: 0,5, hud: OddPizza); sim.addCircle (x: 6, y: 10, radius: 2, hud: OddPizza); sim.addBox (x: 12, y: 3, bredde: 3, høyde: 50/30, hud: Mail); sim.addBox (x: 18, y: 3, bredde: 3, høyde: 3, hud: Mail); sim.start (); sim.mouseDrag ();
Gå videre og test filmen.
For å skape tilpassede skins, bruker vi hud param. I dette eksemplet setter vi alle våre hudparameter til koblingsklasser fra biblioteket vårt. Som standard vil QuickBox2D opprette en forekomst av denne klassen og forsøke å skalere den slik at den passer til den stive kroppen. Dette er nyttig for enkle former som sirkler og bokser, men for mer komplekse skinn, kan du slå av denne funksjonen ved å bruke scaleSkin param. Vi gjør dette på linje 8 slik at CircleFace-huden brukes riktig.
Du vil merke at for radiusen setter vi 45/30 i stedet for 1,5. Som nevnt tidligere i denne opplæringen, er 1 meter 30 piksler, så å konvertere fra piksler til meter vi deler med 30. Sirkelen i CircleFace-huden har en radius på 45 piksler, slik at vi har forlatt den hardkodede konverteringen for klarhet heller enn å skrive 1.5.
Linjer 10-12 lager sirkler som bruker OddPizza-huden. De scaleSkin param er sant som standard, slik at hver hud skaleres automatisk
i henhold til radiusparameteren. Linjer 14 og 15 lager bokser som er skinnet med Mail-klippet.
I løpet av de siste månedene har flere skinningsfunksjoner blitt lagt til på forespørsel fra utviklere som bruker QuickBox2D. Jeg bruker de ovenfor beskrevne teknikkene utelukkende, men hvis du er interessert i å se noen flere skinningsteknikker, ta en titt på dette innlegget på actionsnippet.
ActionSnippet QuickBox2D Innlegg - Det finnes en hel del QuickBox2D-eksempler på actionsnippet.com i form av innlegg. De tidligere innleggene er betydelig enklere enn de nyere. Derfor anbefaler jeg at du går tilbake til noen få sider og jobber deg opp til noen av de senere innleggene. Nesten alle aspekter av QuickBox2D er dekket i disse eksemplene.
QuickBox2D Docs - Dette er bare dokumentasjonen for QuickBox2D. Noen steder antar den grunnleggende Box2D kunnskap.
Box2D Manual - En utmerket ressurs som dekker alle aspekter av Box2D. C++
Syntaxen kan skremme deg bort ... men hvis du erstatter piler som dette -> med dot syntaks og ignorere stjerner *... du vil oppdage at du forstår en god avtale.
Box2D Docs - Docs for alle C ++ klassene. Jeg finner dette veldig nyttig for noen av teknikkene som er omtalt i del 2 av denne opplæringen.
Vi har dekket mye bakken og vi har bare skrapet overflaten. Nedenfor er oppsummeringer av de kommende QuickBox2D-veiledningene:
QuickBox2D Del 2
I den andre delen av denne opplæringen vil vi utforske noen av de mer mellomliggende funksjonene i QuickBox2D. Vi ser på hvordan du lager polygon stive legemer. Vi lærer hvordan du finjusterer simuleringen vår ved å bruke flere param-verdier, for eksempel restitusjon, linearDamping og angularDamping. Vi diskuterer noen kraftige Box2D-metoder som eksponeres av QuickBox2D, og vi snakker om FRIM (framerate uavhengig bevegelse).
QuickBox2D Del 3
I den tredje delen av denne opplæringen vil vi dekke noen avanserte teknikker. Vi ser på hvordan QuickBox2D håndterer alle de forskjellige typer Box2D-ledd. Vi vil også gå over kontaktpunkter og spesielle typer kollisjoner.
Jeg håper du likte å lese denne første delen!
Accentsconagua