创建 Sprite 表或纹理贴图集并导出移动应用程序和游戏引擎的动画。通过使用插件将纹理贴图集导入 Unity 或任何一个常用游戏引擎。

概述

Animate CC 使您能够创建 Sprite 表或纹理贴图集动画,然后导出它们以用于移动应用程序和游戏引擎。 

Sprite 表

Sprite 表是一个位图图像文件,它包含一些平铺网格排列方式的小型图形。将多个图形编译到一个单独的文件中,这样 Animate 和其他应用程序只需加载单个文件即可使用这些图形。在游戏开发等性能尤为重要的环境中,这种加载效率十分有用。

Sprite 表
Sprite 表,它包含逐帧动画中的各个 Sprite。

可以通过选择影片剪辑、按钮元件、图形元件或位图的任意组合来创建 Sprite 表。可以在“库”面板中或舞台上选择项目,但不能两者兼得。每个位图以及选定元件的每一帧在 Sprite 表中显示为单独的图形。如果从舞台导出,则您已应用于元件实例的任何变换(缩放、倾斜等)都会在图像输出中保留。

纹理贴图集

纹理贴图集是作为单个大图像的纹理的集合。您可以通过创建纹理贴图集并在游戏应用程序中使用它来优化您的游戏。 

在 Animate 中,您可以从影片剪辑、图形或按钮等元件创建纹理贴图集。可以在“库”面板中或舞台上选择项目,但不能两者兼得。选定元件的每个矢量和每个关键帧都显示为纹理贴图集中的一个单独位图。如果从舞台导出,则您已应用于元件实例的任何变换(缩放、倾斜等)都会在图像输出中保留。

Sprite 表和纹理贴图集之间的差异

根据您的要求,在移动应用程序中使用 Sprite 表或纹理贴图集。下表提供了 Sprite 表和纹理贴图集之间的一些关键差异。 

功能 Sprite 表 纹理贴图集
移动应用程序中的性能
加载应用程序的效率 高,因为不会进行计算 低,因为存在 JSON 文件计算
大小 将占用更大大小 将占用较小大小
动画的品质 中等
生成的文件数 两个文件:一个位图文件和一个 json 文件 三个文件:一个位图文件和两个json 文件
生成的位图数 基于用于 sprite 板料的框架的数字,位图文件的数字可能也增加,造成 sprite 板料大小增加 仅在 Sprite 中生成唯一位图,从而减小总大小。

创建 Sprite 表

要创建 Sprite 表,请执行以下步骤:

  1. 在库中选择一个或多个元件,或在舞台上选择一个或多个元件实例。所选内容还可以包含位图。

  2. 右键单击所选内容,然后选择“生成 Sprite 表”。

    generate-spritesheet
  3. “生成 Sprite 表”对话框中,选择所需选项,然后单击“导出”

    导出选项 描述
    图像尺寸 Sprite 表的总尺寸,以像素为单位。默认设置为“自动调整大小”,该设置会调整表的大小以装下所有包含的 Sprite。
    图像格式 导出的 Sprite 表的文件格式。PNG 8 位和 PNG 32 位都支持使用透明背景(Alpha 通道)。PNG 24 位和 JPG 不支持透明背景。通常,PNG 8 位和 PNG 32 位之间的视觉差异很小。PNG 32 位文件大小是 PNG 8 位文件大小的四倍。
    边框填充 Sprite 表单边缘的填充,以像素为单位。
    形状填充 Sprite 表中每个图像之间的填充,以像素为单位。
    算法

    将图像打包到 Sprite 表所用的技术。有两个选项:

    • 基本(默认值)
    • MaxRects
    数据格式 图像数据所用的内部格式。选择最适合导出后 Sprite 表预期工作流程的格式。
    旋转 将 Sprite 旋转 90 度。此选项只适用于某些数据格式。
    裁切 此选项通过修剪添加到表的每个元件帧的未使用像素,可以节省 Sprite 表上的空间。
    堆栈帧 选择此选项可以防止在生成的 Sprite 表中复制选定元件中的重复帧。

导出移动应用程序的 Sprite 表动画

导出移动应用程序的 Sprite 表动画
Train Simple - Matthew Pizzi

创建纹理贴图集

游戏开发人员可以使用 Animate 创作动画,并将它们作为纹理贴图集导出到 Unity 游戏引擎或者任何其他喜欢的游戏平台。 

下图中描述了在 Animate 中生成纹理贴图集以及将其导入 Unity 的过程: 

flow-diagram-Texture-Atlas
描述用于生成纹理图集并将其导入到 Unity 中的工作流程的插图。

