Advertisement
  1. Code
  2. JavaScript

Empezando con Matter.js: Introducción

Scroll to top
Read Time: 7 min
This post is part of a series called Getting Started with Matter.js.
Getting Started With Matter.js: The Engine and World Modules

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Matter.js es un motor de física de cuerpos rígidos en 2D escrito en JavaScript. Esta biblioteca le puede ayudar fácilmente a simular física 2D en el navegador. Ofrece muchas funcionalidades como la habilidad de crear cuerpos rígidos y asignarles propiedades físicas como masa, área o densidad. También puede simular diferentes tipos de colisiones y fuerzas como la gravedad y la fricción.

Matter.js tiene soporte en todos los navegadores principales incluyendo IE8+. De manera adicional, es adecuado para usar en los dispositivos móviles ya que puede detectar toques y tiene capacidad de respuesta. Todas estas funcionalidades hacen que valga la pena invertir su tiempo en aprender a cómo usar el moto ya que cuando usted aprenda luego será capaz de crear juegos 2D basados en física o para simulaciones muy fáciles. En este tutorial abordaré lo más básico de esta librería, incluyendo su instalación y uso, y proporcionaré una muestra de trabajo.

Instalación

Usted puede instalar Matter.js usando gestores de paquetes como Bower o NPM con la ayuda de los siguientes comandos:

1
bower install matter-js
2
npm install matter-js

Además, puede conseguir un enlace a la biblioteca desde un CDN e incluirlo directamente en sus proyectos como:

1
<script src="path/to/matter.min.js"></script>

Un ejemplo simple

La mejor forma de aprender sobre Matter.js es ver algunos códigos actuales y entender cómo funciona. En esta sección, crearemos algunos cuerpos y recorreremos el código solicitado línea por línea.

1
var Engine = Matter.Engine,
2
    Render = Matter.Render,
3
    World = Matter.World,
4
    Bodies = Matter.Bodies;
5
    
6
var engine = Engine.create();
7
8
var render = Render.create({
9
                element: document.body,
10
                engine: engine,
11
                options: {
12
                    width: 800,
13
                    height: 400,
14
                    wireframes: false
15
                }
16
             });
17
             
18
var boxA = Bodies.rectangle(400, 200, 80, 80);
19
var ballA = Bodies.circle(380, 100, 40, 10);
20
var ballB = Bodies.circle(460, 10, 40, 10);
21
var ground = Bodies.rectangle(400, 380, 810, 60, { isStatic: true });
22
23
World.add(engine.world, [boxA, ballA, ballB, ground]);
24
25
Engine.run(engine);
26
Render.run(render);
27

Comencemos creando alias para todos los módulos principales de Matter.js que podríamos necesitar en nuestro proyecto. El módulo Matter.Engine contiene métodos para crear y manipular motores. Los motores son necesarios en un proyecto para actualizar la simulación del módulo world. El módulo Matter.Render es una composición HTML5 básica basada en la renderización.

El módulo Matter.World es usado para crear y manipular el mundo en el cual el motor funciona. Es similar al módulo Matter.Composite, pero éste le permite cambiar algunas propiedades adicionales como la gravity y bounds. El último módulo en nuestro código, llamado Matter.Bodies, nos permite crear objetos de cuerpos rígidos. Otro módulo similar llamado Matter.Body nos permite manipular los cuerpos individuales.

La siguiente línea de código usa el método create([settings]) del módulo Matter.Engine para crear un motor nuevo. El parámetro settings en el método anterior es en realidad un objeto con un par de valores: propiedad:valor, para anular los valores predeterminados de algunas propiedades relacionadas al motor.

Por ejemplo, usted puede controlar el factor de escala global de tiempo para todos los cuerpos en el mundo. Ajustando un valor menor que 1 resultará en la interacción con el mundo en cámara lenta. De manera similar, un valor mayor que 1 hará que el mundo camine más rápido. Usted aprenderá más sobre el módulo Matter.Engine en el siguiente tutorial de la serie.

Después de eso, usamos el método create([settings]) del módulo Matter.Render para crear un nuevo render. Igual que el módulo Engine, los ajustes de los parámetros en el método anterior son un objeto usado para especificar diferentes opciones para el parámetro. Usted puede usar la propiedad element para especificar el elemento donde la biblioteca deberá insertar el lienzo. De forma similar, usted puede usar la propiedad canvas para especificar el elemento canvas donde el mundo de Matter.js deberá ser renderizado.

