引言

实现导弹跟随的游戏开发技巧

在游戏开发中，实现导弹跟随是一项常见而关键的技术。

下面我们将通过分析一段游戏代码，深入了解如何在游戏中实现导弹跟随的效果。

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

直接上代码

import { _decorator, CCFloat, Component, EventTouch, input, Input, instantiate, Node, Sprite, tween, UITransform, v3, Vec2, Vec3, view, Widget } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('BulletFollow2D')
export class BulletFollow2D extends Component {
    @property(Node)
    target: Node;
    @property(Node)
    bulletPfb: Node;
    @property(Node)
    bumpPfb: Node;
    @property(CCFloat)
    internal: number = 5;
    @property(CCFloat)
    speed: number = 100;

    touchDown: boolean = false;
    bullets: Node[] = [];
    tick: number = this.internal;

    start() {
        input.on(Input.EventType.TOUCH_START, (event: EventTouch) => {
            this.onTouch(event);
            this.touchDown = true;
        }, this);
        input.on(Input.EventType.TOUCH_MOVE, (event: EventTouch) => {
            if (this.touchDown)
                this.onTouch(event);
        }, this);
        input.on(Input.EventType.TOUCH_END, (event: EventTouch) => {
            this.touchDown = false;
        }, this);
    }

    onTouch(event: EventTouch) {
        var size = view.getVisibleSize();
        this.target.setPosition(event.getUILocation().x - size.width / 2, event.getUILocation().y - size.height / 2, 0);
    }

    update(deltaTime: number) {
        this.tick += deltaTime;
        if (this.tick >= this.internal) {
            this.tick -= this.internal;
            var bullet = instantiate(this.bulletPfb);
            bullet.getComponent(Widget).destroy();
            bullet.scale = this.bulletPfb.scale.clone().divide3f(2, 2, 2);
            bullet.parent = this.bulletPfb.parent;
            tween(bullet).by(1, { position: v3(0, this.bulletPfb.getComponent(UITransform).width / 2 * this.bulletPfb.scale.x + bullet.getComponent(UITransform).width / 2 * bullet.scale.x, 0) })
                .call(() => {
                    this.bullets.push(bullet);
                }).start();
        }
        for (let i = this.bullets.length - 1; i >= 0; i--) {
            let bullet = this.bullets[i];
            let position = bullet.position;
            let targetPos = this.target.getPosition();
            let dir = targetPos.subtract(position).normalize();
            bullet.angle = Math.atan2(-dir.y, -dir.x) * 180 / Math.PI;
            bullet.setPosition(position.x + dir.x * this.speed * deltaTime, position.y + dir.y * this.speed * deltaTime, position.z);
            if (Vec3.distance(bullet.position, this.target.position) < 10) {
                this.bullets.splice(i, 1);
                bullet.destroy();

                let bump = instantiate(this.bumpPfb);
                bump.parent = this.bumpPfb.parent;
                bump.position = this.target.position;
                bump.scale = Vec3.ZERO;
                bump.active = true;
                tween(bump)
                    .to(0.3, { scale: v3(0.2, 0.2, 0.2) })
                    .delay(0.1)
                    .call(() => { bump.destroy(); })
                    .start();
            }
        }
    }
}

代码解析

让我们逐步解析代码：

1. 属性:
2. target: 导弹跟随的目标节点。
3. bulletPfb: 导弹的预制节点。
4. bumpPfb: 撞击效果的预制节点。
5. internal: 导弹生成的间隔时间。
6. speed: 导弹移动的速度。
7. 变量:
8. touchDown: 触摸是否按下的标志。
9. bullets: 保存导弹节点的数组。
10. tick: 计时器，用于控制导弹生成的时间间隔。
11. start方法:
12. 处理触摸事件，监听触摸开始、移动和结束。
13. onTouch方法:
14. 根据触摸位置设置目标节点的位置。
15. update方法:
16. 处理导弹的生成和跟随逻辑。
17. 控制导弹生成的间隔时间。
18. 计算导弹的角度和位置，使其朝向目标节点移动。
19. 如果导弹接近目标节点，触发撞击效果并销毁导弹。

实现关键技巧

1. 触摸事件处理:
2. 通过监听触摸开始、移动和结束事件，实时更新目标节点的位置，使其跟随玩家的触摸移动。
3. 导弹生成:
4. 根据设定的时间间隔，生成新的导弹节点，并设置其初始位置和缩放。
5. 导弹跟随:
6. 在每帧更新中，计算导弹朝向目标节点的方向，并根据速度移动导弹。
7. 撞击效果:
8. 当导弹接近目标节点时，触发撞击效果，创建撞击效果节点并播放动画，最终销毁效果节点。

优化建议

1. 对象池管理:
2. 使用对象池管理导弹节点，以便重复使用，提高性能。
3. 动画系统:
4. 利用游戏引擎的动画系统，更灵活地实现导弹和撞击效果的动画。
5. 参数调优:
6. 根据实际需求调整导弹生成间隔、速度、撞击距离等参数，以达到最佳的游戏体验。

效果演示

结语

通过以上技巧和优化建议，你可以更好地理解和运用导弹跟随的实现方式，使游戏开发更加高效和有趣。

原来游戏中的导弹是这样尾随目标的，我吓了一跳!
原文链接：https://juejin.cn/post/7324582173394288694