NGUI学习笔记（一）UIRoot

最新推荐文章于 2024-07-31 18:15:42 发布

翻译最新推荐文章于 2024-07-31 18:15:42 发布 · 1.0k 阅读

本文详细介绍了NGUI中UIRoot组件的不同缩放模式及其应用场景。包括PixelPerfect、FixedSize和FixedSizeOnMobile的区别，以及如何根据设备分辨率调整UI组件大小以达到最佳显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

UIRoot总是放在NGUI UI层级的最上层。

它用来使UI的缩放变得更容易。widget通常使用的是以像素为单位的坐标，但是一个800*400（dimensions的值）的widget会占用800*400个单位（Unity中的单位），这相当大。UIRoot通过屏幕高度的反比来进行缩放，因此widgets都会很小，并且操作起来更容易。

UIRoot有几种缩放方式。最常见的就是PixelPerfect。这种方式下，你的UI一直都是以像素为基础，一个300*200的widget在屏幕上永远占用300*200像素。这就意味着，你的UI在低分辨率的机器上会显得非常大，在高分辨率的机器上就会显得很小。这个设置就是一直保持你的UI清晰。

FixedSize是一个和它功能正好相反的设置。当UIRoot用了这个选项，你的屏幕永远都会保持NGUI所关心的尺寸，不管你的实际屏幕是多大。就是说一个300*200的widget占用了你1920*1080的25%的屏幕，那么当分辨率降低到1280*720的时候，它同样占用25%的屏幕。如果你不介意你的UI看起来像是不同的尺寸，也不关心是否清晰（就是可能一个小的UI被拉伸很大），那么选择这个选项。选择它的时候，不要忘记设置Manual Height。

FixedSizeOnMobile是前两种的组合。选择这个选项后，会在pc或者mac等桌面设备上用“PixelPerfect”，在移动设备上用“FixedSize”。

如果你没有选择Fixed Size选项，那就要设置Minimum和Maximum Height的值。这些值让你的虚拟屏幕看起来在合理范围。比如选择了Pixel Perfect方式，Minimum Height设置为720，那么当有玩家把你的程序运行在800*600（高度是600，小于Minimun Height）的设备上时，你UI的行为就和设置了“Fixed Size”模式、Manual Height值设为720的时候一样。

小贴士

UIRoot以2/ScreenHeight的值进行缩放。ScreenHeight可能是实际的屏幕高度（Pixel Perfect），也可能是manual height（Fixed Size）。这样做的目的是使渲染UI的camera的Orthographic Size的值一直使用1。

如果你不需要UIRoot的自动缩放功能，直接去掉这个组建。

心得：

（1）PexelPerfect和Minimum Height, Maximum Height

这个组合主要用于我们期望所有的UI纹理都“尽量”不进行缩放，所谓“尽量”的程度，则是取决于Minimum Height和Maximum Height，Minimum Height表示当设备分别率小于此设置值时，根据此设置值对UIRoot进行缩放；Maximum Height表示当设备分辨率大于此设置值时，根据此设置值对UIRoot进行缩放（UIRoot是UI游戏对象树的根，修改UIRoot的缩放，则会影响整棵UI树的缩放）

（2）FixedSize和Manul Height

这个组合主要用于我们期望所有的UI纹理都进行“合适”的缩放，所谓“合适”缩放的原则，则是根据Manual Height设置值，当设备分辨率的高度值不同于此设置值时，则根据其比例（即Manual Height / Screen Height）对整棵UI树的进行“等比”缩放（宽度的缩放比也是此比例值），这样，我们就可以做一套资源，在不同尺寸的分辨率最好的“不变形”的适配了

（3）交集

前面两组在什么情况下等同呢？

Manual Height == Minimum Height == Maximum Height

推导过程，呵呵~~

具体可参考UIRoot中activeHeight属性和GetPixelSizeAdjustment的计算过程

4.这也许并不够

基于以上推到，当我们以1024x768为标准分辨率做一套UI资源（也就是选择FixedSize并且Manual Height=768），似乎可以满足百分之90以上的机型了，而为什么是1024x768呢？

既然我们已经容忍在除1024x768之外的其他设备上进行等比缩放了，那为什么不是960x640呢？

计算一下1024x768的宽高比=1.33，960x640的宽高比=1.5，这就是移动设备的分辨率比例的全部了吗？

当然不是，iphone5的比例就要大于1.5，还有各种奇葩的android设备呢，比如夏新的n828就是960x540，宽高比=1.78

那为什么以1024x768为标准呢？

因为1.33的宽高比，当我们的1024x768的资源到960x640的设备上时会有什么现象？

根据Manual Height / Screen Height的比例可知，我们需要缩放768 / 640 = 1.2倍，假设是一张1024x768的纹理，高度缩放1.2倍变为了640，宽度也要相应缩放1.2倍变为853（保证等比缩放不变形），也就是说1024x768的资源放到960x640上反而两边有了黑边，这是我们可以容忍的，我们可以做一个很大的背景或者拉伸，保证UI组件不变形即可，很多游戏都是这么做的，比如植物大战僵尸在iphone5和ipad上看到的背景视野并不一样大！

当放到夏新的机器上呢？

我们需要缩放768 / 540 = 1.4倍，宽度1024 / 1.4 = 731，这是可以的，只是看起来更怪一些，因为两边的黑边相对比例更大了（960 - 731=229的黑边区域）

而我表示android机器的分辨率奇葩到只有想不到，没有做不到的程度，也许宽高比1.7并不是终点，当遇到1.8之后，黑边的相对比例会更大。。。

5.问题又来了

假设我们的游戏类型更适合iphone手机玩，不太适合ipad，所以我希望能以960x640为标准做一套资源，可以吗？

我只能说不太可以，因为你要在设计UI组件的大小做限制了，为什么需要做限制？

假设我有一张纹理是960x640大小的，在iphone上铺满整屏，根据我们的设置（FixedSize和Manual Height=640），拿到1024x768的分辨率上，高度640 / 768 = 0.83，为了保证等比缩放，宽度960 / 0.83 = 1156，不幸的事情发生了，1156 > 1024，这个UI组件宽度超过了屏幕的宽度，被裁剪了。。。这是我们不能容忍的，或许你可以说我们尽量不做这种尺寸的UI，OK，你可以对UI尺寸加限制，但是当面对android那些奇葩的分辨率的时候，你会发现限制越来越大，这也许会让美术和策划疯掉！