MatterJS

Introduction

Eva.js base on Matterjs, At present, only a small part of the content has been accessed. If more content is needed, continue to access it.

Install

With NPM

tnpm install @eva/plugin-matterjs

In Browser

<script src="https://unpkg.com/@eva/plugin-matterjs@1.2.x/dist/EVA.plugin.renderer.matterjs.min.js"></script>

Usage

// 1. Introduced after installing the physics engine
import {PhysicsSystem, Physics, PhysicsType} from '@eva/plugin-matterjs';

// 2. Register the plugin in EVA
const game = new Game({
  autoStart: true,
  frameRate: 60,
  systems: [
    new RendererSystem({
      transparent: true,
      canvas: canvasNode,
      backgroundColor: 0xfee79d,
      width: 750,
      height: 1624,
      resolution: 2,
    }),
    new GraphicsSystem(),
    new PhysicsSystem({
      resolution: 2, // Keep the resolution of the RendererSystem consistent
      // isTest: true, // Whether to enable debugging mode
      // element: document.getElementById('game-container'), // Mount point of canvas node in debug mode
      world: {
        gravity: {
          y: 2, // gravity
        },
      },
      mouse: {
        open: true,
      },
    }),
    new TextSystem(),
    new ImgSystem(),
    new EventSystem(),
  ],
});

// 3. New game entity object
const box = new GameObject('box', {
  size: {
    width: 75,
    height: 75,
  },
  position: {
    x: 75 + Math.random() * 300,
    y: 75,
  },
  // Origin will be mapped to the center of mass of the physical system, which is the geometric center of the physics in a two-dimensional environment. It must be fixed here as {x:0.5,y:0.5}
  origin: {
    x: 0.5,
    y: 0.5,
  },
});
// 4. Add Componet to the game object
const physics = box.addComponent(
  new Physics({
    type: PhysicsType.RECTANGLE,
    // body:{
    // options:{

    //}
    //}
    bodyOptions: {
        isStatic: false, // Whether the object is still, any force acting on the object in a static state will not produce any effect
        restitution: 0.8,
        frictionAir: 0.1,
        friction: 0,
        frictionStatic: 0,
        force: {
          x: 0,
          y: 0,
        },
    },
    stopRotation: true, // default false, usually do not need to be set
  }),
);
//Currently supported collision events collisionStart collisionActive collisionEnd
//Rigid body events tick, beforeUpdate, afterUpdate, beforeRender, afterRender, afterTick usually use beforeUpdate and afterUpdate
physics.on('collisionStart', (gameObject1, gameObject2) => {});

console.log("physics",physics);

参数

type PhysicsType

rigid body model shape.

• RECTANGLE
• CIRCLE
• POLYGON regular polygon

sides

Number of sides while type with POLYGON.

radius

The radius of POLYGON / CIRCLE.

bodyOptions

Visiting Matterjs offical to learn more.