关于Unity的Piexels Per Unit:美术素材到底要画多大?显示多大?

发布时间 2023-12-17 15:46:20作者: 柴木鱼

问题一:Unity的一个单位(unit)是啥?

就是场景里面的这样一个小格子。

 新建一个square,它的默认scale是1,可以正正好塞满1个unit。

 点开square的sprite,可以看见(①)图片尺寸是256x256像素,也就是你导入工程文件的图片文件的尺寸。

那么它为啥能正好塞满1个unit呢?256像素和1个unit的边长是如何对应上的呢?这就是Pixels Per Unit的作用了。可以看见(②)对于这个sprite来说,它的PPU也是256,意味着当它放入场景中时,1个unit盛装它的256个像素。

 另外准备一个方块图片,其图片尺寸是100x100像素,PPU设置为100,它在屏幕上显示的大小和上面的默认方块是一样的,都占了一个unit。

 问题二:屏幕中有多少个unit?

在Camera的参数中,调整Size可以决定摄像机视野在纵向上有多少个unit。例如默认的参数值是5,该值表示半个视野中,有5个unit叠起来那么高,所以摄像机视野高度为10个unit。那么宽度呢?这要根据你设置的屏幕宽高比来定。例如,现在设置的屏幕宽高比是16:9,摄像机高度为10unit,进行换算后可以得到宽度17.9unit。数一数是不是呢?

 问题三:什么情况下图片会糊?

首先把分辨率设置到1920x1080,并把Scale设置为1,这样能保证看到的图片尺寸和游戏运行在1920x1080的屏幕上是一样的。还是以这个100x100的炫彩小方块为例,它的PPU是1,所以现在占据1个unit。Camera的Size是5,所以屏幕的高度能容下10个这样的小方块。

但是,现在的小方块是会有点模糊的。为啥呢?是因为显示分辨率和图片分辨率不匹配。且后者更小。

首先,因为我们把分辨率设置到了1920x1080,这是显示分辨率(屏幕分辨率),意味着显示器所能显示的像素有多少。你可以理解为从硬件上说,你的屏幕就是物理上被划分为了1920x1080个小格子,每个小格子用来显示一个像素。而因为我们指定摄像机视野高度为10个unit,所以每个unit分到的格子是108个。

然后,因为我们设置小方块的PPU为100,又意味着我们希望每个unit可以放下100个小方块图片的像素。所以我们想把图片拆分成100份,放进108个格子里。格子多了!怎么办呢?计算机会利用某些方法,比如取两个相邻像素的颜色然后生成一个新像素作为中间的填充,多变出8个像素来给你显示。等于是计算机帮你把100像素的图片放大到了108像素,所以图片就糊了。

 要解决这事,要么降低1unit对应的显示分辨率,要么提高图片对应的PPU。

1.降低Camera size到5.4,这样视野高度为10.8个unit,每个unit就对应100个物理格子啦。

2.提高图片的PPU到108,这样小方块占据的空间就不满1个unit了,但1个图片像素正正好对应1个物理格子,也行。

两种方法都会导致小方块最终看起来最小了。如果还想保持原来的视觉效果,最好是一开始就把小方块的图片尺寸弄大一些。

问题四:image的尺寸和sprite不同?

还是用上面那个炫彩小方,这次用它创建一个image。啊?明明Width和Height都是100,你不应该就和sprite一样,占据1个unit吗?为啥你看起来比sprite要小?

 调整Width和Height为108后,两个方块看起来一样大了。而108,是现在屏幕分辨率下一个unit对应的屏幕像素,陷入沉思。

 看看Canvas现在的参数情况。尺寸是1920x1080,一方面是因为下面的UI Scale Mode设置的是Constant Pixel Size,一方面是因为设置的屏幕分辨率是1920x1080。而Reference Pixels Per Unit是100。

 尝试把RPPU改为108,然后在image小方块处点击Set Native Size,就发现image变得和sprite一样大了。

根据上面的例子,我们知道:

1.因为PPU是100,所以一个图片像素为100x100的方块占据1个unit;

2.因为Camera size是5,屏幕分辨率是1920x1080,所以一个unit对应108个物理像素,方块sprite实际显示出来占据108个物理像素。

再根据公式:UI大小 = 原图大小(Pixels) / (Pixels Per Unit / Reference Pixels Per Unit),当PPU和RPPU都是100时,有:

3.一个图片像素为100x100的方块,作为UI时它显示出来就占据100个像素,所以会比sprite小;

4.当RPPU增大到108,和PPU一除,相当于方块的native size变成了原来的1.08倍即108像素,就和sprite一样大了。

【参考】

Unity规范:图片的分辨率 其中还讨论了九宫格图片的情况。

Choosing the resolution of your 2D art assets 其中提到要经常build游戏以查看实际的运行效果。

帮你理清Unity中的Pixels Per Unit RPPU的公式出处。

画布 - Unity手册 Canvas Render Mode的详细说明,由于这里只讨论2D,没有动Render Mode。