Unity UI和场景适配

1.ui适配

初始情况:

1.为什么要适配?

 因为通常我们做ui的时候,会使用一个标准分辨率作为参考,然后所有ui在这个分辨率下都能正确显示,我们游戏使用的是1136x640这个分辨率。但是当我们在面对不同的手机分辨率的时候,如果我们不缩放ui的宽和高,那么我们的ui将不能正确显示,比如上图的背景,只占据了整个显示区域的中心部分。

2.适配ui方法

(1)高度匹配(宽高缩放比一致)

假设目标分辨率的宽高比是:1920/960 = 2, 我们设计的标准分辨率是:1136/640=1.775.   此时2大于1.775, 我们使用高度匹配,那么960/640 = 1.5, 1136*1.5 = 1704, 于是最后我们高度适配后最后显示结果是:1704,960.  1704的宽并没有铺满1920的显示区域,于是屏幕两边有空隙。不过我们可以渲染一个填充满屏幕特定背景,来填充左右两侧的空隙。

(2) 宽度匹配(宽高缩放比一致)

假设目标分辨率的宽高比是:1024/768 = 1.33, 我们设计的标准分辨率是:1136/640=1.775.   此时1.33小于1.775, 我们使用宽度匹配,那么1024/1136 = 0.9, 640*0.9 = 576, 于是最后我们高度适配后最后显示结果是:1024,576.  576的高并没有铺满768的显示区域,于是屏幕上下有空隙。不过我们可以渲染一个填充满屏幕特定背景,来填充上下的空隙。

(3) 宽高铺满(宽高缩放比不一致,一般不适用,会导致图形变形)

分别缩放宽和高,让他们各自拉升与目标分辨率一致,这样宽高缩放比将会不一致,图形将会变形,一般不会使用。

3.Unity提供的方式

使用Canvas scale组件来达到我们第2点的实现方式,如图设置,这里目标分辨率是2244x1080, 模板分辨率是 1136x640.可以看到canvas的width和height从2240x1080变为了1329.778x640,缩小了1.6875, 同事scale也从0.00925变为了0.015625,放大了1.6875. 这样做的目的是:保持canvas的宽高,但是canvas的所有子对象,此时都放大了1.6875倍,以便匹配目标分辨率的高度1080.

4.代码 

public class UISceneAdapter : MonoBehaviour {

    public CanvasScaler mCanvasScaler;

    // Use this for initialization
    void Start () {
        mCanvasScaler.uiScaleMode = CanvasScaler.ScaleMode.ScaleWithScreenSize;
        mCanvasScaler.screenMatchMode = CanvasScaler.ScreenMatchMode.MatchWidthOrHeight;
        //大于使用高度匹配,小于使用宽度匹配
        mCanvasScaler.matchWidthOrHeight = Screen.width / Screen.height > mCanvasScaler.referenceResolution.x / mCanvasScaler.referenceResolution.y ? 1.0f : 0.0f;
    }
	
	// Update is called once per frame
	void Update () {

	}
}

猜你喜欢

转载自blog.csdn.net/qweewqpkn/article/details/81229239
今日推荐