Hay una propiedad engine que usted puede usar para especificar el motor que deberá ser usado para renderizar el mundo. Además, hay una propiedad options que en la actualidad acepta un objeto como su valor. Usted puede usar esta clave para ajustar valores para diferentes parámetros como width o height del lienzo. También puede activar o desactiva la estructura al ajustar el valor de la propiedad wireframe a true o false, respectivamente.

Las siguientes líneas de código crean diferentes cuerpos que interactuarán en nuestro mundo. Los cuerpos son creados con la ayuda del módulo Matter.Bodies en Matter.js. En este ejemplo, acabamos de crear dos círculos y un rectángulo usando los métodos circle() y rectangle(). Otros métodos están disponibles para crear diferentes polígonos.

Una vez que hayamos creado los cuerpos, necesitamos añadirlos a un mundo de nuestra elección usando el método add() desde el módulo Matter.World. Después de añadir los cuerpos necesarios a nuestro mundo, necesitamos hacer funcionar el motor y renderizarlo usando el método run() del módulo respectivo. Que es básicamente todos los códigos que usted necesita para crear y renderizar un mundo en Matter.js.

El código al comienzo de esta sección crea el siguiente resultado:

Módulos Matter.js Frecuentes

Hay más de 20 módulos diferentes en Matter.js. Todos estos módulos proporcionan diferentes métodos y propiedades que son útiles para crear diferentes tipos de simulaciones y le permiten interactuar con ellos.  Algunos de estos módulo manejan colisiones, mientras que otros manejan renderización y simulación.

El ejemplo en la sección anterior uso cuatro diferentes módulos para controlar la renderización, simulación y creación de cuerpos. En esta sección, usted aprenderá sobre los roles de algunos módulos frecuentes disponibles en Matter.js.

  • Engine: Usted necesita motores para actualizar las simulaciones de su mundo Matter.js. El módulo Engine ofrece diferentes métodos y propiedades que le permiten controlar el comportamiento de diferentes motores.
  • World: Éste módulo se le presenta con métodos y propiedades para crear y manipular mundos enteros a la vez. El World es en realidad un cuerpo Composite con propiedades adicionales como la gravedad y brincos.
  • Bodies: Los módulos Bodies contienen diferentes métodos para ayudarle a crear cuerpos rígidos con formas comunes como un círculo, rectángulo o trapezoídes. 
  • Body: Este módulo le ofrece diferentes métodos y propiedades para crear y manipular cuerpos rígidos que usted ha creado usando las funciones desde el módulo Bodies. Este módulo le permite cambar la escala, rotar y trasladar cuerpos individuales. Además, tiene funciones que le permiten verificar la velocidad, la densidad o la inercia de diferentes cuerpos. Debido a tantas funciones, el tercer tutorial en esta serie solamente aborda los métodos y propiedades disponibles en el módulo Body.
  • Composites: Al igual que los módulos Bodies, este módulo contiene diferentes métodos que usted puede usar para crear cuerpos composites con configuraciones comunes. Por ejemplo, usted puede crear una pila o una pirámide de cajas rectangulares usando un solo método con la ayuda del módulo Composites.
  • Composite: El módulo Composite tiene métodos y propiedades que le permiten crear y manipular cuerpos composites. Usted puede leer más sobre los módulos Composite y Composites en los cuatro tutoriales de la serie.
  • Constraint: Este módulo le permite crear y manipular restricciones. Usted puede usar una restricción para asegurarse de que dos cuerpos o un punto fijo en el mundo y un cuerpo mantiene una distancia fija. Es parecido a conectar dos cuerpos a través de un barra de hierro. Usted puede manipular la rigidez de estas restricciones para que la barra empiecen actuando más como un resorte. Matter.js usa restricciones cuando crea péndulo de Newton o una cadena composite.
  • MouseConstraint: Este módulo ofrece métodos y propiedades que le permiten crear y manipular las restricciones del mouse. Esto es útil cuando usted quiere diferentes cuerpos en el mundo para interactuar con el usuario.

Reflexiones finales

Este tutorial fue diseñado para presentarle la biblioteca Matter.js. Tenga en mente que he proporcionado una revisión rápida de las funcionalidades e instalación de la biblioteca. El ejemplo básico que involucro dos círculos y una caja que muestra cuán fácil es crear una simulación sencilla usando la biblioteca.

Ya que Matter.js tiene muchos módulos, cada uno agregando su método único para el motor, he escrito un breve resumen de algunos módulos comunes. El resto de la serie se enfocará en enseñarle sobre estos módulos comunes en más detalles.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.