上期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年游戏主程一起学习设计模式

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

知识付费专栏

相关推荐
F-2H14 分钟前
C语言:指针4(常量指针和指针常量及动态内存分配)
java·linux·c语言·开发语言·前端·c++
gqkmiss1 小时前
Chrome 浏览器插件获取网页 iframe 中的 window 对象
前端·chrome·iframe·postmessage·chrome 插件
m0_748247553 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255023 小时前
前端常用算法集合
前端·算法
真的很上进4 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203984 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2344 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1235 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~6 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语6 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js