前言
游戏开发中，物理系统的试用越来越多，导致试用花样也是越来越多，只有你想不到的，没有做不到的。前段时间自己在其他地方看见了一个比较好玩的物理切割类的游戏，出于好奇自己也实验了一把，一直没时间整理文章，今天终于可以整理一下了。
效果展示
image
视频连接：视频播放
正文
1.demo效果展示
image
2.切割
切割：字面意思理解，将一个平面分成几个部分。运用到游戏中就是将处于两点（起点和终点）之间连线上的物体，以连线作为分割线，分割成多个部分。
要达到切割，首先要知道几个数据：
- 1.切割线的起点和终点
- 2.多边形物体的边缘坐标点
有了上边两个数据，我们可以算出：
- 1.切割线是否与多边形物体有交点
- 2.交点的坐标
- 3.是否满足切割条件
- 4.切割后新的坐标点
如果仅仅是切割，做到上边的这几点差不多就可以了。但是，咱们今天要说的是物理切割，也就是满足物理效果的切割。
2.1 creator 物理系统
- 开启物理系统：
物理系统默认是关闭的，如果需要开启物理系统需要手动通过代码实现
onLoad() {
var manager = cc.director.getCollisionManager();
manager.enabled = true;
manager.enabledDebugDraw = true;
manager.enabledDrawBoundingBox = true;
cc.director.getPhysicsManager().enabled = true;
}
-
给需要切割的物体绑定多边形刚体组件
image
2.2 物理切割
- 检测起点和终点 绘制切割线
start() {
this.initEvent();
}
initEvent(): void {
this.node.on(cc.Node.EventType.TOUCH_START, this.uiNodeStartEvent, this);
this.node.on(cc.Node.EventType.TOUCH_MOVE, this.uiNodeMoveEvent, this);
this.node.on(cc.Node.EventType.TOUCH_END, this.uiNodeEndEvent, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this.uiNodeEndEvent, this);
}
uiNodeStartEvent(e: cc.Event.EventTouch): void {
this.touchStartLocal = null;
this.touchMoveLocal = null;
this.touchStartLocal = this.node.convertToNodeSpaceAR(e.getLocation());
//初始化切割线的位置和长度
this.line.setPosition(this.touchStartLocal);
this.line.width = 0;
}
//
uiNodeMoveEvent(e: cc.Event.EventTouch): void {
if (!this.touchStartLocal) return;
console.log("移动");
this.touchMoveLocal = this.node.convertToNodeSpaceAR(e.getLocation());
//计算切割线旋转角度 和长度
this.line.angle = -this.rotationTarget(this.touchStartLocal, this.touchMoveLocal) + 90;
this.line.width = Math.abs(this.line.getPosition().sub(this.touchMoveLocal).mag());
}
//
uiNodeEndEvent(e: cc.Event.EventTouch): void {
if (!this.touchStartLocal) return;
let touchEndLocal: cc.Vec2 = this.node.convertToNodeSpaceAR(e.getLocation());
let touchStartLocal: cc.Vec2 = this.node.convertToNodeSpaceAR(e.getStartLocation());
this.line.width = 0;
}
- 检测切割
检测切割的步骤：
-
1.获取切割线上的所有刚体（可以使用物理系统自带的射线检测）
详细文档射线检测
在这里给大家列出一下射线检测的类型
cc.RayCastType.Any
检测射线路径上任意的碰撞体，一旦检测到任何碰撞体，将立刻结束检测其他的碰撞体，最快。
cc.RayCastType.Closest
检测射线路径上最近的碰撞体，这是射线检测的默认值，稍慢。
cc.RayCastType.All
检测射线路径上的所有碰撞体，检测到的结果顺序不是固定的。在这种检测类型下，一个碰撞体可能会返回多个结果，这是因为 box2d 是通过检测夹具(fixture)来进行物体检测的，而一个碰撞体中可能由多个夹具（fixture）组成的，慢。更多细节可到 物理碰撞组件 查看。
cc.RayCastType.AllClosest
检测射线路径上所有碰撞体，但是会对返回值进行删选，只返回每一个碰撞体距离射线起始点最近的那个点的相关信息，最慢。
-
2.碰撞体筛选
因为咱们在上一步检测的是所有的刚体，而在这种检测类型下，一个碰撞体可能有多个返回结果，所以需要进行筛选，筛选的目的在于确定这个碰撞体与射线相交（其实大家也可以是试用AllClosest类型，这样就用进行筛选了）
recalcResults(type: number, touchStartLocal: cc.Vec2, touchEndLocal: cc.Vec2): void {
let colliderArr = [];
//获取所有刚体
let result = cc.director.getPhysicsManager().rayCast(touchStartLocal, touchEndLocal, cc.RayCastType.All);
for (let i = 0; i < result.length; i++) {
#遍历每一个结果，筛选出之前没有出现的碰撞体，并且tag介于1-99直接的刚体（水果）
let collider: any = result[i].collider;
if (collider.tag > 0 && collider.tag < 100) { //切割的是水果 并且切割的collider 没有切割
let isExist: boolean = false;
for (let j = 0; j < colliderArr.length; j++) {
if (collider == colliderArr[j]) {
isExist = true;
break;
}
}
if (!isExist) {
colliderArr.push(collider);
//进行切割
let cutState = this.checkCutPolygon(type, touchStartLocal, touchEndLocal, collider);
}
}
}
}
- 3.切割
/**
* @param touchStartLocal 起点坐标
* @param touchEndLocal 终点坐标
* @param collider 将要切割的刚体
*/
private checkCutPolygon(type, touchStartLocal, touchEndLocal, collider): boolean {
let body = collider.body;
let points = collider.points;
let tag: number = collider.tag;
// 转化为本地坐标
let localPoint1 = cc.Vec2.ZERO;
let localPoint2 = cc.Vec2.ZERO;
body.getLocalPoint(touchStartLocal, localPoint1);
body.getLocalPoint(touchEndLocal, localPoint2);
let isCut: boolean = false;
let splitResults = [];
let intersectPoint = [];
//线段切割刚体
this.lineCutPolygon(localPoint1, localPoint2, points, splitResults, intersectPoint);
if (splitResults.length <= 0) {
return false;
}
//回收本体
collider.node.destroy();
#克隆
for (let j = 0; j < splitResults.length; j++) {
let splitResult = splitResults[j];
if (splitResult.length < 3) continue;
this.cloneNode(collider.node, splitResult);
}
}
至于详细的两点所连线段对多边形的切割，大家可以看gitee中的demo，或者看上边提供的多边形切割连接
- 4.克隆
物体的切割克隆，实际上就是相同的物体，只不过自身的边缘点不同而已
cloneNode(node: cc.Node, splitResult: Array<any>): boolean {
//更具节点名字在对象池中获取节点
let isOk: boolean = false;
let fruitNode: cc.Node = cc.instantiate(this.fruit);
fruitNode.position = node.position;
fruitNode.angle = node.angle;
fruitNode.name = node.name;
try {
this.node.addChild(fruitNode);
let collider = fruitNode.getComponent(cc.PhysicsPolygonCollider);
fruitNode.getComponent(cc.PhysicsPolygonCollider).friction = 0.01;
collider.points = splitResult;
collider.apply();
fruitNode.getComponent(Fruit).draw();
isOk = true;
} catch (error) {
console.log("出现异常--，克隆", error);
fruitNode.destroy();
isOk = false;
}
return isOk;
}
- 5.遮罩
知道了物体切割后的自身碰撞的边缘点，那么只需要对每个新物体更具碰撞点就行多边形遮罩就可以了
创建切割物体挂在脚本，代码如下
@ccclass
export default class Fruit extends cc.Component {
onLoad() {
}
start() {
this.draw();
}
public draw() {
//获取碰撞包围盒子的点
let points: any = this.getComponent(cc.PhysicsPolygonCollider).points;
let mask = this.getComponent(cc.Mask);
let graphics: cc.Graphics = (<any>mask)._graphics;
// // @ts-ignore
// const grapics = mask._graphics;
//获取绘制 grapics
// let grapics:cc.Graphics=this.getComponent(cc.Graphics);
// 擦除之前绘制的所有内容的方法。
graphics.clear();
// console.log(points);
// console.log(graphics);
let len: number = points.length;
//移动路径起点到坐标(x, y)
graphics.moveTo(points[len - 1].x, points[len - 1].y);
for (let i = 0; i < points.length; i++) {
graphics.lineTo(points[i].x, points[i].y);
}
graphics.strokeColor.fromHEX('#000000');
graphics.lineWidth = 2;
graphics.fill();
graphics.stroke();
}
update(dt) { }
}
上边的这种遮罩方式，随着物体数量的变多，drawcall会上涨的很明显，导致游戏性能降低，具体的解决办法大家可以在论坛中搜索白玉无冰大佬的[多边形裁剪图片(非mask,使用mesh)，新增 gizmo 支持]
