193 lines
14 KiB
Markdown
193 lines
14 KiB
Markdown
# Unity UI 2048x2048 图集切片规划
|
|
|
|
## 1. 目标
|
|
|
|
将一套常用 Unity UGUI 控件切图放入一张 `2048x2048` 贴图中，供 Sprite Editor 按坐标切片后在按钮、面板、输入框、进度条、滑动条、滚动列表、弹窗、图标等控件中复用。
|
|
风格参考：Doc\Design\ui_design.jpg
|
|
|
|
当前项目中没有独立的 UI 图集素材目录；已有代码和预制体主要用到 `Button`、`InputField`、`Slider`、`Image`、二维码/扫码入口、Lua UI 面板、滚动列表等控件。因此本图集按项目现有控件和后续常用 UI 控件做统一规划。
|
|
|
|
## 2. 坐标规则
|
|
|
|
- 图集尺寸：`2048x2048`。
|
|
- 表中 `X`、`Y(左上)` 以图片左上角为原点，适合给美术和切图工具对齐。
|
|
- `Unity Y(左下)` 以 Unity Sprite Editor 的左下角为原点，计算公式为：`2048 - Y(左上) - H`。
|
|
- 所有切片之间保留至少 `8px` 间隔，降低双线性采样和 mipmap 边缘串色风险。
|
|
- `9-slice` 切片需要在 Unity Sprite Editor 中设置 `Border`，格式为 `Left, Right, Top, Bottom`。
|
|
- `simple` 切片不设置九宫格，按原始比例或等比缩放使用。
|
|
|
|
## 3. 图集分区
|
|
|
|
| 区域 | Y 范围 | 内容 |
|
|
| --- | ---: | --- |
|
|
| 面板与容器 | `0-640` | 主面板、弹窗、内容底、标题栏、列表项、遮罩、分割线、角标 |
|
|
| 按钮与页签 | `648-832` | 主按钮、次按钮、小按钮、警告按钮、页签、分段控件、导航按钮 |
|
|
| 输入与表单 | `840-920` | 输入框、下拉框、光标、搜索/清空/复制等输入辅助图标 |
|
|
| 进度与滑动 | `928-1040` | 进度条、滑动条、滑块、加载帧 |
|
|
| 开关与状态 | `1048-1112` | Toggle、Checkbox、Radio、状态图标 |
|
|
| 菜单与业务图标 | `1120-1456` | 菜单、Toast、扫码框、服务器/聊天/背包等常用图标 |
|
|
| 滚动条 | `976-1488` | 竖向/横向滚动条轨道与滑块 |
|
|
| 预留 | `1464-2040` | 后续界面专用图、活动图标、品质框、特效帧 |
|
|
|
|
## 4. 切片清单
|
|
|
|
| 名称 | X | Y(左上) | W | H | Unity Y(左下) | 类型 | Border L,R,T,B | 用途 |
|
|
| --- | ---: | ---: | ---: | ---: | ---: | --- | --- | --- |
|
|
| `ui_panel_main` | 8 | 8 | 512 | 384 | 1656 | 9-slice | `48,48,48,48` | 主窗口/全屏面板底 |
|
|
| `ui_panel_popup` | 528 | 8 | 384 | 256 | 1784 | 9-slice | `40,40,40,40` | 弹窗底 |
|
|
| `ui_panel_content` | 920 | 8 | 384 | 256 | 1784 | 9-slice | `32,32,32,32` | 内容区/卡片底 |
|
|
| `ui_panel_header` | 1312 | 8 | 512 | 96 | 1944 | 9-slice | `32,32,24,24` | 标题栏 |
|
|
| `ui_panel_footer` | 1312 | 112 | 512 | 96 | 1840 | 9-slice | `32,32,24,24` | 底部操作栏 |
|
|
| `ui_panel_tooltip` | 528 | 272 | 320 | 160 | 1616 | 9-slice | `28,28,28,28` | 提示框 |
|
|
| `ui_list_item_normal` | 856 | 272 | 384 | 96 | 1680 | 9-slice | `24,24,20,20` | 列表项普通态 |
|
|
| `ui_list_item_selected` | 1248 | 272 | 384 | 96 | 1680 | 9-slice | `24,24,20,20` | 列表项选中态 |
|
|
| `ui_list_item_disabled` | 1640 | 272 | 384 | 96 | 1680 | 9-slice | `24,24,20,20` | 列表项禁用态 |
|
|
| `ui_overlay_dim` | 920 | 376 | 256 | 256 | 1416 | simple | `0,0,0,0` | 半透明遮罩，可拉伸 |
|
|
| `ui_divider_h` | 1184 | 376 | 512 | 16 | 1656 | simple | `0,0,0,0` | 横向分割线 |
|
|
| `ui_divider_v` | 1704 | 376 | 16 | 256 | 1416 | simple | `0,0,0,0` | 竖向分割线 |
|
|
| `ui_badge_base` | 1728 | 376 | 128 | 64 | 1608 | 9-slice | `24,24,20,20` | 普通角标 |
|
|
| `ui_badge_alert` | 1864 | 376 | 128 | 64 | 1608 | 9-slice | `24,24,20,20` | 提醒/红点角标 |
|
|
| `btn_primary_normal` | 8 | 648 | 256 | 96 | 1304 | 9-slice | `36,36,28,28` | 主按钮普通态 |
|
|
| `btn_primary_hover` | 272 | 648 | 256 | 96 | 1304 | 9-slice | `36,36,28,28` | 主按钮悬停/选中态 |
|
|
| `btn_primary_pressed` | 536 | 648 | 256 | 96 | 1304 | 9-slice | `36,36,28,28` | 主按钮按下态 |
|
|
| `btn_primary_disabled` | 800 | 648 | 256 | 96 | 1304 | 9-slice | `36,36,28,28` | 主按钮禁用态 |
|
|
| `btn_secondary_normal` | 1064 | 648 | 256 | 96 | 1304 | 9-slice | `36,36,28,28` | 次按钮普通态 |
|
|
| `btn_secondary_pressed` | 1328 | 648 | 256 | 96 | 1304 | 9-slice | `36,36,28,28` | 次按钮按下态 |
|
|
| `btn_warning_normal` | 1592 | 648 | 224 | 96 | 1304 | 9-slice | `36,36,28,28` | 警告按钮普通态 |
|
|
| `btn_warning_pressed` | 1816 | 648 | 224 | 96 | 1304 | 9-slice | `36,36,28,28` | 警告按钮按下态 |
|
|
| `btn_small_normal` | 8 | 752 | 192 | 72 | 1224 | 9-slice | `28,28,22,22` | 小按钮普通态 |
|
|
| `btn_small_hover` | 208 | 752 | 192 | 72 | 1224 | 9-slice | `28,28,22,22` | 小按钮悬停态 |
|
|
| `btn_small_pressed` | 408 | 752 | 192 | 72 | 1224 | 9-slice | `28,28,22,22` | 小按钮按下态 |
|
|
| `btn_small_disabled` | 608 | 752 | 192 | 72 | 1224 | 9-slice | `28,28,22,22` | 小按钮禁用态 |
|
|
| `tab_active` | 808 | 752 | 224 | 80 | 1216 | 9-slice | `32,32,24,24` | 页签激活态 |
|
|
| `tab_inactive` | 1040 | 752 | 224 | 80 | 1216 | 9-slice | `32,32,24,24` | 页签未激活态 |
|
|
| `seg_left` | 1272 | 752 | 160 | 80 | 1216 | 9-slice | `32,12,24,24` | 分段控件左段 |
|
|
| `seg_mid` | 1440 | 752 | 160 | 80 | 1216 | 9-slice | `12,12,24,24` | 分段控件中段 |
|
|
| `seg_right` | 1608 | 752 | 160 | 80 | 1216 | 9-slice | `12,32,24,24` | 分段控件右段 |
|
|
| `btn_close` | 1776 | 752 | 80 | 80 | 1216 | simple | `0,0,0,0` | 关闭按钮 |
|
|
| `btn_back` | 1864 | 752 | 80 | 80 | 1216 | simple | `0,0,0,0` | 返回按钮 |
|
|
| `btn_home` | 1952 | 752 | 80 | 80 | 1216 | simple | `0,0,0,0` | 主页按钮 |
|
|
| `input_bg_normal` | 8 | 840 | 384 | 80 | 1128 | 9-slice | `32,32,24,24` | 输入框普通态 |
|
|
| `input_bg_focus` | 400 | 840 | 384 | 80 | 1128 | 9-slice | `32,32,24,24` | 输入框聚焦态 |
|
|
| `input_bg_error` | 792 | 840 | 384 | 80 | 1128 | 9-slice | `32,32,24,24` | 输入框错误态 |
|
|
| `dropdown_bg` | 1184 | 840 | 384 | 80 | 1128 | 9-slice | `32,32,24,24` | 下拉框底 |
|
|
| `dropdown_arrow` | 1576 | 840 | 64 | 64 | 1144 | simple | `0,0,0,0` | 下拉箭头 |
|
|
| `input_caret` | 1648 | 840 | 8 | 64 | 1144 | simple | `0,0,0,0` | 输入光标 |
|
|
| `ico_keyboard` | 1664 | 840 | 64 | 64 | 1144 | simple | `0,0,0,0` | 键盘 |
|
|
| `ico_search` | 1736 | 840 | 64 | 64 | 1144 | simple | `0,0,0,0` | 搜索 |
|
|
| `ico_clear` | 1808 | 840 | 64 | 64 | 1144 | simple | `0,0,0,0` | 清空 |
|
|
| `ico_copy` | 1880 | 840 | 64 | 64 | 1144 | simple | `0,0,0,0` | 复制 |
|
|
| `ico_paste` | 1952 | 840 | 64 | 64 | 1144 | simple | `0,0,0,0` | 粘贴 |
|
|
| `progress_bg` | 8 | 928 | 512 | 40 | 1080 | 9-slice | `20,20,12,12` | 进度条底 |
|
|
| `progress_fill_blue` | 528 | 928 | 512 | 40 | 1080 | 9-slice | `20,20,12,12` | 蓝色进度填充 |
|
|
| `progress_fill_green` | 1048 | 928 | 512 | 40 | 1080 | 9-slice | `20,20,12,12` | 绿色进度填充 |
|
|
| `progress_fill_warn` | 1568 | 928 | 472 | 40 | 1080 | 9-slice | `20,20,12,12` | 警告进度填充 |
|
|
| `slider_track` | 8 | 976 | 512 | 32 | 1040 | 9-slice | `16,16,10,10` | 滑动条轨道 |
|
|
| `slider_fill` | 528 | 976 | 512 | 32 | 1040 | 9-slice | `16,16,10,10` | 滑动条填充 |
|
|
| `slider_handle` | 1048 | 976 | 64 | 64 | 1008 | simple | `0,0,0,0` | 滑动条手柄 |
|
|
| `scrollbar_track_v` | 1120 | 976 | 32 | 512 | 560 | 9-slice | `10,10,20,20` | 竖向滚动条轨道 |
|
|
| `scrollbar_thumb_v` | 1160 | 976 | 32 | 128 | 944 | 9-slice | `10,10,20,20` | 竖向滚动条滑块 |
|
|
| `scrollbar_track_h` | 1200 | 976 | 512 | 32 | 1040 | 9-slice | `20,20,10,10` | 横向滚动条轨道 |
|
|
| `scrollbar_thumb_h` | 1720 | 976 | 128 | 32 | 1040 | 9-slice | `20,20,10,10` | 横向滚动条滑块 |
|
|
| `loading_ring_0` | 1856 | 976 | 64 | 64 | 1008 | simple | `0,0,0,0` | 加载圆环帧 0 |
|
|
| `loading_ring_1` | 1928 | 976 | 64 | 64 | 1008 | simple | `0,0,0,0` | 加载圆环帧 1 |
|
|
| `toggle_bg_off` | 8 | 1048 | 112 | 56 | 944 | 9-slice | `28,28,18,18` | 开关关闭底 |
|
|
| `toggle_bg_on` | 128 | 1048 | 112 | 56 | 944 | 9-slice | `28,28,18,18` | 开关开启底 |
|
|
| `toggle_knob` | 248 | 1048 | 48 | 48 | 952 | simple | `0,0,0,0` | 开关滑块 |
|
|
| `checkbox_off` | 304 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 复选框未选 |
|
|
| `checkbox_on` | 376 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 复选框已选 |
|
|
| `radio_off` | 448 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 单选框未选 |
|
|
| `radio_on` | 520 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 单选框已选 |
|
|
| `ico_check` | 592 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 对勾 |
|
|
| `ico_lock` | 664 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 锁定 |
|
|
| `ico_unlock` | 736 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 解锁 |
|
|
| `ico_warning` | 808 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 警告 |
|
|
| `ico_info` | 880 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 信息 |
|
|
| `ico_plus` | 952 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 加号 |
|
|
| `ico_minus` | 1024 | 1048 | 64 | 64 | 936 | simple | `0,0,0,0` | 减号 |
|
|
| `slot_empty` | 1200 | 1048 | 96 | 96 | 904 | 9-slice | `20,20,20,20` | 物品格空态 |
|
|
| `slot_selected` | 1304 | 1048 | 96 | 96 | 904 | 9-slice | `20,20,20,20` | 物品格选中态 |
|
|
| `slot_locked` | 1408 | 1048 | 96 | 96 | 904 | 9-slice | `20,20,20,20` | 物品格锁定态 |
|
|
| `avatar_frame` | 1512 | 1048 | 128 | 128 | 872 | 9-slice | `28,28,28,28` | 头像框 |
|
|
| `rank_medal_1` | 1648 | 1048 | 80 | 80 | 920 | simple | `0,0,0,0` | 第一名徽章 |
|
|
| `rank_medal_2` | 1736 | 1048 | 80 | 80 | 920 | simple | `0,0,0,0` | 第二名徽章 |
|
|
| `rank_medal_3` | 1824 | 1048 | 80 | 80 | 920 | simple | `0,0,0,0` | 第三名徽章 |
|
|
| `ico_coin` | 1912 | 1048 | 80 | 80 | 920 | simple | `0,0,0,0` | 货币图标 |
|
|
| `menu_bg` | 8 | 1120 | 384 | 320 | 608 | 9-slice | `32,32,32,32` | 下拉菜单/右键菜单底 |
|
|
| `menu_item_normal` | 400 | 1120 | 384 | 64 | 864 | 9-slice | `20,20,16,16` | 菜单项普通态 |
|
|
| `menu_item_hover` | 400 | 1192 | 384 | 64 | 792 | 9-slice | `20,20,16,16` | 菜单项悬停态 |
|
|
| `menu_item_disabled` | 400 | 1264 | 384 | 64 | 720 | 9-slice | `20,20,16,16` | 菜单项禁用态 |
|
|
| `toast_bg` | 792 | 1120 | 320 | 96 | 832 | 9-slice | `32,32,24,24` | Toast 提示底 |
|
|
| `notice_bg` | 792 | 1224 | 320 | 96 | 728 | 9-slice | `32,32,24,24` | 系统通知底 |
|
|
| `drag_handle` | 792 | 1328 | 160 | 32 | 688 | simple | `0,0,0,0` | 拖拽把手 |
|
|
| `qr_scan_frame` | 960 | 1328 | 128 | 128 | 592 | simple | `0,0,0,0` | 扫码框角标 |
|
|
| `ico_server` | 1200 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 服务器 |
|
|
| `ico_user` | 1272 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 玩家 |
|
|
| `ico_chat` | 1344 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 聊天 |
|
|
| `ico_mail` | 1416 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 邮件 |
|
|
| `ico_settings` | 1488 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 设置 |
|
|
| `ico_sound_on` | 1560 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 声音开启 |
|
|
| `ico_sound_off` | 1632 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 声音关闭 |
|
|
| `ico_scan` | 1704 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 扫码 |
|
|
| `ico_refresh` | 1776 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 刷新 |
|
|
| `ico_download` | 1848 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 下载/更新 |
|
|
| `ico_upload` | 1920 | 1184 | 64 | 64 | 800 | simple | `0,0,0,0` | 上传 |
|
|
| `ico_bag` | 1200 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 背包 |
|
|
| `ico_item` | 1272 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 道具 |
|
|
| `ico_sword` | 1344 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 武器 |
|
|
| `ico_shield` | 1416 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 防具 |
|
|
| `ico_map` | 1488 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 地图 |
|
|
| `ico_star` | 1560 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 星级 |
|
|
| `ico_heart` | 1632 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 生命/收藏 |
|
|
| `ico_diamond` | 1704 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 钻石 |
|
|
| `ico_key` | 1776 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 钥匙 |
|
|
| `ico_clock` | 1848 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 时间 |
|
|
| `ico_calendar` | 1920 | 1256 | 64 | 64 | 728 | simple | `0,0,0,0` | 日期 |
|
|
| `reserved_large_0` | 8 | 1464 | 512 | 256 | 328 | simple | `0,0,0,0` | 大型活动/界面专用预留 |
|
|
| `reserved_large_1` | 528 | 1464 | 512 | 256 | 328 | simple | `0,0,0,0` | 大型活动/界面专用预留 |
|
|
| `reserved_icon_grid` | 1200 | 1336 | 784 | 192 | 520 | simple | `0,0,0,0` | 未来 64x64 图标网格预留 |
|
|
|
|
## 5. 控件映射建议
|
|
|
|
| Unity 控件 | 建议切片 |
|
|
| --- | --- |
|
|
| `Button` | `btn_primary_*`、`btn_secondary_*`、`btn_small_*`、`btn_warning_*` |
|
|
| `InputField` / `TMP_InputField` | `input_bg_normal`、`input_bg_focus`、`input_bg_error`、`input_caret` |
|
|
| `Slider` | `slider_track`、`slider_fill`、`slider_handle` |
|
|
| `Scrollbar` | `scrollbar_track_v`、`scrollbar_thumb_v`、`scrollbar_track_h`、`scrollbar_thumb_h` |
|
|
| `ScrollRect` 列表项 | `ui_list_item_normal`、`ui_list_item_selected`、`ui_list_item_disabled` |
|
|
| 弹窗/面板 | `ui_panel_main`、`ui_panel_popup`、`ui_panel_content`、`ui_panel_header`、`ui_overlay_dim` |
|
|
| Toggle/Checkbox/Radio | `toggle_*`、`checkbox_*`、`radio_*` |
|
|
| 加载/热更新 | `progress_*`、`loading_ring_*`、`ico_download` |
|
|
| 二维码/扫码 | `ico_scan`、`qr_scan_frame` |
|
|
|
|
## 6. Unity UI 使用规则
|
|
|
|
1. 与文字相关的 UI 控件统一使用 TextMeshPro 版本，例如 `TextMeshProUGUI`、`TMP_InputField`、`TMP_Dropdown`。
|
|
2. 不再新增 Unity Legacy `Text`、`InputField`、`Dropdown` 控件，已有旧控件后续维护时应逐步替换为 TextMeshPro 对应控件。
|
|
3. 动态文本、按钮文字、输入框占位符、列表项文字、弹窗正文、Toast 提示、系统通知等均按 TextMeshPro 字体资源和材质配置。
|
|
4. 生成的节点都用英文
|
|
|
|
## 7. Unity 导入设置
|
|
|
|
1. Texture Type 设为 `Sprite (2D and UI)`。
|
|
2. Sprite Mode 设为 `Multiple`。
|
|
3. Mesh Type 设为 `Full Rect`，避免九宫格边缘被裁切。
|
|
4. Filter Mode 建议 `Bilinear`；像素风 UI 可改为 `Point`。
|
|
5. Compression 建议 `None` 或 `High Quality`，避免 UI 边缘和文字图标出现压缩噪点。
|
|
6. 勾选 `Alpha Is Transparency`，保持透明边缘正确。
|
|
7. 移动端若对内存敏感，可在图集最终稳定后再评估 ASTC/ETC2 压缩。
|
|
|
|
## 8. 命名约定
|
|
|
|
- 面板：`ui_panel_*`
|
|
- 按钮：`btn_*`
|
|
- 图标：`ico_*`
|
|
- 输入：`input_*`
|
|
- 进度：`progress_*`
|
|
- 滑动条：`slider_*`
|
|
- 滚动条：`scrollbar_*`
|
|
- 预留：`reserved_*`
|
|
|
|
Sprite 名称应与表中名称保持一致，Lua 或 C# 侧需要动态加载时直接使用该名称。
|