LogoEricZhan
cover_photo

2d物理引擎初探

matterjs初體驗

matterjs 的套件元素

1. engine 引擎

The Matter.Engine module contains methods for creating and manipulating engines. An engine is a controller that manages updating the simulation of the world. See Matter.Runner for an optional game loop utility.

2. render 渲染器

The Matter.Render module is a simple canvas based renderer for visualising instances of Matter.Engine. It is intended for development and debugging purposes, but may also be suitable for simple games. It includes a number of drawing options including wireframe, vector with support for sprites and viewports.

3. runner 物理更新循環

The Matter.Runner module is an optional utility which provides a game loop, that handles continuously updating a Matter.Engine for you within a browser. It is intended for development and debugging purposes, but may also be suitable for simple games. If you are using your own game loop instead, then you do not need the Matter.Runner module. Instead just call Engine.update(engine, delta) in your own loop.

4. Body 剛體

The Matter.Body module contains methods for creating and manipulating rigid bodies. For creating bodies with common configurations such as rectangles, circles and other polygons see the module Matter.Bodies.

5. Composite

A composite is a collection of Matter.Body, Matter.Constraint and other Matter.Composite objects.

They are a container that can represent complex objects made of multiple parts, even if they are not physically connected. A composite could contain anything from a single body all the way up to a whole world.

When making any changes to composites, use the included functions rather than changing their properties directly.

設置步驟

設置步驟

1. 引入函式庫

p.s. 由於我是用p5js的線上編輯器，所以我是直接複製matterjs的min檔

<html>
<head>
  <script src="matter.js"></script>
</head>
...
</html>

也可以使用npm 匯入

npm install matter-js

2. 初始化matterjs引擎

var Engine = Matter.Engine,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;
    

// create an engine
var engine = Engine.create();

// create a renderer
//由於渲染的部分交給p5js所以這部分直接註解掉
/*
var Render = Matter.Render;
var render = Render.create({
    element: document.body,
    engine: engine
});
*/

3. 加入剛體到世界

// create two boxes and a ground
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });

// add all of the bodies to the world
Composite.add(engine.world, [boxA, boxB, ground]);

4. 整合p5js

這個步驟最主要是建立p5js的選染 並利用matterjs的資料更新p5js

const width=400, height=400
const mouseCollideRadius = 30;
// module aliases
var Engine = Matter.Engine,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

// create an engine
var engine,boxA,boxB,ground;

function setup() {
  createCanvas(400, 400);
  engine = Engine.create();

  boxA = Bodies.rectangle(width/2, height/2, 80, 80);
  boxB = Bodies.rectangle(width/3, 50, 80, 80);
  ground = Bodies.rectangle(width, height, 810, 60, { isStatic: true });
  Composite.add(engine.world, [boxA, boxB, ground]);
  var runner = Runner.create();
  Runner.run(runner, engine);

}

function draw() {
  background(220);
  circle(mouseX, mouseY, mouseCollideRadius);
  rect(boxA.position.x, boxA.position.y, 80,80 );
  rect(boxB.position.x, boxA.position.y, 80,80 );
}

online demo :