UGUI屏幕分辨率适配

在提及UI适配之前,我们再来回顾下其中要用到的Canvas组件,有不了解的可以移步这里

Canvas中的Render Mode属性,我们知道共有Screen Space-Overlay模式、Screen Space-Camera模式、World Space模式三种,对于这三种模式,我的使用理解是如果项目是2d的就选用第一种(当然第二种也可以,只是没有第一种方便,因为要涉及到相机,或者你也可以不使用相机),如果是2d项目中有3d模型或者其他3d效果建议选用第二种模式,第三种基本很少用到,即便是纯3D项目,一般用的都是第二种模式,因此本篇文章主要针对第二种模式做出适配,以上个人理解,有大佬有不同意见,欢迎留言斧正交流。

在游戏中一般我们都会创建一个相机专门用于渲染UI元素,另外一个相机用来渲染3d相关显示,这里默认已经创建好需要用到的相机,如下图

然后我们看下Canvas组件信息

这里设计分辨率设为1134x750,Canvas Scaler缩放模式共有三种,这里我们选择图示Scale With Screen Size模式,ui元素根据屏幕大小进行缩放,Reference Resolution就是要填写的设计分辨率,屏幕匹配模式我们选择Match Width or Height,并将Match值置为1(只缩放宽度, 0只缩放宽度,0与1之间的值则宽高都会缩放),可以看到上图中Canvas宽度值变为1125,这个值是怎么算出来的呢?这和我们刚才设置的适配有关,
设计分辨率width = 1134, height = 750
屏幕分辨率width = 960, height = 640
设计分辨率与屏幕分辨率宽比 = 1134 / 960 = 1.18
设计分辨率与屏幕分辨率高比 = 750 / 640 = 1.171875
因我们只缩放宽度,因此根据高度比例来计算高度值
Canvas的宽度值为 1.171875 x 960 = 1125,,即为上图中的值,为验证,我们改一下屏幕分辨率为1024x640,计算后得出Canvas的宽度值为 1.171875 x 1024 = 1200,如下图

如果是竖版游戏,则采用宽比来缩放高度,算法类似,这里不在赘述
可以看到图中我在屏幕四个角上放置了四张图片,用于测试适配是否正确,至此我们看下不同分辨率下这四张图的显示是否仍然在原来的四个角位置

可以看到适配基本达到要求,另外需要注意的是如果我们已经设置好了ui元素在屏幕的某一位置了,如果还有它还有父节点,此时要实现正确的适配的话,需要修改父节点的锚点和位置为自定义类型(或者某一方向或者全部方向,这个在测试时很容易看到)有需要demo工程的朋友可以看看

 

 

 

 

 

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值