Advertisement
  1. Code
  2. JavaScript

Empezando con Matter.js: Los módulos Engine y World

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: Introduction
Getting Started With Matter.js: The Body Module

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

En el tutorial de introducción de esta serie, le fueron presentados brevemente los diferentes módulos en Matter.js. La biblioteca contiene muchos módulos, por lo que seria poco factible escribir en detalles sobre cada uno de ellas en un solo tutorial. Después de leer la primera parte de la serie, ya debería de tener una idea general de la biblioteca y sus características.

En este tutorial, sólo nos concentraremos en el módulo World y Engine en la biblioteca Matter.js. El módulo World nos proporciona la necesidad de métodos y propiedades para crear y manipular el World composite. Puede usarlo para añadir o quitar diferentes instancias del módulo world. El módulo Engine contienen métodos para crear y manipular los engines que son flexibles para crear la simulación de su módulo world.

El Módulo World

En esta sección, aprenderá sobre los diferentes métodos, propiedades y eventos del módulo World. World es, en realidad, un Composite con propiedades normales como gravity y bounds que están agregadas en él. Aquí está la lista de los métodos más importantes en este módulo:

  • add(composite, object): Este método heredo desde el módulo Composite y le permite agregar uno o más body(s), composite(s) o constraint(s) para dar composite o world.
  • addBody(wold, body): Este método le permite agregar elementos body de forma individual para un módulo world. Además, hay métodos addComposite() y addConstraint() que le permiten agregar un composite o constraint al módulo world.

El siguiente código usa estos dos métodos para agregar diferentes bodies al módulo world. El método add() agrega tres rectángulos estáticos que actúan como paredes. El método addBody() agrega un círculo, cuadro o rectángulo mediante un botón sobre el cual un usuario ha realizado un clic.

1
var topWall = Bodies.rectangle(400, 0, 810, 30, { isStatic: true });
2
var leftWall = Bodies.rectangle(0, 200, 30, 420, { isStatic: true });
3
var ball = Bodies.circle(460, 10, 40, 10);
4
var bottomWall = Bodies.rectangle(400, 400, 810, 30, { isStatic: true });
5
6
World.add(engine.world, [topWall, leftWall, ball, bottomWall]);
7
8
9
var addCircle = function () {
10
 return Bodies.circle(Math.random()*400 + 30, 30, 30);
11
};
12
13
$('.add-circle').on('click', function () {
14
    World.add(engine.world, addCircle());
15
});

Usted puede ver que la propiedad isStatic ha sido ajustada a true para las tres paredes en nuestro módulo mundo. Al configurar esta propiedad a true para cualquier objeto, hace que el objeto sea completamente estático. El objeto nunca cambiará su posición o ángulo. Hay muchas otras propiedades que pueden ser especificadas para controlar el comportamiento de diferentes objetos. Usted aprenderá sobre todos ellos en el tutorial sobre el módulo Body de la serie.

  • remove( composite, object, [deep=false]): Este es un método genérico para eliminar uno o más body(s), composite(s) o constraint(s) de un módulo composite o world. Por ejemplo, usted podría usar la siguiente línea de código para eliminar las paredes de la parte de arriba y de la izquierda del módulo world.
1
World.remove(engine.world, [topWall, leftWall]);
  • clear( world, keepStatic): Este método es un alias para su contra parte Composite. Puede usarlo para eliminar todos los elementos del módulo world de una sola vez. El segundo parámetro es un Boolean que puede ser usado para evitar que sean declarados elementos static. Su valor es false de forma predeterminada. Esto significa que la llamada al método World.clear(world) eliminará todos los elementos de ese módulo world en particular.
  • rotate( composite, rotation, point, [recursive=true]):  Este método puede ser utilizado para rotar todos los elementos secundarios en un módulo world o composite mediante un ángulo específico alrededor del punto proporcionado. El ángulo asignado aquí está en radianes. El parámetro point determina el punto de rotación.
  • scale( composite, scaleX, scaleY, point, [recursive=true]): Usted puede usar este método para cambiar el tamaño de todos los elementos secundarios de su módulo composite o world por los valores determinados. Este método cambia todo, desde la anchura, altura, el área hasta la masa y la inercia.
  • translate(composite, translation, [recursive=true]): El método translate es útil cuando usted quiere trasladar o mover todos los elementos secundarios de un módulo world o composite mediante un determinado vector relativo para sus posiciones actuales.

Una cosa que usted debería de tener en mente es que ni translate() ni rotate() dan ningún tipo de velocidad a las instancias en el mundo. Cualquier movimiento que ocurra es solamente el resultado de los cambios en la forma o posición de diferentes instancias. Aquí están algunos códigos para la scale, rotate y translate un módulo world mediante clics en botones: 

