Cocos Creator实现基于物理引擎的绳子关节

本案例使用引擎Cocos Creator v2.1.4。代码编辑工具VSCode或WebStorm。
点击链接加入群聊【unity/cocos交流二群】

一、 物理引擎的开启与使用

1. 可视化编辑基础场景

如上图所示：

【1】新建单色精灵节点bg，添加适配组件Widget，设置距离上下左右分别为0，或者设置bg节点的大小跟Canvas分辨率一致。如下图所示：

【2】新建单色精灵节点red，设置节点颜色为红色，添加RigidBody，设置Type属性值为Dynamic，表示此节点位置可变。添加PhysicsBoxCollider。

【3】新建ground单色渲染节点，设置颜色，设置适配，添加RigidBody组件，设置Type属性值为Static，表示地面位置固定，添加PhysicsBoxCollider组件，如下：

2. 组件化开发（开启物理引擎）

【1】创建一个组件类，要能够被游戏引擎识别。新建enable_phy.js。

【2】实例化得到组件的实例，通过节点上的【添加组件】按钮，或者在代码中使用addComponent方法。如下图所示，通过编辑器，给Canvas节点上添加用户自定义脚本组件enable_phy，开启物理引擎。

【3】在代码中提供固定的入口（、start、update方法），供游戏引擎识别。如下图所示：

运行，红色块会往下掉，掉到ground地面停止。说明物理引擎开启成功。

二、 绳子关节的使用

1. 旋转固定点

如上图所示，新建单色渲染节点blue，添加Widget组件，使得蓝色块位于顶部。作为旋转绳子的挂载点。同时，给blue节点添加RigidBody，设置其Type属性为static，静止的。添加PhysicsBoxCollider。

2. 绳子的制作

如上图所示，新建单色渲染节点，修改节点大小，设置节点颜色；添加RigidBody组件，设置Type属性为Dynamic，可以运动；添加PhysicsBoxCollider；点击【添加组件】按钮，选择【物理组件】-【Joint】-【Rope】，设置最大Max Length为5，将blue节点拖动到Connected Body，表示绳子连接点为Blue节点，然后拖动绳子上的圆圈，可以修改锚点。

复制wire节点，得到wire2节点，修改相关属性如下即可，主要修改wire2连接的刚体为wire，连接上第一段绳子，调整连接的锚点如下图。

同样的道理，我们复制wire2得到wire3，修改wire3连接的刚体为wire2，调整连接锚点，复制wire3得到wire4，修改wire4连接的刚体为wire3，调整连接锚点。如此，一条具有四段的绳子已经制作好了。如下图：

修改地面和red块的摩擦力为0，如下：

三、 运行测试

绳子会在重力的作用下往下摆，红色块会在重力的作用下掉到地面，当绳子撞到砖块会将砖块推向右方，且绳子会继续来回摆动。如上图所示。点击链接加入群聊【unity/cocos交流二群】