Introduction til QuickBox2D: Del 1
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.
Denne opplæringen vil lære deg det grunnleggende i QuickBox2D biblioteket. Etter å ha lest gjennom følgende trinn, vil du være i stand til å skape et bredt utvalg av fysikk simulering effekter. I løpet av denne opplæringen vil vi lage noen små demoer å gjøre deg kjent med QuickBox2D grunnfunksjonalitet
Trinn 1:. Litt bakgrunns
Hvis du ikke allerede er klar over, er Box2D en flott fysikk bibliotek skapt av Erin Catto.
Den ble oversatt til AS3 av Matthew Bush og John Nesky.
QuickBox2D er en mini- Biblioteket jeg opprettet for å arbeide med Box2DFlashAS3. Hovedformålet med dette biblioteket er å betydelig forenkle oppretting av stive legemer og gir en enkel måte å dem kropper med tilpasset grafikk.
Trinn 2: Last ned den Biblioteker
For å følge denne opplæringen du trenger Box2DFlashAS3 versjon 2.0.2. Du kan laste den ned på sourceforge.net.
Pass på å ikke laste ned 2.1a som det er fortsatt veldig mye i en alfa tilstand. Box2D 2.1 er fortsatt ikke ute og API er fortsatt under Neste må du laste ned den nyeste versjonen av QuickBox2D fra actionsnippet.com. Denne opplæringen vil fungere med QuickBox2D 1.1 eller høyere Åpne Flash og opprette en ny Actionscript 3.0-fil. Lagre filen din og sørg for at Box2D og QuickBox2D er enten i classpathen, eller rett ved siden av din fla fil Vi vil være å plassere all koden vår på det første bildet av tidslinjen, så åpne opp dine handlinger (opsjon + F9) og lim inn følgende kode: product: [SWF (width = 800, height = 600, framerate = 60 .)] import com.actionsnippet.qbox *; Var sim: QuickBox2D = new 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 (kommando + enter). Du bør ende opp med en boks og en sirkel stiv kropp som du kan dra og kaste rundt på scenen. Når du har importert biblioteket, instantiate vi en forekomst av QuickBox2D. Vi passerer en referanse til tidslinjen inn i QuickBox2D konstruktør, dette fører alle stive kropper å bli trukket til hovedtidslinjen. Du kan passere noen MovieClip inn i QuickBox2D konstruktøren. Vi lagrer våre QuickBox2D eksempel i en variabel kalt sim (forkortelse for simulering). Neste vi kaller createStageWalls () -metoden. Dette tegner bokser rundt kantene på scenen slik at stive kropper ikke faller utenfor skjermen. På linje 9 skaper vi vår første stive kroppen bruker addBox () opprettelsesmetoden. addBox () tar et objekt Deretter oppretter vi en sirkel med addCircle () -metoden. Dette fungerer stort sett på samme måte som den addBox () -metoden. Vi bruker params Object å fortelle QuickBox2D å plassere sirkelen i punktet (4,6) og vi gir sirkelen en radius på 1 meter. For å starte simuleringen vi kaller start () og å tillate dra for de stive kroppene kaller vi mouseDrag (). Den eneste vanskelige delen med denne kodebiten er koordinatsystemet. Det er ganske åpenbart at våre x- og y-verdier er ikke i piksler. Box2D bruker meter i stedet for piksler. Dette tar litt tid å bli vant til, men etter en time eller to du har ingen problemer med å tenke i meter i stedet for piksler. Det er viktig å merke seg at 1 meter er 30 piksler. Vi får se litt mer om dette senere når vi kommer til skinning. La oss gjøre dette litt mer interessant. Bytt ut forrige addBox () og addCircle () kaller med disse: Gå videre og teste filmen. Vi er allerede kjent med x, y, bredde, høyde og radius, men vi har lagt to flere params: Stille vinkelen endrer starter rotasjon verdi for en stiv kropp. Denne verdien er i radianer i stedet for grader. Jeg foretrekker å jobbe direkte i radianer, men hvis du ikke ønsker å gjøre det du kan opprette en hjelper funksjon for å konvertere: På dette punktet jeg anbefaler å ta fem eller ti minutter på å lage noe enkelt. Du har allerede en nok kunnskap til å lage noen ganske fine simuleringer ... Hvis du lager noe interessant, må du huske å lagre det Nå som du ' re begynner å få en følelse av ting, tømme tidslinje koden og erstatte det med dette: product: [SWF (width = 800, height = 600, framerate = 60)] import com.actionsnippet.qbox *; Var sim.: QuickBox2D = new QuickBox2D (denne); sim.createStageWalls (); //gjøre en tung circlesim.addCircle ({x: 3, y: 3, radius: 0,5, tetthet: 5}); //skape noen platformssim.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}); //gjøre 26 dominoesfor (var i: int = 0; i < 13; i ++) {sim.addBox ({x: 7 + i * 0,8, y: 13, bredde: 0,25, høyde: 1,6}); sim.addBox ({x: 8 + i * 0,8, y: 18,7, bredde: 0,25, høyde: 1,6}).} sim.start (); sim.mouseDrag (); Gå videre og teste filmen < .no> Det er ikke noe nytt som skjer i dette eksemplet. Vi er ganske enkelt å gjøre bruk av x, y, bredde, høyde, radius og tetthet. Box2D lar deg lage sammensatte figurer. Dette betyr å ta sirkler, bokser og polygoner og gruppere dem sammen for å lage mer komplekse former Tøm ut tidslinje koden og erstatte det med hva som er ovenfor. Gå videre og teste filmen. Alle de QuickBox2D opprettelse metoder (som addBox () og addCircle ()) returnerer QuickObject tilfeller. QuickObjects er pakkemaskiner til Box2D klasse forekomster som er nødvendig for å skape stive kropper. Når du oppretter gruppe objekter, er det første vi må gjøre er å lagre referanser til noen QuickObjects. Vi kaller disse QuickObjects circleA, circleB og middleBox. Legg merke til at x og y Nå som vi har våre referanser, vi kan passere dem som en matrise til objektene param av addgroup () opprettelsesmetoden. Vi flytter hele gruppen til punkt (6,6). Med bokser og sirkler alene du kan konstruere noen ganske kompliserte gruppe figurer. Tømme ut din tidslinje koden og erstatte det med denne. Product: [SWF (width = 800, height = 600, framerate = 60)] import com.actionsnippet.qbox *; Var sim: QuickBox2D = new QuickBox2D (denne); sim.createStageWalls (); //oppretter et circlesim.addCircle ({x: 16, y: 3, radius: 1, tetthet: 0,2}); //skape en haug med boxesvar bokser: Array = []; for (var i: int = 0; i < 20; i ++) {var h: Number = 1 - i /20; boxes.push (sim.addBox ({x: i, y: i * h, bredde: 1, høyde: h}));} //gruppe alle boksene togethersim.addGroup ({objekter: bokser, x 3, y: 3}); sim.start (); sim.mouseDrag (); Gå videre og teste filmen Det er noen få params som du kan bruke til å endre fargene og gjengi stil av QuickObjects. Dette er fillColor, fillAlpha, lineColor, lineAlpha og lineThickness. De bør være ganske selvforklarende. Ta en titt på denne:. Product: [SWF (width = 800, height = 600, framerate = 60)] import com.actionsnippet.qbox *; Var sim: QuickBox2D = new 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 . Selv om dette er lett å forstå, kan du se hvordan håndtere disse params kan fort bli tungvint. I neste trinn vil vi se på en måte å bli kvitt noe av dette repeterende kode Å kvitte seg med repeterende ser koden, QuickBox2D har en metode som kalles setDefault (). Denne måten tvinger standardverdier for alle samtaler til opprettelse metoder. Så du kan forenkle forrige eksempel se slik ut:. Product: [SWF (width = 800, height = 600, framerate = 60)] import com.actionsnippet.qbox *; Var sim: QuickBox2D = new 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, lineColor: 0x00FF00}); sim.start (); sim.mouseDrag (); Gå videre og prøve dette ut i tidslinjen din Den setDefault () metoden ikke er begrenset til å jobbe med ting som fillColor og lineThickness. Den kan brukes i forbindelse med alle Dette kan fort bli forvirrende, så vær forsiktig når du bestemmer deg for å bruke setDefault () på denne måten En av de viktigste funksjonene i QuickBox2D er lett skinning av stive kropper. Fordi skinning vanligvis krever bruk av bibliotekets ressurser, 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: product: [SWF (width = 800, height = 600, framerate = 60)] import com.actionsnippet.qbox *; Var sim. QuickBox2D = new QuickBox2D (denne); sim.createStageWalls (); sim.addCircle ({x: 3, y: 3, radius: 45/30, hud: CircleFace, scaleSkin: falsk}); 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 teste filmen For å lage egne skins, gjør vi. Bruk av huden param. I dette eksempelet setter vi alle våre hud params til koblings klasser fra vårt bibliotek. Som standard vil QuickBox2D opprette en forekomst av denne klassen og forsøke å skalere det til å passe den stive kroppen. Dette er nyttig for enkle former som sirkler og bokser, men for mer komplekse skins, kan det være lurt å slå av denne funksjonen ved hjelp av scaleSkin param. Vi gjør dette på linje 8, slik at CircleFace huden blir riktig brukt. Du vil merke at for radiusen vi sette 45/30 i stedet for 1,5. Som nevnt tidligere i denne opplæringen, er 1 meter 30 piksler, så å konvertere fra piksler til meters vi dele med 30. sirkel i CircleFace hud har en radius på 45 piksler, slik vi har igjen hardkodet konvertering i for klarhet heller enn å skrive 1,5. Lines 10-12 lage sirkler som gjør bruk av OddPizza huden. Den scaleSkin param er sant som standard, slik at hver huden blir automatisk skalert I løpet av de siste månedene, har mer hudverktøy funksjoner er lagt på anmodning fra utviklere gjør bruk av QuickBox2D. Jeg bruker teknikkene beskrevet ovenfor utelukkende, men hvis du er interessert i å se noen flere hudverktøy teknikker, ta en titt på dette innlegget på actionsnippet. ActionSnippet QuickBox2D innlegg - Det finnes en hel haug med QuickBox2D eksempler på actionsnippet.com i form av innlegg. De tidligere innlegg er betydelig enklere enn de nyere. Derfor anbefaler jeg å gå tilbake et par sider og jobbe deg opp til noen av de senere innlegg. Nesten alle aspekter av QuickBox2D er dekket i disse eksemplene QuickBox2D Docs -. Dette er bare dokumentasjon for QuickBox2D. Noen steder går det grunnleggende Box2D kunnskap Box2D Manual -. En utmerket ressurs som dekker alle aspekter av Box2D. C ++ Box2D Docs -. Dokumenter for alle C ++ klasser. Jeg finner dette svært nyttig for noen av teknikkene som diskuteres i del 2 av denne opplæringen Vi har dekket mye bakken, og vi har bare egentlig? riper i overflaten. Nedenfor er sammendrag av de kommende QuickBox2D tutorials: QuickBox2D del 2 QuickBox2D Del 3 Jeg håper du likte å lese denne første delen! Anmeldelser
betydelige endringer. Når 2.1 er ute av alpha, vil QuickBox2D støtte det, men for tiden er det ikke vil fungere ordentlig med QuickBox2D.
Trinn 3:. Sett opp File
Trinn 4:. Opprett din første stive legemer
Trinn 5: Forstå Kode
som sitt 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 lettlest syntaks. I dette tilfelle skapes en boks med en x- og y-posisjonen på 3 meter og en bredde og høyde på 1 meter. Disse verdiene kan virke rart, men jeg skal forklare dem kort tid.
Trinn 6: Legge Tetthet
sim.addBox ({x: 4, y: 3, bredde: 1, høyde: 1}); sim.addBox ({x: 3, y : 6, bredde: 4, høyde: 0,25, densitet: 0, vinkel: 0,1}); sim.addCircle ({x: 3, y: 10, radius: 1}); sim.addCircle ({x: 8, y : 10, radius: 0,5});
tetthet og vinkel. Stille tetthet til 0 årsaker box2D å skape en statisk stiv kropp. Statiske organer ikke Anmeldelser faller ned eller reagere på kollisjoner med andre stive kropper. Innstilling tetthet til andre verdier styrer hvordan massen av det stive legemet beregnes. Prøv å endre tettheten til 100, og du vil merke at rektangelet blir veldig
tung.
//tar en grad verdi og konverterer den til radiansfunction radianer (degs: Number): Antall {return degs * Math.PI /180;}
Trinn 7: Ta noen minutter til å skape noe
Trinn 8:. Ved hjelp av det vi har lært
Disse få params vil ta deg ganske langt. Vi kommer til å dekke flere params knyttet til atferd eller stive kropper i den andre delen av denne opplæringen, men hvis du har lyst til å hoppe fremover, kan en full liste finnes i QuickBox2D Docs.
Den params for addBox ( ) finner du her
Trinn 9:. Gruppering stive legemer
QuickBox2D vesentlig forenkler hva du trenger å gjøre for å skape sammensatte figurer. Product: [SWF (width = 800, height = 600, framerate = . 60)] import com.actionsnippet.qbox *; Var sim: QuickBox2D = new QuickBox2D (denne); sim.createStageWalls (); //lagre referanser til hver del av groupvar circleA: QuickObject = sim.addCircle ({x: 0, y: 0, radius: 0,5}); Var circleB: 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}); //oppretter gruppen bruker addgroup () methodsim.addGroup ({objekter: [circleA, circleB, middleBox], x: 6, y: 6}); sim .start (); sim.mouseDrag ();
koordinater for disse står i forhold til (0,0) -. Dette kravet er ment å forenkle noen posisjoneringslogikk du trenger å gjøre når du plasserer de forskjellige delene av en gruppe
Steg 10: En mer kompleks Gruppe
Trinn 11:. Fargelegging stive legemer og bruke setDefault ()
Trinn 12:. Den setDefault () Metode
.
param. Mens jeg stort sett finner meg selv å gjøre bruk av setDefault () for å gjengi stil og visse params relatert til ledd, du kan
gjøre noe som dette:
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});
Trinn 13:. Skinning stive legemer
ifølge radius param. Linjene 14 og 15 lage bokser som blir flådd med Mail klippet.
Trinn 14: Ytterligere Reading
syntaks kan skremme deg bort ... men hvis du erstatter piler som dette - > med dot syntaks og ignorere stjerne * ... du vil finne at du forstår en god del
Trinn 15. Hva Neste
I den andre delen av denne opplæringen vil vi utforske noen av de mer middels nivå funksjoner i QuickBox2D. Vi skal se på hvordan du kan lage polygon stive kropper. Vi vil lære å finjustere vår simulering ved hjelp av ekstra param verdier som restitusjon, linearDamping og angularDamping. Vi vil diskutere noen kraftige Box2D metoder som er utsatt av QuickBox2D og vi skal snakke om FRIM (framerate uavhengig bevegelse).
I den tredje delen av denne opplæringen vil vi dekke noen avanserte teknikker. Vi skal se på hvordan QuickBox2D håndterer alle de forskjellige typene Box2D ledd. Vi vil også gå over kontaktpunkter og spesielle typer kollisjoner.