npm install matter-maps-creator
yarn add matter-maps-creator
| Classes | Utility |
|---|
| Map | This is one of the main classes of the project, it serves to rederize the map, create and add objects to the world. |
| Animations | Adds animations to bodies. |
| Particles | Create particles in the world. WARN: IT'S STILL IN TESTS. |
| Methods | Utility |
|---|
| addCustom | Add a custom body. parameters: bodies, callback? |
| addRectangle | Add a rectangle body. parameters: x, y, w, h, color, callback? |
| addCircle | Add a circle body. parameters: x, y, r, color, callback? |
| addPolygon | Add a polygon body. parameters: x, y, s, r, color, callback? |
| addTrapezoid | Add a trapezoid body. parameters: x, y, w, h, sl, color, callback? |
| platform | Add a platform to map. parameters: x, y, size, color, callback? |
| wreckingball | Add a wreckingball to map. parameters: x, y, size, color, length, chainWidth, chainColor, callback?. |
| ragdoll | Add a ragdoll to map. parameters: x, y, scale, color, callback?. |
| car | Add a car to map. parameters: x, y, size, color, wheelAColor, wheelBColor, callback?. |
| chain | Add a chain to map. parameters: x, y, size, length, color, callback?. |
| bridge | Add a bridge to map. parameters: x, y, size, length, color, callback?. |
| build | This method being the last to be invoked, to render the map. parameters: callback?. |
// setup.js
import { Composite, Engine, Mouse, MouseConstraint, Render, Runner } from 'matter-js';
function setup() {
const engine: Engine = Engine.create();
const render: Render = Render.create({
element: document.body,
engine: engine,
options: {
width: window.innerWidth,
height: window.innerHeight
}
});
Render.run(render);
const runner: Runner = Runner.create();
Runner.run(runner, engine);
return {
engine: engine,
render: render,
runner: runner
};
}
export default setup;
// mapUseExample.js
import { Map } from 'matter-maps-creator';
import setup from 'setup.js';
const { engine } = setup();
const worldXSize = 30000;
const worldYSize = 15000;
const walls = true;
const map = new Map(engine, worldXSize, worldYSize, walls);
map.addRectangle(3000, 3000, 200, 200, '#005');
map.ragdoll(4000, 4000, 5, '#005');
const platform = map.platform(6000, 5000, 1200, '#606090');
console.log(`Platform: ${platform.id} has rendered.`);
map.build(() => console.log('The map was built and rendered.'));
| Methods | Utility |
|---|
| rotate | Rotates a body constantly. parameters: body, rotation |
| moveLeft | Constantly moves one body to the left. parameters: body, distance, speed |
| moveRight | Constantly moves one body to the right. parameters: body, distance, speed |
| moveUp | Constantly moves one body to the up. parameters: body, distance, speed |
| moveDown | Constantly moves one body to the down. parameters: body, distance, speed |
| trail | Create a trail through which the body passes. parameters: body, disappearAfter, appearWhenSpeed, color |
| cameraFocus | The camera will then follow the body or bodies. parameters: bodies, zoom, center |
// setup.js
import { Composite, Engine, Mouse, MouseConstraint, Render, Runner } from 'matter-js';
function setup() {
const engine: Engine = Engine.create();
const render: Render = Render.create({
element: document.body,
engine: engine,
options: {
width: window.innerWidth,
height: window.innerHeight
}
});
Render.run(render);
const runner: Runner = Runner.create();
Runner.run(runner, engine);
return {
engine: engine,
render: render,
runner: runner
};
}
export default setup;
// mapUseExample.js
import { Map, Animations } from 'matter-maps-creator';
import setup from 'setup.js';
const { engine, render } = setup();
const worldXSize = 30000;
const worldYSize = 15000;
const walls = true;
const map = new Map(engine, worldXSize, worldYSize, walls);
const animations = new Animations(engine, render);
const player = map.addRectangle(2500, 500, 200, 200, '#005');
animations.cameraFocus(player, 20, true);
const platform = map.platform(2500, 3000, 1200, '#606090');
animations.moveRight(platform, 700, 0.014);
animations.moveDown(platform, 900, 0.018);
map.build(() => console.log('The map was built and rendered.'));
| Methods | Utility |
|---|
| directional | It generates directional particles. parameters: options |
| explosion | It generates explosion of particles. parameters: options |
| trail | Create a trail through which the body passes. parameters: options |
| stop | Stop the execution of the particle creation. parameters: executeDelay |
// setup.js
import { Composite, Engine, Mouse, MouseConstraint, Render, Runner } from 'matter-js';
function setup() {
const engine: Engine = Engine.create();
const render: Render = Render.create({
element: document.body,
engine: engine,
options: {
width: window.innerWidth,
height: window.innerHeight
}
});
Render.run(render);
const runner: Runner = Runner.create();
Runner.run(runner, engine);
return {
engine: engine,
render: render,
runner: runner
};
}
export default setup;
// mapUseExample.js
import { Map, Animations, Particles } from 'matter-maps-creator';
import setup from 'setup.js';
const { engine, render } = setup();
const worldXSize = 30000;
const worldYSize = 15000;
const walls = true;
const map = new Map(engine, worldXSize, worldYSize, walls);
const animations = new Animations(engine, render);
const playerParticle = new Particles(engine, 50, 300);
const player = map.addRectangle(2500, 500, 200, 200, '#005');
animations.cameraFocus(player, 20, true);
setInterval(() => {
playerParticle.explosion({
x: player.position.x,
y: player.position.y,
size: 15,
initialForce: 0.1,
color: '#005',
collision: false
});
}, 500);
const platformParticle = new Particles(engine, 50, 800);
const platform = map.platform(2500, 3000, 1700, '#606090');
platformParticle.directional({
x: platform.position.x,
y: platform.position.y,
maxX: 1200,
maxY: 500,
force: { x: 0, y: -0.1 },
size: 15,
color: '#005',
collision: false
});
map.build(() => console.log('The map was built and rendered.'));