Cocos Creator 开发实战——篮球物理游戏

Cocos Creator 开发实战——篮球物理游戏

       本篇文章教大家实现篮球物理游戏最核心的功能，学会本篇文章知识点，写出一款篮球物理游戏分分钟的事情。
       国际惯例先上效果

知识点

• Graphics 组件
• 关节组件 Distance Joint - 距离关节
• 刚体组件

教程

基础背景搭建

       创建三个sprite节点，分别拖入相应的图片资源，层级关系是 down(下篮筐) > 篮球 > up(上篮筐)。

物理系统

       使用物理系统就得添加刚体组件和物理系统的碰撞组件

       添加碰撞分组信息

       ball节点的group设置成ball，并添加刚体组件和物理碰撞组件，Allow Sleep 勾选去掉，防止静止不动会自动睡眠。Gravity Scale(重力)设置成0，后续用代码赋值。篮球是需要动的所以type设置成动态Dynamic
       down节点的group设置成rim，并添加刚体组件、创建两个碰撞组件，一个在篮筐左边缘，一个在篮筐右边缘。篮筐是不需要动的所以type设置成动态Static,设置成静态后其它属性不会生效。

篮网制作

• 创建绘图器Graphics
         新建节点->添加graphics组件(添加组件->渲染组件->Graphics)。将Line Width设置成5(线条适合的宽度)。
  
         属性基础知识：绘制篮网需要用到的函数已经标志出来了。
  
  
• 开始绘制篮网
  
                                                                        篮网完成图
         1）创建篮筐上的四个点
  
         依次创建其它三个点
  
         2）创建关节组件 Distance Joint - 距离关节：添加组件->物理组件->Joint->Distance，距离关节组件里的Distance(关节两端的距离)属性和Frequency(弹性系数)属性后续通过代码控制。
  
         依次创建其它三个点
  
         剩下慢慢拼出个篮网的形状
  
         3）添加碰撞组件：添加组件->物理组件->Collider->Chain。给外围线条添加上碰撞组件。
         单个节点详细说明：碰撞组件中的Points写成2，是为了把两点之间连上碰撞。
• 篮网代码
         net节点添加脚本组件net，并把两边边缘的节点存入数组中。

	properties: {
   
        LeftEdgeLine: [cc.Node],    //左边缘线条
        RightEdgeLine: [cc.Node],   //右边缘线条
    },

       设置distance组件的属性

	onLoad() {
   
        //获得自身的graphics组件
        this.graphics = this.node.getComponent(cc.Graphics);

        //获得节点下所有孩子节点的Distance的组件  返回的是一个数组
        this.distanceJoints = this.node.getComponentsInChildren(cc.DistanceJoint);
        //设置所有Distanc组件的属性
        this.AutoSetDistanceJoint();
    },
    //distance属性设置是节点与连接的刚体之间的距离
    //.mag() 内部算法是(x2+y2)开根号
    //如果发现篮网相互黏在一起，黏在一起的愿意是弹性系数太大或者太小，修改弹性系数到相应值即可
    AutoSetDistanceJoint: function () {
   
        for (var i = 0; i < this.distanceJoints.length; i++) {
   
            //设置链条的距离
            this.distanceJoints[i].distance = (this.distanceJoints