乐趣区

关于typescript:游戏开发中的红点提示

jiezi

前言

当咱们的游戏开发进度靠近序幕的时候，不仅要做教学疏导的事件，还有一件对于中大型游戏来说十分重要的事件就是红点提醒。它有别于教学疏导，但也是疏导的作用，指引性更明确，而且不会影响 UI 外观和体验的晦涩。

开始

  1. 通过配置两张数据表来记录红点提醒的相干数据。


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

每个红点提醒应用的界面及控件名称。
第二列为属于哪个提醒，所以申明为索引类型。比方 1 来说，就是由 GridLayerListViewTest 的 buttonBack 和 ItemView 的 bg 两个按钮组成，也就是当有新道具增加时，GridLayerListViewTest 的 buttonBack 和 ItemView 两个控件都应该有红点。
第三列和第四列申明为类名和控件名
第五列标识控件是否为道具，因为道具和一般控件的记录形式不同。

  1. 读取配置数据，初始化信息。
    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 信息。次要是为了疾速断定某个界面是否存在某个提醒

  1. 当取得新物品时调用增加函数

增加函数也是做了两件事件
一是排重：记录哪些正在进行中的提醒，如果曾经存在将不再增加。

二是更新记录数据并告诉界面解决红点操作。

  1. 当一个新物品被点击时，移除红点提醒


此办法与增加提醒的办法是绝对的。也做了更新记录数据和告诉 ui 的事件。

  1. 在增加和移除时更新记录的数据
    /**
     * 
     * @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)
                    }
                }
            }

        }
    }

应用

  1. 如果是一般的控件，将 WidgetRedTip 托到 界面的预制体的根节点上即可。
  2. 如果是道具首先须要将 ItemRedTip 组件拖到道具预制体的根节点上。而后在道具中申明一个 ItemRedTip 类型的属性，在更新数据时调用。

  1. 产生新道具时调用提醒管理器的增加函数

  1. 点击道具时移除提醒

  1. demo 展现

只是一个简略的 demo，点击增加物品按钮，登陆按钮上会呈现红点；间接点击道具红点会隐没, 所有道具都点过一遍后左上角按钮的红点才会隐没。

注意事项

  1. 因为应用了事件告诉的形式，所以须要留神监听者的数量，如果道具成千盈百，而且并没有应用 ListView 的形式，那么最好不要应用这种告诉的形式，监听者太多。
  2. 因为应用的是控件名称的形式，所以同一界面中的控件不能够重名
  3. 如果滑动层没有做分层治理，须要留神红点图片产生的 dc 数量。

结语

制作红点的形式很多，我见过有人把所有红点手动增加到指定的按钮上，而后再通过代码显示和暗藏。我比拟懒，所以我抉择动静增加红点图片。

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


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

退出移动版