Unity UGUI的适配方法总结

刚开始研究Unity没多久,对UGUI系统的使用还没有实际开发经验,但是根据之前做cocos产品的适配策略,对UGUI的适配做了研究后发现UGUI的提供的适配方案还是蛮全面的,这里自我总结一下,希望能帮助刚使用UGUI做界面的新手解决适配难题

首先我们要明确多分辨率适配的基本要求:

1、UI必须充满屏幕,不能有黑边

2、UI必须在屏幕中,不能超出屏幕

3、UI在多分辨率下的位置和尺寸保持一致

4、UI不能变形


        根据上面这些基本要求,我这里从创建画布开始介绍UI的制作流程:

一、创建画布:

画布的RenderMode类型推荐使用Screen Space-Camera 用来在ui上层制作其他特效等

        画布的Canvas Scaler中的UI Scale Mode必须选择Scale With Screen Size,这是Unity提供的适配策略,其他的不能做适配

Reference Resolution选择当前游戏的分辨率,比如美工制作的图都是基于1024*768的背景下制作的,这边要设置成默认分辨率

        Unity UGUI的适配方法总结 Unity UGUI的适配方法总结

       二、创建背景图:

       下面的Screen Match Mode是关键,我建议设置成“Shrink”,这样画布就是出屏幕原比例拉伸,这样就能保证我们在画布下放入默认尺寸一样的背景图就可以充满屏幕,满足第一个基本要求,当然,这个背景图深度要最低,不能再上面加任何其他ui元素。

         Unity UGUI的适配方法总结      

        三、添加UI元素

        比如我想在屏幕左上角添加一个返回按钮,那么我希望返回按钮的锚点在屏幕的左上角,因为画布已经被适配过,所以这个UI的尺寸已经被缩放到一个很“合适”的尺寸(不会因为在高分辨率或低分辨率的屏幕上大小不一致),我们只需要修改它的锚点和轴心点及坐标即可

        先创建一个Image,尺寸修改为要添加的纹理实际尺寸大小

        Unity UGUI的适配方法总结修改返回图片的锚点和轴心点,一定要先修改锚点和轴心点之后改坐标才有意义!

         Unity UGUI的适配方法总结          Unity UGUI的适配方法总结

        修改轴心点和坐标

         Unity UGUI的适配方法总结

        这样,不管屏幕分辨率怎么修改,屏幕中返回按钮都在屏幕的左上方,比例和尺寸保持一致

         Unity UGUI的适配方法总结



 总结:适配的方法可能有很多种,我们只要保证上面的四项基本要求就能做出高品质的游戏界面,这里我使用比较无脑的适配方案,简单有效,如果有其他更好的方法或者扩展能力更好的适配策略,欢迎一起分享。