[Unity]-[UI]-[Prefab] 关于UGUI UI Prefab的制作技巧

从上到下，从外到里，多用空物体套壳

这个意思就是说在使用ugui时制作prefab时，要遵循“从上到下，从外到里，多用空物体套壳”的原则，好处就是后面好修改，并且可以复用不同的prefab子模块。且在布局中不会出错，

优点

• 从上到下​​（层级结构清晰）
  ​​含义​​：在 Hierarchy 面板中，父级 UI 元素（如 Canvas、Panel）应放在子级元素（如 Button、Text）的上方，逻辑层级清晰。
  ​​正确性​​：完全符合 Unity 的父子关系渲染和事件传递逻辑（如射线检测）。

• ​​从外到里​​（布局由容器到内容）
  ​​含义​​：先设计外层容器（如 Panel、ScrollView），再向内填充具体内容（如按钮、文本）。
  ​​正确性​​：UGUI 的自动布局组件（HorizontalLayoutGroup、GridLayoutGroup）依赖容器层级，先定义容器能避免布局错乱

• 多用空物体套壳​​（使用空 GameObject 作为容器）
  ​​含义​​：用空物体（Empty GameObject）包裹功能相关的 UI 元素，形成逻辑分组。
  ​​正确性​​：空物体不增加渲染开销，但能提供锚点、坐标控制和脚本挂载的灵活性。

建议

• ​​标准化 Prefab 结构模板​​
  为团队定义统一的 Prefab 层级规范（如必含 Root 空物体、Content 容器等）。
  使用命名约定（如 [功能]_Group）标识空物体用途。

• ​​利用 Unity 编辑器扩展​​
  编写 Editor 脚本，自动为选中元素包裹空物体容器。
  使用 Odin Inspector 或自定义 Property Drawer 优化层级管理。

• ​​性能优化注意点​​
  避免过度嵌套空物体（通常不超过 4 层），减少 Transform 计算开销。
  对频繁动态更新的 UI 元素（如滚动列表项），精简容器层级。

锚点

关于ugui中 Recttransform的锚点是一个很重要的东西，涉及到屏幕适配的问题。

四个方向的锚点

四个方向的锚点是指三角形的那个标志，他可以指一个点，也可以分开在4个方向，它是物体对于父物体的相对锚点信息。可以通过修改Anchor这个api去修改。

//api举例
        GetComponentInChildren<Image>().gameObject.GetComponent<RectTransform>().anchoredPosition = new Vector2(0, 0);
        GetComponentInChildren<Image>().gameObject.GetComponent<RectTransform>().anchoredPosition3D = new Vector3(0,0, 0);
        GetComponentInChildren<Image>().gameObject.GetComponent<RectTransform>().anchorMax = new Vector2(0, 0);
        GetComponentInChildren<Image>().gameObject.GetComponent<RectTransform>().anchorMin = new Vector2(0, 0);
        GetComponentInChildren<Image>().gameObject.GetComponent<RectTransform>().SetAnchor(0, 0, 0, 0,true);

轴心

Pivot
以左下角为（0，0），辅佐锚点进行相对位置的确认。

//api举例
        GetComponentInChildren<Image>().gameObject.GetComponent<RectTransform>().pivot = new Vector2(0, 0);
        GetComponentInChildren<Image>().gameObject.GetComponent<RectTransform>().SetPivot(0, 0, true);

拉伸

基础的transform三件套:position.rotation.scale,这些另外开文章说。

这里说说锚点与轴心的配合使用。

通俗来说，锚点是对于父物体的锚定位置点，轴心是本物体的锚定位置点。

所以，如果父物体或者适配分辨率改变，那么物体的位置就会由锚点到轴心的距离来做判定。
本物体的形状改变由轴心确定。比如矩形拉伸，如果轴心在左侧，就会向右拉伸，轴心在中间，向两边拉伸，轴心在右侧，向左边拉伸。

补充注意制作Prefab原则

在 Unity UGUI 开发中，“从上到下，从外到里，多用空物体套壳”是核心原则，但为了进一步提升效率、维护性和性能，可以补充以下 6 个关键方向，涵盖协作规范、性能优化和高级设计模式：

---

一、补充原则 1：命名与注释标准化
操作建议
• 命名规则：

• 空物体命名需体现功能（如 [功能]_Group），禁用 GameObject 等默认名称。

• 示例：Header_Group（顶部栏容器）、Shop_ItemTemplate（商店项模板）。

• 组件注释：

• 在空物体上添加 [Header] 或 [Tooltip] 标注用途，或在脚本中使用 ///<summary> 说明逻辑依赖关系。

  [Header("按钮组容器 - 用于自动布局")]
  public Transform buttonGroup;

优势
• 团队协作时减少沟通成本，快速定位元素。

• 避免因命名混乱导致的错误引用（如 Find("Panel") 匹配到多个对象）。

---

二、补充原则 2：组件分离与职责单一化
操作建议
• 组件拆分：

• 将布局组件（LayoutGroup、ContentSizeFitter）与交互逻辑组件（如 Button、Tween）分离到不同空物体。

• 示例：

```
Item_Group (挂载 HorizontalLayoutGroup)
├── Item_Icon (Image)
├── Item_Text (Text)
└── Item_Button (Button + 交互脚本)
```

• 脚本职责隔离：

• 交互脚本仅控制自身容器内的元素，避免跨层级调用（通过事件通信代替 GetComponentInParent）。

优势
• 修改布局不影响交互逻辑，提升模块化。

• 降低代码耦合度，便于单元测试。

---

三、补充原则 3：动态 UI 的预分配与对象池
操作建议
• 预分配模板：

• 对频繁动态生成的 UI 元素（如聊天消息、背包物品），在 Prefab 根节点预留 Pool_Container 空物体存放禁用实例，运行时启用而非即时实例化。

// 初始化时预生成
for (int i = 0; i < 10; i++) {
    var item = Instantiate(itemPrefab, poolContainer);
    item.SetActive(false);
}

• 对象池管理：

• 使用 Stack 或队列管理可用实例，避免频繁的 Instantiate/Destroy 引发GC卡顿。

优势
• 减少运行时性能开销，尤其对低端设备或复杂列表至关重要。

---

四、补充原则 4：锚点与分辨率适配的精细化
操作建议
• 锚点分层设置：

• 外层容器（如全屏弹窗）使用 Stretch 锚点撑满画布，内层内容容器（如居中面板）使用 Middle/Center 锚点固定比例。

• 对需要动态缩放的元素（如背景图），挂载 AspectRatioFitter 组件。

• 多分辨率测试：

• 在 Canvas Scaler 中设置参考分辨率（如 1920x1080），并针对极端比例（如 21:9、4:3）验证布局。

优势
• 确保 UI 在各类设备上自适应，减少手动调整工作量。

---

五、补充原则 5：版本控制友好化
操作建议
• Prefab 拆分策略：

• 将高频修改的部分（如活动按钮）拆分为子 Prefab，减少主 Prefab 的合并冲突。

• 示例：将 Shop_Button 独立为子 Prefab，主界面仅保留引用。

• 层级折叠规范：

• 在 Hierarchy 中折叠未编辑的分支，避免误操作导致结构变动。

优势
• 降低 Git 合并冲突概率，提升团队协作效率。

---

六、补充原则 6：性能监控与优化
操作建议
• DrawCall 优化：

• 对静态 UI 元素（如背景），合并材质或使用 Sprite Atlas 减少批次。

• 动态元素（如进度条）确保纹理尺寸合理，禁用不必要的 RaycastTarget。

• 层级深度监控：

• 使用 UnityEngine.UI.Extensions 中的 LayoutRebuilder 调试工具，检测嵌套过深的容器。

优势
• 平衡结构清晰度与渲染性能，避免过度设计。

---

总结：补充原则的优先级矩阵

场景	优先补充原则	工具/实践示例
团队协作开发	命名标准化、版本控制友好化	命名规范文档、子Prefab拆分
复杂动态UI（如无限滚动）	动态UI预分配、性能监控	对象池、Sprite Atlas
多平台适配	锚点精细化、分辨率测试	Canvas Scaler、AspectRatioFitter
高频迭代功能	组件职责分离、模块化设计	脚本接口抽象、事件通信机制

通过补充以上原则，可构建 高维护性、高性能、高协作性 的 UGUI 系统，适用于从独立开发到大型团队的全场景需求。

精灵图的切与拉

九宫格拉图

在Unity中，精灵图的九宫格（Nine-Slice Scaling）是一种用于处理UI元素在拉伸时保持边缘和角落不变形的技术。以下是关于精灵图九宫格的解释以及使用方法的详细介绍：

一、九宫格解释

https://blog.csdn.net/qq_30144243/article/details/136902393

九宫格技术将一张图片分为9个部分，其中：

• 四个角落（1、3、7、9）在拉伸时不会受到任何影响，保持原样。
• 四个边缘（2、4、6、8）会根据拉伸方向进行变形，其中2和8位置将进行水平拉伸，4和6位置会进行垂直拉伸。
• 中心部分（5）在水平和垂直方向上都会进行拉伸。

这种处理方式使得UI元素在拉伸时能够保持其原有的形状和风格，特别是边缘和角落部分不会变形。

二、九宫格使用

