2D图形引擎
2021-08-06 本文已影响0人
誰在花里胡哨
2021-08-06 15-18-07.gif
本篇文章主要基于
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 是表演环境
* Bodies 可以用来创建各种形状的物体。
* Vertices 模块包含用于创建和处理顶点集的方法
* Mouse 模块包含用于创建和操作鼠标输入的方法
* MouseConstraint 用于创建鼠标约束的方法。鼠标约束用于允许用户交互，提供通过鼠标或触摸移动身体的能力。
* Common 模块包含所有模块共有的实用程序功能
* Composites 模块包含用于创建具有常用配置（例如，堆栈和链）的复合实体的工厂方法
*/
var Engine = Matter.Engine,
Render = Matter.Render,
Runner = Matter.Runner,
Bodies = Matter.Bodies,
Composite = Matter.Composite,
Vertices = Matter.Vertices;
// 创建一个引擎
var engine = Engine.create();
//render(渲染器)将要渲染的物理引擎是之前所创建的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, // 刚体睡眠状态
showDebug: false, // Debug 信息
showBroadphase: false, // 粗测阶段
showBounds: false, // 刚体的界限
showVelocity: false, // 移动刚体时速度
showCollisions: false, // 刚体碰撞点
showSeparations: false, // 刚体分离
showAxes: false, // 刚体轴线
showPositions: false, // 刚体位置
showAngleIndicator: false, // 刚体转角指示
showIds: false, // 显示每个刚体的 ID
showVertexNumbers: false, // 刚体顶点数
showConvexHulls: false, // 刚体凸包点
showInternalEdges: false, // 刚体内部边界
showMousePosition: false // 鼠标约束线
}
});
//参数(500,170,40,260）中，前两个是物体坐标，后两个分别是宽度和长度。
//需要注意的是，这里的坐标系统中，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);
基础图形创建
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, // 线框模式
}
})
// 矩形创建 https://brm.io/matter-js/docs/classes/Bodies.html#method_rectangle
var rectangle = Bodies.rectangle(400, 200, 80, 80);
// 圆形创建 https://brm.io/matter-js/docs/classes/Bodies.html#method_circle
var circle = Bodies.circle(450, 50, 40)
// 顶点创建复合实体 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'));
// 多边形创建 https://brm.io/matter-js/docs/classes/Bodies.html#method_polygon
// 3边 半径为60
var polygon = Bodies.polygon(200, 460, 3, 60);
// 梯形创建
var trapezoid = Bodies.trapezoid(200, 10, 50, 50, .5)
//创建一个地面 将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 模块包含用于创建和操作鼠标输入的方法
//* MouseConstraint 用于创建鼠标约束的方法。鼠标约束用于允许用户交互，提供通过鼠标或触摸移动身体的能力。
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse;
// 创建一个引擎
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 }),
// 创建静止墙面
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 超出界面循环
2021-08-06 15-28-41.gif
// 案列 https://brm.io/matter-js/demo/#avalanche
// npm install MatterWrap 实现超出循环
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 模块包含用于创建和操作鼠标输入的方法
//* MouseConstraint 用于创建鼠标约束的方法。鼠标约束用于允许用户交互，提供通过鼠标或触摸移动身体的能力。
MouseConstraint = Matter.MouseConstraint,
Mouse = Matter.Mouse,
Common = Matter.Common;
// 创建一个引擎
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);
/**
* 创建一个新的复合材料，其中包含在网格排列中的回调中创建的实体。
* 此功能使用身体的边界来防止重叠
*/
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, //反弹指数
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插件进行包装
// 超出界面后循环
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
// 创建一个引擎
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 = [];
// 这些静态墙将不会在这个精灵的例子中渲染
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)
]);
/**
* 创建一个新的复合材料，其中包含在网格排列中的回调中创建的实体。
* 此功能使用身体的边界来防止重叠
* 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 }
// });
