上期2D子弹跟随大受欢迎,想要个3D版本的?

引言

实现子弹跟随的游戏开发技巧之3D版本

大家好,在上一篇文章 中,笔者介绍了如何在Cocos游戏开发 中实现2D子弹的跟随效果。

有许多感兴趣的小伙伴 私信我,有没有3D版本的呀?

3D 其实和2D 的子弹跟随效果大同小异 ,需要一些简单的数学知识

于是,本文将介绍一下如何实现3D版本的子弹跟随效果。

本文源工程在文末获取,小伙伴们自行前往。

还是直接上代码

typescript 复制代码
import { _decorator, CCFloat, Component, instantiate, Node, tween, v3, Vec3 } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('BulletFollow3D')
export class BulletFollow3D extends Component {
    // 属性定义
    @property(Node)
    target: Node;
    @property(Node)
    bulletPfb: Node;
    @property(Node)
    bumpPfb: Node;
    @property(CCFloat)
    internal: number = 5;
    @property(CCFloat)
    speed: number = 1;

    // 子弹数组和计时器
    bullets: Node[] = [];
    tick: number = this.internal;

    // update函数
    update(deltaTime: number) {
        // 计时器逻辑
        this.tick += deltaTime;
        if (this.tick >= this.internal) {
            this.tick -= this.internal;
            // 创建子弹并设置初始状态
            var bullet = instantiate(this.bulletPfb);
            bullet.scale = this.bulletPfb.scale.clone().divide3f(2, 2, 2);
            bullet.parent = this.bulletPfb.parent;
            tween(bullet).by(1, { position: v3(0, 1, 0) })
                .call(() => {
                    this.bullets.push(bullet);
                }).start();
        }
        // 子弹跟随逻辑
        for (let i = this.bullets.length - 1; i >= 0; i--) {
            let bullet = this.bullets[i];
            bullet.setWorldPosition(bullet.forward.clone().multiplyScalar(this.speed * deltaTime).add(bullet.worldPosition));
            bullet.lookAt(this.target.worldPosition);
            // 判断是否击中目标
            if (Vec3.distance(bullet.worldPosition, this.target.worldPosition) < 0.1) {
                this.bullets.splice(i, 1);
                bullet.destroy();
                // 创建击中效果
                let bump = instantiate(this.bumpPfb);
                bump.parent = this.bumpPfb.parent;
                bump.worldPosition = this.target.worldPosition;
                bump.active = true;
                tween(bump)
                    .delay(1)
                    .call(() => { bump.destroy(); })
                    .start();
            }
        }
    }
}

代码解析

让我们逐步解析代码:

  1. 属性:

    • target: 子弹跟随的目标节点。
    • bulletPfb: 子弹的预制节点。
    • bumpPfb: 撞击效果的预制节点。
    • internal: 子弹生成的间隔时间。
    • speed: 子弹移动的速度。
  2. 变量:

    • bullets: 保存子弹节点的数组。
    • tick: 计时器,用于控制子弹生成的时间间隔。
  3. update方法:

    • 处理子弹的生成和跟随逻辑。
    • 控制子弹生成的间隔时间。
    • 计算子弹的角度和位置,使其朝向目标节点移动。
    • 如果子弹接近目标节点,触发撞击效果并销毁子弹。

实现关键技巧

