UE 导入图集:TexturePacker

在开发游戏时,会使用到大量的图片资源,使用图集的作用在于减少 DrawCall,提高性能。在 UE 中没有图集的打包工具,比较流行的方案是使用第三方的图集打包工具 TexturePacker。新版本的 TexturePacker 支持直接导出 UE4 的 Sprite,并且可以在引擎中直接导入。在之前的版本中可以使用VaTexAtlas 通过 Json Array 的数据导入,不过与 TexturePacker 直接导出 UE 的 Sprite 相比,VaTexAtlas 并没有优势,UE 的 Sprite 还可以直接预览,VaTexAtlas 则不可以,在官方已经支持的情况下不建议再使用 VaTexAtlas 作为 UE 导入图集的方式。

本篇文章主要内容是记录 TexturePacker 图集生成文件的分析、导入 UE、选项介绍、以及记录在 UE 中使用遇到的问题。

图集文件结构和导入 UE

TexturePacker 的项目文件格式为*.tps,在使用 TexturePacker 导出 UE 的图集会产生两个文件(以 Icons 项目为例):

1
2
3
icons.tps
icons.paper2dsprites
icons.webp

其中 icons.webp 是导出的 Texture。
icons.paper2dsprites是当前图集的描述文件,使用 json 格式,用于描述图集中包含的每个 Sprite 的信息:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
"frames":
{
"BackIcon.webp":
{
"frame": {"x":49,"y":1,"w":36,"h":36},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":36,"h":36},
"sourceSize": {"w":36,"h":36}
},
"Cross_12x.webp":
{
"frame": {"x":251,"y":53,"w":12,"h":12},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":12,"h":12},
"sourceSize": {"w":12,"h":12}
}
},
"meta": {
"app": "https://www.codeandweb.com/texturepacker",
"version": "1.0",
"target": "paper2d",
"image": "icons.webp",
"format": "RGBA8888",
"size": {"w":288,"h":120},
"scale": "1",
"smartupdate": "$TexturePacker:SmartUpdate:25f0f996e96d501a04346c8b7185b520:81c127855f3c19ba3f655bd8ca6a90ac:7e03caed8675e493d8b522094ff94bba$"
}
}

icons.paper2dsprite 文件拖入 UE 的 Content Browser 窗口会创建出下面这些资源:

  • Frames 目录下是当前图集中的每个 Sprite,原始导入的资源关系均是软引用(Sprite->Sprite 以及 Sprite->Texture),但是有些 Sprite 会硬引用 /Paper2D/TranslucentUnlitSpriteMaterial 这个Material Instance
  • Texture 目录中具有一个当前图集的完整 Texture,该资源的原始路径依赖为硬盘中的 png 文件,图集中的 Sprite 对该 Texture 的资源引用关系是软引用。
  • SpriteSheet 这个资源则是导入 *.paper2dsprite 文件创建的资源,该资源的原始路径依赖为 *.paper2dsprite 文件,该资源对图集的完整 Texture 是硬引用,对图集中的 Sprite 是软引用。

Texture Settings

主界面:

参数说明。

Data

  • Data Format:选择 Publish 时生成的格式,支持 UE
  • Trim sprite names:是否裁剪 Sprite 的名字,在 false 的情况下,Sprite 的名字会包含后缀如BackIcon.webp,导入引擎时名字为 BackIcon_png,为 true 时则把后缀裁剪掉。
  • Prepend Folder name:导出的 Sprite 是否包含目录名字,若为 false,则所有的 Sprite 都按照原本的名字,若为 true,导出的 *.paper2dsprite 文件中对 sprite 的描述中会包含路径信息(如 Icons/BackIcon.webp,导入引擎中的名字就为 Icons_BackIcon_png)
  • TexturePatth:指定要导出的 Texture 路径

Texture

  • Texture format:导出图集的 Texture 的格式,默认PNG-32
  • Texture file:导出的 Texture 的文件名
  • Png Opt Level:PNG 文件的优化,所有的优化都是有损压缩,0 为 32 位 png 文件.(0 always write 32 bit png files、1write indexed (8 bit) png files if possible、2..7 optimize packing, high values might be slow)
  • Pixel format:像素格式:默认RGB8888

所有支持的格式:

  • Transparency Handling:使用何种方式处理 Alpha 透明像素的颜色值,支持四种模式,默认选项为Clear Transparent pixel,该模式节省磁盘空间。

