UI跟随物体的关键是什么?重要吗?

引言

UI的跟随效果

在游戏开发中,UI的跟随效果是提高用户体验和交互性的重要组成部分。

本文将深入介绍如何创建一个高效且可定制的UI跟随目标组件,并分享一些最佳实践。

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

UI跟随物体的关键

UI跟随物体的关键在于确保UI元素能够根据物体的位置和状态进行实时调整,以保持二者的相对关系。

以下是实现UI跟随物体的关键要点:

  1. 实时更新位置信息: UI元素需要获取物体的实时位置信息。在游戏引擎中,通常通过获取物体的世界坐标来实现。这确保了UI元素能够跟随物体的移动、旋转和缩放等变换。

  2. 坐标转换: 物体的位置信息通常是在游戏世界坐标系中表示的,而UI元素则通常在UI坐标系中进行布局。因此,需要进行坐标转换,将物体的世界坐标转换为UI坐标,以正确定位UI元素。

  3. 灵活的偏移和调整: 提供一定的灵活性,允许开发者根据需要设置偏移、调整或添加其他参数,以确保UI元素的位置与物体之间的相对关系满足特定设计或交互需求。

  4. 优化性能: 对UI跟随逻辑进行性能优化是关键。使用合适的更新频率、异步更新机制来确保性能良好。

  5. 考虑遮挡关系: 在某些情况下,物体与UI元素之间可能存在遮挡关系。考虑使用高级的碰撞检测算法或遮挡剔除策略,以确保UI元素在显示时不会被物体遮挡。

  6. 添加动画和缓动效果(可选): 为了提高用户体验,可以考虑在UI跟随过程中添加动画或缓动效果。这使得UI元素在跟随物体的过程中更加平滑和自然。

代码解析

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

@ccclass('UIFollowTarget')
export class UIFollowTarget extends Component {
    @property({ type: Node })
    target: Node | null = null;

    @property({ type: CameraComponent })
    gameCamera: CameraComponent | null = null;

    private _targetPos = v3();
    private _lastUpdateTime = Date.now();

    update(deltaTime: number) {
        let now = Date.now();
        if (now - this._lastUpdateTime < 100) {
            return;
        }
        this._lastUpdateTime = now;

        this.target.getWorldPosition(this._targetPos);
        this.gameCamera.convertToUINode(this._targetPos, this.node.parent, this._targetPos);
        this.node.position = this._targetPos;
    }
}

导入模块

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

在这一部分,我们从Cocos Creator的模块中导入了一些基本的类和对象,包括 _decoratorComponentNodeCameraComponentv3 等。这些模块提供了在Cocos Creator中创建组件和进行游戏开发所需的基本工具。

组件定义与属性声明

typescript 复制代码
@ccclass('UIFollowTarget')
export class UIFollowTarget extends Component {
    @property({ type: Node })
    target: Node | null = null;

    @property({ type: CameraComponent })
    gameCamera: CameraComponent | null = null;

在这一部分,我们使用装饰器 @ccclass 来声明一个名为 UIFollowTarget 的组件,并继承自 Component。同时,通过 @property 装饰器声明了两个属性:targetgameCamera。这些属性将在编辑器中以可视化的方式进行配置,target 表示UI要跟随的目标节点,而 gameCamera 表示游戏中的摄像机。

组件私有变量和更新方法

typescript 复制代码
private _targetPos = v3();
private _lastUpdateTime = Date.now();

update(deltaTime: number) {
    let now = Date.now();
    if (now - this._lastUpdateTime < 100) {
        return;
    }
    this._lastUpdateTime = now;

    this.target.getWorldPosition(this._targetPos);
    this.gameCamera.convertToUINode(this._targetPos, this.node.parent, this._targetPos);
    this.node.position = this._targetPos;
}

这部分代码定义了组件的私有变量 _targetPos_lastUpdateTime_targetPos 用于存储目标节点的世界坐标,而 _lastUpdateTime 记录上一次更新的时间戳。

update 方法是一个在每一帧被调用的方法,用于更新UI元素的位置。通过控制更新的频率,确保不会过于频繁地执行UI的位置更新逻辑。

update 方法中,首先获取目标节点的世界坐标,然后使用摄像机的 convertToUINode 方法将目标坐标转换为UI坐标。最后,将UI元素的位置设置为转换后的坐标,实现UI的跟随效果。

效果演示

结语

通过以上代码解析,我们了解了在Cocos Creator中如何实现一个简单的UI跟随目标组件。

这个组件通过获取目标节点的世界坐标,并利用摄像机的坐标转换功能,将目标坐标转换为UI坐标,从而实现了UI元素与目标物体的关联效果。

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

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

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

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

推荐专栏:

100个Cocos实例

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

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

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

知识付费专栏

相关推荐
范文杰3 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪3 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪3 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy4 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom5 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI6 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端