https://www.sohu.com/a/169409304_280780

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、文件夹,以及这些类型的任意组合。操作更加方便,对用户更友好。

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

添加图集Variant(变种)

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

运行时访问图集

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

Sprite Mask(精灵遮罩)

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

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

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

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

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

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

结语

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

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

Sprite Atlas与Sprite Mask详解的更多相关文章

  1. Unity2017新功能Sprite Atlas详解

    Sprite Atlas(精灵图集)Sprite Atlas 针对现有的图集打包系统Sprite Packer在性能和易用性上的不足,进行了全面改善.除此之外,相比Sprite Packer,Spri ...

  2. NGUI 3.5教程(四)Atlas和Sprite(制作图片button)

    Atlas是NGUI的图集.我的理解是:Atlas把你的一些零散的图片,合并成一张图.这样做的优点是,能够减少Draw Call.我不了解它的底层运作机制,我猜应该也是再行进DXT之类的纹理压缩,所以 ...

  3. 解决Sprite Atlas打包Asset bundles时重复打包的问题

    0x00 前言 在Unity 2018.4.6之前的版本,有一个和SpriteAtlas打AB包有关的常见问题.即当给Sprite Atlas打AB包时,Sprite Atlas Texture可能会 ...

  4. iOS开发——UI篇OC篇&SpriteKit详解

    SpriteKit详解 SpriteKit,iOS/Mac游戏制作的新纪元 这是我的WWDC2013系列笔记中的一篇,完整的笔记列表请参看这篇总览.本文仅作为个人记录使用,也欢迎在许可协议范围内转载或 ...

  5. 猫哥网络编程系列:详解 BAT 面试题

    从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...

  6. ps切图抠图详解-web前端(转)

    网页设计在技术层面上,第一步是美工做出网页效果图,第二步就是网页前端进行网页切图.网页切图工具常用的有fireworks.PS,这里使用PS进行网页切图. 我们通过设计稿,得到我们想要的产出物(如.p ...

  7. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  8. DataURL详解--转自格桑blog

    DataURI详解 Posted on 2013 年 09 月 09 日 by admin DataURI,不算新东西,却一直没用过,前些日子在webapp中用了点DataURI,就做了下相关的了解, ...

  9. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

随机推荐

  1. Spring Boot集成Spring Data Jpa完整实例

    步骤: 添加依赖: 配置文件: 出了数据库的配置,还要配置jpa相关的: 实体类: Dao接口: 定义一个查询的方法,如果是jpa默认就有也可以不写: 测试: 如果报下面的错误,说明jdk9中缺少相关 ...

  2. stm32f103的低功耗开启和关闭

    stm32f103低功耗分为WFI等待中断和WFE等待事件,我只用到等待中断,这里没有细究. 待机模式最低功耗2uA,只有备份寄存器和待机电路供电,PLL,HSI,HSE断开,寄存器和SRAM复位,除 ...

  3. js中__proto__和prototype的区别和关系?(转)

    转自知乎:https://www.zhihu.com/question/34183746

  4. PMBOK项目管理的五大过程组和十大知识领域

    PMBOK五大过程组是:启动过程.规划过程.执行过程.监控过程.收尾过程. 各用一句话概括项目管理知识体系五大过程组: 1.启动过程组:作用是设定项目目标,让项目团队有事可做: 2.规划过程组:作用是 ...

  5. WPF打印控件内容

    当我们想打印控件内容时,如一个Grid中的内容,可以用WPF中PrintDialog类的PrintVisual()方法来实现 界面如下: XAML代码如下 <Grid> <Grid. ...

  6. Java 面向对象_接口

    接口定义 接口就是多个类的公共规范 接口是一种引用数据类型, 最重要的内容是其中的抽象方法 定义格式: public interface MyInterfaceAbstract { // 这是一个抽象 ...

  7. 【转载】 C#中日期类型DateTime的日期加减操作

    在C#开发过程中,DateTime数据类型用于表示日期类型,可以通过DateTime.Now获取当前服务器时间,同时日期也可以像数字一样进行加减操作,如AddDay方法可以对日期进行加减几天的操作,A ...

  8. React Native 开发豆瓣评分(一)环境搭建&配置模拟器

    详细可参考 官方文档,这里进记录一些重要过程. 安装环境 下载 Android Studio 选择 Custom 进行安装: Android SDK Android SDK Platform Perf ...

  9. AE开发—利用IQueryFilter接口进行属性查询

    在ArcGis Engine二次开发过程中,经常会需要用到查询统计的功能,而IQueryFilter是最常见的属性字段查询接口,可以用来做一些简单的查询工作. 现在有一些公交站点和公交路线的数据,可视 ...

  10. Jerry带您了解Restful ABAP Programming模型系列之二:Action和Validation的实现

    相信通过Jerry的前一篇文章 30分钟用Restful ABAP Programming模型开发一个支持增删改查的Fiori应用,想必大家对Restful ABAP Programming模型已经有 ...