Files
AIGame/Doc/UI_Simple_Set.md

5.1 KiB
Raw Permalink Blame History

Unity UI 精简图集(Simple Set)

1. 目标

提供一套最小可用的 UGUI 控件切图规划,覆盖登录/大厅/弹窗/列表等基础界面所需素材。 风格参考:Doc\Design\ui_design.jpg

与 UI_Pic_Set.md / UI_Normal_Set.md 的区别:

  • 只保留真正高频的控件态,去掉次要状态、业务图标和预留格。
  • 切片集中排布在图集上方,不要求填满整张贴图;空白区域保持透明即可。
  • 图集仍建议使用 2048x2048,方便后续直接追加切片,而不必重排已有坐标。
  • 需要页签 / Toggle / Toast / 小按钮时,改用 Doc\UI_Normal_Set.md。

2. 坐标规则

  • 图集尺寸:2048x2048(实际占用大约上半偏左区域)。
  • X、Y(左上) 以图片左上角为原点。
  • Unity Y(左下) = 2048 - Y(左上) - H。
  • 切片间距至少 8px。
  • 9-slice 需在 Sprite Editor 设置 Border:Left, Right, Top, Bottom。
  • simple 不设置九宫格。

3. 区域说明

本精简集不强制分区填满,建议按行紧凑排列:

行 大约 Y 内容
1 8 面板、弹窗、遮罩
2 280 按钮、关闭
3 400 输入框、列表项
4 504 进度、滑动、滚动、开关
其余 600+ 全部留白,按需追加

4. 切片清单

名称 X Y(左上) W H Unity Y(左下) 类型 Border L,R,T,B 用途
ui_panel_main 8 8 480 256 1784 9-slice 40,40,40,40 主面板底
ui_panel_popup 496 8 360 240 1800 9-slice 36,36,36,36 弹窗底
ui_panel_content 864 8 320 200 1840 9-slice 28,28,28,28 内容/卡片底
ui_overlay_dim 1192 8 192 192 1848 simple 0,0,0,0 半透明遮罩
btn_primary_normal 8 280 224 88 1680 9-slice 32,32,24,24 主按钮普通态
btn_primary_pressed 240 280 224 88 1680 9-slice 32,32,24,24 主按钮按下态
btn_primary_disabled 472 280 224 88 1680 9-slice 32,32,24,24 主按钮禁用态
btn_secondary_normal 704 280 224 88 1680 9-slice 32,32,24,24 次按钮普通态
btn_close 936 280 72 72 1696 simple 0,0,0,0 关闭
input_bg_normal 8 400 360 72 1576 9-slice 28,28,20,20 输入框普通态
input_bg_focus 376 400 360 72 1576 9-slice 28,28,20,20 输入框聚焦态
ui_list_item_normal 744 400 320 72 1576 9-slice 20,20,16,16 列表项普通态
ui_list_item_selected 1072 400 320 72 1576 9-slice 20,20,16,16 列表项选中态
progress_bg 8 504 400 32 1512 9-slice 16,16,10,10 进度条底
progress_fill 416 504 400 32 1512 9-slice 16,16,10,10 进度条填充
slider_track 824 504 320 28 1516 9-slice 14,14,8,8 滑动条轨道
slider_fill 1152 504 320 28 1516 9-slice 14,14,8,8 滑动条填充
slider_handle 1480 496 56 56 1496 simple 0,0,0,0 滑动条手柄
scrollbar_track_v 1544 280 28 160 1608 9-slice 8,8,16,16 竖向滚动条轨道
scrollbar_thumb_v 1580 280 28 80 1688 9-slice 8,8,16,16 竖向滚动条滑块
checkbox_off 8 560 56 56 1432 simple 0,0,0,0 复选未选
checkbox_on 72 560 56 56 1432 simple 0,0,0,0 复选已选
ico_settings 136 560 56 56 1432 simple 0,0,0,0 设置
ico_refresh 200 560 56 56 1432 simple 0,0,0,0 刷新

共 24 个切片。当前占用约 1636 x 616 包络范围,图集其余区域留白。

5. 控件映射

Unity 控件 建议切片
Button btn_primary_*、btn_secondary_normal、btn_close
TMP_InputField input_bg_normal、input_bg_focus
Slider slider_track、slider_fill、slider_handle
Scrollbar / ScrollRect scrollbar_track_v、scrollbar_thumb_v、ui_list_item_*
面板 / 弹窗 ui_panel_main、ui_panel_popup、ui_panel_content、ui_overlay_dim
进度 progress_bg、progress_fill
Checkbox checkbox_off、checkbox_on
通用图标 ico_settings、ico_refresh

6. Unity 使用规则

  1. 文字相关控件统一使用 TextMeshPro(TextMeshProUGUI、TMP_InputField 等)。
  2. 生成的节点名称使用英文。
  3. 若后续控件不够用,优先追加到空白区域;次常用控件见 UI_Normal_Set.md,完整常用集见 UI_Pic_Set.md。

7. Unity 导入设置

  1. Texture Type:Sprite (2D and UI)
  2. Sprite Mode:Multiple
  3. Mesh Type:Full Rect
  4. Filter Mode:Bilinear(像素风可用 Point)
  5. Compression:None 或 High Quality
  6. 勾选 Alpha Is Transparency

8. 命名约定

  • 面板:ui_panel_*
  • 按钮:btn_*
  • 图标:ico_*
  • 输入:input_*
  • 进度:progress_*
  • 滑动条:slider_*
  • 滚动条:scrollbar_*

Sprite 名称与表中一致,供 Lua / C# 按名加载。