Unity Spine 的纹理打包器(texture packer)详解

总述(Overview)

Spine 能帮你把分散的图片打包成一张完整的纹理贴图集或精灵表(spritesheet)以便在运行时更有效率的渲染。Spine 的纹理打包器(texture packer)是一个通用工具,它即可以用于为 Spine 的骨骼打包纹理,也可以单独运行为你打包应用程序所需的所有图片资源。

大多数图形API(如: OpenGL)的工作原理是这样的,绑定一张纹理,然后渲染,完成之后再绑定一张再渲染,如此往复直到全部完成。绑定纹理相对来说需要消耗大量的系统资源,所以理想的情况是把一堆小图储存为一张大图,然后就可以一次绑定,再将各区域分多次渲染。Spine 能有效的将大量小图打包成大图,每张小图的定位信息储存在一个采样文件中,它们可以通过名称在程序中引用。

Spine使用了多种先进打包算法。对各种尺寸进行海量尝试,然后选择最优打包方案。

打包(Packing)

纹理打包器可以通过两种方式运行:

  1. 当导出 “JSON” 或 “二进制” 动画数据时,勾选纹理打包:


    image.png

这个方法可以便捷的同时导出动画数据和打包纹理,但是每套骨架会各自分别打包输出图片,并且忽略目录结构directory structure和JSON文件JSONfiles要将多套骨架的图片信息打包在一起,请使用下面的方法运行打包器。

  1. 在主菜单中选择纹理打包器:


    image.png

然后指定图片路径进行打包:
输入目录:(Input directory),输出目录:(Output directory),贴图集名称:(Atals name)

image.png

设置(Settings)

有许多参数用于控制如何打包图片:

image.png

一眼看上去可能让人望而生畏,但大多数情况下用默认设置就可以了。需要特别注意的地方有: 1) 最大长/宽值(Max width/height), 2) 是否勾选了预乘alpha(premultiplied alpha), 3) 是否勾选了去除白边。 **如果使用了网络,那应该取消去除白边(Strip whitespace X/Y)。

目录结构(Directory structure)

Spine 能为应用程序一次性打包所有图片。给定一个目录,它就会递归扫描其下的图片文件。将当前目录和所有子目录中 Spine 找到的图片文件拼成一张更大的纹理贴图,称作"页"。如果图片大小超过了一页的最大尺寸,将会分成多页。

同一个目录下的图片会打包在同一页上。如果一页能放下所有图片,那就不需要分目录存放,因为每个应用程序只绑定一张纹理。否则,把图片分类放在不同的子文件夹下,可以最大限度地减少纹理绑定次数。

例如:应用程序可希望把所有的 "game" 图片和 "pause menu" 图片分别放在不同的文件夹里,这样连续绘制这两张图片只要:先绑定 "game" 并绘制(绑定一次),完成后再绑定 "pause menu" 再绘制(再绑定一次)。如果这些文件都放在同一个目录下,将会被混合打包在多个页面中,每个页面中都有 "game" 和 "pause menu" 图片。这样一来,在绘制 "game" 和 "pause menu" 时都需要执行多次绑定纹理的操作,而无法像之前那样各绑定一次就能完成绘制。

按文件夹分类图片,还能将纹理设置相关的图片组织在一起。比如每张图运行时的内存格式(RGBA, RGB, 等等),过滤(nearest, linear, 等等)。图片需要不同的纹理设置,就要分为不同的页面打包,这时应该将图片用文件夹分开放置。

用文件夹来组织,还是用 Spine 将所有子目录打包到一起,请看 Combine subdirectories 设置。

为了避免子目录的路径出现在 atlas 文件的图片名称中,请看 Flatten paths 设置。

JSON 结构(JSON Configuration)

每个文件夹可以包含一个 "pack.json" 文件用于具体指定此文件夹下图片的打包设置。每个子文件夹继承其父级的设置。子文件夹中的设置会覆盖父级的设置。

下面是一个 JSON 文件的例子,包含了所有可用的设置。

{
"stripWhitespaceX": true,
"stripWhitespaceY": true,
"rotation": true,
"alias": true,
"ignoreBlankImages": true,
"alphaThreshold": 3,
"minWidth": 16,
"minHeight": 16,
"maxWidth": 2048,
"maxHeight": 2048,
"pot": false,
"multipleOfFour": false,
"square": false,
"outputFormat": "png",
"jpegQuality": 0.9,
"premultiplyAlpha": true,
"bleed": false,
"scale": [ 1 ],
"scaleSuffix": [ "" ],
"scaleResampling": [ "bicubic" ],
"paddingX": 2,
"paddingY": 2,
"edgePadding": true,
"duplicatePadding": false,
"filterMin": "Linear",
"filterMag": "Linear",
"wrapX": "ClampToEdge",
"wrapY": "ClampToEdge",
"format": "RGBA8888",
"atlasExtension": ".atlas.txt",
"combineSubdirectories": true,
"flattenPaths": true,
"useIndexes": false,
"debug": false,
"fast": false,
"limitMemory": true,
"currentProject": true,
"packing": "rectangles",
"silent": false,
"ignore": false,
"bleedIterations": 2
}

注意这是 libgdx 的 "minimal" JSON格式,因此双引号通常是可选的。

在设置 Settings对话框有一个保存JSON Save JSON 按钮能保存当前设置。此文件会命名为 pack.json 将它放要输入图片的文件夹下就成了此目录的设置文件,用不着手动创建设置文件。

九宫格(Ninepatches)

九宫格一般不用于 Spine 骨骼,但有其它的用途。

不算扩展名,如果一个图片文件的名称以".9"结尾,那么它将被识别为九宫格。可以手动创建九宫格图片,也可以使用这个工具[thistool]。图片必须有 1px 的透明边框。左上边缘可以有一条连续的黑线用于定义切割信息,九宫格中哪部分将会伸展。在右下边缘可以有一条连续的黑线用来定义填充信息,内容如何在九宫格中填充。图片打包时,1px的透明边框会被移除,切割和填充信息会储存在 atlas 数据文件里。

图片索引(Image indexes)

图片索引一般不用于 Spine 骨骼,但有其它的用途。

如果一个图片文件名以下划线加数字结尾(例如: animation_23.png),这个数字将被识别为索引,图片的索引会储存在 atlas 文件中。储存图片文件名时不包含下划线和索引。这样便可以通过索引在一个列表中检索这些图片。这样能更方便的打包精灵动画避免搞乱帧的顺序。

在Unity中使用
把导出的文件放到unity工程中,“纹理打包器”打包出来的文件如下:

image.png

此时发现把这些文件放到unity工程中并不能生成“SkeletonData”文件,我们需要把单独的spine文件按照打包1的方式导出一次,导出后把.atlas.txt文件放到unity工程同一文件夹下(纹理打包器打包出来的资源),这是会自动生成“SkeletonData”文件了。
image.png

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 193,968评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,682评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,254评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,074评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,964评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,055评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,484评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,170评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,433评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,512评论 2 308
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,296评论 1 325
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,184评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,545评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,150评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,437评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,630评论 2 335

推荐阅读更多精彩内容