【单脚本】红点工具，解决UI添加红点的繁琐操作

山山山 · 发表于 2023-7-11 16:02:21

本帖最后由山山山于 2023-7-11 16:02 编辑

在为游戏中的UI添加红点时，普通做法是先给每个需要红点的地方都加上红点UI，然后通过代码逻辑控制每一个UI的显隐。同时，如果想要对UI红点进行一些增删的修改，也要同时修改两部分内容。因为同时涉及到编辑器UI和代码的两部分操作，所以整体来看显得比较繁琐。

如果有一个工具，1 - 能够直接给对应的UI添加红点，2 - 可以控制这个UI组件是否显示红点，3 - 在UI隐藏时对应的红点也会隐藏。那么对红点的管理只需要通过代码就可以实现了。

功能介绍：
  1.可以创建多个红点事件
  2.每个红点事件可以绑定多个UI控件
  3.自动处理zOrder层级
  4.自动跟随UI控件的显隐
  5.支持以指定事件的UI进行扩展创建新的红点事件
  6.支持获取指定事件的UI列表。

工具扩展性：
- 在Runtime时，可以通过API动态调用即可达到对应效果。
- 通过事件名，触发/隐藏两个API管理树的显示隐藏即可。
- 无需关注性能点，内部有做对应优化。

演示视频

一分钟快速上手

单脚本工具：

RedDotUtil.ts (8.08 KB, 下载次数: 71)

2023-7-11 15:33 上传

点击文件名下载附件
红点UI：

RedDotTip.ui (2.14 KB, 下载次数: 71)

2023-7-11 15:33 上传

点击文件名下载附件
示例项目：

RedDotTool.rar (20.75 MB, 下载次数: 74)

2023-7-11 15:36 上传

点击文件名下载附件

首先要做的是将单脚本工具放置在JavaScript目录下，将红点UI文件放置在UI目录下并导出UI脚本。

接下来会通过示例项目来讲解一下红点工具的具体使用方法。
首先，假设在一个panel中有十个button，这10个button中的前6个需要显示红点，那么提前预设一个激活红点的item列表，在这个列表中的itemId会显示红点。
在脚本开始时显示主UI，同时在onUpdate中注册红点工具的onUpdate方法。

@Core.Classexport default class GameStart extends Core.Script {

    // 设定有10个item

    public readonly itemNum: number = 10;

    // 默认激活的items

    public static activeItems: number[] = [0, 1, 2, 3, 4, 5]

    /** 当脚本被实例后，会在第一帧更新前调用此函数 */

    protected async onStart(): Promise<void> {

        if (SystemUtil.isServer()) {

            return;

        }

        UI.UIManager.instance.show(HudUI);

        this.useUpdate = true;

    }

    public onUpdate(dt: number): void {

        super.onUpdate(dt);

        RedDotUtil.instance.onUpdate(dt);

    }

}

在HuiUI脚本中，会给主界面的button添加红点，同时有一个有一个检查红点的方法，当item的激活列表为空的时候隐藏红点。

export class HudUI extends HudUI_Generate {

    onStart() {

        RedDotUtil.instance.addRedDotPath("GameItem", this.mButtonPanel);

        this.checkItems();

        this.mButtonPanel.onClicked.add(() => {

            this.showPanel();

        })

    }



    checkItems() {

        if (GameStart.activeItems.length > 0) {

            RedDotUtil.instance.triggerRedDotEvent("GameItem");

        }

        else {

            RedDotUtil.instance.hideRedDotEvent("GameItem");

        }

    }



    showPanel() {

        UI.UIManager.instance.show(PanelUI);

    }

}

在PanelUI中，首先添加了10个itemUI，每个itemUI中都包含一个button。对于这每一个item，会检查它们是否在激活列表中，如果在的话就给其中的button添加红点，反之则移除红点。
在每个item的button被点击时，会在激活列表中移除它的id，同时移除自己的红点，并执行一次Hud页面的红点检查逻辑。

export class PanelUI extends PanelUI_Generate {

    items: Map<number, ItemUI> = new Map();

    onStart() {

        this.mButtonClose.onClicked.add(() => {

            UI.UIManager.instance.hideUI(this);

        })

    }



    onShow() {

        for (let i = 0; i < 10; i++) {

            this.addItem(i);

        }

        this.checkItems();

    }



    addItem(id: number) {

        if (!this.items.has(id)) {

            const ui = UI.UIManager.instance.create(ItemUI);

            this.mCanvasItems.addChild(ui.uiObject);

            this.items.set(id, ui);

            ui.mButtonItem.onClicked.add(() => {

                console.log(`click item ${id}`);

                const index = GameStart.activeItems.indexOf(id);

                if (index != -1) {

                    RedDotUtil.instance.removeRedDotEvent(`item${id}`);

                    GameStart.activeItems.splice(index, 1);

                    UI.UIManager.instance.getUI(HudUI).checkItems();

                }

            })

        }

    }



    checkItems() {

        this.items.forEach((item, key) => {

            if (GameStart.activeItems.includes(key)) {

                RedDotUtil.instance.addRedDotPath(`item${key}`, item.mButtonItem);

                RedDotUtil.instance.triggerRedDotEvent(`item${key}`)

            }

            else {

                RedDotUtil.instance.removeRedDotEvent(`item${key}`);

            }

        })

    }

}

在这之后，就是上面视频的表现效果啦。整个流程中，并没有提前在HudUI或ItemUI的UI文件中中添加实际的红点组件，而是通过代码生成了单独的红点并将它们放在了对应button的位置上。

API使用
- 添加一个红点：

RedDotUtil.instance.addRedDotPath("test", this.mbtn1, ...这里可以写多个控件);

- 触发显示红点：

RedDotUtil.instance.triggerRedDotEvent("test");

- 隐藏红点

RedDotUtil.instance.hideRedDotEvent("test");

- 移除红点

RedDotUtil.instance.removeRedDotEvent("test");

- 根据test红点扩展新生成test2红点

RedDotUtil.instance.addRedDotPathByEvt("test", "test2", this.mbtn2, ...这里可以写多个控件);

//此时test2红点中包含两个控件 this.mbtn1 和 this.mbtn2

- 根据test红点事件名，获取所关联的Array<UI.Widget>

let uiArr = RedDotUtil.instance.getRedDotUIArrsByEventName("test");

kk · 发表于 2023-7-11 18:25:19

确实秀

汽汽汽汽水 · 发表于 2023-8-3 09:38:52

[开发者心得] 【单脚本】红点工具，解决UI添加红点的繁琐操作

相关帖子