Unity红点系统（Lua语言实现）

Unity红点系统是一种常见的游戏UI设计机制，用于提示玩家有未查看的内容或可操作的功能。它通常表现为一个小红点，出现在按钮、图标或菜单项上，提醒玩家进行交互。

《Unity红点系统（Lua语言实现）》

红点节点脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
local RedDotNode = class() -- class是项目中封装的一个模拟面向对象中的类的功能

function RedDotNode:__new(name, parent)
    self.name = name        -- 名称
    self.parent = parent    -- 父节点
    self.childList = nil    -- 子节点列表
    self.gameObject = nil   -- 红点游戏物体
    self.txtComp = nil      -- 显示数量的组件
    self.count = 0          -- 红点数量
end

-- 注册红点时调用
function RedDotNode:RegisterHandle(parentGo)
    -- 查找物体下面是否有红点物体
    local go = __FindChild(parentGo, "RedDot")
    -- 如果有直接设置为该节点的红点游戏物体
    -- 否则就进行动态加载并实例化
    if go then
        self.gameObject = go
    else
        -- 这里是根据key的后缀加载不同的红点预制
        -- 并设置其位置
        local prefabName = string.endWith(self.name, "_NUM") and "NumRedDot" or "RedDot"
        go = __UIResouseIns:LoadUIPrefab('UI/Panel/' .. prefabName, 0, parentGo.transform) -- 这个是我们项目封装的加载并实例化的接口
        go.name = "RedDot"
        local rtPoint = go:GetComponent(CSType.RectTransform)
        if not rtPoint then
            rtPoint = go:AddComponent(CSType.RectTransform)
        end
        if not rtPoint then
            UnityEngine.GameObject.Destroy(go)
            return
        end
        rtPoint.anchorMax = Vector2.New(1, 1)
        rtPoint.anchorMin = Vector2.New(1, 1)
        rtPoint.anchoredPosition = Vector2.New(-16, -16)
        self.gameObject = go
    end
    -- 查找红点下的显示数量的Text组件
    self.txtComp =  __FindChild(self.gameObject, "TxtCount", CSType.Text)
    self:Refresh()
end

-- 注销红点时进行调用
function RedDotNode:UnRegisterHandle()
    self.gameObject = nil
    self.txtComp = nil
end

-- 红点是否点亮（当数量>0是该红点就为点亮状态）
function RedDotNode:IsValid()
    return self.count > 0
end

-- 添加子节点
function RedDotNode:AddChild(name)
    if not self.childList then
        self.childList = {}
    end
    local node = RedDotNode.new(name, self)
    table.append(self.childList, node)
    return node
end

-- 通过名字获取子节点
function RedDotNode:GetChild(name)
    for _, node in ipairs(self.childList or {}) do
        if node.name == name then
            return node
        end
    end
end

-- 设置红点显示状态
function RedDotNode:SetValid(isValid)
    -- 如果设置的红点显示状态和当前状态一直，并且当前结点是叶子结点就不进行处理
    if self:IsValid() == isValid and (not self.childList or #self.childList <= 0) then
        return
    end
    if isValid then
        -- 状态为 true, 红点数量加1
        self.count = self.count + 1
    else
        -- 状态为 false，红点数量减1
        self.count = self.count - 1
    end
    -- 刷新红点显示
    self:Refresh()
    -- 如果当前节点存在父节点，则继续设置父节点状态
    if self.parent then
        self.parent:SetValid(isValid)
    end
end

-- 刷新红点显示
function RedDotNode:Refresh()
    -- 如果红点游戏物体为null，不做处理
    if tolua.isnull(self.gameObject) then
        return
    end
    -- 如果存在显示红点数量的Text，就设置数量显示
    if self.txtComp then
        self.txtComp.text = self.count >= 100 and "99" or self.count
    end
    -- 设置红点物体的显示状态
    __SetActive(self.gameObject, self:IsValid())
end

return RedDotNode

红点管理器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
RedDotMgr = {}
require("scripts/common/reddot/RedDotDefine")
local RedDotNode = require("scripts/common/reddot/RedDotNode")
RedDotMgr.key_map = {}
RedDotMgr.root = nil

-- 注册红点
-- parentGo: 需要显示红点的物体
function RedDotMgr:Register(key, parentGo)
    local node = self:_GetNode(key)
    if node then
        node:RegisterHandle(parentGo)
        --node:Refresh()
    end
end

-- 注销红点
function RedDotMgr:UnRegister(key)
    if not self:IsNodeExist(key) then
        return
    end
    local node = self:_GetNode(key)
    if node then
        node:UnRegisterHandle()
    end
end

-- 设置红点显示状态（只能设置叶子结点）
function RedDotMgr:SetValid(key, isValid)
    local node = self:_GetNode(key)
    if node.childList and #node.childList > 0 then
        LogError("SetValid Error: 只能设置叶子节点的状态！key=" .. key)
        return
    end
    node:SetValid(isValid)
end

-- 判断key对应的红点是否显示
function RedDotMgr:IsValid(key)
    if self:IsNodeExist(key) then
        local node = self:_GetNode(key)
        return node:IsValid()
    end
    return false
end

-- 组装Key
function RedDotMgr:PackKey(prefixKey, ...)
    local args = { ... }
    local key = string.format("%s.%s", prefixKey, table.concat(args, '.'))
    return key
end

-- 获取节点
function RedDotMgr:_GetNode(key)
    if not self.root then
        self.root = RedDotNode.new("Root")
    end
    local keyList = self:_ParseKey(key)
    local node = self.root
    for _, name in ipairs(keyList) do
        local tempNode = node:GetChild(name)
        if not tempNode then
            tempNode = node:AddChild(name)
        end
        node = tempNode
    end
    return node
end

-- 节点是否存在
function RedDotMgr:IsNodeExist(key)
    return self.key_map[key] ~= nil
end

function RedDotMgr:_ParseKey(key)
    if string.isNilOrEmpty(key) then
        LogError("ParseKey Error: Key不能为空!")
        return
    end
    local keyList = self.key_map[key]
    if not keyList then
        keyList = string.split(key, '.')
        self.key_map[key] = keyList
    end
    return keyList
end

红点Key定义

1
2
3
4
5
6
7
8
9
10
--- 如果需要显示数字红点，则在节点key后面加上_NUM
RedDot = {
    --- 任务
    MainTask = "Task_NUM",          -- 主界面任务按钮
    Task1 = "Task_NUM.Task1",       -- 任务1
    Task2 = "Task_NUM.Task2",       -- 任务2
    --- 活动
    MainActivity = "MainActivity",      -- 主界面活动按钮  
    SignIn = "MainActivity.SignIn",     -- 签到活动
}

https://www.blinkedu.cn/index.php/2021/08/20/213/