我们这里只讨论RenderMode为Camera下的画布,并且摄像机为正交模式
画布实现原理为:
1.计算摄像机的宽高
2.画布大小设置为与摄像机范围一致
3.将画布的unit单位转为分辨率单位
重点 4.控制画布中RectTransform的缩放比例adapterRate
下面开始实现
当前分辨率为800×600,设计分辨率为1920×1080
1.计算摄像机的宽高
最重要的转换是:摄像机的高度=摄像机size*2
也就是说摄像机的size其实表示的是从摄像机位置到顶部的unit距离
假如现在size为5,那么现在摄像机的高度就为10unit
由于摄像机的宽高是由分辨率决定的,那么摄像机宽度就可以计算了,如 [图1]
[图1]
2.通过将画布大小设置为与摄像机范围一致
知道了摄像机的大小那么就直接知道了画布的大小了
两步的代码实现: 注意带unit前缀的变量,表示这个变量表示的是unit单位,不带unit则表示是分辨率
/// <summary>
/// 画布组件
/// </summary>
public class MyCanvas : MonoBehaviour
{
public float designWidth;
public float designHeight;
public float realWidth;
public float realHeight;
[HideInInspector] public float unitCameraWidth; //摄像机视角宽度
[HideInInspector] public float unitCameraHeight; //摄像机视角高度
private void Update()
{
realWidth = Screen.width;
realHeight = Screen.height;
unitCameraHeight = cam.orthographicSize * 2; //高度决定了摄像机的宽度
unitCameraWidth = realWidth / realHeight * unitCameraHeight; //摄像机高度是通过比例计算得到的 camWidth/camHeight = realWidth/realHeight
}
}
3.将画布的unit单位转为分辨率单位
我们实际操作RectTransform坐标时还是改的是世界坐标,那就是说还是以unit单位,但是显示的话应该是分辨率
这个时候需要unit单位和分辨率相互转换
/// <summary>
/// 画布组件
/// </summary>
public class MyCanvas : MonoBehaviour
{
/// <summary>
/// 这段是新加的代码!
/// unit坐标转为分辨率
/// </summary>
public float UnitToRes => realHeight / unitCameraHeight;
/// <summary>
/// 这段是新加的代码!
/// 分辨率转为unit坐标
/// </summary>
public float ResToUnit => unitCameraHeight / realHeight;
}
4.控制画布中RectTransform的缩放比例adapterRate
重点来了,分辨率适配其实适配的就是缩放比例,RectTransform最后大小会×一个比例来确保不会过大或者过小
画布中的缩放方式会有3种
Constant Pixel Size:固定倍率
Scale With Screen Size:根据屏幕调整倍率
Constant Physical Size:很少用,这里不讨论了
A.Constant Pixel Size模式下的计算
这个模式下的adapterRate是固定值
B.Scale With Screen Size模式
这个模式又分为3种情况:
Match Width Or Height:对adapterRate进行插值,如果match设置为0,则只计算宽度缩放,保证图片不会超过画布宽度,但是高度可能会超过
Expand:分别计算宽高的adapterRate,然后取最小的adapterRate。这种情况会保证图片不会超过画布
Shrink:分别计算宽高的adapterRate,然后取最大的adapterRate,这个情况图片大概率会超过画布大小
下面贴上代码
public enum ScaleMode
{
/// <summary>
/// 固定倍率
/// </summary>
ConstantPixelSize,
/// <summary>
/// 根据屏幕调整倍率
/// </summary>
ScaleWithScreenSize,
}
public enum MatchMode
{
/// <summary>
/// 对rate进行插值
/// </summary>
MatchWidthOrHeight,
/// <summary>
/// 取最小的rate
/// </summary>
Expand,
/// <summary>
/// 取最大的rate
/// </summary>
Shrink,
}
/// <summary>
/// 画布组件
/// </summary>
public class MyCanvas : MonoBehaviour
{
public float designWidth;
public float designHeight;
public ScaleMode mode;
public MatchMode matchMode;
public float realWidth;
public float realHeight;
public float adapterRate; //ui的缩放比
[Range(0, 1)]
public float match; //权重
private void Update()
{
if(mode == ScaleMode.ConstantPixelSize)
{
adapterRate = 1;
}
else if(mode == ScaleMode.ScaleWithScreenSize)
{
if(matchMode == MatchMode.MatchWidthOrHeight)
{
adapterRate = realWidth / designWidth * (1 - match) + realHeight / designHeight * match;
}
else if(matchMode == MatchMode.Expand)
{
float rateWidth = realWidth / designWidth;
float rateHeight = realHeight / designHeight;
adapterRate = Mathf.Min(rateWidth, rateHeight);
}
else if(matchMode == MatchMode.Shrink)
{
float rateWidth = realWidth / designWidth;
float rateHeight = realHeight / designHeight;
adapterRate = Mathf.Max(rateWidth, rateHeight);
}
}
}
}