【Cocos Creator教程】制作一条可弯曲的、可碰撞的柔软绳子（胎教教学）

我们知道，Cocos Creator内置的物理引擎有RopeJoint组件，可以帮助我们做一根普通的绳子，废话不多说，直接开始。

首先看一下RopeJoint组件的属性：

上图中的Connected Body是当前节点连接的锚点，什么意思呢，举个例子：

上图中的“绳子小节”就是挂载了RopeJoint组件的节点，如果我们让绳子小节的Connected Body为图中红色的锚点（需要挂载RigidBody组件），那么启动物理引擎后，这个黑色的绳子小节就会和红色的锚点绑定在一起，就好像他们之间绑了一根绳子一样。但是要注意，这根绳子是看不见的，它不会和别的刚体产生碰撞，并且这根绳子的长度是根据RopeJoint属性里的Max Length来定的。

也就是说，如果我们要做一个柔软的、可以和其他刚体碰撞的绳子的话，就需要不止一个绳子小节。一种实现思路是：把这根绳子微分成很多个小节，然后将每一个小节之间都用RopeJoint绑定在一起，这样从总体上看它就是一个柔软的绳子了。

接下来手把手教你怎么做这根绳子！

首先在Canvas下新建一个Sprite，取名为ropeCut，这里为了方便我就直接用一个10x10的白色矩形了，你们有更好的素材的话可以自己换。

给它加上RopeJoint组件：

在属性面板中什么都不需要修改，我们等会儿在代码里进行修改。
Cocos Creator在你添加了Ropejoint之后会自动帮你加上RigidBody组件（方便）
然后把ropeCut拖进资源管理器里面，生成Prefab。

然后，在Canvas下新建一个Sprite，取名为anchor，当作我们的锚点。我在这里用一个30x30的红色矩形作为Sprite，同样如果你们有自己的素材就替换即可。给它加上RigidBody组件，把Type改为Static。（胎教解释环节：Static表示这个刚体是不受外力的，也就是说无论如何它都是静止的）

接下来就开始写脚本了。
新建一个rope.js，把它挂载到Canvas上面。

cc.Class({
    extends: cc.Component,

    properties: {
        
        //这一整根绳子的锚点
        anchor:{
            default: null,
            type: cc.Node,
        },

        //存放每一个绳子小节（预制体）
        ropeCutPrefab:{
            default: null,
            type: cc.Prefab,
        },

        softDegree: 0, //绳子总的小节数，越多则绳子越柔软
    },


    onLoad () {
        cc.director.getPhysicsManager().enabled = true; //开启物理引擎
    },

    start () {
        var ropeCutArray = new Array(); //存放所有绳子小节的数组

        //遍历这个数组
        for(var i = 0; i < this.softDegree; i++){
            ropeCutArray[i] = cc.instantiate(this.ropeCutPrefab); //生成新的绳子小节存放到数组中
            this.node.addChild(ropeCutArray[i]); //将绳子小节添加为Canvas的子节点，这里的this.node指的是Canvas

            //如果是第一个绳子小节，那么它的Connected Body就应该是anchor
            if(i == 0){
                ropeCutArray[i].getComponent(cc.RopeJoint).connectedBody = this.anchor.getComponent(cc.RigidBody);
                //修改绳子的最大长度
                ropeCutArray[i].getComponent(cc.RopeJoint).maxLength = (this.anchor.width + ropeCutArray[i].width) / 2; 
            }
            //如果是第2~n个绳子小节，那么它的Connected Body就应该是上一个绳子小节，直接数组索引-1就可以得到
            else{
                ropeCutArray[i].getComponent(cc.RopeJoint).connectedBody = ropeCutArray[i - 1].getComponent(cc.RigidBody);
                //修改绳子的最大长度
                ropeCutArray[i].getComponent(cc.RopeJoint).maxLength = ropeCutArray[i].width;
            }

            //修改完RopeJoint的属性之后一定要调用apply()方法，不然所有修改都无效！
            ropeCutArray[i].getComponent(cc.RopeJoint).apply();
        }
    },

    // update (dt) {},
});

代码的说明都写在注释里了（已经很详细了），如果还有看不懂的话欢迎留言~

然后，我们去引擎界面，在Canvas的属性里挂载上相应的节点：

SoftDegree就是绳子小节的总数，越多则绳子越长、越柔软，反之越短。

接下来我们测试一下：在属性面板里把SoftDegree改为10，运行：

（我懒得做GIF了，大家自己动动手可以看到效果，亲测可以运行）
可以看到这根绳子就挂在红色的锚点上。

再试试把SoftDegree改为20，运行：

看到绳子更长、更软了。

我们可以宣布，绳子制作成功了！