在Unity中，使用九宫格技术通常涉及以下步骤：

1. 选择精灵图：

   • 在Unity的Project面板中，选择需要进行九宫格处理的精灵图。

2. 打开Sprite Editor：

   • 在Inspector面板中，点击Sprite Editor按钮，进入精灵图编辑界面。

3. 设置九宫格：

   • 在Sprite Editor中，找到Border参数，这个参数用于设置九宫格的边框大小。
   • 通过调整Border的四个参数（左、右、上、下），可以定义九宫格的切割方式。
   • 设置完成后，点击Apply按钮应用更改。

4. 选择Sprite Type：

   • 在Sprite Editor中，找到Sprite Type选项，并选择Sliced（切片模式），这就是九宫格的应用模式。
   • 默认情况下，Sprite Type可能是Simple（简单模式），它表示正常的拉伸，不会应用九宫格效果。

5. 使用九宫格精灵图：

   • 设置完成后，可以将九宫格精灵图拖放到场景中的UI元素上，或者用于其他需要拉伸的场合。
   • 当UI元素被拉伸时，它会根据九宫格的设置保持边缘和角落不变形。

三、注意事项

• 在设置九宫格时，要确保边框大小适中，以避免在拉伸时出现不期望的变形效果。
• 如果精灵图包含复杂的形状或图案，可能需要更仔细地调整九宫格的边框大小，以获得最佳的拉伸效果。
• 在使用九宫格精灵图时，要注意其尺寸和分辨率，以确保在游戏或应用中呈现出清晰的图像。

总之，九宫格技术是一种非常有用的UI处理技术，它可以帮助开发者在拉伸UI元素时保持其原有的形状和风格。通过合理设置九宫格的边框大小和类型，可以轻松地实现各种复杂的UI布局和效果。

切图

在Unity中切割精灵图（Sprite）是2D游戏开发中的一个常见任务，以下是一些关键的技巧和方法：

一、准备工作

1. 导入图片：将需要切割的图片导入到Unity项目中。
2. 设置图片类型：在Inspector面板中，将图片的Texture Type设置为Sprite (2D and UI)。
3. 修改Sprite Mode：将Sprite Mode更改为Multiple，这样才能在Sprite Editor中进行切割操作。

二、切割方式

Unity提供了多种切割方式，可以根据具体需求选择最适合的方法。

1. 自动切割（Automatic）：

   • 适用于图片中包含多个规则排列或大小相近的精灵图。
   • 在Sprite Editor中，选择Slice模式，然后选择Automatic。
   • 系统会根据图片的像素点自动识别并切割出单个精灵图。
   • 可以根据需要调整切割后的精灵图的大小和位置。

2. 手动切割：

   • 适用于图片中包含不规则排列或大小不同的精灵图。
   • 在Sprite Editor中，选择Slice模式，然后选择Grid或其他手动切割方式。
   • 手动设置每个精灵图的大小和位置，可以使用鼠标拖拽网格线进行调整。
   • 切割完成后，点击Apply按钮应用切割结果。

3. 按像素大小切割（Cell Size）：

   • 根据自定义的像素点大小来切割图片。
   • 在Sprite Editor中，设置Cell Size的横竖像素点数，然后点击Slice进行切割。
   • 适用于图片中精灵图排列整齐且大小相同的情况。

4. 按行列数切割（Cell Count）：

   • 根据自定义的行数和列数来切割图片。
   • 在Sprite Editor中，设置Cell Count的行数和列数，然后点击Slice进行切割。
   • 适用于图片中精灵图数量固定且排列整齐的情况。

三、切割后处理

1. 保存切割结果：切割完成后，点击Apply按钮应用切割结果。Unity会自动将切割后的精灵图保存为多个子精灵。
2. 优化性能：切割后的精灵图可以减少Batches和SetPass calls的值，从而降低游戏运行时的性能损耗。在切割时，尽量保持精灵图的大小和排列规则，以便更好地优化性能。
3. 使用切割后的精灵图：在Project面板中可以找到切割后的精灵图，将它们拖放到场景中的相应位置或使用在动画、UI等元素中。

四、注意事项

1. 备份原始图片：在进行切割操作之前，建议备份原始图片以防意外丢失。
2. 选择合适的切割方式：根据图片中精灵图的排列和大小选择合适的切割方式，以获得最佳的切割效果。
3. 调整切割参数：在切割过程中，可以根据需要调整切割参数（如像素大小、行列数等）以获得更精确的切割结果。

总之，在Unity中切割精灵图需要一定的技巧和经验。通过选择合适的切割方式、调整切割参数以及优化性能等步骤，可以高效地切割出满足需求的精灵图并为后续的游戏开发做好准备。