2021-08-06 15-18-07.gif
????Matter.js官方地址
本篇文章主要基于
Matter.js的個別案例進行了注釋，注釋大多為個人理解，需要了解更多的可查看 官方文檔
使用方法
- js引入
<script src="matter.js"></script>
- npm安裝
npm install matter-js
import Matter from 'matter-js'
- html
<div id="canvas"></div>
image.png
基本使用
2021-08-06 15-09-11.gif
/**
* Engine 是引擎
* Render 是渲染器
* Runner 是表演環(huán)境
* Bodies 可以用來創(chuàng)建各種形狀的物體。
* Vertices 模塊包含用于創(chuàng)建和處理頂點集的方法
* Mouse 模塊包含用于創(chuàng)建和操作鼠標輸入的方法
* MouseConstraint 用于創(chuàng)建鼠標約束的方法。鼠標約束用于允許用戶交互，提供通過鼠標或觸摸移動身體的能力。
* Common 模塊包含所有模塊共有的實用程序功能
* Composites 模塊包含用于創(chuàng)建具有常用配置（例如，堆棧和鏈）的復合實體的工廠方法
*/
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Vertices = Matter.Vertices;
// 創(chuàng)建一個引擎
var engine = Engine.create();
//render(渲染器)將要渲染的物理引擎是之前所創(chuàng)建的engine，而渲染的對象是html網頁的body
var render = Render.create({
element: document.getElementById('canvas'), //渲染容器
engine: engine, //引擎
options: {
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: 1.5, // 設置像素比 越高越清楚 越耗性能
background: '#fafafa', // 全局渲染模式時背景色 線框模式為 false 生效
wireframeBackground: '#222', // 線框模式時背景色 線框模式為 true 生效
hasBounds: false,
enabled: true,
wireframes: true, // 線框模式
showSleeping: true, // 剛體睡眠狀態(tài)
showDebug: false, // Debug 信息
showBroadphase: false, // 粗測階段
showBounds: false, // 剛體的界限
showVelocity: false, // 移動剛體時速度
showCollisions: false, // 剛體碰撞點
showSeparations: false, // 剛體分離
showAxes: false, // 剛體軸線
showPositions: false, // 剛體位置
showAngleIndicator: false, // 剛體轉角指示
showIds: false, // 顯示每個剛體的 ID
showVertexNumbers: false, // 剛體頂點數(shù)
showConvexHulls: false, // 剛體凸包點
showInternalEdges: false, // 剛體內部邊界
showMousePosition: false // 鼠標約束線
}
});
//參數(shù)(500,170,40,260）中，前兩個是物體坐標，后兩個分別是寬度和長度。
//需要注意的是，這里的坐標系統(tǒng)中，500和170是矩形的中心所在位置
//而html的canvas中坐標描述的是矩形的左上角。
var boxA = Bodies.rectangle(400, 200, 80, 80);
var boxB = Bodies.rectangle(450, 50, 80, 80);
//將isStatic設為true，即是靜止的
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// 把所有的身體加到世界上
Composite.add(engine.world, [boxA, boxB, ground]);
// run the renderer
Render.run(render);
// create runner
var runner = Runner.create();
// run the engine
Runner.run(runner, engine);
基礎圖形創(chuàng)建
2021-08-06 15-28-02.gif
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Vertices = Matter.Vertices;
var engine = Engine.create();
var render = Render.create({
element: document.getElementById('canvas'), //渲染容器
engine: engine, //引擎
options: {
width: window.innerWidth,
height: window.innerHeight,
pixelRatio: 1.5,// 設置像素比 越高越清楚 越耗性能
wireframes: false, // 線框模式
}
})
// 矩形創(chuàng)建 https://brm.io/matter-js/docs/classes/Bodies.html#method_rectangle
var rectangle = Bodies.rectangle(400, 200, 80, 80);
// 圓形創(chuàng)建 https://brm.io/matter-js/docs/classes/Bodies.html#method_circle
var circle = Bodies.circle(450, 50, 40)
// 頂點創(chuàng)建復合實體 https://brm.io/matter-js/docs/classes/Bodies.html#method_fromVertices
var star = Bodies.fromVertices(200, 200, Vertices.fromPath('50 0 63 38 100 38 69 59 82 100 50 75 18 100 31 59 0 38 37 38'));
// 多邊形創(chuàng)建 https://brm.io/matter-js/docs/classes/Bodies.html#method_polygon
// 3邊 半徑為60
var polygon = Bodies.polygon(200, 460, 3, 60);
// 梯形創(chuàng)建
var trapezoid = Bodies.trapezoid(200, 10, 50, 50, .5)
//創(chuàng)建一個地面 將isStatic設為true，即是靜止的
var ground = Bodies.rectangle(400, 610, 810, 60, { isStatic: true });
// 把所有的身體加到世界上
Composite.add(engine.world, [rectangle, circle, star, polygon, trapezoid, ground]);
// run the renderer
Render.run(render);
// create runner
var runner = Runner.create();
// run the engine
Runner.run(runner, engine);
添加鼠標控制
2021-08-06 15-28-20.gif
// 案列 https://brm.io/matter-js/demo/#airFriction
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
//* Mouse 模塊包含用于創(chuàng)建和操作鼠標輸入的方法
//* MouseConstraint 用于創(chuàng)建鼠標約束的方法。鼠標約束用于允許用戶交互，提供通過鼠標或觸摸移動身體的能力。
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse;
// 創(chuàng)建一個引擎
var engine = Engine.create(),
// 引擎內的世界
world = engine.world;
//渲染配置屬性
var render = Render.create({
element: document.getElementById('canvas'),
engine: engine,
options: {
width: window.innerWidth,
height: window.innerHeight,
showVelocity: true
}
});
// 開始渲染
Render.run(render);
// 開始運行和加載引擎
var runner = Runner.create();
Runner.run(runner, engine);
// 添加 物理塊
Composite.add(world, [
// 下降的方塊 frictionAir 空氣的摩擦阻力
Bodies.rectangle(200, 100, 60, 60, { frictionAir: 0.001 }),
Bodies.rectangle(400, 100, 60, 60, { frictionAir: 0.05 }),
Bodies.rectangle(600, 100, 60, 60, { frictionAir: 0.1 }),
// 創(chuàng)建靜止墻面
Bodies.rectangle(400, 0, 800, 50, { isStatic: true }),
Bodies.rectangle(400, 600, 800, 50, { isStatic: true }),
Bodies.rectangle(800, 300, 50, 600, { isStatic: true }),
Bodies.rectangle(0, 300, 50, 600, { isStatic: true })
]);
// 添加鼠標控制事件---------------------------------
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
Composite.add(world, mouseConstraint);
// 保持鼠標與渲染同步
render.mouse = mouse;
// ---------------------------------
// 使渲染視圖適合場景
// Render.lookAt(render, {
// min: { x: 0, y: 0 },
// max: { x: 800, y: 600 }
// });
matter-wrap 超出界面循環(huán)
2021-08-06 15-28-41.gif
// 案列 https://brm.io/matter-js/demo/#avalanche
// npm install MatterWrap 實現(xiàn)超出循環(huán)
try {
if (typeof MatterWrap !== "undefined") {
// either use by name from plugin registry (Browser global)
Matter.use("matter-wrap");
} else {
// or require and use the plugin directly (Node.js, Webpack etc.)
Matter.use(require("matter-wrap"));
}
} catch (e) {
// could not require the plugin or install needed
}
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Composites = Matter.Composites,
//* Mouse 模塊包含用于創(chuàng)建和操作鼠標輸入的方法
//* MouseConstraint 用于創(chuàng)建鼠標約束的方法。鼠標約束用于允許用戶交互，提供通過鼠標或觸摸移動身體的能力。
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Common = Matter.Common;
// 創(chuàng)建一個引擎
var engine = Engine.create(),
// 引擎內的世界
world = engine.world;
//渲染配置屬性
var render = Render.create({
element: document.getElementById("canvas"),
engine: engine,
options: {
width: 800,
height: 600,
wireframes: false,
showAngleIndicator: true //剛體轉角指示
}
});
// 開始渲染
Render.run(render);
// 開始運行和加載引擎
var runner = Runner.create();
Runner.run(runner, engine);
/**
* 創(chuàng)建一個新的復合材料，其中包含在網格排列中的回調中創(chuàng)建的實體。
* 此功能使用身體的邊界來防止重疊
*/
var stack = Composites.stack(20, 20, 20, 5, 0, 0, function(x, y) {
return Bodies.circle(x, y, Common.random(10, 20), {
friction: 0.00001, //空氣阻力
restitution: 0.5, //反彈指數(shù)
density: 0.001
}); //密度
});
Composite.add(world, stack);
// 添加 碰撞墻
Composite.add(world, [
Bodies.rectangle(200, 150, 700, 20, {
isStatic: true,
angle: Math.PI * 0.06,
render: { fillStyle: "red" }
}),
Bodies.rectangle(500, 350, 700, 20, {
isStatic: true,
angle: -Math.PI * 0.06,
render: { fillStyle: "blue" }
}),
Bodies.rectangle(340, 580, 700, 20, {
isStatic: true,
angle: Math.PI * 0.04,
render: { fillStyle: "pink" }
})
]);
// 添加鼠標控制事件---------------------------------
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
Composite.add(world, mouseConstraint);
// 保持鼠標與渲染同步
render.mouse = mouse;
// ---------------------------------
// 使渲染視圖適合場景
Render.lookAt(render, Composite.allBodies(world));
// 使用matter-wrap插件進行包裝
// 超出界面后循環(huán)
for (var i = 0; i < stack.bodies.length; i += 1) {
stack.bodies[i].plugin.wrap = {
min: { x: render.bounds.min.x, y: render.bounds.min.y },
max: { x: render.bounds.max.x, y: render.bounds.max.y }
};
}
貼圖
image.png
import ball from './img/ball.png'
import box from './img/box.png'
// 案列 https://brm.io/matter-js/demo/#sprites
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Composites = Matter.Composites,
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Common = Matter.Common
// 創(chuàng)建一個引擎
var engine = Engine.create(),
// 引擎內的世界
world = engine.world;
//渲染配置屬性
var render = Render.create({
element: document.getElementById('canvas'),
engine: engine,
options: {
width: 800,
height: 600,
showAngleIndicator: false,// 剛體轉角指示
wireframes: false // 線框模式
}
});
// 開始渲染
Render.run(render);
// 開始運行和加載引擎
var runner = Runner.create();
Runner.run(runner, engine);
// 添加墻壁屬性
var offset = 10,
options = {
isStatic: true
};
world.bodies = [];
// 這些靜態(tài)墻將不會在這個精靈的例子中渲染
Composite.add(world, [
Bodies.rectangle(400, -offset, 800.5 + 2 * offset, 50.5, options),
Bodies.rectangle(400, 600 + offset, 800.5 + 2 * offset, 50.5, options),
Bodies.rectangle(800 + offset, 300, 50.5, 600.5 + 2 * offset, options),
Bodies.rectangle(-offset, 300, 50.5, 600.5 + 2 * offset, options)
]);
/**
* 創(chuàng)建一個新的復合材料，其中包含在網格排列中的回調中創(chuàng)建的實體。
* 此功能使用身體的邊界來防止重疊
* stack 堆棧 (x,y,列,行,左右間距,上下間距)
*/
var stack = Composites.stack(20, 20, 10, 4, 0, 0, function (x, y) {
if (Common.random() > 0.35) {
return Bodies.rectangle(x, y, 64, 64, {
render: {
strokeStyle: '#ffffff',
sprite: {
texture: box
}
}
});
} else {
return Bodies.circle(x, y, 46, {
density: 0.0005,
frictionAir: 0.06,
restitution: 0.3,
friction: 0.01,
render: {
sprite: {
texture: ball
}
}
});
}
});
Composite.add(world, stack);
// 添加鼠標控制事件---------------------------------
var mouse = Mouse.create(render.canvas),
mouseConstraint = MouseConstraint.create(engine, {
mouse: mouse,
constraint: {
stiffness: 0.2,
render: {
visible: false
}
}
});
Composite.add(world, mouseConstraint);
// 保持鼠標與渲染同步
render.mouse = mouse;
// ---------------------------------
// 使渲染視圖適合場景
// Render.lookAt(render, {
// min: { x: 0, y: 0 },
// max: { x: 800, y: 600 }
// });
