开源一个红点框架

Creator 3.x
#1

今天开源一套红点系统框架，能满足绝大部分游戏项目的红点需求，包括但不限于:

1: 多级界面的UI层级红点显示;

2: "新内容解锁"的UI红点显示;

3: 子界面的红点变化同步到上一级红点显示;

4: 个性化的内容红点显示;

5: 红点层级，内容可任意扩展;

…

效果图如下:

image
image373×713 10.8 KB

image
image384×580 13.7 KB

image
image373×781 22.4 KB

image
image379×785 22.1 KB

image
image
image
image
classRedPoint.zip (43.8 KB)
技术咨询：Blake
微信: 18175133532

3赞
#2

开源的话你得把github的地址发出来，一个压缩包有点难顶

#3

我猜这是一个学员的作业 :rofl:

#4

就算是作业，做的好那也得支持一下 :smile:

#5

没有类，这个是红点的一个专题，完整的实现一下现在游戏中的红点需求。

#6

界面就随便做一下，这个不重要。
红点显示:
a:显示在一个层级内，方便合批;
b:节点池来做好红点的创建于销毁;
c: 支持配置文件生成任意的红点层级结构，层级的深度不限;
d: 平常开发的逻辑功能与红点无关，红点可最后再接入。

#7

支持下布莱克老师，等我抽空下载学习下

#8

Blake 我觉得你还不如让学生好好学一下 github 怎么提交和开源，怎么维护开源社区。
说不定能攒几百个 star 出去吹吹牛。

5赞
#9

billbill，知乎搜索unity和cocos全是你的水军，印象分在我这里是负10000000000000000000

2赞
#10

unity 还好，cocos 本来视频少，这下更难找其他的了，， :innocent:

1赞
#11

下载来看了一下，说说个人的结论，这套红点功能是全的，但用起来是不好用的。
最大问题，红点用起来的时候，没有聚焦真正的业务逻辑。

开发者其实只关心：
1、什么情况下红，（计算某个按钮上红点的 boolean 或者 number）
2、什么东西导致我变红（事件或者信｜号）。
3、红点的包含关系（子节点红了，父节点红）。
4、红点 UI 要自动加载、显示、隐藏和销毁。

所以介绍下我的红点方案（仅提供思路）
1、定义红点逻辑类，并注册红点类。

@regRed("GearFreeBuyRed")
export class GearFreeBuyRed implements IRed {
    calcRed(): boolean {
        return fw.tnStateCtr.getState(id_tnstate.buy_gear).isFreeBuy(fw.timer.ts);
    }

    getSignals(signals: Signal[]) {
        signals.push(fw.tnStateCtr.getState(id_tnstate.buy_gear).change_signal)
    }
}

这个红点只关心什么情况下红，以及哪些消息会导致我标记红点变脏，导致更新红点状态。

2、红点渲染类，对应红点预制体（整个游戏开发过程，只要制作一个红点渲染类，一次性工作）

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


@ccclass('RedDisplay')
export class RedDisplay extends Component {
    setRed(isRed: boolean) {
        this.node.active = isRed;
    }
}

3、红点组件，用来绑定红点逻辑后，自动管理红点 UI 的显示、隐藏和销毁。（一次性工作）

import { _decorator, Component } from 'cc';
import { F_GET_UITRANSFORM, Signal } from "danxm";
import { IRed } from './IRed';
import { RedDisplay } from './RedDisplay';
import { getRed } from './RedRegister';
const { ccclass, property } = _decorator;


@ccclass('RedCom')
export class RedCom extends Component {
    @property private redKey: string = '';
    private m_RedInst: IRed = null;

    private __i_display: RedDisplay = null;
    private __i_scheduling: boolean = false;
    private __i_Signals: Signal[] = [];

    protected onEnable(): void {
        this.__i_Signals.forEach(signal => signal.add(this.MarkRedDirty, this));
        this.MarkRedDirty();
    }

    protected onDisable(): void {
        this.__i_Signals.forEach(signal => signal.remove(this.MarkRedDirty, this));
    }

