Share
Denna handledning kommer att lära dig grunderna i QuickBox2D-biblioteket. Efter att ha läst igenom följande steg kan du skapa en mängd olika fysik simuleringseffekter. Under denna handledning skapar vi några små demo för att bekanta dig med QuickBox2Ds grundläggande funktionalitet.
Om du inte är medveten är Box2D ett bra fysikbibliotek skapat av Erin Catto.
Det var portat till AS3 av Matthew Bush och John Nesky.
QuickBox2D är ett mini-bibliotek som jag skapade för att arbeta med Box2DFlashAS3. Huvudsyftet med detta bibliotek är att avsevärt förenkla instabilisering av styva kroppar och ge ett enkelt sätt till dem med anpassade grafik.
För att följa denna handledning behöver du Box2DFlashAS3 version 2.0.2. Du kan ladda ner den på sourceforge.net.
Var noga med att inte ladda ner 2.1a eftersom det fortfarande är mycket i ett alfatestatistik. Box2D 2.1 är fortfarande inte ute och API genomgår fortfarande
betydande förändringar. När 2.1 är av alfa, kommer QuickBox2D att stödja det, men för tillfället fungerar det inte korrekt med QuickBox2D.
Därefter måste du hämta den senaste versionen av QuickBox2D från actionsnippet.com.
Denna handledning kommer att fungera med QuickBox2D 1.1 eller senare.
Öppna Flash och skapa en ny ActionScript 3.0-fil.
Spara filen och se till att Box2D och QuickBox2D ligger antingen i din klassväg eller direkt bredvid din fla-fil.
Vi lägger all vår kod i första raden på tidslinjen, så öppna dina åtgärder (alternativ + F9) och klistra in följande kodbit:
[SWF (bredd = 800, höjd = 600, frameRate = 60)] importera com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (this); sim.createStageWalls (); sim.addBox (x: 3, y: 3, bredd: 1, höjd: 1); sim.addCircle (x: 4, y: 6, radie: 1); sim.start (); sim.mouseDrag ()
Fortsätt och testa din film (kommando + skriv in). Du borde sluta med en låda och en cirkel styv kropp som du kan dra och kasta runt scenen.
Efter att ha importerat biblioteket instanserar vi en instans av QuickBox2D. Vi skickar en referens till tidslinjen till QuickBox2D-konstruktorn, vilket gör att alla styva kroppar ska dras till huvudtidslinjen. Du kan skicka alla MovieClip till QuickBox2D-konstruktorn. Vi lagrar vår QuickBox2D-förekomst i en variabel som heter sim (kort för simulering).
Nästa kallar vi createStageWalls () metod. Detta drar lådor runt scenens kanter så att styva kroppar inte faller av skärmen.
På linje 9 skapar vi vår första styva kropp med hjälp av addBox () skapningsmetod. addBox () tar en Objekt
som sitt argument. Det här fungerar som populära tweening-motorer, så att du kan ange ett variabelt antal argument i vilken ordning som helst, med lättläst syntax. I det här fallet skapar vi en ruta med en x och y läge på 3 meter och a bredd och höjd av 1 meter. Dessa värden kan verka konstiga, men jag kommer att förklara dem snart.
Därefter skapar vi en cirkel med hjälp av addCircle () metod. Det fungerar ganska mycket på samma sätt som addBox () metod. Vi använder parametrarna Objekt att berätta för QuickBox2D att placera cirkeln vid punkt (4,6) och vi ger cirkeln en radie på 1 meter.
För att starta simuleringen kallar vi Start() och att tillåta att dra för de styva kroppar vi kallar mouseDrag ().
Den enda knepiga delen med denna kodbit är koordinatsystemet. Det är ganska uppenbart att vår x och y värdena är inte i pixlar. Box2D använder mätare istället för pixlar. Det här börjar lite vänja sig, men efter en timme eller två har du inga problem att tänka i meter istället för pixlar. Det är viktigt att notera att 1 meter är 30 pixlar. Vi får se lite mer om detta senare när vi kommer att fläta.
Låt oss göra det lite mer intressant. Ersätt din tidigare addBox () och addCircle () samtal med dessa:
sim.addBox (x: 4, y: 3, bredd: 1, höjd: 1); sim.addBox (x: 3, y: 6, bredd: 4, höjd: 0,25, densitet: 0, vinkel: 0,1); sim.addCircle (x: 3, y: 10, radie: 1); sim.addCircle (x: 8, y: 10, radie: 0,5);
Fortsätt och testa din film. Vi är redan bekanta med x, y, bredd, höjd och radie, men vi lade till ytterligare två parameter:
densitet och vinkel. Miljö densitet till 0 får Box2D att skapa en statisk styv kropp. Statiska kroppar gör det inte
faller ner eller reagerar på kollisioner med andra styva kroppar. Inställning av densitet till andra värden styr hur massan av den styva kroppen beräknas. Försök byta densitet till 100 och du märker att rektangeln blir mycket tung.
Miljö vinkel ändrar startrotationsvärdet för en styv kropp. Detta värde är i radianer istället för grader. Jag föredrar att arbeta direkt i radianer, men om du inte vill göra det kan du skapa en hjälpfunktion som ska konverteras:
// tar ett gradvärde och omvandlar det till radianer funktionradianer (degs: Number): Number return degs * Math.PI / 180;
Vid denna punkt rekommenderar jag starkt att ta fem eller tio minuter för att skapa något enkelt. Du har redan tillräckligt med kunskap för att skapa några snygga simuleringar ... Om du skapar något intressant, var noga med att spara det.
Nu när du börjar känna saker, tömmer du tidslinjekoden och ersätter den med följande:
[SWF (bredd = 800, höjd = 600, frameRate = 60)] importera com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (this); sim.createStageWalls (); // gör en tung cirkel sim.addCircle (x: 3, y: 3, radie: 0,5, densitet: 5); // skapa några plattformar sim.addBox (x: 4, y: 4, bredd: 6, höjd: 0.35, vinkel: 0,1, densitet: 0); sim.addBox (x: 9, y: 6, bredd: 6, höjd: 0,35, vinkel: 0,1, densitet: 0); sim.addBox (x: 14, y: 9, bredd: 12, höjd: 0,35, vinkel: -0,2, densitet: 0); sim.addBox (x: 4, y: 12, bredd: 0,35, höjd: 4, vinkel: -0,1, densitet: 0); sim.addBox (x: 10, y: 14, bredd: 14, höjd: 0,35, densitet: 0); // gör 26 dominoer för (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();
Fortsätt och testa din film.
Det här inträffar inget nytt. Vi använder helt enkelt x, y, bredd, höjd, radie och densitet.
Dessa få params tar dig ganska långt. Vi kommer att täcka mer parameter relaterade till beteendet eller styva kroppar i den andra delen av denna handledning, men om du känner att du hoppar framåt kan en fullständig lista hittas i QuickBox2D Docs.
Parametrarna för addBox () kan hittas här.
Box2D låter dig skapa sammansatta former. Det betyder att du tar cirklar, lådor och polygoner och grupperar dem för att göra mer komplexa former.
QuickBox2D förenklar mycket vad du behöver göra för att skapa sammansatta former:
[SWF (bredd = 800, höjd = 600, frameRate = 60)] importera com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (this); sim.createStageWalls (); // butikshänvisningar till varje del av gruppen var circleA: QuickObject = sim.addCircle (x: 0, y: 0, rad: 0.5); varcirkelB: QuickObject = sim.addCircle (x: 2, y: 0, radie: 0,5); var middleBox: QuickObject = sim.addBox (x: 1, y: 0, bredd: 1,5, höjd: 0,5); // skapa gruppen med addGroup () -metoden sim.addGroup (objekt: [circleA, circleB, middleBox], x: 6, y: 6); sim.start (); sim.mouseDrag ();
Rensa din tidslinjekod och ersätt den med vad som är ovan. Fortsätt och testa din film.
Alla QuickBox2D-skapningsmetoderna (som addBox () och addCircle ()) returnerar QuickObject-instanser. QuickObjects är wrappers för Box2D-klassens instanser som är nödvändiga för att skapa styva kroppar. När vi skapar gruppobjekt är det första som vi behöver göra om referenser till några QuickObjects. Vi kallar dessa QuickObjects cirkelA, cirkelB och middleBox. Lägg märke till att x och y
koordinaterna för dessa är i förhållande till (0,0) - detta krav är avsett att förenkla vilken positioneringslogik du behöver göra när du placerar olika delar av en grupp.
Nu när vi har våra referenser, kan vi överföra dem som en matris till objekt param av Lägg till grupp() skapningsmetod. Vi flytta sedan hela gruppen till punkten (6,6).
Med lådor och cirklar ensam kan du bygga några ganska komplicerade gruppformer. Rensa din tidslinjekod och ersätt den med följande:
[SWF (bredd = 800, höjd = 600, frameRate = 60)] importera com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (this); sim.createStageWalls (); // skapa en cirkel sim.addCircle (x: 16, y: 3, rad: 1, densitet: 0.2); // skapa en massa lådor var lådor: Array = []; för (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();
Fortsätt och testa din film.
Det finns några parametrar som du kan använda för att ändra färgerna och göra stilen på QuickObjects. Dessa är fillColor, fillAlpha, lineColor, lineAlpha och lineThickness. De borde vara ganska självförklarande. Titta på det här:
[SWF (bredd = 800, höjd = 600, frameRate = 60)] importera com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (this); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, radie: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 6, y: 3, radie: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 9, y: 3, radie: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, bredd: 2, höjd: 2, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Prova detta på din tidslinje.
Medan detta är lätt att förstå kan du se hur hanteringen av dessa parametrar snabbt kan bli besvärlig. I nästa steg ser vi på ett sätt att bli av med någon av denna repeterande kod.
För att bli av med repeterande kod ser QuickBox2D en metod som heter Sätta som normalt(). Den här metoden tvingar standardvärden för alla samtal till skapande metoder. Så du kan förenkla föregående exempel så att det ser ut så här:
[SWF (bredd = 800, höjd = 600, frameRate = 60)] importera com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (this); sim.createStageWalls (); sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 3, y: 3, radie: 1); sim.addCircle (x: 6, y: 3, radie: 1); sim.addCircle (x: 9, y: 3, radie: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, bredd: 2, höjd: 2, linjeColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Fortsätt och prova detta på din tidslinje.
De Sätta som normalt() Metoden är inte begränsad till att arbeta med saker som fyllnadsfärg och lineThickness. Den kan användas tillsammans med några param. Medan jag mest brukar använda mig av Sätta som normalt() för att göra stil och vissa parametrar relaterade till leder, du skulle kunna gör något så här:
sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00, y: 3, radie: 1); sim.addCircle (x: 3); sim.addCircle (x: 6); sim.addCircle (x: 9, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF);
Det kan snabbt bli förvirrande, så var försiktig när du bestämmer dig för att använda Sätta som normalt() på det här sättet.
En av huvuddragen i QuickBox2D är lätt sköljning av styva kroppar. Eftersom sköljning i allmänhet kräver användning av bibliotekstillgångar måste du hämta den här källfilen.
Det finns tre MovieClips i biblioteket, CircleFace, OddPizza och Mail. Varje klipp exporteras för användning med ActionScript. På tidslinjen hittar du följande kod:
[SWF (bredd = 800, höjd = 600, frameRate = 60)] importera com.actionsnippet.qbox. *; var sim: QuickBox2D = ny QuickBox2D (this); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, radie: 45/30, hud: CircleFace, scaleSkin: false); sim.addCircle (x: 6, y: 3, radie: 1, hud: OddPizza); sim.addCircle (x: 6, y: 6, radie: 0.5, hud: OddPizza); sim.addCircle (x: 6, y: 10, radie: 2, hud: OddPizza); sim.addBox (x: 12, y: 3, bredd: 3, höjd: 50/30, hud: Mail); sim.addBox (x: 18, y: 3, bredd: 3, höjd: 3, hud: Mail); sim.start (); sim.mouseDrag ();
Gå vidare och testa filmen.
För att skapa egna skinn använder vi oss av hud param. I det här exemplet ställer vi alla våra hudparametrar till kopplingsklasser från vårt bibliotek. Som standard skapar QuickBox2D en förekomst av den här klassen och försöker skala den så att den passar den styva kroppen. Detta är användbart för enkla former som cirklar och lådor, men för mer komplexa skinn kanske du vill stänga av den här funktionen med hjälp av scaleSkin param. Vi gör det här på rad 8 så att CircleFace-huden används ordentligt.
Du märker att för radien sätter vi 45/30 istället för 1,5. Som tidigare nämnts i denna handledning är 1 meter 30 pixlar, så att konvertera från pixlar till meter vi delar upp med 30. Cirkeln i CircleFace-huden har en radie av 45 pixlar, så vi har försvunnit den hårdkodade konvertering för tydlighet snarare än att skriva 1.5.
Linjerna 10-12 skapar cirklar som använder sig av OddPizza-huden. De scaleSkin param är sant som standard, så varje skal skalas automatiskt
enligt radien param. Linjerna 14 och 15 skapar rutor som skinnas med Mail-klippet.
Under de senaste månaderna har fler skinningsfunktioner lagts till på begäran av utvecklare som använder QuickBox2D. Jag använder de ovan beskrivna teknikerna, men om du är intresserad av att se några extra skinningstekniker, kolla in det här inlägget på actionsnippet.
ActionSnippet QuickBox2D inlägg - Det finns en hel massa QuickBox2D-exempel på actionsnippet.com i form av inlägg. De tidigare inläggen är betydligt enklare än de nyare. Därför rekommenderar jag att du går tillbaka till några sidor och arbetar upp till några av de senare inläggen. Nästan alla aspekter av QuickBox2D omfattas av dessa exempel.
QuickBox2D Docs - Det här är bara dokumentationen för QuickBox2D. På vissa ställen förutsätter den grundläggande Box2D-kunskap.
Box2D Manual - En utmärkt resurs som täcker alla aspekter av Box2D. C++
syntaxen kan skrämma bort dig ... men om du ersätter pilar så här -> med punktsyntax och ignorera asterisker *... du kommer att upptäcka att du förstår en hel del.
Box2D Docs - Dokument för alla C ++-klasserna. Jag finner det här mycket användbart för några av de tekniker som diskuteras i del 2 i denna handledning.
Vi har täckt mycket mark och vi har verkligen skratt på ytan. Nedan följer sammanfattningar av de kommande QuickBox2D-handledningarna:
QuickBox2D Del 2
I den andra delen av denna handledning kommer vi att utforska några av de mer mellanliggande funktionerna i QuickBox2D. Vi ska titta på hur man skapar polygonstyva kroppar. Vi lär oss hur du finjusterar vår simulering med hjälp av ytterligare param värden som återbetalning, linearDamping och angularDamping. Vi diskuterar några kraftfulla Box2D-metoder som exponeras av QuickBox2D och vi talar om FRIM (framerate independent motion).
QuickBox2D Del 3
I den tredje delen av denna handledning kommer vi att täcka några avancerade tekniker. Vi ska titta på hur QuickBox2D hanterar alla olika typer av Box2D-leder. Vi kommer också att gå över kontaktpunkter och speciella typer av kollisioner.
Jag hoppas att du njöt av att läsa den här första delen!
Accentsconagua