遊戲開發中的紅點提示

遊子陳發表於2020-08-21

前言

當我們的遊戲開發進度接近尾聲的時候，不僅要做教學引導的事情，還有一件對於中大型遊戲來說非常重要的事情就是紅點提示。它有別於教學引導，但也是引導的作用，指引性更明確，而且不會影響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的事情。
在新增和移除時更新記錄的資料

    /**
     * 
     * @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)
                    }
                }
            }

        }
    }