要生成纹理贴图集动画,请执行以下步骤: 

  1. 在 Animate 中,您可以为中的所选元件或舞台上的元件实例生成纹理贴图集。 

  2. 右键单击该元件,然后从菜单中选择“生成纹理贴图集”。此时将出现“生成纹理贴图集”窗口。

    generate-texture-atlas (2)
    生成纹理贴图集
  3. 为纹理贴图集选择相应的导出选项。 

    导出选项 描述
    图像尺寸 纹理贴图集的总尺寸,以像素为单位。默认设置为“自动调整大小”,这将调整表的大小以容纳所包含的所有图像。
    图像格式 导出的 Sprite 表的文件格式。PNG 8 位和 PNG 32 位都支持使用透明背景(Alpha 通道)。通常,PNG 8 位和 PNG 32 位之间的视觉差异很小。PNG 32 位文件大小是 PNG 8 位文件大小的四倍。
    边框填充 纹理贴图集边缘的填充,以像素为单位
    形状填充 纹理贴图集中每个图像之间的填充,以像素为单位。
    算法

    将图像打包到纹理贴图集所用的技术。有两个选项:

    • 基本(默认值)
    • MaxRects
    数据格式 图像数据所用的内部格式。默认为 JSON 格式。
    旋转 将图像旋转 90 度。此选项只适用于某些数据格式。
    将斜切对象展平为位图 如果正在对对象使用斜切变形,请选择此选项。Animate 会将这些对象转换为位图图像,因为其中一些游戏引擎无法正确解释斜切变形。 
  4. 要预览纹理贴图集输出,请单击“预览”选项卡。

    texture-atlas-preview
    在创建之后预览纹理贴图集
  5. 单击“浏览”并选择计算机上输出文件的目标路径,或在文本区域中输入路径,然后单击“导出”

生成的纹理贴图集的输出文件夹包含以下文件:

Animation.json

此文件包含关于动画的信息。 

spritemap.json

此文件包含关于 spritesheet.png 文件的信息。

spritemap.png

对于导出的元件,此文件包含重建动画所需的所有最小唯一纹理的位图表示。

您可以在任何游戏引擎中使用生成的纹理贴图集,例如带有合适导出器插件的 Unity。

将纹理贴图集导入 Unity

您可以将 Animate 生成的纹理贴图集文件导入您喜爱的游戏引擎中。要导入纹理贴图集文件,可以创建与游戏引擎对应的插件。为 Unity 工具提供了一个示例导入插件。 

通过执行以下步骤将纹理贴图集导入 Unity:

  1. 在 Unity 中的任意位置创建一个项目。在此位置,将创建一个含“资产”子文件夹的文件夹。

  2. “资产”下创建两个子文件夹,名为“资源”“编辑器”。 

  3. 单击此处可下载 Unity 的示例导入插件。从“下载”选项卡中选择 Unity 插件并选择要下载的相应版本。

    unity-plugin.zip 包含 Plugin.csWrapperPlugin.csAnimateEditor.csEffect.shader 文件。

    下载示例表明您同意使用条款和在线隐私政策

  4. 将纹理贴图集文件(如 Animation.json、spritemap.json、spritemap.png)和 unity 插件文件(如 Plugin.cs 和 Effect.shader)移动到“资产”>“资源”下。

  5. AnimateEditor.csWrapperPlugin.cs 文件移到“资产”文件夹。

  6. 在 Unity 中,请单击 AnimateEditor.cs文件,并将其拖动到主摄像头

  7. 播放。播放项目时可将 sprite map 拆分为不同的 sprite。

  8. AnimateEditor.cs 移动到编辑器

  9. 在 Unity 中,请单击 WrapperPlugin.cs 文件,并将其拖动到主摄像机。此外,请从主摄像机中取消选择或删除 AnimateEditor.cs

  10. 根据需要播放或发布输出。 

通过根据您的要求修改 WrapperPlugin.cs 文件,您甚至可以自定义插件。

Unity 插件支持 Animate 生成的纹理贴图集文件的色彩效果。然后,该插件通过图层支持蒙版。蒙版功能仅适用于 Unity 2017 以后的版本。 

纹理发布

作为动画师,您可以继续以矢量格式创作内容,并以矢量或栅格格式导出以用于 HTML 5 平台。 在发布设置中添加了将动画导出为纹理贴图集的选项,以增强动画的性能。

单击“文件”>“发布设置”。如果已在“基本”选项卡中启用“将文档导出为纹理”,则“图像设置”选项卡将显示“纹理发布”选项。默认情况下,在纹理发布中包含所有符号。要有选择地选择纹理符号,请单击其旁边的设置图标。 

尽管此选项可能会增加资源大小,它可以提高性能。此外,您还可以提高图像的分辨率至原始分辨率的 2 倍和 3 倍,以便定位 HiDPI 显示。要更改分辨率设置,请单击“将文档导出为纹理”选项旁边的扳手图标,如下方屏幕截图所示。拖动分辨率旁边的数字可得到 2 倍和 3 倍。

默认情况下,纹理发布设置为 2 倍分辨率。此外,分辨率范围为 0.3 - 3 倍。

注意:

纹理发布仅适用于 HTML5 Canvas 文档类型。 

导出文档作为纹理
导出文档作为纹理

选择矢量文件还是栅格化文件就如同在文件大小和性能之间进行选择一样。HTML5 平台已针对栅格内容进行了优化。因此,对于一些复杂形状,最好将矢量图像预先转换成栅格图像。对于一些基本内容,仍可使用矢量内容。Animate 通过部分元件选取对话框提供此选项。利用部分元件选取,可选中应转换为栅格内容的元件,而不影响其余元件的矢量属性。

要打开部分元件选取,请单击“发布设置”对话框中的“更改”,然后从列表中选择一个元件。默认情况下,所有元件已被选中。

更改部分元件选取
更改部分元件选取

从列表中选择目标元件。 

部分元件选取
部分元件选取

纹理发布教程

纹理发布教程
了解如何使用矢量灵活地创作逼真的资源并将其发布为位图纹理。

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略