NGUI屏幕适配原理与计算

NGUI中的屏幕尺寸是设计者决定的,那么在不同的手机或者电脑下是怎么适配的呢?研究了半天,下面记录一下研究的结果。

设计尺寸

设计尺寸是NGUI中UI Root上设置的宽和高,一般会设置Scaling Style为Constrained On Mobiles,这样在手机上运行的时候会根据手机实际的尺寸以及宽高比进行适配。下面的Content Width和Height就是设计尺寸的宽和高,本文以1366 * 768为例。

宽高比

宽高比就是宽比高,1366/768也就是1.7786,而手机的分辨率各种各样,宽高比各不相同,在适配之前都需要计算一下宽高比,以此来确定适配方式。

适配原理

设计的尺寸是1366 * 768,接近16:9的宽高比,那么假如说手机是1920 * 1080的分辨率,该怎么显示游戏画面呢?

很显然1366 * 768是比1920 * 1080小的,总不可能把1366 * 768的游戏画面按照实际分辨率显示在手机上,那也太丑了。

我们先计算1920 * 1080的宽高比,算出来是1.7778,正好等于16:9,比1366 * 768的宽高比略小,也就是相对来说,1920 * 1080的宽没有1366 * 768的宽那么长。

这种情况下我们可以同比把设计尺寸(1366 * 768)放大,放大到高度为1080,这时设计尺寸就变成了1920.938 * 1080,恰好比手机的1920 * 1080多了不到一像素,这时就可以认为是适配结束了。

再换个例子,假设手机分辨率为2340 * 1080,宽高比为2.1667,明显大于1.7786,这时要把设计尺寸的1366 * 768同比放大到宽度为2340,结果就是设计尺寸变成了2340 * 1315.6,这样放大之后会牺牲上下一百多像素的内容,不过游戏中边界的元素都是使用锚点控制位置的,所以不用担心看不到按钮之类的。

计算步骤

总结一下适配计算的步骤

  1. 计算宽高比ratio
  2. 将ratio与设计尺寸的宽高比进行比较
    1. 大于则按照宽适配(即缩放设计尺寸直到宽与手机分辨率的宽相同)
    2. 小于则按照高适配(即缩放设计尺寸直到高与手机分辨率的高相同)