3D足球小游戏《足球快斗》微信和COCOS商城同步上线，分享我的制作心得~！

Creator 3.x
#41

多谢支持！后续会继续更新发布新版本，都是免费的，绝对超值。

#42

比较喜欢这款游戏，找个人帮忙换皮，上线微信有偿

#43

玩了一下 很好玩啊 就是带球到门以后还要踢进去才行，不能直接带球进门
好奇这个人物的站位AI是怎么设计的

#44

恩，这些细节后面会慢慢优化的，逻辑的代码实现上下次我挑几个关键点和大家分享一下。

1赞
#45

大家好，今天我和大家分享一下足球游戏中足球运动的代码实现部分。包括运球、球的滚动、传球、射球、碰到障碍物反弹等。
1、运球
运球
运球首先让碰到球的人物成为球的父级，并且把球的位置固定在人物的正前方一点的位置，这样不管人物怎么运动球就始终在人物前方了。

2、球的滚动
滚动

球单在人物前方还不够，还得滚动起来，转动的方向为人物的正方向。实现方法如下：

首先在人物绑定代码upDate里加入：

this.node.getChildByName(“football”)!.getComponent(football)!.f_rotate(v3(1, 0, 0), -0.3);

就是调用足球代码里.f_rotate方法，两个参数分别是旋转轴（以人物X轴为旋转轴）和每帧旋转步进。

足球代码里对应的f_rotate函数代码如下：

f_rotate(axis: Vec3, angle: number) {

let rotation = new Quat();

        let rad = angle;

        // 绕世界空间下指定轴旋转四元数, axis是旋转轴，就是把人物的右方向传递进来，rad是每次旋转角度，旋转后的结果付给rotation。

        Quat.rotateAround(rotation, this.node.rotation, axis, rad);

        this.node.rotation = rotation;

}

这样人物每帧都会调用一次足球的旋转，只要人物转动，足球的旋转轴也跟着变化，始终以人物的正方向做旋转。

3、 传球
传球2
在足球代码的upDate里加入：

if (this.fb_pass == true) {

//每次移动的步进为目标点到当前点的1/30,这样做的目的是让球滚动由快慢慢减慢。

        let step_x = (this.fb_pass_des.x - this.node.worldPosition.x) / 30;

        let step_z = (this.fb_pass_des.z - this.node.worldPosition.z) / 30;

        let step_y = this.node.worldPosition.y;

        if ((step_x < 0.01 && step_x > -0.01) && (step_z < 0.01 && step_z > -0.01)) {

            this.fb_pass = false;

            //当x和z的每帧步进小于0.01时就结束传球，不然继续移动

        } else {

            let now_pos = this.node.getWorldPosition();

            now_pos.x += step_x;

            now_pos.z += step_z;

            this.node.setWorldPosition(now_pos);

            this.f_rotate(this.fb_rotate_axis, -(Math.abs(step_x) + Math.abs(step_z)) * 3);//传球时球也同时做滚动运动。

        }

    }

4、抛物线射球
射球2
在足球代码的upDate里加入：

if (this.fb_shoot == true) {

        //计算剩余距离，0.2是足球的高度。 this.fb_shoot_des是远射目标距离，可以自己定义。

        let leave_dis = Vec3.distance(v3(this.node.position.x, 0.2, this.node.position.z), v3(this.fb_shoot_des.x, 0.2, this.fb_shoot_des.z));

//每次移动的步进为目标点到当前点的1/50,这样做的目的是让球滚动由快慢慢减慢。

        let step_x = (this.fb_shoot_des.x - this.node.worldPosition.x) / 50;

        let step_z = (this.fb_shoot_des.z - this.node.worldPosition.z) / 50;

        //计算抛物线，这里两个数值都会影响抛物线的幅度和位置，一个15最好和抛物线距离相等，这样X的变化正好是0到抛物线的长度。还有10也是调试了后得出的比较合适的值。

        let x = 15 - leave_dis

        var node_y = -x * x + 10 * x//前面的负号表示抛物线开口向下。

        node_y *= 0.07;//控制抛物线高度，设的数值越大抛物线拱形越高。

        if ((step_x < 0.01 && step_x > -0.01) && (step_z < 0.01 && step_z > -0.01)) {

           this.fb_shoot = false;

            // 当X方向和Z方向的步进都少于0.01，就是基本不动的时候，就认定为远射结束，不然继续做足球的位移。

        } else {

            let now_pos = this.node.getWorldPosition();

            now_pos.x += step_x;

            now_pos.z += step_z;

            if (node_y < 0) {

                node_y = 0;

            }

            now_pos.y = 0.2 + node_y;

            this.node.setWorldPosition(now_pos);

            this.f_rotate(this.fb_rotate_axis, -(Math.abs(step_x) + Math.abs(step_z)) * 3);//足球做抛物线运动的同时也依然做滚动运动。

        }

    }