Layout

  • Max Sise:图集的最大尺寸

  • Fixes Size: 手动指定图集的大小,为空则让 TexturePacker 确定图集大小

  • Size Contraints:图集的大小约束,默认选项是 Any Size。在 UE 中导入的 Texture 要求是 2 次幂的,否则在 IOS 上会有显示问题,如果非 2 次幂,在 UE 中可以设置填充,不填充也可以,要把 Compression-Compression Settings 设置为 USerInterface2D,但是非 2 次幂的 Texture 会有性能问题。(之前遇到的问题:UE4:IOS 贴图非 2 次幂的显示问题

  • Forces squared:强制 Texture 具有 2 次幂大小,勾选后(Max Size 和 Fixes Size 被锁定为单个值)。

  • Scaling variants:缩放变体的设置

  • Scale:缩放

  • Scale Mode:缩放模式,默认为Smooth

  • Algorithm:Sprite 的排列算法,默认是 MaxRects,大小混排,也可以使用Grid/Strip 使用最大 Sprite 的格子布局。选择不同的算法,可以控制的选项不一样。

    • Basic:Sort by/Sort order/Pack,用于控制 Sprite 的排列规则
    • Grid/Strip:按照最大的 Sprite 为基本格子单位
    • MaxRects:Heuristics/Pack,其中 Heuristics 又控制着几种模式
  • Multipack:如果不想要把所有的 Sprite 打包到单个 Texture 里,可以使用此选项打包出多个 Texture 和数据文件,默认 false

  • Allow rotation:是否允许旋转 Sprite,能够使生成的 Texture 贴合的更好,开启后可以将他们顺时针或者逆时针旋转 90 度(在有些引擎中可能会不支持,在 UE 中测试没有问题),默认为 true

  • Detect identical sprites:自动别名相同的图片只在 Texture 中存储一次,但是数据文件中包含多份,相当于一个 Texture 中包含了一个 Sprite 的图,但是数据中可以存储两个 Sprite 的信息,在导入引擎时就会生成两个 Sprite,但原始的 Texture 中只有一份图像数据,可以节省空间。

Sprites

  • Trim mode:可以裁剪 Sprite 边界的透明像素,由于不需要处理透明像素,因此可以缩小 Sprite 的尺寸,可以使图集排布的更加紧密,并加快渲染速度。有四种模式None/Trim/Crop,keep Pos/Crop,flush Pos

    • None:不裁剪,保持 Sprite 原始大小,保持原有的透明像素,在此种模式下在 UE 中使用该 Sprite 与原图相同。
    • Trim:移除 Sprite 周围的透明度,在使用时,应该具有原有大小,但该选项并非在所有框架中都可用。实际测试时在 UE 中使用 Sprite 比例与原图不同,没有原图中的周围透明像素。
    • Crop,keep Pos:导入 UE 中与 Trim 看起来相同,目前还没发现其他的区别。
    • Crop,flush Pos:导入 UE 中与 Trim 以及 Crop,flush Pos 看起来相同。
  • Trim margin:当开启裁剪时,裁剪算法会尽可能多地删除边界的透明像素,设置 Trim margin 可以指定保留边界的像素。

  • Transparency Threshold:值范围为 1~255,默认值为 1。当开启裁剪时,低于此值的 alpha 值将被视为透明,对于边界几乎不可见的 alpha 像素的 Sprite 可以起到裁剪的作用。

  • Extrude:默认值为 1,用于指定拉伸 Sprite 边界重复的像素,Sprite 的大小保持不变。但设置之后在 UE 中 Sprite 的中心位置发生了变化。当 Extruct 设置为 10,之前和之后的区别:

  • Border padding:填充图集 Texture 边缘为透明像素(边缘的位置不放置 Sprite)

  • Shape padding:设置 Sprite 之间的填充,默认为 2,填充的像素不会添加到 sprite 中,在使用 OpenGL 渲染时应至少设置为 2.

  • Common divisor:扩展 Sprite 的大小使其能被设置的值整除,扩展的 Sprite 会透明,默认值为 1,表示 Sprite 大小不变,最大为 2048。用途为强制设置大小相同的 Sprite,在多个缩放因子上强制相同的布局。

Normal maps

  • Pack with same layout:Sprite 图像和他们的法线贴图使用相同的布局打包在单独的 Sprite sheets 上。

UE4 使用图集的问题

UMG 中使用的问题

UMG 里使用 TexturePacker 图集,在 UImage 空间中使用 Sprit,用 Draw As=Image ,Tiling=Horizontal,发现整个图集都被平铺出来了。

TilingNo Tile的模式下是正常的,但是在其他的模式下都会有问题。
应该是引擎支持不够的问题,只能暂时先不用这种方式,有时间具体分析一下原因。

Reimport 问题

reimport 图集有一个坑,可能会出现 uv 混乱,出现 UV 不对的问题。

避免问题的操作流程是:

  1. 保证没有打开使用到该图集的 UMG
  2. 删掉图集和所有 sprite 重新拖进来一次