Share
Questo tutorial ti insegnerà le basi della libreria QuickBox2D. Dopo aver letto i seguenti passaggi, sarai in grado di creare un'ampia varietà di effetti di simulazione fisica. Nel corso di questo tutorial creeremo alcuni piccoli demo per familiarizzare con le funzionalità di base di QuickBox2D.
Se non lo sai già, Box2D è una grande libreria di fisica creata da Erin Catto.
È stato portato su AS3 da Matthew Bush e John Nesky.
QuickBox2D è una mini-libreria che ho creato per lavorare con Box2DFlashAS3. Lo scopo principale di questa libreria è di semplificare in modo significativo l'istanziazione di corpi rigidi e fornire un modo semplice ai corpi con grafica personalizzata.
Per seguire questo tutorial avrai bisogno di Box2DFlashAS3 versione 2.0.2. Puoi scaricarlo su sourceforge.net.
Assicurati di non scaricare 2.1a poiché è ancora molto in uno stato alfa. Box2D 2.1 non è ancora disponibile e l'API è ancora in fase di sviluppo
cambiamenti significativi. Quando 2.1 non è alfa, QuickBox2D lo supporterà, ma per il momento non funzionerà correttamente con QuickBox2D.
Successivamente è necessario scaricare l'ultima versione di QuickBox2D da actionsnippet.com.
Questo tutorial funzionerà con QuickBox2D 1.1 o versioni successive.
Apri Flash e crea un nuovo file ActionScript 3.0.
Salva il tuo file e assicurati che Box2D e QuickBox2D siano nel tuo classpath o direttamente accanto al tuo fla file.
Inseriremo tutto il nostro codice sul primo fotogramma della cronologia, quindi apri le azioni (opzione + F9) e incolla il seguente frammento di codice:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (questo); sim.createStageWalls (); sim.addBox (x: 3, y: 3, width: 1, height: 1); sim.addCircle (x: 4, y: 6, raggio: 1); sim.start (); sim.mouseDrag ()
Vai avanti e prova il tuo film (comando + invio). Dovresti ritrovarti con una scatola e un corpo rigido di cerchio che puoi trascinare e gettare per il palco.
Dopo aver importato la libreria, istanziamo un'istanza di QuickBox2D. Passiamo un riferimento alla timeline nel costruttore QuickBox2D, questo fa sì che tutti i corpi rigidi vengano disegnati sulla timeline principale. Puoi passare qualsiasi MovieClip nel costruttore QuickBox2D. Archiviamo la nostra istanza QuickBox2D in una variabile chiamata sim (abbreviazione di simulazione).
Quindi chiamiamo il createStageWalls () metodo. Questo disegna riquadri attorno ai bordi del palco in modo che i corpi rigidi non cadano dallo schermo.
Sulla linea 9 creiamo il nostro primo corpo rigido usando il addBox () metodo di creazione. addBox () prende un Oggetto
come argomento. Funziona come i motori di tweening popolari, consentendo di immettere un numero variabile di argomenti in qualsiasi ordine con una sintassi di facile lettura. In questo caso, creiamo una scatola con un X e y posizione di 3 metri e a larghezza e altezza di 1 metro. Questi valori possono sembrare strani, ma li spiegherò a breve.
Successivamente, creiamo un cerchio usando il AddCircle () metodo. Funziona più o meno allo stesso modo del addBox () metodo. Usiamo i parametri Oggetto dire a QuickBox2D di posizionare il cerchio nel punto (4,6) e diamo al cerchio un raggio di 1 metro.
Per iniziare la simulazione chiamiamo inizio() e permettere il trascinamento per i corpi rigidi che chiamiamo mouseDrag ().
L'unica parte difficile di questo frammento di codice è il sistema di coordinate. È abbastanza ovvio che il nostro X e y i valori non sono in pixel Box2D utilizza metri invece di pixel. Ci vuole un po 'per abituarsi, ma dopo un'ora o due non avrai problemi a pensare in metri invece che in pixel. È importante notare che 1 metro è 30 pixel. Vedremo un po 'di più su questo più tardi quando arriveremo alla scuoiatura.
Facciamo un po 'più interessante. Sostituisci il precedente addBox () e AddCircle () chiama con questi:
sim.addBox (x: 4, y: 3, width: 1, height: 1); sim.addBox (x: 3, y: 6, larghezza: 4, altezza: 0,25, densità: 0, angolo: 0,1); sim.addCircle (x: 3, y: 10, raggio: 1); sim.addCircle (x: 8, y: 10, raggio: 0.5);
Vai avanti e prova il tuo film. Conosciamo già x, y, larghezza, altezza e raggio, ma abbiamo aggiunto altri due parametri:
densità e angolo. Ambientazione densità a 0 fa sì che Box2D crei un corpo rigido statico. I corpi statici no
cadere o reagire alle collisioni con altri corpi rigidi. Impostando la densità su altri valori si controlla come viene calcolata la massa del corpo rigido. Prova a cambiare la densità a 100 e noterai che il rettangolo diventa molto pesante.
Ambientazione angolo cambia il valore di rotazione iniziale per un corpo rigido. Questo valore è in radianti anziché in gradi. Preferisco lavorare direttamente in radianti, ma se non vuoi farlo puoi creare una funzione di supporto per convertire:
// prende un valore in gradi e lo converte in radianti function radians (degs: Number): Number return degs * Math.PI / 180;
A questo punto consiglio vivamente di impiegare cinque o dieci minuti per creare qualcosa di semplice. Hai già una conoscenza sufficiente per creare delle belle simulazioni ... Se crei qualcosa di interessante, assicurati di salvarlo.
Ora che inizi a dare un'idea delle cose, cancella il tuo codice temporale e sostituiscilo con questo:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (questo); sim.createStageWalls (); // crea un cerchio pesante sim.addCircle (x: 3, y: 3, raggio: 0.5, densità: 5); // crea alcune piattaforme sim.addBox (x: 4, y: 4, larghezza: 6, altezza: 0,35, angolo: 0,1, densità: 0); sim.addBox (x: 9, y: 6, larghezza: 6, altezza: 0,35, angolo: 0,1, densità: 0); sim.addBox (x: 14, y: 9, larghezza: 12, altezza: 0,35, angolo: -0,2, densità: 0); sim.addBox (x: 4, y: 12, larghezza: 0,35, altezza: 4, angolo: -0,1, densità: 0); sim.addBox (x: 10, y: 14, larghezza: 14, altezza: 0,35, densità: 0); // crea 26 domino per (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();
Vai avanti e prova il tuo film.
Non c'è nulla di nuovo in questo esempio. Stiamo semplicemente facendo uso di x, y, larghezza, altezza, raggio e densità.
Questi pochi parametri ti porteranno molto lontano. Copriremo altri parametri relativi al comportamento o ai corpi rigidi nella seconda parte di questo tutorial, ma se hai voglia di saltare in avanti, puoi trovare un elenco completo nei documenti di QuickBox2D.
I parametri per addBox () può essere trovato qui.
Box2D ti consente di creare forme composte. Ciò significa prendere cerchi, scatole e poligoni e raggrupparli per creare forme più complesse.
QuickBox2D semplifica enormemente ciò che devi fare per creare forme composte:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (questo); sim.createStageWalls (); // memorizza i riferimenti a ciascuna parte del gruppo var circleA: QuickObject = sim.addCircle (x: 0, y: 0, raggio: 0.5); var circleB: QuickObject = sim.addCircle (x: 2, y: 0, raggio: 0.5); var middleBox: QuickObject = sim.addBox (x: 1, y: 0, width: 1.5, height: 0.5); // crea il gruppo usando il metodo addGroup () sim.addGroup (objects: [circleA, circleB, middleBox], x: 6, y: 6); sim.start (); sim.mouseDrag ();
Cancellare il codice temporale e sostituirlo con ciò che è sopra. Vai avanti e prova il tuo film.
Tutti i metodi di creazione di QuickBox2D (come addBox () e AddCircle ()) restituire istanze QuickObject. QuickObjects sono wrapper per le istanze di classe Box2D necessarie per creare corpi rigidi. Quando crei oggetti di gruppo, la prima cosa che dobbiamo fare è archiviare i riferimenti su alcuni QuickObjects. Chiamiamo questi QuickObjects circleA, circleB e middlebox. Notare che X e y
le coordinate per queste sono relative a (0,0) - questo requisito ha lo scopo di semplificare qualsiasi logica di posizionamento che devi fare quando si posizionano le diverse parti di un gruppo.
Ora che abbiamo i nostri riferimenti, possiamo passarli come una matrice al oggetti param del aggiungere gruppo() metodo di creazione. Quindi spostiamo l'intero gruppo al punto (6,6).
Con scatole e cerchi da soli puoi costruire delle forme di gruppo piuttosto complicate. Cancellare il codice temporale e sostituirlo con questo:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (questo); sim.createStageWalls (); // crea un cerchio sim.addCircle (x: 16, y: 3, raggio: 1, densità: 0,2); // crea un gruppo di caselle var boxes: Array = []; per (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();
Vai avanti e prova il tuo film.
Esistono alcuni parametri che è possibile utilizzare per modificare i colori e lo stile di rendering di QuickObjects. Questi sono fillColor, fillAlpha, lineColor, lineAlpha e lineThickness. Dovrebbero essere abbastanza auto-esplicativi. Guarda questo:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (questo); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, raggio: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 6, y: 3, raggio: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 9, y: 3, raggio: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, width: 2, height: 2, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Prova questo sulla tua cronologia.
Sebbene sia facile da capire, puoi vedere come gestire questi parametri può diventare rapidamente ingombrante. Nel prossimo passo vedremo un modo per sbarazzarsi di questo codice ripetitivo.
Per sbarazzarsi del codice dall'aspetto ripetitivo, QuickBox2D ha un metodo chiamato imposta default(). Questo metodo impone valori predefiniti per tutte le chiamate ai metodi di creazione. Quindi potresti semplificare l'esempio precedente per assomigliare a questo:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (questo); sim.createStageWalls (); sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 3, y: 3, raggio: 1); sim.addCircle (x: 6, y: 3, raggio: 1); sim.addCircle (x: 9, y: 3, raggio: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, width: 2, height: 2, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Vai avanti e prova questo nella tua cronologia.
Il imposta default() metodo non è limitato a lavorare con cose come colore di riempimento e lineThickness. Può essere usato insieme a qualunque param. Mentre per lo più mi trovo a fare uso di imposta default() per lo stile di rendering e alcuni parametri relativi alle articolazioni, tu poteva fare qualcosa del genere:
sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00, y: 3, raggio: 1); sim.addCircle (x: 3); sim.addCircle (x: 6); sim.addCircle (x: 9, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF);
Ciò potrebbe facilmente generare confusione, quindi fai attenzione quando decidi di usare imposta default() in questo modo.
Una delle caratteristiche principali di QuickBox2D è la facile skinning dei corpi rigidi. Poiché lo skinning richiede generalmente l'uso di risorse della libreria, è necessario scaricare questo file sorgente.
Ci sono tre MovieClip nella libreria, CircleFace, OddPizza e Mail. Ogni clip viene esportata per l'uso con ActionScript. Sulla timeline troverai il seguente codice:
[SWF (width = 800, height = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (questo); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, raggio: 45/30, skin: CircleFace, scaleSkin: false); sim.addCircle (x: 6, y: 3, raggio: 1, skin: OddPizza); sim.addCircle (x: 6, y: 6, raggio: 0.5, skin: OddPizza); sim.addCircle (x: 6, y: 10, raggio: 2, skin: OddPizza); sim.addBox (x: 12, y: 3, larghezza: 3, altezza: 50/30, skin: Mail); sim.addBox (x: 18, y: 3, larghezza: 3, altezza: 3, skin: Mail); sim.start (); sim.mouseDrag ();
Vai avanti e prova il film.
Per creare skin personalizzate, utilizziamo il pelle param. In questo esempio, impostiamo tutti i nostri parametri skin per il collegamento di classi dalla nostra libreria. Per impostazione predefinita, QuickBox2D creerà un'istanza di questa classe e tenterà di ridimensionarla per adattarla al corpo rigido. Questo è utile per forme semplici come cerchi e riquadri, ma per le skin più complesse, potresti voler disattivare questa funzione usando scaleSkin param. Lo facciamo sulla linea 8 in modo che la skin CircleFace venga utilizzata correttamente.
Noterai che per il raggio abbiamo inserito 45/30 invece di 1,5. Come accennato in precedenza in questo tutorial, 1 metro è 30 pixel, quindi per convertire da pixel a metri dividiamo per 30. Il cerchio nella skin CircleFace ha un raggio di 45 pixel, quindi abbiamo lasciato la conversione codificata per chiarezza piuttosto che di scrivere 1.5.
Le linee 10-12 creano cerchi che utilizzano la pelle OddPizza. Il scaleSkin param è true per impostazione predefinita, quindi ogni skin viene ridimensionato automaticamente
in base al raggio param. Le righe 14 e 15 creano caselle con la clip Mail tagliate.
Negli ultimi mesi sono state aggiunte ulteriori funzionalità di skinning su richiesta degli sviluppatori che utilizzano QuickBox2D. Uso esclusivamente le tecniche sopra descritte, ma se sei interessato a vedere alcune tecniche di skinning aggiuntive, dai un'occhiata a questo post su actionsnippet.
Messaggi ActionBox QuickBox2D - Ci sono molti esempi di QuickBox2D su actionsnippet.com sotto forma di post. I post precedenti sono significativamente più semplici di quelli più recenti. Per questo motivo, ti consiglio di tornare indietro di qualche pagina e di passare ad alcuni dei post successivi. Quasi tutti gli aspetti di QuickBox2D sono trattati in questi esempi.
Documenti QuickBox2D: questa è solo la documentazione per QuickBox2D. In alcuni punti assume la conoscenza base di Box2D.
Box2D Manual - Una risorsa eccellente che copre tutti gli aspetti di Box2D. Il C++
la sintassi potrebbe spaventarti ... ma se sostituisci le frecce in questo modo -> con la sintassi del punto e ignora gli asterischi *... troverai che capisci un buon affare.
Box2D Docs - Documenti per tutte le classi C ++. Trovo questo molto utile per alcune delle tecniche discusse nella parte 2 di questo tutorial.
Abbiamo coperto molto terreno e abbiamo solo graffiato la superficie. Di seguito sono riportati i riepiloghi dei prossimi tutorial di QuickBox2D:
QuickBox2D parte 2
Nella seconda parte di questo tutorial esploreremo alcune delle funzionalità di livello intermedio di QuickBox2D. Vedremo come creare corpi rigidi poligonali. Impareremo come ottimizzare la nostra simulazione utilizzando valori param aggiuntivi come restituzione, linearDamping e angularDamping. Discuteremo alcuni potenti metodi di Box2D che sono esposti da QuickBox2D e parleremo di FRIM (framerate independent motion).
QuickBox2D parte 3
Nella terza parte di questo tutorial tratteremo alcune tecniche avanzate. Vedremo come QuickBox2D gestisce tutti i diversi tipi di giunti Box2D. Ci occuperemo anche dei punti di contatto e dei tipi speciali di collisioni.
Spero vi sia piaciuto leggere questa prima parte!
Accentsconagua