Commencer avec Matter.js: Introduction

Matter.js est un moteur de physique du corps rigide 2D écrit en javascript. Cette bibliothèque peut vous aider à simuler facilement la physique 2D dans votre navigateur. Il fournit de nombreuses fonctionnalités, telles que la capacité de créer des corps rigides et d'attribuer des propriétés physiques telles que la masse, la zone ou la densité. Vous pouvez également simuler différents types de collisions et de forces, tels que la frottement de gravité.

Matter.js prend en charge tous les navigateurs grand public. De plus, il convient aux appareils mobiles car il détecte les touches et est réactif. Toutes ces fonctionnalités font de votre temps pour apprendre à utiliser le moteur, car cela facilite la création d'un jeu ou d'une simulation 2D basé sur la physique. Dans ce didacticiel, je couvrirai les bases de cette bibliothèque, y compris son installation et son utilisation, et fournirai un exemple géré.

Installation

Vous pouvez installer Matter.js avec la commande suivante à l'aide d'un gestionnaire de packages comme NPM:

npm install matter-js

Vous pouvez également obtenir des liens vers la bibliothèque à partir du CDN et l'inclure directement dans votre projet comme celui-ci:

<!-- CDN链接 -->

Matter.js publie fréquemment des mises à jour, ce qui peut nécessiter quelques modifications mineures de votre code pour que cela fonctionne correctement. Les exemples de ce tutoriel sont basés sur la version 0.18.0.

un exemple de base

La meilleure façon d'apprendre la matière.js est de regarder un code réel et de comprendre comment cela fonctionne. Dans cette section, nous créerons des objets et présenterons le code requis ligne par ligne.

const Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

const iEngine = Engine.create();
const iRunner = Runner.create();

const iRender = Render.create({
  element: document.body,
  engine: iEngine,
  options: {
    width: 800,
    height: 400,
    wireframes: false,
    background: "white"
  }
});

const boxA = Bodies.rectangle(400, 200, 80, 80);
const ballA = Bodies.circle(380, 100, 40, 10);
const ballB = Bodies.circle(460, 10, 40, 10);
const ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });

Composite.add(iEngine.world, [boxA, ballA, ballB, ground]);

Render.run(iRender);

Runner.run(iRunner, iEngine);

Nous créons d'abord des alias pour tous les modules Matter.js qui peuvent être nécessaires dans le projet.

Matter.Runner Le module vous permet d'accéder à la boucle de jeu pour des mises à jour continues du moteur et de votre monde.

Le module Matter ..Composite vous permet de créer des collections, des contraintes ou d'autres objets composites d'objets. Un complexe peut contenir un seul objet ou une simulation entière.

La ligne suivante utilise la méthode Matter.Engine du module create([settings]) pour créer un nouveau moteur. De même, nous avons également créé un nouveau coureur et un nouveau rendu. Le paramètre settings dans la méthode ci-dessus est en fait un objet de paire de valeurs de clé qui écrase les valeurs par défaut de certaines propriétés liées au moteur. Pour notre exemple, nous avons tout laissé par défaut.

Par exemple, vous pouvez contrôler le facteur mondial de mise à l'échelle du temps pour tous les objets du monde. La définition d'une valeur inférieure à 1 amènera le monde à interagir au ralenti. De même, des valeurs supérieures à 1 rendront le monde rapide. Vous en apprendrez plus sur le module Matter.Engine dans le prochain tutoriel de cette série.

Après

, nous utilisons la méthode Matter.Render du module create([settings]) pour créer un nouveau rendu. Comme le module du moteur, le paramètre Paramètres dans la méthode ci-dessus est un objet pour spécifier différentes options pour le paramètre. Vous pouvez utiliser la touche element pour spécifier les éléments que la bibliothèque doit insérer dans le canevas. De même, vous pouvez également utiliser la clé canvas pour spécifier les éléments de canevas qui devraient rendre le monde de questions.js.

Il existe une clé engine que vous pouvez utiliser pour spécifier le moteur que vous appliquez au monde de rendu. Il existe également une clé options 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 width ou height de la toile. Vous pouvez également allumer ou désactiver le filon en définissant la valeur de la touche wireframe à true ou false respectivement. Nous faisons également la couleur de la toile dans notre monde blanc en définissant la valeur de l'arrière-plan en blanc.

