# UI 文件分類規則建議說明

## UI 分類說明

主要會把 UI 元件分為兩大類：
- 靜態元件
- 動態元件

這樣區分的好處是，對於後續圖集庫 (Atlas) 的製作能夠有效的區分，甚至有助於打包策略，進而降低 Drawcalls 提升效能。

---

## UI <font color=#55DD55>靜態元件</font> - 文件夾分類建議

流水號視情況，通常看 UI 製作與未來的量，**靜態元件**以正常三位數就足夠編碼了。

文件夾 - Logo (商標) =>

[歸類: logo]

ex: logo_001… 以此類推

文件夾 - Elements (元件類) =>

[歸類: btn, decor (decoration), mask, grad (gradient), label, bar, icon] (固定尺寸)

[歸類: sbtn, sdecor, smask, sgrad, slabel, sbar ] (以小圖延展)

Note: s 表示 stretch 可延展

ex: btn_001, decor_001, mask_001… 以此類推。

文件夾 - Panels (底板類) =>

[歸類: panel]

ex: panel_001… 以此類推

文件夾 - TxtImgs (包含文字的 UI 元件類 <如有多語系建議少用>) =>

[歸類: txtimg]

ex:

英文 EN/en_txtimg_001… 以此類推 (語系資料夾 + 前墜為語系)

繁中 TC/tc_txtimg_001… 以此類推 (語系資料夾 + 前墜為語系)


---

## UI <font color=55DD55>靜態元件</font> - 圖示舉例說明

### Elements (元件)

| Btn 類 | Decor 類 |
|:-:|:-:|
|  |  |
| Grad 類 | Mask 類 |
|  |  |
| Label 類 | Bar 類 |
|  |  |
| Icon 類 | |
|  | |

### Panels (面板)

| Panel 類 |
|:-:|
|  |

### TxtImgs (元件包含文字)

| TxtImg 類 |
|:-:|
|  |

---

## UI <font color=#5555DD>動態元件</font> - 文件夾分類建議

動態元件主要是**跟著遊戲表 ID 進行動態加載**，所以動態元件幾乎都會跟著表 ID 命名，也會將這些動態元件整理成 Atlas。

列舉動態元件為以下：
- 角色頭像
- 物品 ICON
- 寵物 ICON
- 技能 ICON
- 聊天貼圖
- 聊天泡泡框
- 稱號圖示
- 等等...

流水號視情況，通常看 Atlas UI 製作與未來的量，**動態元件**幾乎都依照表 ID 的流水編號走。

文件夾 - CharAtlas (角色相關圖集庫) =>

[歸類: Char icons (角色頭像框, 頭像等)]

ex: Frames/CF10001… 以此類推 (CF = Char Frame -> 跟著物品表【頭像框】解鎖 ID 走)

ex: Icons/CI10001… 以此類推 (CI = Char Icon -> 跟著物品表【頭像】解鎖 ID 走)

文件夾 - ItemAtlas (物品相關圖集庫) =>

[歸類: Item icons (物品品皆框, 物品圖示等)]

ex: Frames/IT_rank_001… 以此類推 (IT = Item -> 自行定義)

ex: Icons/IT10001… 以此類推 (IT = Item -> 跟著物品表 ID 走)


---

## UI <font color=#5555DD>動態元件</font> - 圖示舉例說明

### CharAtlas 文件夾

| Char - Frames 類 | Char - Icons 類 |
|:-:|:-:|
|  |  |

### ItemAtlas 文件夾

| Item - Frames 類 | Item - Icons 類 |
|:-:|:-:|
|  |  |