遊戲開發中的紅點提示
阿新 • • 發佈: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) } } } } }
使用
-
如果是普通的控制元件,將WidgetRedTip託到 介面的預製體的根節點上即可。
-
如果是道具首先需要將ItemRedTip元件拖到道具預製體的根節點上。然後在道具中宣告一個ItemRedTip型別的屬性,在更新資料時呼叫。
-
產生新道具時呼叫提示管理器的新增函式
-
點選道具時移除提示
-
demo展示
只是一個簡單的demo,點選新增物品按鈕,登陸按鈕上會出現紅點;直接點選道具紅點會消失,所有道具都點過一遍後左上角按鈕的紅點才會消失。
注意事項
- 由於使用了事件通知的方式,所以需要注意監聽者的數量,如果道具成百上千,而且並沒有使用ListView的方式,那麼最好不要使用這種通知的方式,監聽者太多。
- 由於使用的是控制元件名稱的方式,所以同一介面中的控制元件不可以重名
- 如果滑動層沒有做分層管理,需要注意紅點圖片產生的dc數量。
結語
製作紅點的方式很多,我見過有人把所有紅點手動新增到指定的按鈕上,然後再通過程式碼顯示和隱藏。我比較懶,所以我選擇動態新增紅點圖片。
歡迎關注公眾號《微笑遊戲》,瀏覽更多內容。
歡迎掃碼關注公眾號《微笑遊戲》,瀏覽更多內容。