5、足球的反弹
反弹
足球的遇到四周围墙反弹本来是挺简单，就是做X或Y的翻转，我这里不用这种方法，而是用获取法线的方法，这样做的好处是不管碰撞物体的朝向是什么都可以做相应的反弹。

在足球碰撞检测里加入如下代码：

if (e.otherCollider.node.name == “wall”) {

        this.rebound = true;

        let e_contacts = e.contacts[0];

        let hit_point = v3();

        let hit_normal = v3();

        e_contacts.getWorldPointOnA(hit_point);//获取碰撞点

        e_contacts.getWorldNormalOnA(hit_normal);//获取碰撞点法线

            let origi_pos: Vec3 = this.fb_pass_des.clone();//这是原来的目标点

            let hit_point_to_origi_pos = Vec3.len(origi_pos.subtract(hit_point)) ;//撞击点到原来目标点所剩的距离，等下反弹之后也是这个距离。如果反弹要做衰减，就把这个距离缩短一些就行了。
            
            let in_vec = this.fb_in_vec;//入射向量（这个入射向量不是这里计算出来的，是从人物射球时候的人物朝向传递过来，因为两者几乎是相同的，就不做另外计算了）

            // 根据入射向量和法线计算反弹向量:
            this.rebound_vec = in_vec.clone().subtract(hit_normal.clone().multiplyScalar(2 * in_vec.clone().dot(hit_normal)));

            // 根据撞击点、反弹向量、反弹距离算出反弹后的目标点:
            this.fb_pass_des = hit_point.clone().add(this.rebound_vec.multiplyScalar(hit_point_to_origi_pos));

    }

好了，关于足球的运动逻辑基本都在这里了，今天先分享到这里，代码写的不是很优雅，还请大家多包含，多指教。

#46

每次上论坛
都有大佬的demo
同样开发者而自己只是UI仔的事实备受打击

1赞
#47

膜拜大佬！

#48

发了个新版介绍的B站视频，不知道怎么贴进来，iframe嵌入式代码好像不显示，只能发链接了：
https://www.bilibili.com/video/BV1vK411C7V6/?vd_source=9bf2f964cd51c2f73f7d275def4d2a12
大家好，今天给我的足球快斗小游戏更新了一下主界面，还有场景的一些色调。感觉看着比先前的舒服了一些。还有增加了比赛赚金币功能，后续会开发用金币购买一些小道具之类的功能。还有增加了球员的摔倒的动作，被对手铲到就会摔倒。这样感觉更真实和有趣一些。还有有网友提建议说冲刺和铲球用一个按钮比较顺手，我也觉得是这样，就把冲刺和铲球改成同一个“A”键，按一下冲刺，再按一下就是铲球。好了，这次就先更新到这里，下次再见。

#49

加油，加油，等着更新呢

#50

大佬牛逼 mark

#51

大佬，提个建议，我方拿球队员好像没法加速，这个能优化下吗。

#52

所有球员在运球时都是不能加速的，空手时才能加速和铲球，运球的时候我感觉是不适合再加速，不然都加速就没意义了。还有我方的AI队员现在没有给他加速功能，只有玩家控制的球员可以加速和铲球，现在是这么设定的。我方AI控制的球员在没有运球的时候倒是可以考虑给他添加加速功能。这个我是考虑到操作性强的尽量留给玩家来操作，AI只做配合，如果AI啥都做了，玩家都没事做了，有些足球游戏玩家甚至都不动光看着AI来踢，自己队伍都能进球获胜，那样感觉太离谱，是玩家在玩还是AI在玩呢。

#53

还有一点，我感觉守门员有时候太强，有时候又太呆，这个能优化下吗

#54

恩，守门员的AI做的我自己也不满意的，有时间肯定得给它优化一下。目前在弄一个新手指导功能，一点点来吧，年底了事比较多~

#55

真是太厉害了！大佬的另一个游戏 《 闪电飞机》好久没有更新了，为什么没有增加微信banner广告和激励广告呀

#56

说来比较惭愧，那个飞机上线个把年了还没到1000流量，还达不到上广告的最低要求，平均一天10人都没有，所以没啥更新的动力~先把足球这游戏做的差不多样子了再考虑更新飞机或是做另一款游戏。

#57

大佬加油，这足球我非常看好。

#58

不错 加油呀 上班了支持下您的这款足球游戏 下一步开发计划是什么呀

#59

谢谢，新手指引做好后，打算弄微信的开放数据域，数据域弄好后打算做联机对战功能，不过自己是第一次做游戏后端有点吃不准用什么开发，是微信的云开发还是在什么框架上做，或者就nodejs原生自己一点点撸轮子，有点选择困难，一步步做过来看吧。

#60

加油 期待新的作品