Sprite Atlas与Sprite Mask详解

红太狼 2022-09-08 00:05 217阅读 0赞

Unity 2017.1正式发布后，带来了一批能帮助大家更加简化工作流的新功能。今天这篇文章，将由Unity技术经理成亮，为大家介绍其中两个精灵相关的重要功能：Sprite Atlas（精灵图集）与Sprite Mask（精灵遮罩）。

Sprite Atlas（精灵图集）用于替换现有的Sprite Packer，让制作图集（Atlas）的过程更加便利和高效。Sprite Mask （精灵遮罩）用于显示一个或一组Sprite的部分区域，该功能非常实用，比如游戏中常见的圆角卡片或圆形头像等，都可以用Sprite Mask实现。本文将通过实际案例来详细展示以上两个重要功能。

Sprite Atlas（精灵图集）

Sprite Atlas 针对现有的图集打包系统Sprite Packer在性能和易用性上的不足，进行了全面改善。除此之外，相比Sprite Packer，Sprite Atlas将对精灵更多的控制权交还给用户。由用户来掌控图集的打包过程以及加载时机，更加利于对系统性能的控制。Sprite Atlas的主要有以下三个功能：

1.  创建、编辑图集以及设定图集参数
2.  添加图集Variant（变种）
3.  运行时访问图集

下面将通过具体案例来分别展示以上三个功能。

创建、编辑图集及参数设定

在Unity 2017.1中，Sprite Atlas是一种资源，可以像其它资源一样在Unity中创建，例如预制件、场景等。可以在检视窗口中设定要打包的精灵及其参数，例如图集的打包方式、输出贴图的压缩格式等。如下图所示，Potato就是一个创建好的图集，目前打包的对象包括了char\_hero\_beanMan这个Sliced Sprite。这里可以支持多种类型，包括单个Sprite、Sliced Sprite、文件夹，以及这些类型的任意组合。操作更加方便，对用户更友好。

![0bd6ebddaf255a333c68e65b056fd664.png][]

此外，在检视窗口上还可以看到图集的一些参数设定，例如：打包时是否支持精灵旋转(Allow Rotation)、贴图的采样模式(Filter Mode)、压缩方式(Compression)等等。在最下方的预览窗口中，可以查看图集的生成效果。这样就可以很清楚的知道图集的打包方式是否合理，是否存在大量被浪费的空间。

添加图集Variant（变种）

所谓Variant，就是指原有图集的一个变种。它会复制原有图集的贴图，并根据一个比例系数来调整复制贴图的大小。这样的Variant通常用于为高分辨率和低分辨率的屏幕准备不同的图集。因为如果只准备一套高分辨率的图集，在低分辨率的设备上占用内存过多。反之，如果只准备一套低分辨率图集，在高分辨率的设备上就会模糊。通过Atlas Variant就可以很方便地解决该问题。如下图所示，Pot.sd是新建的一个低清图集，在检视窗口中将Type设为Variant，Master Atlas设为Potato。这里为了与原图进行更明显的对比，将Scale设为0.1 ， Filter Mode设为Point。

![16c9a8a7a42d64c15f232d36c8f92081.png][]

运行时访问图集

Sprite Atlas作为一种资源开放给用户，支持在脚本中直接访问，还可以通过名字获取图集中的精灵。这样做的好处是，让用户可以更加直接地随时访问图集，而且不用去单独加载图集中的每个精灵。下面是一段动态换装的代码，该脚本通过LoadAsset加载SpriteAtlas类型的资源，再通过SpriteAtlas的GetSprite接口获取图集中的精灵，最后将精灵传递给SpriteRenderer来实现动态换肤的功能。相较于基于Sprite Packer的实现，整个过程要简单直接的多。

![1d10de3df99d7d677bd1c6dfe5fa6e80.png][]

Sprite Mask（精灵遮罩）

