Spine之六——纹理打包Texture packing
2016-05-08 08:42
591 查看
Texture packing总述(Overview)
[align=left]Spine 能帮你把分散的图片打包成一张完整的纹理贴图集或精灵表(spritesheet)以便在运行时更有效率的渲染。Spine 的纹理打包器(texture packer)是一个通用工具。它即可以用于为 Spine 的骨骼打包纹理,也可以单独运行为你打包应用程序所需的所有图片资源。[/align]
[align=left]大多数图形API(如: OpenGL)的工作原理是这样的,绑定一张纹理,然后渲染,完成之后再绑定一张再渲染,如此往复直到全部完成。绑定纹理相对来说需要消耗大量的系统资源,所以理想的情况是把一堆小图储存为一张大图,然后就可以一次绑定,再将各区域分多次渲染。Spine 能有效的将大量小图打包成大图,每张小图的定位信息储存在一个采样文件中,它们可以通过名称在程序中引用。[/align]
[align=left]Spine使用了多种先进打包算法。对各种尺寸进行海量尝试,然后选择最优打包方案。[/align]
打包(Packing)
[align=left]纹理打包器可以通过两种方式运行:[/align]
[align=left]1) 当导出 “JSON” 或 “二进制” 动画数据时,勾选`CreateAtlas`:[/align]
![](http://cloud.cgwell.com/forum/201412/03/224145wurauprh5lpz9xvd.jpg)
[align=left]这个方法可以便捷的同时导出动画数据和打包纹理,但是每套骨架会各自分别打包输出图片,并且忽略目录结构[directory structure](#Directory-structure)和JSON文件[JSONfiles](#JSON-Configuration)。要将多套骨架的图片信息打包在一起,请使用下面的方法运行打包器。[/align]
[align=left]2) 在主菜单中选择`Texture Packer`:[/align]
![](http://cloud.cgwell.com/forum/201412/03/224150zoo769ncj69wv6r6.jpg)
[align=left]然后指定图片路径进行打包:[/align]
[align=left]输入目录:(Input directory),输出目录:(Output directory),贴图集名称:(Atals name)[/align]
![](http://cloud.cgwell.com/forum/201412/03/224153pgsisdj8l33l96rt.jpg)
设置(Settings)
有许多参数用于控制如何打包图片:
![](http://cloud.cgwell.com/forum/201412/03/224155f0fvxz1q9nvox6oq.jpg)
[align=left]一眼看上去可能让人望而生畏,但大多数情况下用默认设置就可以了。需要特别注意的地方有: 1) 最大长/宽值(Max width/height), 2) 是否勾选了预乘alpha(premultiplied alpha), 3) 是否勾选了去除白边。 **如果使用了网络,那应该取消去除白边(Strip whitespace X/Y)。[/align]
目录结构(Directory structure)
Spine 能为应用程序一次性打包所有图片。给定一个目录,它就会递归扫描其下的图片文件。将当前目录和所有子目录中 Spine 找到的图片文件拼成一张更大的纹理贴图,称作"页"。如果图片大小超过了一页的最大尺寸,将会分成多页。
[align=left]同一个目录下的图片会打包在同一页上。如果一页能放下所有图片,那就不需要分目录存放,因为每个应用程序只绑定一张纹理。否则,把图片分类放在不同的子文件夹下,可以最大限度地减少纹理绑定次数。[/align]
[align=left] [/align]
[align=left]例如:应用程序可希望把所有的 "game" 图片和 "pause menu" 图片分别放在不同的文件夹里,这样连续绘制这两张图片只要:先绑定 "game" 并绘制(绑定一次),完成后再绑定 "pause menu" 再绘制(再绑定一次)。如果这些文件都放在同一个目录下,将会被混合打包在多个页面中,每个页面中都有 "game" 和 "pause menu" 图片。这样一来,在绘制 "game" 和 "pause menu" 时都需要执行多次绑定纹理的操作,而无法像之前那样各绑定一次就能完成绘制。[/align]
[align=left]按文件夹分类图片,还能将纹理设置相关的图片组织在一起。比如每张图运行时的内存格式(RGBA, RGB, 等等),过滤(nearest, linear, 等等)。图片需要不同的纹理设置,就要分为不同的页面打包,这时应该将图片用文件夹分开放置。[/align]
[align=left] [/align]
[align=left]用文件夹来组织,还是用 Spine 将所有子目录打包到一起,请看 `Combine subdirectories` 设置。[/align]
[align=left]为了避免子目录的路径出现在 atlas 文件的图片名称中,请看 `Flatten paths` 设置。[/align]
JSON 结构(JSON Configuration)
[align=left]每个文件夹可以包含一个 "pack.json" 文件用于具体指定此文件夹下图片的打包设置。每个子文件夹继承其父级的设置。子文件夹中的设置会覆盖父级的设置。[/align]
[align=left]下面是一个 JSON 文件的例子,包含了所有可用的设置。[/align]
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
注意这是 libgdx 的 "minimal" JSON格式,因此双引号通常是可选的。
不是所有的设置都需要指定,可以省略部分或全部。例如:取消填充(padding)和合并目录(combinesubdirectories)那么 JSON 可以写成这样:
在设置 [Settings](#Settings)对话框有一个保存JSON `Save JSON` 按钮能保存当前设置。此文件会命名为 `pack.json` 将它放要输入图片的文件夹下就成了此目录的设置文件,用不着手动创建设置文件。
九宫格(Ninepatches)
[align=left]九宫格一般不用于 Spine 骨骼,但有其它的用途。[/align]
[align=left]不算扩展名,如果一个图片文件的名称以".9"结尾,那么它将被识别为九宫格。可以手动创建九宫格图片,也可以使用这个工具[thistool]。图片必须有 1px 的透明边框。左上边缘可以有一条连续的黑线用于定义切割信息,九宫格中哪部分将会伸展。在右下边缘可以有一条连续的黑线用来定义填充信息,内容如何在九宫格中填充。图片打包时,1px的透明边框会被移除,切割和填充信息会储存在 atlas 数据文件里。[/align]
图片索引(Image indexes)
图片索引一般不用于 Spine 骨骼,但有其它的用途。
[align=left]如果一个图片文件名以下划线加数字结尾(例如: `animation_23.png`),这个数字将被识别为索引,图片的索引会储存在 atlas 文件中。储存图片文件名时不包含下划线和索引。这样便可以通过索引在一个列表中检索这些图片。这样能更方便的打包精灵动画避免搞乱帧的顺序。[/align]
[align=left] [/align]
[align=left]【转自】http://bbs.cgwell.com/thread-8771-1-1.html[/align]
[align=left]Spine 能帮你把分散的图片打包成一张完整的纹理贴图集或精灵表(spritesheet)以便在运行时更有效率的渲染。Spine 的纹理打包器(texture packer)是一个通用工具。它即可以用于为 Spine 的骨骼打包纹理,也可以单独运行为你打包应用程序所需的所有图片资源。[/align]
[align=left]大多数图形API(如: OpenGL)的工作原理是这样的,绑定一张纹理,然后渲染,完成之后再绑定一张再渲染,如此往复直到全部完成。绑定纹理相对来说需要消耗大量的系统资源,所以理想的情况是把一堆小图储存为一张大图,然后就可以一次绑定,再将各区域分多次渲染。Spine 能有效的将大量小图打包成大图,每张小图的定位信息储存在一个采样文件中,它们可以通过名称在程序中引用。[/align]
[align=left]Spine使用了多种先进打包算法。对各种尺寸进行海量尝试,然后选择最优打包方案。[/align]
打包(Packing)
[align=left]纹理打包器可以通过两种方式运行:[/align]
[align=left]1) 当导出 “JSON” 或 “二进制” 动画数据时,勾选`CreateAtlas`:[/align]
![](http://cloud.cgwell.com/forum/201412/03/224145wurauprh5lpz9xvd.jpg)
[align=left]这个方法可以便捷的同时导出动画数据和打包纹理,但是每套骨架会各自分别打包输出图片,并且忽略目录结构[directory structure](#Directory-structure)和JSON文件[JSONfiles](#JSON-Configuration)。要将多套骨架的图片信息打包在一起,请使用下面的方法运行打包器。[/align]
[align=left]2) 在主菜单中选择`Texture Packer`:[/align]
![](http://cloud.cgwell.com/forum/201412/03/224150zoo769ncj69wv6r6.jpg)
[align=left]然后指定图片路径进行打包:[/align]
[align=left]输入目录:(Input directory),输出目录:(Output directory),贴图集名称:(Atals name)[/align]
![](http://cloud.cgwell.com/forum/201412/03/224153pgsisdj8l33l96rt.jpg)
设置(Settings)
有许多参数用于控制如何打包图片:
![](http://cloud.cgwell.com/forum/201412/03/224155f0fvxz1q9nvox6oq.jpg)
[align=left]一眼看上去可能让人望而生畏,但大多数情况下用默认设置就可以了。需要特别注意的地方有: 1) 最大长/宽值(Max width/height), 2) 是否勾选了预乘alpha(premultiplied alpha), 3) 是否勾选了去除白边。 **如果使用了网络,那应该取消去除白边(Strip whitespace X/Y)。[/align]
区域(Regions) | |
[align=center]设置[/align] | [align=center]描述[/align] |
[align=left]Strip whitespace X/Y[/align] | [align=left]移除输入图片边缘的空白像素。移除的量储存在 Atlas 文件中,因此图片可以在你的应用程序中绘制就好像没裁剪过一样。如果使用了网格,应该取消移除空白边缘的选项。[/align] |
[align=left]Rotation[/align] | [align=left]将某些图片旋转90度能高率的打包。应用程序必须特别注意要正确绘制这些地区。[/align] |
[align=left]Alias[/align] | [align=left]如果两张图片的所有像素完全相同,那么只打包一次。[/align] |
[align=left]Ignore blank images[/align] | [align=left]完全透明的图片不打包。[/align] |
[align=left]Alpha threshold[/align] | [align=left]移除空白边缘时,Alpha 低于此值的,被视为0。[/align] |
区域填充(Region padding) | |
[align=center]设置[/align] | [align=center]描述[/align] |
[align=left]Padding X/Y[/align] | [align=left]打包的各图片区域之间的填充像素。某些纹理过滤会平均混合相邻像素,所以推荐区域间填充2个像素以避免相邻的区域互相影响。[/align] |
[align=left]Edge padding[/align] | [align=left]填充也将应用到图片页面的边缘。[/align] |
[align=left]Duplicate padding[/align] | [align=left]拷贝相邻的像素用于填充。如果纹理过滤选择了填充像素,此设置能消除"接缝"瑕疵。[/align] |
页面(Pages) | |
[align=center]设置[/align] | [align=center]描述[/align] |
[align=left]Min width/height[/align] | [align=left]输出图片的最小页面尺寸。[/align] |
[align=left]Max width/height[/align] | [align=left]输出图片的最大页面尺寸。如果图片大于此值,将分多页输出。[/align] |
[align=left]Power of two[/align] | [align=left]确保输出图片的尺寸大小为 2 的幂。某些游戏开发包有此需求。[/align] |
[align=left]Square[/align] | [align=left]确保输出的图片长宽相等。某些纹理压缩算法有此需求(如: PVRT)。[/align] |
输出(Output) | |
[align=center]设置[/align] | [align=center]描述[/align] |
[align=left]Format[/align] | [align=left]输出 PNG 或 JPG 图片。[/align] |
[align=left]JPG quality[/align] | [align=left]输出的 JPG 的压缩质量。[/align] |
[align=left]Packing[/align] | [align=left]`Atlas` 打包图片尽可能紧凑的在一起。`Grid` 打包图片均匀的排列在网格中。(众所周知的精灵表spritesheet)。[/align] |
[align=left]Premultiply alpha[/align] | [align=left]将 alpha 与每个 R、G 和 B 通道相乘。推荐在适合的情况下用 proper blending[/align] |
[align=left]Bleed[/align] | [align=left]设置透明像素到最近的非透明像素的RGB值。以免在对透明像素进行 RGB 采样时造成纹理过滤的瑕疵 filtering artifacts[/align] |
[align=left]Scale[/align] | [align=left]为每个比例单独输出完整的 Atlas。[/align] |
[align=left]Suffix[/align] | [align=left]每个缩放比例 Atlas 的后辍。如果留空,不同尺寸将使用相同文件名,分别输出到以尺寸命名的子文件夹中。[/align] |
选项(Options) | |
[align=center]设置[/align] | [align=center]描述[/align] |
[align=left]Atlas extension[/align] | [align=left]atlas 数据文件的扩展名。[/align] |
[align=left]Combine subdirectories[/align] | [align=left]将当前目录和所有子目录的图片打包在同一张图片上。忽略所有子目录中的设置文件 Pack.json。[/align] |
[align=left]Flatten paths[/align] | [align=left]目录信息将从图片文件名字中移除。图片的文件名必须唯一。[/align] |
[align=left]Use indexes[/align] | [align=left]使用图片名称无需移除任何图片索引后缀(在最后一个下划线之后的任意字符)[/align] |
[align=left]Fast[/align] | [align=left]打包速度更快,但效果不受影响。[/align] |
[align=left]Debug[/align] | [align=left]在输出的页面上,为所有图片区域绘制边框。[/align] |
运行库(Runtime) 以下这些设置意在应用程序运行时,提示相关信息。 | |
[align=center]设置[/align] | [align=center]描述[/align] |
[align=left]Filter min/mag[/align] | [align=left]纹理过滤的缩小和放大设置。[/align] |
[align=left]Wrap X/Y[/align] | [align=left]重复贴图纹理的设置。[/align] |
[align=left]Format[/align] | [align=left]贴图纹理在内存中使用的格式。[/align] |
Spine 能为应用程序一次性打包所有图片。给定一个目录,它就会递归扫描其下的图片文件。将当前目录和所有子目录中 Spine 找到的图片文件拼成一张更大的纹理贴图,称作"页"。如果图片大小超过了一页的最大尺寸,将会分成多页。
[align=left]同一个目录下的图片会打包在同一页上。如果一页能放下所有图片,那就不需要分目录存放,因为每个应用程序只绑定一张纹理。否则,把图片分类放在不同的子文件夹下,可以最大限度地减少纹理绑定次数。[/align]
[align=left] [/align]
[align=left]例如:应用程序可希望把所有的 "game" 图片和 "pause menu" 图片分别放在不同的文件夹里,这样连续绘制这两张图片只要:先绑定 "game" 并绘制(绑定一次),完成后再绑定 "pause menu" 再绘制(再绑定一次)。如果这些文件都放在同一个目录下,将会被混合打包在多个页面中,每个页面中都有 "game" 和 "pause menu" 图片。这样一来,在绘制 "game" 和 "pause menu" 时都需要执行多次绑定纹理的操作,而无法像之前那样各绑定一次就能完成绘制。[/align]
[align=left]按文件夹分类图片,还能将纹理设置相关的图片组织在一起。比如每张图运行时的内存格式(RGBA, RGB, 等等),过滤(nearest, linear, 等等)。图片需要不同的纹理设置,就要分为不同的页面打包,这时应该将图片用文件夹分开放置。[/align]
[align=left] [/align]
[align=left]用文件夹来组织,还是用 Spine 将所有子目录打包到一起,请看 `Combine subdirectories` 设置。[/align]
[align=left]为了避免子目录的路径出现在 atlas 文件的图片名称中,请看 `Flatten paths` 设置。[/align]
JSON 结构(JSON Configuration)
[align=left]每个文件夹可以包含一个 "pack.json" 文件用于具体指定此文件夹下图片的打包设置。每个子文件夹继承其父级的设置。子文件夹中的设置会覆盖父级的设置。[/align]
[align=left]下面是一个 JSON 文件的例子,包含了所有可用的设置。[/align]
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
{ pot: true, paddingX: 2, paddingY: 2, bleed: true, edgePadding: true, duplicatePadding: false, rotation: false, minWidth: 16, minHeight: 16, maxWidth: 1024, maxHeight: 1024, square: false, stripWhitespaceX: false, stripWhitespaceY: false, alphaThreshold: 0, filterMin: Nearest, filterMag: Nearest, wrapX: ClampToEdge, wrapY: ClampToEdge, format: RGBA8888, alias: true, outputFormat: png, jpegQuality: 0.9, ignoreBlankImages: true, fast: false, debug: false, combineSubdirectories: false, flattenPaths: false, premultiplyAlpha: false, useIndexes: true, grid: false, scale: [ 1 ], scaleSuffix: [ "" ] }
![](https://oscdn.geek-share.com/Uploads/Images/Content/201603/69c5a8ac3fa60e0848d784a6dd461da6.gif)
注意这是 libgdx 的 "minimal" JSON格式,因此双引号通常是可选的。
不是所有的设置都需要指定,可以省略部分或全部。例如:取消填充(padding)和合并目录(combinesubdirectories)那么 JSON 可以写成这样:
{ paddingX: 0, paddingY: 0, combineSubdirectories: false }
在设置 [Settings](#Settings)对话框有一个保存JSON `Save JSON` 按钮能保存当前设置。此文件会命名为 `pack.json` 将它放要输入图片的文件夹下就成了此目录的设置文件,用不着手动创建设置文件。
九宫格(Ninepatches)
[align=left]九宫格一般不用于 Spine 骨骼,但有其它的用途。[/align]
[align=left]不算扩展名,如果一个图片文件的名称以".9"结尾,那么它将被识别为九宫格。可以手动创建九宫格图片,也可以使用这个工具[thistool]。图片必须有 1px 的透明边框。左上边缘可以有一条连续的黑线用于定义切割信息,九宫格中哪部分将会伸展。在右下边缘可以有一条连续的黑线用来定义填充信息,内容如何在九宫格中填充。图片打包时,1px的透明边框会被移除,切割和填充信息会储存在 atlas 数据文件里。[/align]
图片索引(Image indexes)
图片索引一般不用于 Spine 骨骼,但有其它的用途。
[align=left]如果一个图片文件名以下划线加数字结尾(例如: `animation_23.png`),这个数字将被识别为索引,图片的索引会储存在 atlas 文件中。储存图片文件名时不包含下划线和索引。这样便可以通过索引在一个列表中检索这些图片。这样能更方便的打包精灵动画避免搞乱帧的顺序。[/align]
[align=left] [/align]
[align=left]【转自】http://bbs.cgwell.com/thread-8771-1-1.html[/align]
相关文章推荐
- [剑指offer]二叉树的深度
- Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) B. Problems for Round 水题
- Android Studio中获取sha1证书指纹数据的方法
- **Regular Expression Match
- spine之五——在程序中使用动画
- Spine之四——用 Spine 架设骨骼,创建动画
- Codeforces Round #351 (VK Cup 2016 Round 3, Div. 2 Edition) A. Bear and Game 水题
- 写给奋斗的自己
- Spine之三——实用技巧大全
- 第14课:Spark RDD解密
- D - Palindrome Partitioning (DP)
- Spine之二——认识界面
- smali语法
- sublime text的部分常用配置
- javadoc生成出现错误“编码 GBK 的不可映射字符
- 百度地图-异步加载地图
- bzoj 1299: [LLH邀请赛]巧克力棒(nim游戏的应用)
- RHEL6.2下挂载光驱安装软件
- leetcode--003. Longest Substring Without Repeating Characters
- 在Ubuntu系统中安装Visual Studio Code