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元素在跟随物体的过程中更加平滑和自然。

代码解析

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;
    }
}

导入模块

import { _decorator, Component, Node, CameraComponent, v3 } from 'cc';
const { ccclass, property } = _decorator;

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

组件定义与属性声明

@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 表示游戏中的摄像机。

组件私有变量和更新方法

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

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

知识付费专栏

你可能感兴趣的:(100个Cocos实例,Cocos,游戏开发心得,ui)