    onLoad() {
        let redClass = getRed(this.redKey);
        if (!redClass) {
            console.error(`红点关键字:${this.redKey} 找不到对应的红点类`)
            return;
        }
        const redInst = this.m_RedInst = new redClass();
        redInst.getSignals(this.__i_Signals);

        const display = this.__i_display = fw.ui.instantiate(RedDisplay);
        display.node.setParent(this.node);
        let ptr = F_GET_UITRANSFORM(this.node);
        display.node.position.set((1 - ptr.anchorX) * ptr.width, (1 - ptr.anchorY) * ptr.height);
        display.setRed(false);
    }

    private m_RedDirty: boolean = false;
    protected MarkRedDirty() {
        if (this.m_RedDirty === true) {
            return;
        }
        this.m_RedDirty = true;

        if (this.__i_scheduling) {
            return
        }

        this.__i_scheduling = true;
        this.schedule(this.__scheduleToUpRed, 0.5);
    }

    private __scheduleToUpRed() {
        this.__i_scheduling = false;
        this.unschedule(this.__scheduleToUpRed);
        this.m_RedDirty = false;
        this.__i_display.setRed(this.m_RedInst.calcRed());
    }
}

最后，界面中，某个 Node 需要挂红点，只需要在 Node 上添加 RedCom 组件，填上红点关键字。

image
image1310×588 60.7 KB

最后再补充下红点组的逻辑：
1、红点组基类（一次性工作）

export abstract class RedGroup implements IRed {
    protected abstract  children: IRed[];

    calcRed(): boolean {
        for (let i = this.children.length - 1; i >= 0; --i) {
            if (this.children[i].calcRed()) {
                return true;
            }
        }
        return false;
    }
    getSignals(signals: Signal[]) {
        for (let i = this.children.length - 1; i >= 0; --i) {
            this.children[i].getSignals(signals)
        }
    }
}

2、某个红点是其他红点的组合，只要继承红点组即可。

@regRed("SidebarRed")
export class SidebarRed extends RedGroup {
    // 这里添加逻辑红点实例
    protected children: IRed[] = [
        new TestRed()
    ]
}

回顾一下开发者后续新增红点功能时只要做的事情：
1、根据红点情况，定义红点逻辑（普通红点或者红点组）
2、界面挂组件，填对应关键字。

这样开发者才能聚焦真正的业务逻辑。其他的都应该自动计算。

5赞
#12

我的红点方案和你的类似，只是我的 key 是用 enum[] 来代替的，直接设计成红点组合 :rofl:。
另外红点内还加了个可选的红点数量显示。
其它的实现方式和你的方案都差不多。

1赞
#13

嗯，其实正常应该都是这套逻辑

#14

关于这块，我看了以下，最大的区别在于用的时候，节点上挂脚本来决定是否在某个UI显示红点。但是我们用的时候还是更习惯于更具LayerId, 自己去显示到UI上（如果有需要可以加一个组件去做这个事情）。 比如红点层级关系，是可以通过配置来进行修改与描述。这种后续做网络游戏的时候，服务端生成红点配置，能更好的对接。就是那个层级配置表。

#15

image
image922×699 25.6 KB
这个表更多的还是可以对接来自服务器上生成的数据。

#16

显示红点：你的方案是加组件，我们的调用:

image
image1218×47 5.85 KB

关于自动更新红点，我们也是自动更新的。
image
image752×255 16.1 KB

这里确实可以改造，成挂组件到UI上。

#17

你把cocos内容少，归结于我，这个锅我背不动哈。

#18

抱歉哈。推广的方式有时候是连我都有点讨厌，解决方案为：
(1)转型做运营发行，不搞技术类的了,毒害策划和运营，报复他们老变需求，老叼程序;
(2)转型做游戏，做那些排行榜上的游戏，看谁来了就抄写一个，比如打螺丝，排行榜上8款都是打螺丝。
(3)转型做AI，GEO生成式关键字搜索，让后让大模型老出错。
…
求理解，我们也只是在B站混口饭吃而已。

#19

请问节点旁边显示TS脚本是什么插件

#20

3.8.7版本的功能