1
$('.scale').on('click', function () {
2
    Matter.Composite.scale( engine.world, 0.5, 0.7, {x: 400, y: 200});
3
});
4
5
$('.rotate').on('click', function () {
6
    Matter.Composite.rotate( engine.world, Math.PI/4, {x: 400, y: 200});
7
});
8
9
$('.translate').on('click', function () {
10
    Matter.Composite.translate( engine.world, {x: 10, y: 10});
11
});

Usted debería de notar que el código anterior aplica a diferentes tamaños sobre los ejes X y Y.

Trate de presionar el botón Scale en el demo anterior. Después de eso, presione el botón Rotate para ver cuán cerca Matter.js imita el movimiento de la vida real de un ovalo.

Además de todos estos métodos, el módulo World tiene muchas propiedades útiles. Por ejemplo, usted puede obtener un array de todas las instancias que son descendientes directos del módulo composite usando el método world.bodies.  De manera similar, usted puede conseguir un array de todos los módulos composite y constraints usando los métodos world.composites y world.constraints.

También puede especificar los rebotes del módulo world dentro de la biblioteca Matter.js, la cual deberá detectar las colisiones usando el método world.bounds. Algo muy interesante que usted puede cambiar con las propiedades del módulo world es la gravedad. La gravedad a lo largo del eje X y Y está ajustada a 0 y 1 de manera predeterminada. Usted puede cambiar estos valores usando el método world.gravity.x y world.gravity.y, respectivamente.

Usted debería visitar la página para la documentación de Matter.World para leer más sobre este módulo.

El Módulo Engine

El módulo Engine es necesario para actualizar de manera apropiada la simulación del módulo world. Aquí está la lista de algunos métodos importantes del módulo Engine.

  • create([options]): Este método es útil cuando usted quiere crear un módulo engine nuevo. El parámetro options en este método es, en realidad, un objeto con un valores y propiedades. Usted puede usar las options para sobrescribir los valores predeterminados para diferentes propiedades del módulo engine. Por ejemplo, usted puede usar la propiedad timeScale para disminuir la velocidad de la simulación.
  • update(engine, [delta=16.666], [correction=1]): Este método moverá la simulación hacia adelante en tiempo por delta. El valor del parámetro correction especifica el factor tiempo de corrección a aplicar después de la actualización. Esta conexión es útil solamente cuando el delta cambia entre cada actualización.
  • merge(engineA, engineB): Este método combinará dos engines que se han especificado por el parámetro dado. Al combinarlos, la configuración será aplicada desde el engineA y el módulo world es conducido a engineB.

El módulo Engine también tiene muchas otras propiedades para ayudarle a controlar la calidad de la simulación. Usted puede ajustar el valor para constraintIterationspositionIterations o velocityIterations para especificar el número de iteraciones de constraint, position y velocity a realizar durante cada actualización. Un valor más alto en cada caso proporcionará una mejor simulación. Sin embargo, un valor más alto, negativamente afecta el rendimiento de la biblioteca.

Puede ajustar el valor para la propiedad timing.timeScale para controlar la velocidad en la cual ocurre la simulación. Cualquier valor debajo de 1 resultará en una simulación lenta. Ajustar esta propiedad en cero, hará que todo el módulo world se congele. El siguiente ejemplo aclarará este punto.

1
$('.slow-mo').on('click', function () {
2
    engine.timing.timeScale = 0.5;
3
});
4
5
$('.norm-mo').on('click', function () {
6
    engine.timing.timeScale = 1;
7
});
8
9
$('.fast-mo').on('click', function () {
10
    engine.timing.timeScale = 1.5;
11
});

Probablemente ya haya notado que las bolas están rebotando fuera del suelo. Cada cuerpo rígido tiene un coeficiente de restitución ajustado a 0 de forma predeterminada. Esto les da una propiedad semejante al barro y no rebota durante la colisión. He cambiado el valor de restitución a 1 para que las bolas puede rebotar con mucha facilidad.

Aprenderá sobre todas estas propiedades de los cuerpos rígidos en el siguiente tutorial de la serie. Por ahora, agregue algunos círculos o bolas al módulo world y trate de presionar botones para un movimiento lento y para uno rápido para que pueda notar la diferencia.

Debería visitar la página de la documentación Matter.Engine para leer más sobre este módulo:

Conclusión

Este tutorial discute dos módulos que son muy importantes en Matter.js y que usted necesita conocer para ejecutar simulaciones. Después de leer este tutorial, usted debería de poder cambiar el tamaño, la rotación, el movimiento lento o la velocidad de su módulo world. Ahora, ya sabe cómo eliminar o agregar m´doulos bodies a su world. Esto puede ser útil cuando usted está desarrollando juegos 2D.

En el siguiente tutorial de la serie, aprenderá sobre los diferentes métodos, propiedades y eventos disponibles en el módulo Bodies.

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.