导出移动应用程序和游戏引擎的动画

上次更新日期： 2023年5月24日

Animate

打开应用程序

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

概述

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

Sprite 表

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

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

纹理贴图集

纹理贴图集是一组纹理的集合，通常是由单张大图像或多张图像组合而成，以所需尺寸提供。您可以通过创建纹理贴图集并在游戏应用程序中使用它来优化您的游戏。

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

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

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

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

创建 Sprite 表

要创建 Sprite 表，请执行以下步骤：

在库中选择一个或多个元件，或在舞台上选择一个或多个元件实例。所选内容还可以包含位图。
右键单击所选内容，然后选择“生成 Sprite 表”。

在“生成 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 表中复制选定元件中的重复帧。

将动画导出到移动应用或游戏引擎

Animate 可帮助您将动画导出到游戏平台和移动应用程序。想要在手机或游戏引擎上显示动画？在本示例结尾观看教程并按照这些步骤操作。

在“库”中，右键单击影片剪辑。
选择“生成 Sprite 表”。
在“Sprite 表”对话框中，选择所需选项。
单击“导出”。

如何导出用于移动应用或游戏引擎的动画

观看视频以了解用于导出动画的其他选项。

创建纹理贴图集

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

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

流程-图表-纹理-贴图集 — 描述用于生成纹理图集并将其导入到 Unity 中的工作流程的插图。

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

在 Animate 中，您可以为库中的所选元件或舞台上的元件实例生成纹理贴图集。
右键单击该元件，然后从菜单中选择“生成纹理贴图集”。此时将出现“生成纹理贴图集”窗口。

生成纹理贴图集

为纹理贴图集选择相应的导出选项。

导出选项	描述
图像尺寸	纹理贴图集的总尺寸，以像素为单位。默认设置为“自动调整大小”，这将调整表的大小以容纳所包含的所有图像。
优化尺寸	选中“优化尺寸”选项后，则会删除位图中的空像素和非二次幂尺寸（默认选项）。这适用于生成的所有位图。未选中“优化尺寸”选项时，会根据选定的尺寸生成位图。
图像格式	导出的 Sprite 表的文件格式。PNG 8 位和 PNG 32 位都支持使用透明背景（Alpha 通道）。通常，PNG 8 位和 PNG 32 位之间的视觉差异很小。PNG 32 位文件大小是 PNG 8 位文件大小的四倍。
分辨率	选择 0.3-3.0 之间的任意值
边框填充	纹理贴图集边缘的填充，以像素为单位
形状填充	纹理贴图集中每个图像之间的填充，以像素为单位。
算法	将图像打包到纹理贴图集所用的技术。有两个选项：基本 MaxRects（默认）
数据格式	图像数据所用的内部格式。默认为 JSON 格式。
旋转	将图像旋转 90 度。此选项只适用于某些数据格式。
将斜切对象展平为位图	如果正在对对象使用斜切变形，请选择此选项。Animate 会将这些对象转换为位图图像，因为其中一些游戏引擎无法正确解释斜切变形。
优化 Animation.json 文件	选中了“优化 Animation.json 文件”选项时，此选项会移除缩进、分解的矩阵并缩短所用的名称（默认选项）。未选中“优化 Animation.json 文件”选项时，此选项会导出缩进且有意义的名称。

可选择根据尺寸将元件导入多个位图中。

生成多个位图的纹理贴图集

对于超过了选定图像尺寸大小的资源，则会显示警告。
要预览纹理贴图集输出，请单击“预览”选项卡。

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

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

Animation.json

此文件包含关于动画的信息。默认情况下，Animation.json 文件中相同的帧都会被优化与合并。

spritemap.json

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

spritemap.png

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

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

将纹理贴图集导入 Unity

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

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

在 Unity 中的任意位置创建一个项目。在此位置，将创建一个含“资产”子文件夹的文件夹。
在“资产”下创建两个子文件夹，名为“资源”和“编辑器”。
单击此处可下载 Unity 的示例导入插件。从“下载”选项卡中选择 Unity 插件并选择要下载的相应版本。

unity-plugin.zip 包含 Plugin.cs、WrapperPlugin.cs、AnimateEditor.cs 和 Effect.shader 文件。

下载示例表明您同意使用条款和在线隐私政策。
将纹理贴图集文件（如 Animation.json、spritemap.json、spritemap.png）和 unity 插件文件（如 Plugin.cs 和 Effect.shader）移动到“资产”>“资源”下。
将 AnimateEditor.cs 和 WrapperPlugin.cs 文件移到“资产”文件夹。
在 Unity 中，请单击 AnimateEditor.cs文件，并将其拖动到主摄像头。
播放。播放项目时可将 sprite map 拆分为不同的 sprite。
将 AnimateEditor.cs 移动到编辑器。
在 Unity 中，请单击 WrapperPlugin.cs 文件，并将其拖动到主摄像机。此外，请从主摄像机中取消选择或删除 AnimateEditor.cs。
根据需要播放或发布输出。

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

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

纹理发布

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

1. 创建 Canvas 文档。选择“文件”>“新建”以显示“新建文档”窗口。

2. 选择“高级”选项卡，然后单击“HTML5 Canvas”。随即会打开一个新的 FLA 文档。

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

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

默认情况下，纹理发布设置为 2 倍分辨率。另外，分辨率的范围可在 0.3 - 3 倍的范围内调节。

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

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

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

从列表中选择目标元件。

通过位图纹理改进图形性能

在 Animate 中，位图纹理可提高不同平台中动画的性能。想要使用位图纹理降低矢量的复杂度？在本示例结尾观看教程并按照这些步骤操作。

在“属性检查器”面板中，单击“发布设置”。
在“基本”选项卡中选择“导出文档作为纹理”旁边的扳手图标。
在“图像设置”选项卡中，单击“更改”并选择想要的元件。
单击“确定”。

如何将您的资源发布为位图纹理以提高性能

观看视频以了解带位图纹理之动画的执行方式。

更快、更轻松地获得帮助

新用户？