# Egret UI開發的疑難雜症

### 雜症目錄
[雜症1：使用 eui.List 進行排序時，發生 item 排序位置不符合預期](https://hackmd.io/aVPfckLQQ6-CzDMC82s7Jg#%E9%9B%9C%E7%97%871)
[雜症2：UI元件在大尺寸的螢幕下，呈現全黑的畫面](https://hackmd.io/aVPfckLQQ6-CzDMC82s7Jg#%E9%9B%9C%E7%97%872)
[雜症3：新增 **Skin** 和 **Component code** 後，啟動遊戲會出現 **Component** 初始化錯誤訊息](https://hackmd.io/aVPfckLQQ6-CzDMC82s7Jg#%E9%9B%9C%E7%97%873)

## 雜症1
### 問題描述
:::danger
**使用 eui.List 進行排序時，發生 item 排序位置不符合預期**
:::

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

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

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

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

### 解決
只要在發光圖片上，將 includeInLayout 設定為 false，將發光圖片排除在 Layout 之外就能解決問題
:::info
題外話：後來發現可能是 **core.AutoScaleButton** 機制的問題，如果 **AutoScaleButton** 的 **skin** 裡面沒有使用 **Group** 將內容包起來時，高機率發生按鈕圖片位移問題
:::

## 雜症2
### 問題描述
:::danger
**UI元件在大尺寸的螢幕下，呈現全黑的畫面**
:::


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

### 發生原因
目前不是非常確定發生的原由，但根據以下列討論判斷，可能是擴展的圖片長或寬超過 2048 所導致
[https://bbs.egret.com/thread-48503-1-1.html](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](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** 作為背景的情況下
:::info
只要 **cacheAsBitmap** 屬性不為 **true** 的話，即使長寬超過 **2048** 也不會變成全黑狀態
:::
猜測 **eui.Image** 或許有特別處理過(?)

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

在 **eui.Rect** 這裡就不怎麼幸運了，**eui.Rect** 只要長或寬超過 **2048** 就一定會變成全黑，因此目前唯一的解決辦法是
:::info
若要全屏擴展時，不要使用 **eui.Rect** 來實現，改為使用 **eui.Image** 來實現
:::

## 雜症3
### 問題描述
:::danger
新增 **Skin** 和 **Component code** 後，啟動遊戲會出現 **Component** 初始化錯誤訊息
:::

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

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

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

###### tags: `遊戲筆記`