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

  1. tnpm install @eva/plugin-matterjs

In Browser

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

Usage

  1. // 1. Introduced after installing the physics engine
  2. import {PhysicsSystem, Physics, PhysicsType} from '@eva/plugin-matterjs';
  4. // 2. Register the plugin in EVA
  5. const game = new Game({
  6.   autoStart: true,
  7.   frameRate: 60,
  8.   systems: [
  9.     new RendererSystem({
  10.       transparent: true,
  11.       canvas: canvasNode,
  12.       backgroundColor: 0xfee79d,
  13.       width: 750,
  14.       height: 1624,
  15.       resolution: 2,
  16.     }),
  17.     new GraphicsSystem(),
  18.     new PhysicsSystem({
  19.       resolution: 2, // Keep the resolution of the RendererSystem consistent
  20.       // isTest: true, // Whether to enable debugging mode
  21.       // element: document.getElementById('game-container'), // Mount point of canvas node in debug mode
  22.       world: {
  23.         gravity: {
  24.           y: 2, // gravity
  25.         },
  26.       },
  27.       mouse: {
  28.         open: true,
  29.       },
  30.     }),
  31.     new TextSystem(),
  32.     new ImgSystem(),
  33.     new EventSystem(),
  34.   ],
  35. });
  37. // 3. New game entity object
  38. const box = new GameObject('box', {
  39.   size: {
  40.     width: 75,
  41.     height: 75,
  42.   },
  43.   position: {
  44.     x: 75 + Math.random() * 300,
  45.     y: 75,
  46.   },
  47.   // 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}
  48.   origin: {
  49.     x: 0.5,
  50.     y: 0.5,
  51.   },
  52. });
  53. // 4. Add Componet to the game object
  54. const physics = box.addComponent(
  55.   new Physics({
  56.     type: PhysicsType.RECTANGLE,
  57.     // body:{
  58.     // options:{
  60.     //}
  61.     //}
  62.     bodyOptions: {
  63.         isStatic: false, // Whether the object is still, any force acting on the object in a static state will not produce any effect
  64.         restitution: 0.8,
  65.         frictionAir: 0.1,
  66.         friction: 0,
  67.         frictionStatic: 0,
  68.         force: {
  69.           x: 0,
  70.           y: 0,
  71.         },
  72.     },
  73.     stopRotation: true, // default false, usually do not need to be set
  74.   }),
  75. );
  76. //Currently supported collision events collisionStart collisionActive collisionEnd
  77. //Rigid body events tick, beforeUpdate, afterUpdate, beforeRender, afterRender, afterTick usually use beforeUpdate and afterUpdate
  78. physics.on('collisionStart', (gameObject1, gameObject2) => {});
  80. 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.