当前位置：首页 > news >正文

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

news 来源：原创 2025/4/20 18:27:36

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

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

锚点

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

四个方向的锚点

四个方向的锚点是指三角形的那个标志，他可以指一个点，也可以分开在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），辅佐锚点进行相对位置的确认。
pivot

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

拉伸

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

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

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

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

精灵图的切与拉

九宫格拉图

在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中，使用九宫格技术通常涉及以下步骤：

选择精灵图：
- 在Unity的Project面板中，选择需要进行九宫格处理的精灵图。
打开Sprite Editor：
- 在Inspector面板中，点击Sprite Editor按钮，进入精灵图编辑界面。
设置九宫格：
- 在Sprite Editor中，找到Border参数，这个参数用于设置九宫格的边框大小。
- 通过调整Border的四个参数（左、右、上、下），可以定义九宫格的切割方式。
- 设置完成后，点击Apply按钮应用更改。
选择Sprite Type：
- 在Sprite Editor中，找到Sprite Type选项，并选择Sliced（切片模式），这就是九宫格的应用模式。
- 默认情况下，Sprite Type可能是Simple（简单模式），它表示正常的拉伸，不会应用九宫格效果。
使用九宫格精灵图：
- 设置完成后，可以将九宫格精灵图拖放到场景中的UI元素上，或者用于其他需要拉伸的场合。
- 当UI元素被拉伸时，它会根据九宫格的设置保持边缘和角落不变形。

三、注意事项

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

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

切图

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

一、准备工作

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

二、切割方式

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

自动切割（Automatic）：
- 适用于图片中包含多个规则排列或大小相近的精灵图。
- 在Sprite Editor中，选择Slice模式，然后选择Automatic。
- 系统会根据图片的像素点自动识别并切割出单个精灵图。
- 可以根据需要调整切割后的精灵图的大小和位置。
手动切割：
- 适用于图片中包含不规则排列或大小不同的精灵图。
- 在Sprite Editor中，选择Slice模式，然后选择Grid或其他手动切割方式。
- 手动设置每个精灵图的大小和位置，可以使用鼠标拖拽网格线进行调整。
- 切割完成后，点击Apply按钮应用切割结果。
按像素大小切割（Cell Size）：
- 根据自定义的像素点大小来切割图片。
- 在Sprite Editor中，设置Cell Size的横竖像素点数，然后点击Slice进行切割。
- 适用于图片中精灵图排列整齐且大小相同的情况。
按行列数切割（Cell Count）：
- 根据自定义的行数和列数来切割图片。
- 在Sprite Editor中，设置Cell Count的行数和列数，然后点击Slice进行切割。
- 适用于图片中精灵图数量固定且排列整齐的情况。

三、切割后处理

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