恋爱球球(LoveBalls)实现 - Graphics,物理引擎填坑实录。

最近仿制《恋爱球球》(LoveBalls),物理引擎,动态绘图用的居多。有几个坑点记录一下。

1.this.graphics.moveTo(0, 0); 调用后,lineTo的下一个点,不可与(0,0)相同。

我在TOUCH_MOVE中不停的获取POS,然后划线。

1
2
3
4
5
6
···
this.graphics = this.lineNode.addComponent(cc.Graphics);
this.graphics.moveTo(0, 0);
this.graphics.lineWidth = 6;
this.graphics.strokeColor = cc.Color.WHITE;
···

TOUCH_MOVE

1
2
3
4
5
6
7
8
9
10
···
var pos = this.lineNode.convertToNodeSpaceAR(event.getLocation());
console.log("#####pos X:" + pos.x + " Y:" + pos.y);
if (pos.x === 0 && pos.y === 0) {
console.log("  0,0 会引起画线错乱,不进行绘制。");
return;
}
this.graphics.lineTo(pos.x, pos.y);
this.graphics.stroke();
···

如下图所示,(pos.x === 0 && pos.y === 0)时会出现额外的原点到各个绘制点的连线。

upload successful

upload successful

2.cc.PhysicsChainCollider不与自身产生碰撞

这个坑真是····cc.PhysicsChainCollider与cc.PhysicsChainCollider不产生碰撞,物理世界的盒子是用PhysicsChainCollider,动态绘制的物理线也是PhysicsChainCollider,直接掉了下去。

3.最终实现Graphics+cc.PhysicsPolygonCollider

cc.PhysicsPolygonCollider也有一个大坑,points相邻两点的距离不能太短
否则会崩溃。目前我测试,距离>=2是个保险的数字。

1
2
3
if (Math.abs(curPos.x - prePos.x) < 2) {
curPos.x = curPos.x > prePos.x ? (prePos.x + 2) : (prePos.x - 2);
}

效果