用于创建具有常用配置（例如堆栈和链）的复合实体的工厂方法
1 .一些常用的复合体的包装
2 .Composites.chain():将集合内的所有物体按照一种约束连接起来。在连接起来之前需要先解除他们之间的碰撞检测
3 .静态物体被撞的时候反弹的粒度，现在可以设置主动撞击物体的弹性了
4 .
1 .可以通过Composites模块的特定函数创建通过矩形组成的堆或者金字塔
2 .这个元素多的时候会内存泄露[Violation] 'requestAnimationFrame' handler took
3 .怎么加强。。多开几个canvas图层，分批进行内容渲染
const stack=Composites.stack(300,0,50,10,0,0,(x,y)=>{
//下落点x的坐标，下落点y的坐标，矩阵x,矩阵y,横排之间的间隙，纵排之间的间隙
return Bodies.circle(x,y,10,{
desity:0.5,
restitution:0.8,
friction:0,
frictionStatic:0,
render:{
sprite:{
'texture':'img/ball.png'
}
}
})
})
https://codepen.io/collection/Fuagy/
1 .codePen示例
4 .
// 堆
const stack = Composites.stack(100,100,5,5,0,0,(x,y)=>{
// 1 .开始的位置x
// 2 .开始的位置y
// 3 .横排的数量
// 4 .纵排的数量
// 5 .横排的间隔
// 6 .纵排的间隔
// x:里面元素创建的x的坐标
// y:里面元素创建的Y的坐标
return Bodies.rectangle(x,y,50,50)
})
// 金字塔
const pyramid=Composites.pyramid(0,310,11,5,0,0,(x,y)=>{
// 11，6
return Bodies.rectangle(x,y,50,50)
// Math.min(rows, Math.ceil(columns / 2))
// 行数和列数有隐性规定，这样情况下其实我们无法创造出想要的元素，所以这样就需要单独创建小的块来补充到这个大的上面
})
// 车
const car=Composites.car(100,100,100,20,30)
// 1 .怎么给每个加贴图
// 2 .怎么加多个轮子
// 3 .怎么让前后轮子大小不一样
// 4 .翻滚下落的时候，非轮子部分碰到下面的板子会出现异常抖动，可能是这里的会出现碰撞异常
// 5 .怎么改变他的摩擦力呢？
// 6 .正常的下坡，速度不会增加，一直是匀速
// 7 .还是不太真实
// console.log(car)
// 链式复合体
const boxes=Composites.stack(500,80,1,4,0,10,(x,y)=>{
return Bodies.rectangle(x,y,50,40)
})
// 先创建一些元素，现在还没有被连接起来
const chain=Composites.chain(boxes,0.5,0,-0.5,0,{stiffness:1})
Composite.add(boxes,Constraint.create({
bodyA:boxes.bodies[0],
pointB:{x:500,y:15},
stiffness:0.8
}))
// 桥
// 创建桥的木板
const qiao=Composites.stack(400,300,1,1,50,0,(x,y)=>{
return Bodies.rectangle(x,y,50,20,{
chamfer:5
})
})
// 连接木板
Composites.chain(qiao,0.5,0,-0.5,0,{stiffness:0.5})
Composites.chain(qiao,0.5,-0.3,-0.5,-0.3,{stiffness:0.5})
Composites.chain(qiao,0.5,0.3,-0.5,0.3,{stiffness:0.5})
type:"line",spring不知道为啥没有生效。。
// 沾到两边墙壁上
let left_wall=Bodies.rectangle(100,400,10,100,{isStatic:true})
let right_wall=Bodies.rectangle(700,400,10,100,{isStatic:true})
// 左边
let fixLeft=Constraint.create({
bodyA:left_wall,
pointA:{x:0,y:-10},
bodyB:qiao.bodies[0],
pointB:{x:-25,y:0},
// stiffness:0.8
})
// 左边锁链的长度是怎么确定的呢？
let fixright=Constraint.create({
bodyA:right_wall,
pointA:{x:0,y:0},
bodyB:qiao.bodies[qiao.bodies.length-1],
pointB:{x:25,y:0}
})
// 软体
var cloth=Composites.softBody(50,10,20,15,0,0,false,10,{
// 1 .开始第一个元素的x
// 2 .第一个元素的y
// 3 .横向排列多少个
// 4 .纵向排列多少个
// 5 .横向的每个间距
// 6 .纵向的每个间距
// 7 .每个圆的直径大小
// false:让布有粘性，会粘起来
// 整个布其实是每个圆圆心的大小，那怎么给这个布染色呢？
// 那么其实最后决定每块布大小的元素由后面四个元素决定,最逼真，性能最好的比例是是多少。在给定布的面积确定的狮虎
// 感觉布的真实感和间距有关，间距越宽越不行
render:{
visible:false,
},
collisionFilter:{
group:-1,
}
},{})
// 将最上面的6个球固定
for(var i=0;i<20;i++){
cloth.bodies[i].isStatic=true;
}
// 牛顿钟摆
const nd=Composites.newtonsCradle(200,100,2,20,150)
// mesh测试
const boxed=Composites.stack(100,100,10,10,0,0,(x,y)=>{
return Bodies.rectangle(x,y,10,10)
})
Composites.mesh(boxed,10,10,false)
// World.add(engine.world,[qiao,left_wall,right_wall,fixLeft,fixright])
// World.add(engine.world,cloth)
// World.add(engine.world,nd)