Share
Ce tutoriel vous apprendra les bases de la bibliothèque QuickBox2D. Après avoir lu les étapes suivantes, vous serez en mesure de créer une grande variété d’effets de simulation physique. Au cours de ce didacticiel, nous allons créer quelques petites démonstrations pour vous familiariser avec les fonctionnalités de base de QuickBox2D..
Si vous n'êtes pas déjà au courant, Box2D est une excellente bibliothèque de physique créée par Erin Catto..
Il a été porté à AS3 par Matthew Bush et John Nesky.
QuickBox2D est une mini-bibliothèque que j'ai créée pour fonctionner avec Box2DFlashAS3. Le but principal de cette bibliothèque est de simplifier considérablement l’instanciation des corps rigides et de leur fournir un moyen simple de créer des corps avec des graphiques personnalisés..
Pour suivre ce tutoriel, vous aurez besoin de Box2DFlashAS3 version 2.0.2. Vous pouvez le télécharger sur sourceforge.net.
Assurez-vous de ne pas télécharger 2.1a car il est toujours dans un état alpha. Box2D 2.1 n'est toujours pas sorti et l'API est toujours en cours
changements importants. Lorsque la version 2.1 n’a plus d’alpha, QuickBox2D la prend en charge, mais pour le moment, elle ne fonctionnera pas correctement avec QuickBox2D..
Ensuite, vous devez télécharger la dernière version de QuickBox2D à partir actionsnippet.com.
Ce tutoriel fonctionnera avec QuickBox2D 1.1 ou supérieur.
Ouvrez Flash et créez un nouveau fichier ActionScript 3.0..
Enregistrez votre fichier et assurez-vous que Box2D et QuickBox2D se trouvent soit dans votre chemin de classe, soit directement à côté de votre fichier fla..
Nous allons placer tout notre code sur la première image de la timeline, donc ouvrez vos actions (option + F9) et collez l'extrait de code suivant:
[SWF (largeur = 800, hauteur = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (this); sim.createStageWalls (); sim.addBox (x: 3, y: 3, largeur: 1, hauteur: 1); sim.addCircle (x: 4, y: 6, rayon: 1); sim.start (); sim.mouseDrag ()
Allez-y et testez votre film (commande + entrée). Vous devriez vous retrouver avec une boîte et un cercle de corps rigide que vous pouvez faire glisser et jeter sur la scène..
Après avoir importé la bibliothèque, nous instancions une instance de QuickBox2D. Nous transmettons une référence à la timeline dans le constructeur QuickBox2D, ainsi tous les corps rigides sont dessinés vers la timeline principale. Vous pouvez passer n'importe quel MovieClip dans le constructeur QuickBox2D. Nous stockons notre instance QuickBox2D dans une variable appelée sim (abréviation de simulation).
Ensuite nous appelons le createStageWalls () méthode. Cela dessine des boîtes sur les bords de la scène afin que les corps rigides ne tombent pas de l'écran.
Sur la ligne 9, nous créons notre premier corps rigide en utilisant le addBox () méthode de création. addBox () prend un Objet
comme son argument. Cela fonctionne comme les moteurs d'interpolation populaires, vous permettant d'entrer un nombre variable d'arguments dans n'importe quel ordre avec une syntaxe facile à lire. Dans ce cas, nous créons une boîte avec un X et y position de 3 mètres et un largeur et la taille de 1 mètre. Ces valeurs peuvent paraître étranges, mais je les expliquerai bientôt.
Ensuite, nous créons un cercle en utilisant le addCircle () méthode. Cela fonctionne à peu près de la même manière que le addBox () méthode. Nous utilisons les params Objet demander à QuickBox2D de positionner le cercle au point (4,6) et on donne au cercle un rayon de 1 mètre.
Pour lancer la simulation, nous appelons début() et pour permettre de traîner pour les corps rigides que nous appelons mouseDrag ().
La seule partie délicate de cet extrait de code est le système de coordonnées. Il est assez évident que notre X et y les valeurs ne sont pas en pixels. Box2D utilise des mètres au lieu de pixels. Cela prend un peu de temps pour s'y habituer, mais après une heure ou deux, vous n'aurez aucun mal à penser en mètres au lieu de pixels. Il est important de noter qu'un mètre équivaut à 30 pixels. Nous verrons un peu plus à ce sujet plus tard quand nous arriverons à dépecer.
Rendons cela un peu plus intéressant. Remplacez votre précédent addBox () et addCircle () appels avec ceux-ci:
sim.addBox (x: 4, y: 3, largeur: 1, hauteur: 1); sim.addBox (x: 3, y: 6, largeur: 4, hauteur: 0,25, densité: 0, angle: 0,1); sim.addCircle (x: 3, y: 10, rayon: 1); sim.addCircle (x: 8, y: 10, rayon: 0.5);
Allez-y et testez votre film. Nous connaissons déjà x, y, largeur, hauteur et rayon, mais nous avons ajouté deux paramètres supplémentaires:
densité et angle. Réglage densité à 0, Box2D crée un corps rigide statique. Les corps statiques ne le font pas
tomber ou réagir à des collisions avec d'autres corps rigides. Le réglage de la densité sur d'autres valeurs contrôle le mode de calcul de la masse du corps rigide. Essayez de changer la densité à 100 et vous remarquerez que le rectangle devient très lourd.
Réglage angle change la valeur de rotation de départ pour un corps rigide. Cette valeur est exprimée en radians au lieu de degrés. Je préfère travailler directement en radians, mais si vous ne le souhaitez pas, vous pouvez créer une fonction d'assistance pour convertir:
// prend une valeur en degré et la convertit en radians fonction radians (degs: Number): Number return degs * Math.PI / 180;
À ce stade, je recommande fortement de prendre cinq ou dix minutes pour créer quelque chose de simple. Vous avez déjà suffisamment de connaissances pour créer de jolies simulations… Si vous créez quelque chose d'intéressant, veillez à le sauvegarder..
Maintenant que vous commencez à avoir une idée des choses, effacez le code de votre chronologie et remplacez-le par ceci:
[SWF (largeur = 800, hauteur = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (this); sim.createStageWalls (); // crée un cercle épais sim.addCircle (x: 3, y: 3, rayon: 0.5, densité: 5); // crée quelques plates-formes sim.addBox (x: 4, y: 4, largeur: 6, hauteur: 0,35, angle: 0,1, densité: 0); sim.addBox (x: 9, y: 6, largeur: 6, hauteur: 0,35, angle: 0,1, densité: 0); sim.addBox (x: 14, y: 9, largeur: 12, hauteur: 0,35, angle: -0,2, densité: 0); sim.addBox (x: 4, y: 12, largeur: 0,35, hauteur: 4, angle: -0,1, densité: 0); sim.addBox (x: 10, y: 14, largeur: 14, hauteur: 0,35, densité: 0); // fabrique 26 dominos pour (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();
Allez-y et testez votre film.
Il n'y a rien de nouveau dans cet exemple. Nous utilisons simplement x, y, largeur, hauteur, rayon et densité.
Ces quelques paramètres vous mèneront assez loin. Nous allons couvrir davantage de paramètres liés au comportement ou aux corps rigides dans la deuxième partie de ce didacticiel, mais si vous avez envie de sauter, une liste complète est disponible dans la documentation de QuickBox2D..
Les params pour addBox () peut être trouvé ici.
Box2D vous permet de créer des formes composées. Cela signifie prendre des cercles, des cases et des polygones et les regrouper pour créer des formes plus complexes..
QuickBox2D simplifie grandement la création de formes composées:
[SWF (largeur = 800, hauteur = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (this); sim.createStageWalls (); // stocke les références à chaque partie du groupe var circleA: QuickObject = sim.addCircle (x: 0, y: 0, rayon: 0.5); var circleB: QuickObject = sim.addCircle (x: 2, y: 0, rayon: 0.5); var middleBox: QuickObject = sim.addBox (x: 1, y: 0, largeur: 1,5, hauteur: 0,5); // crée le groupe à l'aide de la méthode addGroup () sim.addGroup (objets: [circleA, circleB, middleBox], x: 6, y: 6); sim.start (); sim.mouseDrag ();
Effacez votre code chronologique et remplacez-le par ce qui précède. Allez-y et testez votre film.
Toutes les méthodes de création QuickBox2D (comme addBox () et addCircle ()) renvoyer des occurrences QuickObject. Les QuickObject sont des wrappers pour les instances de la classe Box2D nécessaires à la création de corps rigides. Lors de la création d'objets de groupe, la première chose à faire est de stocker les références à quelques QuickObjects. Nous appelons ces QuickObjects cercleA, cercleB et middlebox. Remarquerez que X et y
les coordonnées pour celles-ci sont relatives à (0,0) - cette exigence vise à simplifier la logique de positionnement que vous devez faire lorsque vous placez les différentes parties d'un groupe.
Maintenant que nous avons nos références, nous pouvons les transmettre sous forme de tableau au objets param de la ajouter un groupe() méthode de création. Nous déplaçons ensuite tout le groupe au point (6,6).
Avec des boîtes et des cercles seulement, vous pouvez construire des groupes assez compliqués. Effacez votre code chronologique et remplacez-le par ceci:
[SWF (largeur = 800, hauteur = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (this); sim.createStageWalls (); // crée un cercle sim.addCircle (x: 16, y: 3, rayon: 1, densité: 0,2); // crée un tas de cases var cases: Array = []; pour (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();
Allez-y et testez votre film.
Vous pouvez utiliser quelques paramètres pour modifier les couleurs et le style de rendu de QuickObjects. Ceux-ci sont fillColor, fillAlpha, lineColor, lineAlpha et Épaisseur de ligne. Ils devraient être assez explicites. Regarde ça:
[SWF (largeur = 800, hauteur = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (this); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, rayon: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 6, y: 3, rayon: 1, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 9, y: 3, rayon: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, largeur: 2, hauteur: 2, fillColor: 0xFF0000, lineThickness: 10, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Essayez ceci sur votre timeline.
Bien que cela soit facile à comprendre, vous pouvez voir à quel point le traitement de ces paramètres peut rapidement devenir lourd. Dans la prochaine étape, nous examinerons un moyen de supprimer certains de ces codes répétitifs..
Pour se débarrasser du code à la recherche répétitive, QuickBox2D a une méthode appelée définir par defaut(). Cette méthode force les valeurs par défaut pour tous les appels aux méthodes de création. Ainsi, vous pouvez simplifier l’exemple précédent pour ressembler à ceci:
[SWF (largeur = 800, hauteur = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (this); sim.createStageWalls (); sim.setDefault (fillColor: 0xFF0000, lineThickness: 10, lineColor: 0xFFFF00); sim.addCircle (x: 3, y: 3, rayon: 1); sim.addCircle (x: 6, y: 3, rayon: 1); sim.addCircle (x: 9, y: 3, rayon: 1, fillColor: 0x000022, lineThickness: 5, lineColor: 0x6666FF); sim.addBox (x: 12, y: 4, largeur: 2, hauteur: 2, lineColor: 0x00FF00); sim.start (); sim.mouseDrag ();
Allez-y et essayez ceci dans votre chronologie.
le définir par defaut() méthode ne se limite pas à travailler avec des choses comme la couleur de remplissage et Épaisseur de ligne. Il peut être utilisé en conjonction avec tout param. Bien que je me retrouve surtout à faire usage de définir par defaut() pour le style de rendu et certains paramètres liés aux articulations, vous pourrait faire quelque chose comme ça:
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);
Cela peut rapidement devenir déroutant, alors soyez prudent lorsque vous décidez d'utiliser définir par defaut() de cette façon.
L'une des principales caractéristiques de QuickBox2D est la dépouille facile des corps rigides. Étant donné que le skinning nécessite généralement l'utilisation d'actifs de bibliothèque, vous devez télécharger ce fichier source..
Il y a trois MovieClips dans la bibliothèque, CircleFace, OddPizza et Mail. Chaque clip est exporté pour être utilisé avec ActionScript. Sur la timeline, vous trouverez le code suivant:
[SWF (largeur = 800, hauteur = 600, frameRate = 60)] import com.actionsnippet.qbox. *; var sim: QuickBox2D = new QuickBox2D (this); sim.createStageWalls (); sim.addCircle (x: 3, y: 3, rayon: 45/30, peau: CircleFace, scaleSkin: false); sim.addCircle (x: 6, y: 3, rayon: 1, peau: OddPizza); sim.addCircle (x: 6, y: 6, rayon: 0.5, skin: OddPizza); sim.addCircle (x: 6, y: 10, rayon: 2, peau: OddPizza); sim.addBox (x: 12, y: 3, largeur: 3, hauteur: 50/30, skin: Mail); sim.addBox (x: 18, y: 3, largeur: 3, hauteur: 3, skin: Mail); sim.start (); sim.mouseDrag ();
Allez-y et testez le film.
Afin de créer des skins personnalisés, nous utilisons les peau param. Dans cet exemple, nous définissons tous nos paramètres de peau pour les classes de liaison de notre bibliothèque. Par défaut, QuickBox2D crée une instance de cette classe et tente de la mettre à l'échelle pour l'adapter au corps rigide. Ceci est utile pour les formes simples comme les cercles et les boîtes, mais pour les apparences plus complexes, vous pouvez désactiver cette fonctionnalité à l'aide de la commande scaleSkin param. Nous faisons cela à la ligne 8 pour que la peau CircleFace soit utilisée correctement.
Vous remarquerez que pour le rayon, nous mettons 45/30 au lieu de 1,5. Comme mentionné précédemment dans ce didacticiel, 1 mètre équivaut à 30 pixels. Pour convertir des pixels en mètres, nous divisons par 30. Le cercle de la peau CircleFace a un rayon de 45 pixels. Nous avons donc laissé la conversion codée en dur pour plus de clarté. que d'écrire 1,5.
Les lignes 10 à 12 créent des cercles qui utilisent la peau OddPizza. le scaleSkin param est true par défaut, donc chaque skin est automatiquement redimensionnée
selon le rayon param. Les lignes 14 et 15 créent des boîtes avec le clip Mail..
Au cours des derniers mois, davantage de fonctionnalités de personnalisation ont été ajoutées à la demande des développeurs utilisant QuickBox2D. J'utilise exclusivement les techniques décrites ci-dessus, mais si vous souhaitez découvrir quelques techniques de skinning supplémentaires, consultez ce post sur actionsnippet..
Posts ActionSnippet QuickBox2D - Il existe toute une série d’exemples de QuickBox2D sur actionsnippet.com sous la forme de posts. Les articles précédents sont beaucoup plus simples que les plus récents. Pour cette raison, je vous recommande de revenir en arrière de quelques pages et d’évoluer jusqu’à certains des derniers articles. Presque tous les aspects de QuickBox2D sont traités dans ces exemples..
QuickBox2D Docs - Ceci est juste la documentation pour QuickBox2D. À certains endroits, il suppose des connaissances de base de Box2D.
Manuel Box2D - Une excellente ressource qui couvre tous les aspects de Box2D. Le c++
la syntaxe pourrait vous effrayer… mais si vous remplacez des flèches comme celle-ci -> avec la syntaxe à points et ignorer les astérisques *… Vous constaterez que vous comprenez beaucoup.
Box2D Docs - Docs pour toutes les classes C ++. Je trouve cela très utile pour certaines des techniques présentées dans la partie 2 de ce tutoriel..
Nous avons parcouru beaucoup de terrain et nous n'avons fait qu'effleurer la surface. Vous trouverez ci-dessous des résumés des prochains tutoriels QuickBox2D:
QuickBox2D Partie 2
Dans la deuxième partie de ce didacticiel, nous allons explorer certaines des fonctionnalités les plus intermédiaires de QuickBox2D. Nous verrons comment créer des corps rigides polygonaux. Nous allons apprendre à peaufiner notre simulation en utilisant des valeurs de paramètre supplémentaires telles que restitution, amortissement linéaire et amortissement angulaire. Nous discuterons de certaines méthodes Box2D puissantes exposées par QuickBox2D et de FRIM (mouvement indépendant de la vitesse de défilement)..
QuickBox2D Partie 3
Dans la troisième partie de ce tutoriel, nous aborderons quelques techniques avancées. Nous verrons comment QuickBox2D gère les différents types d’articulations Box2D. Nous allons également passer en revue les points de contact et les types spéciaux de collisions.
J'espère que vous avez apprécié la lecture de cette première partie!
Accentsconagua