UE4导入图集: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.png

其中icons.png是导出的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.png":
{
"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.png":
{
"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.png",
"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.png,导入引擎时名字为BackIcon_png,为true时则把后缀裁剪掉。
  • Prepend Folder name:导出的Sprite是否包含目录名字,若为false,则所有的Sprite都按照原本的名字,若为true,导出的*.paper2dsprite文件中对sprite的描述中会包含路径信息(如Icons/BackIcon.png,导入引擎中的名字就为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重新拖进来一次
全文完,若有不足之处请评论指正。

扫描二维码,分享此文章

本文标题:UE4导入图集:TexturePacker
文章作者:查利鹏
发布时间:2020年09月11日 15时53分
本文字数:本文一共有3.7k字
原始链接:https://imzlp.me/posts/28513/
专栏链接:https://zhuanlan.zhihu.com/p/242252091
许可协议: CC BY-NC-SA 4.0
捐赠BTC:1CbUgUDkMdy6YRmjPJyq1hzfcpf2n36avm
转载请保留原文链接及作者信息,谢谢!
您的捐赠将鼓励我继续创作!