Share
Dans le didacticiel précédent de la série, vous avez découvert les modules World et Engine dans Matter.js. Les méthodes disponibles dans ces deux modules sont destinées à contrôler le comportement de plusieurs corps ou du monde entier à la fois. Cependant, à un moment donné, il deviendra nécessaire de contrôler les propriétés des corps individuels dans votre monde..
Par exemple, vous pouvez appliquer une force sur un objet particulier ou modifier son coefficient de frottement. Dans ce cas, le module Body de Matter.js peut être d’une grande aide. Ce module contient de nombreuses méthodes et propriétés vous permettant de spécifier des valeurs pour tous les types d'attributs physiques, de la masse au coefficient de restitution. Dans ce tutoriel, vous découvrirez toutes ces méthodes et propriétés et comment les utiliser correctement..
Vous pouvez faire pivoter n’importe quel corps rigide du monde Matter.js à l’aide des touches rotation (corps, rotation) méthode. La rotation est relative à l'angle actuel du corps et elle ne lui communiquera aucune vitesse angulaire. L'angle de rotation est spécifié en radians.
Vous pouvez également redimensionner un corps en utilisant le scale (corps, scaleX, scaleY, [point]) méthode. Les paramètres scaleX et échelleY spécifiez la quantité de mise à l'échelle dans les directions horizontale et verticale respectivement. N'oubliez pas qu'une telle mise à l'échelle actualisera également les propriétés physiques du corps, telles que sa masse, sa surface et son inertie. Le quatrième paramètre spécifie le point autour duquel se produit la mise à l'échelle. Si non spécifié, la valeur par défaut du point de mise à l'échelle est supposée être le centre du corps.
Il est possible de déplacer un corps d’un vecteur donné par rapport à sa position actuelle en utilisant la traduire (corps, traduction) méthode. Le paramètre translation spécifie la nouvelle position de l'objet par rapport à sa position actuelle. Voici la partie du code de la démo qui met à l'échelle, tourne et déplace la boîte.
Accentsconagua
var Body = Matter.Body; var box = Bodies.rectangle (460, 120, 40, 40); $ ('. scale'). on ('click', function () Body.scale (box, 1.5, 1.2);); $ ('. rotate'). on ('click', function () Body.rotate (box, Math.PI / 6);); $ ('. translate'). on ('click', function () Body.translate (box, x: -10, y: 20););Vous pouvez également communiquer une vitesse linéaire à un objet à l'aide du bouton setVelocity (corps, vitesse) méthode. L'application d'une vitesse de cette manière ne change pas l'angle, la force appliquée ou la position de l'objet concerné. La position de l'objet ou son angle vont probablement changer, mais la bibliothèque ne les définit pas spécifiquement à une valeur. Leurs valeurs sont déterminées par d’autres forces agissant sur l’objet, comme le frottement.
Tout comme la vitesse linéaire, vous pouvez également modifier la vitesse angulaire d’un objet à l’aide des touches setAngularVelocity (corps, vitesse) méthode. Dans ce cas également, la position, l'angle et la force appliqués à l'objet restent inchangés.
Il ne faut pas oublier que la vitesse est un vecteur. setVelocity () et un nombre dans setAngularVelocity ().
$ ('. linear'). on ('click', function () Body.setVelocity (boîte, x: 10, y: -10);); $ ('.angular'). on ('click', function () Body.setAngularVelocity (box, Math.PI / 6););En plus de transmettre des vitesses à des objets, vous pouvez également leur appliquer un vecteur de force. le applyForce (corps, position, force) méthode peut être utilisée pour appliquer un Obliger vecteur sur un corps d'une donnée position. Cette force peut entraîner ou non l'application d'un couple sur un corps donné.
Le code suivant applique une force au centre du corps. Le vecteur de force est x: 0, y: -0,05. Cela signifie que la force appliquée sera purement verticale et ascendante. N'oubliez pas que les forces verticales orientées vers le haut ont un signe négatif dans Matter.js. Une autre chose à noter est le petit nombre spécifiant la force verticale. La force de gravitation elle-même n'a qu'une valeur de 1 dans Matter.js.
Le mouvement de la balle après l'application des forces semble naturel tant que cette balle n'entre pas en collision avec les murs ou le sol. Normalement, lorsque les choses se heurtent à quelque chose, nous nous attendons à ce qu'elles rebondissent. L'énergie avec laquelle un objet rebondit est déterminée par le coefficient de restitution.
Dans Matter.js, sa valeur est définie sur zéro par défaut. Cela signifie que tout objet dont la restitution est définie sur zéro et entre en collision avec quelque chose d'autre ne rebondira pas du tout. Une valeur de 1 signifie que l'objet rebondira avec une énergie cinétique égale à celle qu'il avait avant la collision. Une valeur telle que 0,5 signifie que l'objet ne rebondira qu'avec 50% de son énergie cinétique précédente. La valeur de restitution pour un objet peut être contrôlée à l'aide de la touche restitution clé.
Dans certaines simulations, il peut s'avérer nécessaire de modifier le frottement entre différents corps. Ceci peut être réalisé en utilisant le friction, frictionAir et frictionStatique clés.
friction key spécifie la valeur du frottement cinétique pour un corps. Il peut avoir une valeur comprise entre 0 et 1. Une valeur de 0 signifie qu'un corps peut continuer à se déplacer indéfiniment une fois qu'il a été mis en mouvement. La seule façon de l'arrêter sera d'appliquer une autre force externe. La valeur finale du frottement entre deux objets est déterminée à l'aide de la formule Math.min (bodyA.friction, bodyB.friction). frictionStatique key spécifie la valeur de la friction lorsqu'un corps est au repos. La valeur par défaut pour le frottement statique est 0.5. Une valeur plus élevée signifie qu'une plus grande force sera nécessaire pour faire bouger le corps.frictionAir La touche est utilisée pour spécifier la valeur du frottement entre un corps et l'air ambiant. Une valeur plus élevée signifie que le corps ralentira très rapidement lorsqu'il se déplacera dans les airs. L'effet du frottement de l'air est non linéaire.$ ('. red-friction'). on ('click', function () circleA.friction = 0.05; circleA.frictionAir = 0,0005; circleA.restitution = 0.9;); $ ('. res-friction'). on ('clic', fonction () circleA.friction = 0.1; circleA.frictionAir = 0.001; circleA.restitution = 0;);Jusqu'à présent, nous n'avons pas spécifié la couleur, la largeur du contour ni le style de trait à utiliser lors du rendu d'un corps. Toutes ces propriétés sont imbriquées dans le rendre clé. le fillStyle La propriété accepte une chaîne pour spécifier le style de remplissage rendant le corps. le largeur de ligne La propriété accepte un nombre définissant la largeur de ligne à utiliser lors de la création du contour d'un corps..
Une valeur de zéro signifie qu'aucune ligne ne sera rendue du tout. le strokeStyle Cette propriété peut être utilisée pour spécifier le style de trait à utiliser lors du rendu du contour du corps. Vous pouvez empêcher le rendu d’un corps en définissant le paramètre visible la clé de faux. L’opacité du corps à rendre peut être contrôlée à l’aide de la touche opacité clé.
Vous pouvez également utiliser une image au lieu de simples couleurs et contours pour restituer un corps. Les paramètres de rendu d'un corps à l'aide d'images-objets sont spécifiés à l'aide d'un ensemble de propriétés différent. le texture propriété définit le chemin de l'image à utiliser comme texture de sprite.
le xOffset et yOffset Les propriétés peuvent être utilisées pour définir le décalage dans les axes respectifs de l’image-objet. De même, vous pouvez utiliser le xScale et yScale propriétés pour définir la mise à l'échelle des axes x et y pour l'image-objet. Voici du code qui remplace le fond bleu clair de notre ballon par un sprite de football du site Web Open Game Art.
var ball = Bodies.circle (90, 280, 20, render: sprite: texture: "path / to / soccer_ball.png", xScale: 0.4, yScale: 0.4);
Vous avez déjà vu comment spécifier le frottement ou le coefficient de restitution d'un objet dans Matter.js. Il y a beaucoup d'autres propriétés dont les valeurs peuvent être spécifiées de la même manière. D'autre part, il y a des propriétés qui sont en lecture seule et que vous ne pouvez pas modifier.
Vous pouvez définir la position d’un corps dans le monde en utilisant le position clé, qui accepte un vecteur comme valeur. Vous pouvez également spécifier la masse d’un corps à l’aide des touches Masse propriété, mais vous devrez également définir une valeur pour le inverseMass propriété, qui est calculée en utilisant 1 / masse. Une meilleure façon de contrôler la masse d’un corps est d’aider le densité propriété.
Une fois que vous modifiez la densité d'un corps, sa masse sera calculée automatiquement en fonction de sa surface. De cette façon, vous pouvez également différencier différents objets en fonction de leur densité. Par exemple, un corps qui utilise un rocher comme image-objet doit avoir une densité supérieure à celle d'un corps de la même taille qui utilise un ballon de football comme son image-objet..
Certaines propriétés comme la vitesse, rapidité et vitesse angulaire sont en lecture seule, mais leurs valeurs peuvent être définies à l'aide de méthodes appropriées telles que setAngularVelocity () et setVelocity (). Vous pouvez en savoir plus sur les différentes propriétés du module Body dans la documentation..
Dans ce tutoriel, vous avez découvert toutes les méthodes et propriétés importantes du module Body de la bibliothèque Matter.js. Connaître ces différentes propriétés et leur rôle peut vous aider à créer des simulations plus réalistes de la physique réelle. Dans le prochain et dernier tutoriel de la série, vous découvrirez le module Composite dans Matter.js..
Si vous avez des questions concernant ce tutoriel ou des astuces pour utiliser la bibliothèque, n'hésitez pas à les partager avec nous..
