Egret UI開發的疑難雜症

雜症目錄

雜症1：使用 eui.List 進行排序時，發生 item 排序位置不符合預期
雜症2：UI元件在大尺寸的螢幕下，呈現全黑的畫面
雜症3：新增 Skin 和 Component code 後，啟動遊戲會出現 Component 初始化錯誤訊息

雜症1

問題描述

使用 eui.List 進行排序時，發生 item 排序位置不符合預期

問題範例圖片

圖中的籌碼應該要對齊凹槽，但是位置偏移了

發生原因

在 ItemRenderSkin 裡面，除了籌碼本身外，還有放置一個大於籌碼大小的發光圖片

雖然 Skin 和籌碼有設定固定長寬，但是在 eui.List 的 Item 初始排序時，不知為什麼會參考到發光圖片的長寬，而不是設定的固定長寬，因此最終的排序結果就不如預期

但是在點擊按鈕之後，籌碼的長寬就會恢復原狀，因此判斷是初始排序才會發生的問題

解決

只要在發光圖片上，將 includeInLayout 設定為 false，將發光圖片排除在 Layout 之外就能解決問題

題外話：後來發現可能是 core.AutoScaleButton 機制的問題，如果 AutoScaleButton 的 skin 裡面沒有使用 Group 將內容包起來時，高機率發生按鈕圖片位移問題

雜症2

問題描述

UI元件在大尺寸的螢幕下，呈現全黑的畫面

圖中可以看到背景的畫面是全黑的，並且在 console 出現錯誤訊息

發生原因

目前不是非常確定發生的原由，但根據以下列討論判斷，可能是擴展的圖片長或寬超過 2048 所導致
https://bbs.egret.com/thread-48503-1-1.html
https://stackoverflow.com/questions/46109392/how-to-find-out-max-texture-size-for-webgl-on-my-system

以下對猜測進行了測試

模擬器寬度 2400，遊戲畫面寬度 2134，有出現錯誤訊息
模擬器寬度 2100，遊戲畫面寬度 1828，沒有出現錯誤訊息
模擬器寬度 2300，遊戲畫面寬度 2046，沒有出現錯誤訊息
模擬器寬度 2350，遊戲畫面寬度 2090，有出現錯誤訊息

測試結果發現，只要遊戲畫面寬度超過 2048 時，就會發生畫面全黑的情況，也稍微證明圖片超過 2048 時，的確會造成某些異常狀況發生

解決

目前畫面全黑的現象大多是發生在背景，而背景通常是使用以下兩個 UI 元件來呈現
eui.Image
eui.Rect

在 eui.Image 作為背景的情況下

只要 cacheAsBitmap 屬性不為 true 的話，即使長寬超過 2048 也不會變成全黑狀態

猜測 eui.Image 或許有特別處理過(?)

因此若元件為 eui.Image，但是長或寬超過 2048 卻會造成畫面全黑時，可以檢查 cacheAsBitmap 屬性是否為 true

在 eui.Rect 這裡就不怎麼幸運了，eui.Rect 只要長或寬超過 2048 就一定會變成全黑，因此目前唯一的解決辦法是

若要全屏擴展時，不要使用 eui.Rect 來實現，改為使用 eui.Image 來實現

雜症3

問題描述

新增 Skin 和 Component code 後，啟動遊戲會出現 Component 初始化錯誤訊息

發生原因

目前猜測可能是 Skin 的 class 與 Component 的 class 的在 runtime 中的排序出現問題，導致 Component 初始化的時候無法辨識 Skin 而出現錯誤

解決

將出現問題的 SkinName 改名，把原先預設的 skin. 加回去，這樣錯誤就沒有再次出現

目前遇到的案例只有一次，尚無法保證是 100% 的解決方式

tags: 遊戲筆記