游戏开发中的红点提示

时间 2020-08-22

标签游戏开发提示栏目游戏繁體版

原文原文链接

前言

当咱们的游戏开发进度接近尾声的时候，不只要作教学引导的事情，还有一件对于中大型游戏来讲很是重要的事情就是红点提示。它有别于教学引导，但也是引导的做用，指引性更明确，并且不会影响UI外观和体验的流畅。函数

开始

经过配置两张数据表来记录红点提示的相关数据。

提示信息表，仅代表都有哪些提示类型。

每一个红点提示使用的界面及控件名称。
第二列为属于哪一个提示，因此声明为索引类型。好比1来讲，就是由GridLayerListViewTest的buttonBack和ItemView的bg两个按钮组成，也就是当有新道具添加时，GridLayerListViewTest的buttonBack和ItemView两个控件都应该有红点。
第三列和第四列声明为类名和控件名
第五列标识控件是否为道具，由于道具和普通控件的记录方式不一样。
读取配置数据，初始化信息。

init() {
        let redtipData: XlsxData = ModuleManager.dataManager.get(RedTipItemModel.CLASS_NAME)
        redtipData.forEach((key, data) => {
            let item = new RedTipItemModel()
            item.init(key, data)
            this.redtipMap.set(key, item)
        })

        let redtipStep: XlsxData = ModuleManager.dataManager.get(RedTipStepModel.CLASS_NAME)
        let indexs = redtipStep.getIndex(Redtip_step_dataEnum.tipID);
        for (const key in indexs) {
            if (indexs.hasOwnProperty(key)) {
                const list = indexs[key];
                for (let index = 0; index < list.length; index++) {
                    const stepID = list[index];
                    let step = new RedTipStepModel()
                    step.init(stepID, redtipStep.getRowData(stepID))
                    this.redtipMap.get(step.getTipID()).addStep(step)
                    // if (index == 0) {
                    let className = step.getClassName();
                    let classMap = this.classNameMap.get(className)
                    if (!classMap) {
                        classMap = []
                        this.classNameMap.set(className, classMap)
                    }
                    classMap.push(step.getTipID())
                }
            }
        }

    }

初始化函数中主要作了两件事情：
一是产生提示所对应的界面和控件数据。

二是产生界面对应的提示id信息。主要是为了快速断定某个界面是否存在某个提示
ui

当得到新物品时调用添加函数

添加函数也是作了两件事情
一是排重：记录哪些正在进行中的提示，若是已经存在将再也不添加。

二是更新记录数据并通知界面处理红点操做。
this

当一个新物品被点击时，移除红点提示

此方法与添加提示的方法是相对的。也作了更新记录数据和通知ui的事情。3d
在添加和移除时更新记录的数据code

/**
     * 
     * @param eventName 事件名称
     * @param step 哪一个控件
     * @param id 道具id
     */
    private updateRecordCount(eventName: string, step: RedTipStepModel, id: number = -1) {
        let className = step.getClassName();
        let widgetName = step.getWidgetName();
        let tipID = step.getTipID();
        let widgetMap = this.getWidgetMap(className, widgetName)

        if (eventName == RedTipEventName.ADD_ITEM_TIP) {//添加
            if (!step.isItem()) {//若是控件不是道具，只是界面上的按钮
                let list = widgetMap.get(tipID)
                if (!list) {
                    list = []
                    widgetMap.set(tipID, list)
                }
                list.push(id)
                if (list.length == 1) {
                    this.emit(eventName + className, step, id)
                }
            } else {//若是是道具
                let list = widgetMap.get(id)
                if (!list) {
                    list = []
                    widgetMap.set(id, list)
                }
                list.push(tipID)
                if (list.length == 1) {
                    this.emit(eventName + className, step, id)
                }
            }

        } else {//移除
            if (!step.isItem()) {
                let list = widgetMap.get(tipID)
                if (list.length > 0) {
                    list.shift()
                    if (this.isWidgetMapNull(widgetMap)) {
                        this.emit(eventName + className, step, id)
                    }
                }
            } else {
                let list = widgetMap.get(id)
                let index = list.indexOf(tipID)
                if (index >= 0) {
                    list.splice(index, 1)
                    if (list.length <= 0) {
                        this.emit(eventName + className, step, id)
                    }
                }
            }

        }
    }

使用

若是是普通的控件，将WidgetRedTip托到界面的预制体的根节点上便可。blog
若是是道具首先须要将ItemRedTip组件拖到道具预制体的根节点上。而后在道具中声明一个ItemRedTip类型的属性，在更新数据时调用。
索引
产生新道具时调用提示管理器的添加函数
游戏
点击道具时移除提示
事件
demo展现
图片

只是一个简单的demo，点击添加物品按钮，登录按钮上会出现红点；直接点击道具红点会消失,全部道具都点过一遍后左上角按钮的红点才会消失。

注意事项

因为使用了事件通知的方式，因此须要注意监听者的数量，若是道具成百上千，并且并无使用ListView的方式，那么最好不要使用这种通知的方式，监听者太多。
因为使用的是控件名称的方式，因此同一界面中的控件不能够重名
若是滑动层没有作分层管理，须要注意红点图片产生的dc数量。

结语

制做红点的方式不少，我见过有人把全部红点手动添加到指定的按钮上，而后再经过代码显示和隐藏。我比较懒，因此我选择动态添加红点图片。

欢迎关注公众号《微笑游戏》，浏览更多内容。

欢迎扫码关注公众号《微笑游戏》，浏览更多内容。