Les prochaines lignes créent différents objets qui interagiront dans notre monde. Ces objets sont créés dans Matter.js en utilisant le module Matter.Bodies. Dans cet exemple, nous utilisons uniquement les méthodes circle() et rectangle() pour créer deux cercles et un rectangle. D'autres méthodes peuvent également être utilisées pour créer différents polygones.

Après avoir créé des objets, nous devons les ajouter au monde de notre choix en utilisant la méthode

dans le module Matter.Composite. Après avoir ajouté les objets nécessaires à notre monde, nous avons juste besoin d'exécuter le coureur et le rendu en utilisant la méthode add() dans nos modules respectifs. Il s'agit essentiellement de tout le code dont vous avez besoin pour créer et rendre dans le monde de la matière.js. run()

Le code au début de cette section crée les résultats suivants.

modules de matière commune.js

Il y a plus de 20 modules différents dans la matière.js. Tous ces modules fournissent différentes méthodes et propriétés qui sont utiles pour créer différents types de simulations et vous permettent d'interagir avec eux. Certains de ces modules gèrent les collisions, tandis que d'autres gèrent le rendu et la simulation.

Les exemples de la section précédente utilisent quatre modules différents pour gérer le rendu, la simulation et la création d'objets. Dans cette section, vous découvrirez le rôle de certains modules couramment utilisés dans la matière.js.

• moteur : Vous avez besoin d'un moteur pour mettre à jour la simulation du monde de la matière.js. Le module Engine fournit différentes méthodes et propriétés qui vous permettent de contrôler le comportement de différents moteurs.
• Render : Un rendu est nécessaire pour créer un objet réel que l'utilisateur peut voir dans la simulation. Vous pouvez l'utiliser pour développer des jeux de base qui soutiennent les elfes et plus encore.
• Runner : Les objets dans n'importe quel monde que vous simulez interagiront constamment les uns avec les autres. Le module Runner gère ces mises à jour continues du moteur et du monde.
• corps : Bodies Le module contient différentes méthodes qui peuvent vous aider à créer des corps rigides avec des formes communes telles que les cercles, les rectangles ou les trapézoïdes.
• corps : Ce module vous fournit différentes méthodes et propriétés pour créer et manipuler les corps rigides que vous créez en utilisant des fonctions dans le module Bodies. Ce module vous permet de faire évoluer, de tourner ou de traduire un seul objet. Il a également des fonctions qui vous permettent de spécifier la vitesse, la densité ou l'inertie de différents objets. Puisqu'il existe de nombreuses fonctions, le troisième tutoriel de cette série ne traite que des méthodes et des propriétés disponibles dans le module Body.
• Composites : Similaire au module Bodies, ce module contient différentes méthodes que vous pouvez utiliser pour créer des objets 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 dans le module Composites.
• Composite : Composite Le module a différentes méthodes et propriétés qui vous permettent de créer et de manipuler des objets composites. Vous pouvez en savoir plus sur les modules Composite et Composites dans le quatrième tutoriel de cette série.
• Contrainte : Ce module vous permet de créer et de manipuler les contraintes. Vous pouvez utiliser des contraintes pour vous assurer que deux objets ou un point d'espace mondial fixe et un objet sont conservés à une distance fixe. Ceci est similaire à la connexion de deux objets par le renforcement. Vous pouvez modifier la rigidité de ces contraintes afin que la tige commence à ressembler davantage à un ressort. Matter.js utilise des contraintes lors de la création de complexes de pendule ou de chaîne newtonien.
• Mouseconstraint : Ce module vous fournit différentes méthodes et propriétés qui vous permettent de créer et de manipuler les contraintes de souris. Ceci est utile lorsque vous voulez que différents objets du monde interagissent avec l'utilisateur.

la pensée finale

Ce tutoriel est destiné à vous présenter la bibliothèque Matter.js. Dans cet esprit, j'ai donné un aperçu rapide de la fonctionnalité et de l'installation de la bibliothèque. L'exemple de base impliquant deux cercles et un carré montre à quel point il est facile de créer une simulation simple à l'aide de la bibliothèque.

Puisque Matter.js a de nombreux modules, chacun ajoutant sa propre approche unique au moteur, j'ai déjà fait un bref résumé de certains modules communs. Le reste de cette série se concentrera sur l'explication de ces modules couramment utilisés.

Ce message a été mis à jour avec les contributions de Monty Shokeen. Monty est un développeur complet qui aime également écrire des tutoriels et apprendre de nouvelles bibliothèques JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!