CocosCreat

Question

CocosCreat 有一个需求要给足球加一个发射线，跟桌球游戏的瞄准线类似，可以控制长度、角度且碰到障碍物会反射，而且能够实时操控的应该怎么弄这个

Answer 1

在 Cocos Creator 中实现这个功能可以使用碰撞组件和物理组件来实现。

首先，你需要在足球节点上添加碰撞组件和物理组件，并设置好碰撞体积和质量。然后，你可以通过角度和力的大小来控制足球的发射方向和力度。

要实现发射线，你可以使用 Cocos Creator 的线渲染组件。在足球节点下添加一个空节点，在该节点上添加线渲染组件。然后，你可以通过设置起点和终点来控制线的长度和角度。

接下来，你可以使用物理组件的 raycast 方法来检测碰撞，并在碰撞时更新线的起点和终点，使其能够反射。

最后，你可以使用鼠标事件或触摸事件来实时操控发射线的长度和角度。

代码示例如下：

// 在足球节点上添加碰撞组件和物理组件
const collider = this.node.addComponent(cc.PhysicsBoxCollider);
collider.size = cc.size(20, 20);
collider.density = 1;
const rigidBody = this.node.addComponent(cc.RigidBody);
rigidBody.type = cc.RigidBodyType.Dynamic;

// 在足球节点下添加线渲染组件
const lineNode = new cc.Node();
lineNode.parent = this.node;
const line = lineNode.addComponent(cc.LineRenderer);
line.lineWidth = 5;
line.lineColor = cc.Color.WHITE;

// 控制发射线的长度和角度
line.points[0] = cc.v2(0, 0);
line.points[1] = cc.v2(100, 100);
line.node.rotation = 45;

// 实时检测碰撞
const hits = [];
rigidBody.raycast((fixture, point, normal, fraction) => {
hits.push(point);
return fraction;
}, cc.v2(0, 0), cc.v2(100, 100));

if (hits.length > 0) {
// 如果碰撞，更新线的起点和终点
line.points[0] = hits[0];
line.points[1] = hits[hits.length - 1];
}

// 使用鼠标事件或触摸事件实时操控发射线
lineNode.on(cc.Node.EventType.MOUSE_MOVE, (event) => {
line.points[1] = event.getLocation();
});