Sprite Mask组件用来隐藏一个或一组精灵的部分区域，只作用于使用了Sprite Renderer的对象。该功能非常实用，因为在实际项目中，很多情况下都需要将图片显示在圆角矩形或圆形框中。如下图所示，图中实际上有卡片背景、卡片角色、以及卡片框三张图片，最终希望的效果是将超出边框的部分都裁剪掉。最直接的做法就是将卡片背景及卡片角色的图片进行裁剪。但这样做的问题是，如果其它地方使用了大小不一样的图片框，甚至改为圆形框，就需要再出一套裁剪好的角色和背景图片，这样会造成资源浪费。

![dbe267b0a86eeada6eef07fdbfa49c95.png][]

如果使用新的Sprite Mask组件，就可以通过一张圆角矩形对超框部分进行裁剪，如下图所示：

![4b369f46d4b52d67005bf5735a8f4de8.png][]

当然，被裁切的图片需要在Sprite Renderer组件中设置Mask Interaction字段，如下图所示。如果要显示Mask中的区域，就设置为Visible Inside Mask；反之则设为Visible outside Mask。

![470cada16faac95995672a3a78936cab.png][]

最终设置好后的效果如下图所示：

![95d4ca51ebf967e886d873fad12e601e.png][]

默认情况下，Sprite Mask会影响场景中其“Mask Interaction”设为Visible的精灵 。但我们经常希望只影响一个或一组特定的精灵。这时就需要用到Sorting Group组件。Sprite Mask会仅剪裁Sorting Group下的子节点，如下图所示：

![6035b3925966840dc42665b6f203c037.png][]

还有另外一种方法可以限定Sprite Mask的处理范围，就是设置一个Sorting Layer的范围。如下图所示，CircleMask处理的Sorting Layer的范围是3 ～4，它只会裁剪该范围内的角色图片。

![d44d48c0cc944988bad3b91457b1d824.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUGV0ZXJfR2FvXw_size_17_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUGV0ZXJfR2FvXw_size_16_color_FFFFFF_t_70_g_se_x_16][]

结语

通过以上介绍可以看出，Sprite Atlas相较于原来的Sprite Packer在精灵可控性上有了很大改善，这些改善可以帮助用户更好地控制图集大小，且更加方便地使用图集。而Sprite Mask通过Mask控制精灵部分显示，可以帮助用户非常方便地实现大量常见的表现效果。

每次Unity大版本更新，都会带来一些大家非常期待的新功能。我们也会继续为大家分享更多Unity新功能与技术教程在Unity官方中文社区（unitychina.cn），请大家保持关注。

[https://www.cnblogs.com/alps/p/11209473.html][https_www.cnblogs.com_alps_p_11209473.html]

[0bd6ebddaf255a333c68e65b056fd664.png]: /images/20220829/1c21ec4e48df4129b4f2d172d419110c.png
[16c9a8a7a42d64c15f232d36c8f92081.png]: /images/20220829/fa53c740f1e84fbb9d52e172fc0faa68.png
[1d10de3df99d7d677bd1c6dfe5fa6e80.png]: /images/20220829/e9ceddb2fd594030aceacc05c3efa135.png
[dbe267b0a86eeada6eef07fdbfa49c95.png]: /images/20220829/3046ef5c866741d2bbc1a2a0ec9abeee.png
[4b369f46d4b52d67005bf5735a8f4de8.png]: /images/20220829/8d73b742c7bb41c5b5f68bfb1a94c89f.png
[470cada16faac95995672a3a78936cab.png]: /images/20220829/c5f8ffa747c74b3ea9785ecdf5310a0e.png
[95d4ca51ebf967e886d873fad12e601e.png]: /images/20220829/662dc51368aa4561adbaf1c8a88856dc.png
[6035b3925966840dc42665b6f203c037.png]: /images/20220829/6e79ed6f6d7642328b27bb9b07e24145.png
[d44d48c0cc944988bad3b91457b1d824.png]: /images/20220829/c4b4e03ab16843d6bb04f14ca7f5b7e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUGV0ZXJfR2FvXw_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ef84552f63df4cfb996405e5e649e2aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUGV0ZXJfR2FvXw_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3a0e445c9d2d4600a4df6c41bf55fe21.png
[https_www.cnblogs.com_alps_p_11209473.html]: https://www.cnblogs.com/alps/p/11209473.html