Share
Matter.js est un moteur de physique de corps rigide 2D écrit en JavaScript. Cette bibliothèque peut vous aider à simuler facilement la physique 2D dans le navigateur. Il offre de nombreuses fonctionnalités telles que la possibilité de créer des corps rigides et de leur attribuer des propriétés physiques telles que la masse, la surface ou la densité. Vous pouvez également simuler différents types de collisions et de forces telles que la gravité et le frottement..
Matter.js supporte tous les principaux navigateurs, y compris IE8 +. De plus, il convient aux appareils mobiles car il peut détecter le toucher et est réactif. Toutes ces fonctionnalités font qu'il vaut la peine d'investir votre temps pour apprendre à utiliser le moteur, car vous serez alors en mesure de créer facilement des jeux ou des simulations 2D basés sur la physique. Dans ce tutoriel, je couvrirai les bases de cette bibliothèque, y compris son installation et son utilisation, et je fournirai un exemple de travail..
Vous pouvez installer Matter.js à l'aide de gestionnaires de packages tels que Bower ou NPM à l'aide des commandes suivantes:
bower installe-js npm installe-js
Vous pouvez également obtenir un lien vers la bibliothèque à partir d'un CDN et l'inclure directement dans vos projets, comme ceci:
Le meilleur moyen d’en savoir plus sur Matter.js est de voir du code et de comprendre son fonctionnement. Dans cette section, nous allons créer quelques corps et parcourir le code requis ligne par ligne..
var Engine = Matter.Engine, Render = Matter.Render, Monde = Matter.World, Bodies = Matter.Bodies; var engine = Engine.create (); var render = Render.create (élément: document.body, moteur: moteur, options: largeur: 800, hauteur: 400, images filaires: false); var boxA = Corps.rectangle (400, 200, 80, 80); var ballA = Bodies.circle (380, 100, 40, 10); var ballB = corps.circle (460, 10, 40, 10); var ground = Bodies.rectangle (400, 380, 810, 60, isStatic: true); World.add (engine.world, [boxA, ballA, ballB, sol]); Moteur.run (moteur); Render.run (render);
Nous commençons par créer des alias pour tous les modules Matter.js dont nous pourrions avoir besoin dans notre projet. le Matière.Engine module contient des méthodes pour créer et manipuler des moteurs. Des moteurs sont nécessaires dans un projet pour mettre à jour la simulation du monde. le Matter.Render module est un moteur de rendu HTML5 de base basé sur la toile. Ce module est nécessaire pour visualiser différents moteurs.
le Matter.World Le module est utilisé pour créer et manipuler le monde dans lequel tourne le moteur. C'est semblable à la Matière.Composite module, mais il vous permet de modifier quelques propriétés supplémentaires comme la gravité et bornes. Le dernier module de notre code, appelé Matière.Bodies, vous permet de créer des objets de corps rigide. Un autre module similaire appelé Matter.Body vous permet de manipuler des corps individuels.
La ligne suivante utilise le créer ([paramètres]) méthode du Matière.Engine module pour créer un nouveau moteur. le réglages paramètre dans la méthode ci-dessus est en fait un objet avec des paires clé-valeur pour remplacer les valeurs par défaut de quelques propriétés liées au moteur.
Par exemple, vous pouvez contrôler le facteur temporel global de mise à l'échelle pour tous les organismes du monde. Si vous définissez une valeur inférieure à 1, le monde interagira au ralenti. De même, une valeur supérieure à 1 accélérera le monde. Vous en apprendrez plus sur le Matière.Engine module dans le prochain tutoriel de la série.
Après cela, nous utilisons le créer ([paramètres]) méthode du Matter.Render module pour créer un nouveau moteur de rendu. Tout comme le module Moteur, le paramètre settings de la méthode ci-dessus est un objet utilisé pour spécifier différentes options pour le paramètre. Vous pouvez utiliser le élément clé pour spécifier l'élément où la bibliothèque doit insérer le canevas. De même, vous pouvez également utiliser le Toile key pour spécifier l'élément canvas où le monde Matter.js doit être rendu.
Il y a un moteur clé que vous pouvez utiliser pour spécifier le moteur à utiliser pour rendre le monde. Il y a aussi un options clé qui accepte réellement un objet comme valeur. Vous pouvez utiliser cette clé pour définir des valeurs pour différents paramètres tels que largeur ou la taille de la toile. Vous pouvez également activer ou désactiver les structures filaires en définissant la valeur de fil de fer la clé de vrai ou faux respectivement.
Les lignes suivantes créent différents corps qui interagiront dans notre monde. Les corps sont créés avec l'aide du Matière.Bodies module dans Matter.js. Dans cet exemple, nous venons de créer deux cercles et un rectangle en utilisant le cercle() et rectangle() méthode. D'autres méthodes sont également disponibles pour créer différents polygones.
Une fois que nous avons créé les corps, nous devons les ajouter à un monde de notre choix en utilisant le ajouter() méthode de la Matter.World module. Après avoir ajouté les corps nécessaires à notre monde, il suffit de lancer le moteur et le moteur de rendu à l’aide du courir() méthode des modules respectifs. C'est fondamentalement tout le code dont vous avez besoin pour créer et rendre un monde dans Matter.js.
Le code au début de cette section crée le résultat suivant.
Il y a plus de 20 modules différents dans Matter.js. Tous ces modules fournissent différentes méthodes et propriétés utiles pour créer différents types de simulations et vous permettent d’interagir avec elles. Certains de ces modules traitent les collisions, tandis que d’autres gèrent le rendu et la simulation..
L'exemple de la section précédente utilisait quatre modules différents pour gérer le rendu, la simulation et la création de corps. Dans cette section, vous découvrirez les rôles de certains modules courants disponibles dans Matter.js..
Accentsconagua
Moteur Le module fournit différentes méthodes et propriétés qui vous permettent de contrôler le comportement de différents moteurs..Monde est en fait un Composite corps avec des propriétés supplémentaires comme la gravité et les limites.Corps module contient différentes méthodes pour vous aider à créer des corps rigides avec des formes communes comme un cercle, un rectangle ou un trapèze.Corps module. Ce module vous permet de redimensionner, de faire pivoter ou de traduire des corps individuels. Il a également des fonctions pour vous permettre de spécifier la vitesse, la densité ou l’inertie de différents corps. En raison de tant de fonctions, le troisième tutoriel de cette série ne traite que des méthodes et des propriétés disponibles dans le module Corps..Corps module, ce module contient différentes méthodes que vous pouvez utiliser pour créer des corps composites avec des configurations communes. Par exemple, vous pouvez créer une pile ou une pyramide de boîtes rectangulaires en utilisant une seule méthode à l’aide de Matériaux composites module.Composite Le module a des méthodes et des propriétés qui vous permettent de créer et de manipuler des corps composites. Vous pouvez en savoir plus sur le Composite et Matériaux composites modules dans le quatrième tutoriel de la série.Ce tutoriel était destiné à vous présenter la bibliothèque Matter.js. Gardant cela à l'esprit, j'ai fourni un bref aperçu des fonctionnalités et de l'installation de la bibliothèque. L'exemple de base impliquant deux cercles et un cadre montre à quel point il est facile de créer des simulations simples à l'aide de la bibliothèque..
Puisque Matter.js a beaucoup de modules, chacun d’eux ajoutant ses propres méthodes au moteur, j’ai écrit un bref résumé de quelques modules communs. Le reste de la série se concentrera sur vous apprendre plus en détail sur ces modules communs.
