如何使用UGUI做界面的新手解决适配难题?-八维教育

如何使用UGUI做界面的新手解决适配难题?-八维教育

2021-09-01

开始学习Unity时间不长,在UGUI系统的使用上并没有实际的开发经验。不过根据之前cocos产品的适配策略,研究了UGUI的适配后,发现UGUI提供的适配方案还是比较全面的。unity 分辨率适配,这里自我总结一下,希望能帮助刚用UGUI做界面的新手解决适配问题

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

1. UI必须全屏无黑边

2.UI必须在屏幕内,不能超出屏幕

3.多种分辨率下UI的位置和大小保持一致

unity 分辨率适配_unity适配分辨率_unity苹果适配

4.UI不能变形

根据以上基本要求,我将从canvas的创建开始介绍UI制作流程:

1. 创建画布:

canvas的RenderMode类型推荐使用Screen Space-Camera在UI上层做其他特效等等。

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

unity苹果适配_unity适配分辨率_unity 分辨率适配

参考分辨率选择当前游戏的分辨率。比如美工出品的图片都是以1024*768为背景的。在这里,它应该设置为默认分辨率。

Unity UGUI的适配方法总结

2.创建背景图片:

下面的Screen Match Mode是关键,我建议设置为“Shrink”程序开发人物立绘,让canvas拉伸出屏幕原来的比例,这样我们就可以保证我们在下面放一张相同默认尺寸的背景图画布填满屏幕,满足第一个基本要求,当然背景图的深度必须是最低的,不能在上面添加其他ui元素。

unity苹果适配_unity适配分辨率_unity 分辨率适配

Unity UGUI的适配方法总结

3.添加UI元素

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

先创建一个Image,修改大小为实际要添加的贴图大小

unity适配分辨率_unity苹果适配_unity 分辨率适配

修改返回图片的锚点和枢轴点,必须先修改锚点和枢轴点,再修改坐标才有意义!

Unity UGUI的适配方法总结

修改枢轴点和坐标

Unity UGUI的适配方法总结

这样无论屏幕分辨率怎么修改,屏幕中的返回按钮都在屏幕的左上方,比例和大小保持不变

Unity UGUI的适配方法总结

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

分类:

技术要点:

相关文章: