Day6. 依点成形，创造物件 - RigidBody(上)

经历了前两天的基础介绍，今天我们终於要到创建物件的环节了，而这个标题我想已经说明了一切，没错，这篇是上！

有上就有下！

创建物件及物件互动的篇幅较长，有很多东西可以讲，毕竟物件几乎算是世界里的主角，上篇我们会先带大家认识一下在 Matter.js 里物件的创建，下篇我们会着重在一些属性设置与相关互动的解说，话不多说，我们开始今天的环节吧！

今天的Demo
今天的Demo原始码

在 Matter.js 的物理世界中，主要分为两种物体类别 ─ 刚体与复合体，复合体可以理解为由复数个刚体透过一定约束组成，所以本质上还是刚体，这边有些名词看不懂没关系，有兴趣的可以查一下应该会有很多相关知识，如果有我们必要的知识，我们会在後面逐一补充。

刚体你可以理解为它具有以下特性：

• 一个物体
• 运动中或受力时，大小和形状不变
• 内部各点的相对位置不变

一般我们说的刚体都是相对的，实际上绝对的刚体(绝对遵守以上条件，也就是绝不变形)在巨观世界里只存於理想之中。所以一般我们看见的那些具一定刚性的物体与形状结构，如正方形的物体、圆形的物体，我们就会视作一个刚体。

在 Matter.js 中我们创建与操作刚体主要透过两个函式库：

var Body = Matter.Body
var Bodies = Matter.Bodies

这边可能会有人有些疑惑，为什麽会有两个名字长得这麽相近的模组呢？

Bodies 模组里其实主要处理的是便捷的建立方法，一些常见的形状我们可以直接透过这模组里的一些方法快速创建。

下面我们会带大家走过 Bodies 里创建形状的方法与基本参数对图形构成的影响，关於 options 会在後面再谈，另外下面会大量用 x,y 的方式来表示座标位置，在 canvas 中，画布的最左上点为座标 (0,0) ，向右向下为正向轴向，也就是 (10,0) 会在原点的右边， (0,10) 会在原点的下方。

我们先来看看 Bodies 到底提供了我们哪些形状：

• 圆形

//circle(x, y, radius, [options], [maxSides])
var circleA = Bodies.circle(100, 100, 80, null, 80);
var circleB = Bodies.circle(200, 100, 50, null, 10);
var circleC = Bodies.circle(300, 100, 50, null, 400);

圆形是我们预计产出(弹珠台)不可或缺的必备元件，实际上在 Bodies 提供的绘制方法也相当简单，依序设置位置的 x,y，以及圆形半径。目前单看基础函数是无法绘制椭圆的，maxSides代表的是圆形的建构边数，最小为10，不输入默认为25，是的，在 Matter.js 的世界里，圆形其实也是一个多边形，只是边与边的角度极大让他看起来十分平滑。

另外这第一个圆和第二个圆可以发现他的建构顺序影响了图层绘制先後，後绘制的会在上方，当我们有需要让特定物件在上方的时候要注意绘制顺序，或是後面可能有选项可以做Z轴的控制。

• 矩形

//rectangle(x, y, width, height, [options])
var rectangleA = Bodies.rectangle(100,350,50,50);
var rectangleB = Bodies.rectangle(200,350,60,40);
var rectangleC = Bodies.rectangle(300,350,30,70);

就是个矩形，四边且边长两两相同，内角90度构成，位置，宽、高，宽指横向，高指直向，是基本的图形之一。

• 正多边形

//polygon(x, y, sides, radius, [options]) 
var polygonA = Bodies.polygon(100, 250, 5, 30);
var polygonB = Bodies.polygon(200, 250, 6, 50);
var polygonC = Bodies.polygon(300, 250, 6, 60);

多边形建构一样带有 x,y 位置，这个方法提供的是建构正N边形，N即为 sides 中填入的数字，这边的radius 指的是正多边形的边长，可以看到最右比中间的图形稍大一些。

• 梯形

//trapezoid(x, y, width, height, slope, [options])
var trapezoidA = Bodies.trapezoid(100,450,50,50,0.6);
var trapezoidB = Bodies.trapezoid(200,450,50,50,0.8);
var trapezoidC = Bodies.trapezoid(300,450,50,100,0.8);

梯形建构的时候除去位置的 x,y ，宽指的是下底长度，高指的是梯形本身高度，slope指的是斜率，藉由高度与斜率会决定上底的长度。

• 自定义形状

//Matter.Bodies.fromVertices(x, y, vertexSets, [options], [flagInternal=false], [removeCollinear=0.01], [minimumArea=10], [removeDuplicatePoints=0.01])
var customizeA = Bodies.fromVertices(100,550, [{x:0,y:0},{x:70,y:70},{x:0,y:70}]);
var customizeB = Bodies.fromVertices(200,550, [{x:35,y:0},{x:70,y:0},{x:0,y:35},{x:105,y:35},{x:35,y:70},{x:70,y:70}]);

如果上面的形状都不能满足你，那 Bodies 模组依然提供了建构多边形的方式，透过调用 fromVertices 与输入位置，「点阵列」资讯，就可以依据你提供的点来创建图形。注意的是在这边的点阵列的 0,0 指的会是你指定位置的 x,y 值该点，也就是以第一个三角形为例，尽管我第一个座标点写为 (0,0)，实际上他在整体 cavas 上的座标是 (100,550)。

以上五种方法是 Bodies 模组提供我们来快捷建造形状的方式，了解会发现其实这个模组真的帮助我们能够快速建造许多基本形状，创造一个能够互动的物件，并没有这麽难！上篇介绍到此为止，下面我们会再来深入 Body 模组来介绍创建时的选项参数与对形状的物理行为操控。