Share
Dans le didacticiel d’introduction de cette série, vous avez été brièvement présenté à différents modules dans Matter.js. La bibliothèque contient de nombreux modules, il était donc peu pratique d'écrire en détail sur chacun d'eux dans un seul tutoriel. Après avoir lu la première partie de la série, vous devriez maintenant avoir une idée générale de la bibliothèque et de ses fonctionnalités..
Dans ce tutoriel, nous allons nous concentrer sur les modules World et Engine dans Matter.js. Le module Monde nous fournit les méthodes et les propriétés nécessaires pour créer et manipuler le composite Monde. Vous pouvez l'utiliser pour ajouter ou supprimer différents corps du monde. Le module Moteur contient des méthodes pour créer et manipuler les moteurs chargés de créer la simulation de votre monde..
Dans cette section, vous découvrirez différentes méthodes, propriétés et événements du module Monde.. Monde est en fait un Composite avec des propriétés supplémentaires comme la gravité et bornes ajouté à cela. Voici une liste des méthodes importantes disponibles dans ce module:
Accentsconagua
ajouter (composite, objet): Cette méthode est héritée du module Composite et vous permet d’ajouter un ou plusieurs corps (s), composite (s) ou contrainte (s) au composite ou au monde donné.. addBody (monde, corps): Cette méthode vous permet d’ajouter des éléments de corps individuels au monde donné. Il y a aussi addComposite () et addConstraint () méthodes qui vous permettent d'ajouter un composite ou une contrainte au monde.Le code ci-dessous utilise ces deux méthodes pour ajouter différents corps au monde. le ajouter() La méthode ajoute trois rectangles statiques qui agissent comme des murs. le addBody () méthode ajoute un cercle, un carré ou un rectangle en fonction du bouton sur lequel l'utilisateur a cliqué.
var topWall = Bodies.rectangle (400, 0, 810, 30, isStatic: true); var leftWall = Bodies.rectangle (0, 200, 30, 420, isStatic: true); var ball = Bodies.circle (460, 10, 40, 10); var bottomWall = Bodies.rectangle (400, 400, 810, 30, isStatic: true); World.add (engine.world, [topWall, leftWall, ball, bottomWall]); var addCircle = function () return Bodies.circle (Math.random () * 400 + 30, 30, 30); ; $ ('. add-circle'). on ('click', function () World.add (engine.world, addCircle ()););Vous pouvez voir que le est statique la clé a été réglée sur vrai pour les trois murs de notre monde. Paramétrer cette clé sur vrai pour tout objet rend cet objet complètement statique. L'objet ne changera jamais sa position ou son angle maintenant. De nombreuses autres propriétés peuvent être spécifiées pour contrôler le comportement de différents objets. Vous en apprendrez tous sur le didacticiel du module Corps de cette série..
remove (composite, objet, [deep = false]): Il s'agit d'une méthode générique permettant de supprimer un ou plusieurs corps, composites ou contraintes du composite ou du monde donné. Par exemple, vous pouvez utiliser la ligne suivante pour supprimer les murs supérieur et gauche du monde..World.remove (engine.world, [topWall, leftWall]);
clair (monde, keepStatic): Cette méthode est un alias pour son Composite homologue. Vous pouvez l'utiliser pour supprimer tous les éléments du monde à la fois. Le deuxième paramètre est un booléen qui peut être utilisé pour empêcher la suppression d'éléments statiques. Sa valeur est faux par défaut. Cela signifie que l'appel Monde.clair (monde) va supprimer tous les éléments de ce monde particulier.rotation (composite, rotation, point, [récursif = vrai]): Cette méthode peut être utilisée pour faire pivoter tous les enfants d'un monde ou d'un composite donné d'un angle spécifique autour du point fourni. L'angle donné ici est en radians. le point paramètre détermine le point de rotation.scale (composite, scaleX, scaleY, point, [récursif = vrai]): Vous pouvez utiliser cette méthode pour redimensionner tous les enfants de votre composite ou de votre monde en fonction des valeurs données. Cette méthode adapte tout, de la largeur à la hauteur en passant par la surface, la masse et l’inertie..traduire (composite, translation, [recursive = true]): La méthode de traduction est utile lorsque vous souhaitez traduire ou déplacer tous les enfants d'un monde ou d'un composite par un vecteur donné par rapport à leurs positions actuelles. Une chose à garder à l’esprit est que ni Traduire() ni tourner() transmet toute sorte de vitesse aux corps du monde. Tout mouvement qui se produit est simplement le résultat de changements dans la forme ou la position de différents corps. Voici un code pour mettre à l'échelle, faire pivoter et traduire un monde basé sur des clics de bouton:
$ ('. scale'). on ('click', function () Matter.Composite.scale (engine.world, 0.5, 0.7, x: 400, y: 200);); $ ('. rotate'). on ('click', function () Matter.Composite.rotate (engine.world, Math.PI / 4, x: 400, y: 200);); $ ('. translate'). on ('click', function () Matter.Composite.translate (engine.world, x: 10, y: 10););Notez que le code ci-dessus applique une échelle différente sur les axes x et y. Cela transforme le cercle de notre monde Matter.js en un ovale. L'ovale bascule ensuite pour atteindre un état plus stable avec une énergie potentielle inférieure.
Essayez d'appuyer sur le Échelle bouton dans la démo ci-dessus. Après cela, appuyez sur le bouton Tourner bouton pour voir à quel point Matter.js simule le mouvement réel d’un ovale.
Outre toutes ces méthodes, le Monde Le module a aussi beaucoup de propriétés utiles. Par exemple, vous pouvez obtenir un tableau de tous les corps qui sont des enfants directs du monde composite en utilisant monde.bodies. De même, vous pouvez obtenir un tableau de tous les composites et contraintes en utilisant monde.composites et world.constraints.
Vous pouvez également spécifier les limites du monde dans lesquelles Matter.js doit détecter les collisions à l'aide de monde.bonds. Une chose intéressante que vous pouvez changer avec les propriétés du monde est la gravité. La gravité le long des axes x et y est définie par défaut sur 0 et 1. Vous pouvez modifier ces valeurs en utilisant world.gravity.x et world.gravity.y respectivement.
Vous devriez visiter la page de documentation de Matter.World pour en savoir plus sur ce module.
Le module Moteur est nécessaire pour mettre à jour correctement la simulation du monde. Voici une liste de quelques méthodes importantes du module Moteur.
créer ([options]): Cette méthode est utile lorsque vous souhaitez créer un nouveau moteur. le options paramètre dans cette méthode est en fait un objet avec des paires clé-valeur. Vous pouvez utiliser options pour remplacer les valeurs par défaut pour différentes propriétés du moteur. Par exemple, vous pouvez utiliser le timeScale propriété pour ralentir ou accélérer la simulation. update (moteur, [delta = 16.666], [correction = 1]): Cette méthode fera avancer la simulation dans le temps en delta Mme. La valeur de la correction paramètre spécifie le facteur de correction de temps à appliquer après la mise à jour. Cette correction n’est généralement nécessaire que lorsque le delta change entre chaque mise à jour.fusion (engineA, engineB): Cette méthode fusionnera deux moteurs spécifiés par les paramètres donnés. Lors de la fusion, la configuration est appliquée à partir de moteurA et le monde est pris de moteurB.Le module Moteur dispose également de nombreuses autres propriétés pour vous aider à contrôler la qualité de la simulation. Vous pouvez définir une valeur pour constraintIterations, positionIterations ou vélocitéIterations spécifier le nombre d'itérations de contrainte, de position et de vitesse à effectuer lors de chaque mise à jour. Une valeur plus élevée dans chaque cas fournira une meilleure simulation. Cependant, une valeur plus élevée affectera également les performances de la bibliothèque..
Vous pouvez définir une valeur pour le timing.timeScale propriété pour contrôler la vitesse à laquelle la simulation se produit. Toute valeur inférieure à 1 entraînera une simulation au ralenti. La définition de cette propriété sur zéro gèlera complètement le monde. L’exemple suivant devrait indiquer clairement.
$ ('. slow-mo'). on ('click', function () engine.timing.timeScale = 0.5;); $ ('.norm-mo'). on ('click', function () engine.timing.timeScale = 1;); $ ('. fast-mo'). on ('click', function () engine.timing.timeScale = 1.5;);Vous avez peut-être remarqué que les balles rebondissent sur le sol cette fois-ci. Chaque corps rigide a un coefficient de restitution défini sur 0 par défaut. Cela leur donne des propriétés semblables à celles de l'argile et elles ne rebondissent pas en cas de collision. J'ai changé la valeur de restitution en 1 afin que les balles puissent facilement rebondir.
Vous découvrirez toutes ces propriétés des corps rigides dans le prochain tutoriel de la série. Pour l'instant, ajoutez des cercles ou des balles au monde et essayez d'appuyer sur les boutons de ralenti et d'accéléré pour remarquer la différence..
Vous devriez visiter la page de documentation de Matter.Engine pour en savoir plus sur ce module.
Ce tutoriel présente deux modules très importants de Matter.js que vous devez connaître pour pouvoir exécuter des simulations. Après avoir lu ce didacticiel, vous devriez être capable d’agrandir, de faire pivoter, de ralentir ou d’accélérer votre monde. Maintenant, vous savez aussi comment supprimer ou ajouter des corps à un monde. Cela peut être utile lorsque vous développez des jeux en 2D..
Dans le prochain tutoriel de la série, vous découvrirez les différentes méthodes, propriétés et événements disponibles dans Corps module.