实现3D子弹跟随效果的关键在于以下几个方面:

  1. 子弹的创建和初始化: 首先,需要在适当的时机创建子弹,并设置其初始状态。这可能包括子弹的初始位置、缩放、旋转等属性。

  2. 子弹的移动逻辑: 子弹在发射后需要按照一定的逻辑进行移动。这通常包括在每一帧更新子弹的位置,使其沿着指定的方向前进。在3D场景中,你可以使用向量(Vector3)表示子弹的位置和移动方向。

  3. 子弹的朝向: 子弹应该始终朝向目标,以确保追踪效果。在Cocos Creator 3.x中,可以使用lookAt方法使子弹朝向目标节点。

  4. 碰撞检测: 实现子弹与目标的碰撞检测是实现追踪效果的重要一环。通过检测子弹与目标之间的距离或碰撞体是否相交,可以确定是否击中目标。

  5. 击中效果: 当子弹击中目标时,可能需要播放一些效果,比如爆炸、粒子效果等。这可以通过在击中位置实例化相应的效果节点并进行动画或渐隐来实现。

  6. 计时器或触发器: 控制子弹发射的间隔时间,以确保子弹按照设定的频率发射。这可以通过计时器或其他触发机制来实现。

适用场景

3D子弹跟随效果通常适用于各种类型的射击游戏,其中玩家需要与敌人或目标进行互动。以下是一些常见类型的游戏,其中可能会使用这种效果:

  1. 第一人称射击游戏(FPS): 在这类游戏中,玩家通过第一人称视角与敌人交战。实现3D子弹跟随效果可以增加射击的视觉冲击力,使射击体验更加真实和令人满足。

  2. 第三人称射击游戏(TPS): 类似于FPS,但玩家在第三人称视角中控制角色。3D子弹跟随效果可以用于增强射击的动态感和精准度。

  3. 战术射击游戏: 在这种类型的游戏中,玩家通常需要使用策略和团队合作来完成任务。3D子弹跟随效果可以在战术层面上提供更多选择和可能性。

  4. 射击类竞技游戏: 比如射击类电子竞技游戏,玩家需要在竞技场中与其他玩家对抗。3D子弹跟随效果可以提高比赛的紧张感和刺激感。

  5. 虚拟现实(VR)射击游戏: 在VR环境下,玩家可以更直观地感受到3D子弹跟随效果,增强沉浸感和互动性。

效果演示

结语

本文源工程 可通过私信BulletFollow3D获取。

我是"亿元程序员",一位有着8年游戏行业经验的主程。在游戏开发中,希望能给到您帮助, 也希望通过您能帮助到大家。

AD:笔者线上的小游戏《贪吃蛇掌机经典》《重力迷宫球》《填色之旅》大家可以自行点击搜索体验。

实不相瞒,想要个在看 !请把该文章分享给你觉得有需要的其他小伙伴。谢谢!

推荐专栏:

100个Cocos实例

8年主程手把手打造Cocos独立游戏开发框架

和8年游戏主程一起学习设计模式

从零开始开发贪吃蛇小游戏到上线系列

知识付费专栏

相关推荐
徐同保几秒前
使用yarn@4.6.0装包,项目是react+vite搭建的,项目无法启动,报错:
前端·react.js·前端框架
Qrun1 小时前
Windows11安装nvm管理node多版本
前端·vscode·react.js·ajax·npm·html5
中国lanwp1 小时前
全局 npm config 与多环境配置
前端·npm·node.js
JELEE.2 小时前
Django登录注册完整代码(图片、邮箱验证、加密)
前端·javascript·后端·python·django·bootstrap·jquery
TeleostNaCl4 小时前
解决 Chrome 无法访问网页但无痕模式下可以访问该网页 的问题
前端·网络·chrome·windows·经验分享
前端大卫5 小时前
为什么 React 中的 key 不能用索引?
前端
你的人类朋友5 小时前
【Node】手动归还主线程控制权:解决 Node.js 阻塞的一个思路
前端·后端·node.js
小李小李不讲道理7 小时前
「Ant Design 组件库探索」五:Tabs组件
前端·react.js·ant design
毕设十刻7 小时前
基于Vue的学分预警系统98k51(程序 + 源码 + 数据库 + 调试部署 + 开发环境配置),配套论文文档字数达万字以上,文末可获取,系统界面展示置于文末
前端·数据库·vue.js
mapbar_front8 小时前
在职场生存中如何做个不好惹的人
前端