Unity图片优化与比例控制全攻略

[1. 设置资源参数](#1. 设置资源参数)

[2. 代码设置按钮Image的alphaHitTestMinimumThreshold](#2. 代码设置按钮Image的alphaHitTestMinimumThreshold)

[3. 解释：](#3. 解释：)

[4. 效果](#4. 效果)

[Unity Image 原图比例控制](#Unity Image 原图比例控制)

[方法一 Preserve Aspect](#方法一 Preserve Aspect)

[1. 设置勾选Preserve Aspect（保持长宽比），控制图片渲染保持本身比例，它会根据rectTranform 的width 和 height 计算能保持比例的最大渲染尺寸。](#1. 设置勾选Preserve Aspect（保持长宽比），控制图片渲染保持本身比例，它会根据rectTranform 的width 和 height 计算能保持比例的最大渲染尺寸。)

[2. 效果](#2. 效果)

[3. 代码控制](#3. 代码控制)

[方法二 Aspect Ratio Fitter](#方法二 Aspect Ratio Fitter)

[1. 添加Aspect Ratio Fitter组件](#1. 添加Aspect Ratio Fitter组件)

[2. height controls width的效果，其他效果可以自行去测试](#2. height controls width的效果，其他效果可以自行去测试)

使图片拉伸不变形

[第一步：打开Sprite Editor](#第一步：打开Sprite Editor)

第二步：按住图片边缘上的绿色小点，往中间拖

[第三步：在image中，将Image Type中的Simple改为Sliced(已切片)。](#第三步：在image中，将Image Type中的Simple改为Sliced(已切片)。)

前言

图片在游戏开发中应用广泛，但若使用不当也会带来诸多问题。本文记录了我踩过的图片相关坑点，希望能为大家提供一些实用参考。

不规则按钮点击区域优化方案

在使用UGUI开发时，经常会遇到需要精确点击不规则按钮或带有透明区域的按钮的情况。然而，默认创建的Button组件会响应整个矩形区域的点击事件，包括图片的透明部分，这会影响交互体验。

这时候我们就能通过设置一些参数，来不响应透明区域的点击

1. 设置资源参数

开启资源的Read/Write Enabled

2. 代码设置按钮Image的alphaHitTestMinimumThreshold

获取按钮控件下的Image脚本，设置Image脚本的alphaHitTestMinimumThreshold参数

cs 复制代码

public class ButtonTest : MonoBehaviour
{
    private Image btnImage;
    // Start is called before the first frame update
    void Start()
    {
        btnImage = GetComponent<Image>();
        btnImage.alphaHitTestMinimumThreshold = 0.5f;
    }
}

3. 解释：

设置 alphaHitTestMinimumThreshold 会影响 View 的点击测试行为。具体表现为：当 View 的透明度低于该阈值时，即使可见也不会响应点击事件。

这个特性在提升用户体验方面很有实用价值，例如当某个 View 透明度较低时，可以通过该属性禁用其点击功能。

需要注意的是，不同 Android 版本对该属性的支持可能存在差异，使用时需充分测试以确保兼容性。

4. 效果

Unity Image 原图比例控制

Image图片在使用的时候，我们总希望它保持本身比例，这样美术图片就不会变形了。

比如一个图片被压缩了

方法一 Preserve Aspect

1. 设置勾选Preserve Aspect（保持长宽比），控制图片渲染保持本身比例，它会根据rectTranform 的width 和 height 计算能保持比例的最大渲染尺寸。

2. 效果

如图中，图片比例是1：1，rectTranform的width大于height，因此渲染尺寸的height为rectTransform的height。

渲染高度就无法填充整个width。所以左右有空白。

这个使用有问题就是，如果子物体以image的左上为锚点。那么位置可能就会有偏差了。

3. 代码控制

复制代码

[SerializeField] private Image ItemSprite; // 物品图像的引用
ItemSprite.preserveAspect = true;

方法二 Aspect Ratio Fitter

1. 添加Aspect Ratio Fitter组件

该参数控制 RectTransform 的尺寸大小：

Width Controls Height：以宽度为基准，通过宽高比自动计算高度值，此时高度不可手动调整
Height Controls Width：以高度为基准，通过宽高比自动计算宽度值，此时宽度不可手动调整

两种适配模式：

Fit InParent：
- 以父物体尺寸为基准
- 计算宽高的最大值
- 原理与Preserve Aspect相似但会修改RectTransform尺寸
- 锚点随父物体自动缩放
- 确保图片始终保持在父物体范围内
Envelope Parent：
- 以父物体尺寸为基准
- 图片以最小尺寸完整覆盖父物体
- 适合用作背景图片