用户指南 取消(C)

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

  1. Adobe Animate 用户指南
  2. Animate 简介
    1. Animate 新增功能
    2. 图示术语表
    3. Animate 系统要求
    4. Animate 键盘快捷键
    5. 在 Animate 中使用多种文件类型
  3. 动画
    1. Animate 动画基础知识
    2. 如何在 Animate 中使用帧和关键帧
    3. 在 Animate 中使用逐帧动画
    4. 如何在 Animate 中使用传统补间动画
    5. 画笔工具
    6. 运动辅助线
    7. 补间动画和 ActionScript 3.0
    8. 关于补间动画
    9. 补间动画
    10. 创建补间动画
    11. 使用属性关键帧
    12. 用补间对位置进行动画处理
    13. 如何使用动画编辑器编辑补间动画
    14. 编辑补间动画的运动路径
    15. 处理补间动画
    16. 添加自定义缓动
    17. 创建和应用动画预设
    18. 设置动画的补间范围
    19. 处理另存为 XML 文件的补间动画
    20. 补间动画与传统补间
    21. 形状补间
    22. 在 Animate 中使用骨骼工具动画
    23. 在 Animate 中处理角色 Rig
    24. 如何在 Adobe Animate 中使用遮罩层
    25. 如何在 Animate 中使用场景
  4. 交互性
    1. 如何使用 Animate 创建按钮
    2. 将 Animate 项目转换为其它文档类型格式
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 在 Animate 中通过代码片段添加交互性
    5. 创建自定义 HTML5 组件
    6. 使用 HTML5 Canvas 中的组件
    7. 创建自定义组件:示例
    8. 自定义组件的代码片段
    9. 最佳做法 - 使用 Animate 制作广告
    10. 虚拟现实创作和发布
  5. 工作区和工作流
    1. 创建和管理画笔
    2. 在 HTML5 Canvas 文档中使用 Google 字体
    3. 使用 Creative Cloud Libraries 和 Adobe Animate
    4. 使用 Animate 的舞台和工具面板
    5. Animate 工作流程和工作区
    6. 在 HTML5 Canvas 文档中使用 Web 字体
    7. 时间轴和 ActionScript
    8. 使用多个时间轴
    9. 设置首选参数
    10. 使用 Animate 创作面板
    11. 使用 Animate 创建时间轴图层
    12. 导出移动应用程序和游戏引擎的动画
    13. 移动和复制对象
    14. 模板
    15. 在 Animate 中查找和替换
    16. 撤消、重做和历史记录面板
    17. 键盘快捷键
    18. 如何在 Animate 中使用时间轴
    19. 创建 HTML 扩展
    20. 图像和动画 GIF 的优化选项
    21. 图像和 GIF 的导出设置
    22. Animate 中的资源面板
  6. 多媒体与视频
    1. 在 Animate 中变形和合并图形对象
    2. 在 Animate 中创建并使用元件实例
    3. 图像描摹
    4. 如何在 Adobe Animate 中使用声音
    5. 导出 SVG 文件
    6. 创建用于 Animate 中的视频文件
    7. 如何在 Animate 中添加视频
    8. 使用视频提示点
    9. 使用 Animate 绘制和创建对象
    10. 改变线条和形状
    11. Animate CC 中的笔触、填充和渐变
    12. 使用 Adobe Premiere Pro 和 After Effects
    13. Animate CC 中的颜色面板
    14. 使用 Animate 打开 Flash CS6 文件
    15. 在 Animate 中使用传统文本
    16. 向 Animate 中置入图稿
    17. 在 Animate 中导入的位图
    18. 3D 图形
    19. 在 Animate 中使用元件
    20. 使用 Adobe Animate 绘制线条和形状
    21. 在 Animate 中使用库
    22. 导出声音
    23. 在 Animate CC 中选择对象
    24. 在 Animate 中使用 Illustrator AI 文件
    25. 使用喷涂刷工具应用图案
    26. 应用混合模式
    27. 排列对象
    28. 使用“命令”菜单自动处理任务
    29. 多语言文本
    30. 在 Animate 中使用摄像头
    31. 将 Animate 与 Adobe Scout 一起使用
    32. 使用 Fireworks 文件
    33. 图形滤镜
    34. 声音和 ActionScript
    35. 绘制首选参数
    36. 用钢笔工具绘图
  7. 平台
    1. 将 Animate 项目转换为其它文档类型格式
    2. 自定义平台支持
    3. 在 Animate 中创建和发布 HTML5 Canvas 文档
    4. 创建和发布 WebGL 文档
    5. 如何打包 AIR for iOS 应用程序
    6. 发布 AIR for Android 应用程序
    7. 发布用于桌面的 Adobe AIR
    8. ActionScript 发布设置
    9. 最佳做法 - 管理应用程序中的 ActionScript
    10. 如何在 Animate 中使用 ActionScript
    11. 最佳做法 - 辅助功能指南
    12. Animate 工作区中的辅助功能
    13. 编写和管理脚本
    14. 启用自定义平台支持
    15. 自定义平台支持概述
    16. 创建辅助内容
    17. 使用自定义平台支持插件
    18. 调试 ActionScript 3.0
    19. 启用自定义平台支持
  8. 导出和发布
    1. 如何从 Animate CC 导出文件
    2. OAM 发布
    3. 导出 SVG 文件
    4. 使用 Animate 导出图形和视频
    5. 发布 AS3 文档
    6. 导出移动应用程序和游戏引擎的动画
    7. 导出声音
    8. 导出 QuickTime 视频文件
    9. 使用 ActionScript 控制外部视频播放
    10. 最佳做法 - 移动设备内容创建技巧
    11. 最佳做法 - 视频惯例
    12. 最佳做法 - SWF 应用程序创作指南
    13. 最佳做法 - 构造 FLA 文件
    14. 在 Animate 中优化 FLA 文件的最佳做法
    15. ActionScript 发布设置
    16. 指定 Animate 的发布设置
    17. 导出放映文件
    18. 导出图像和动画 GIF
    19. HTML 发布模板
    20. 使用 Adobe Premiere Pro 和 After Effects
    21. 快速分享和发布动画

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

概述

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

Sprite 表

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

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

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

纹理贴图集

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

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

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

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

功能

Sprite 表

纹理贴图集

移动应用程序中的性能

加载应用程序的效率

高,因为不会进行计算

低,因为存在 JSON 文件计算

大小

将占用更大大小

将占用较小大小

动画的品质

中等

生成的文件数

两个文件:一个位图文件和一个 json 文件

变量:基于图像尺寸。

生成的位图数

基于用于 sprite 板料的框架的数字,位图文件的数字可能也增加,造成 sprite 板料大小增加

仅在 Sprite 中生成唯一位图,从而减小总大小。

创建 Sprite 表

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

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

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

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

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

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

  1. “库”中,右键单击影片剪辑。

  2. 选择“生成 Sprite 表”

  3. “Sprite 表”对话框中,选择所需选项。

  4. 单击“导出”

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

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

创建纹理贴图集

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

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

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

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

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

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

    生成纹理贴图集

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

    导出选项 描述
    图像尺寸 纹理贴图集的总尺寸,以像素为单位。默认设置为“自动调整大小”,这将调整表的大小以容纳所包含的所有图像。
    优化尺寸
    • 选中“优化尺寸”选项后,则会删除位图中的空像素和非二次幂尺寸(默认选项)。这适用于生成的所有位图。
    • 未选中“优化尺寸”选项时,会根据选定的尺寸生成位图。
    图像格式 导出的 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 文件”选项时,此选项会导出缩进且有意义的名称。
  4. 可选择根据尺寸将元件导入多个位图中。

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

     对于超过了选定图像尺寸大小的资源,则会显示警告。

  5. 要预览纹理贴图集输出,请单击“预览”选项卡。

    在创建之后预览纹理贴图集

  6. 单击“浏览”并选择计算机上输出文件的目标路径,或在文本区域中输入路径,然后单击“导出”

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

Animation.json

此文件包含关于动画的信息。默认情况下,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 平台的矢量或栅格格式。 在发布设置中添加了将动画导出为纹理贴图集的选项,以增强动画性能。

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

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

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

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

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

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

已启用“将文档导出为纹理”
已启用“将文档导出为纹理”

已启用“将文档导出为纹理”

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

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

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

从列表中选择目标元件。 

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

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

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

  1. “属性检查器”面板中,单击“发布设置”

  2. “基本”选项卡中选择“导出文档作为纹理”旁边的扳手图标。

  3. “图像设置”选项卡中,单击“更改”并选择想要的元件。

  4. 单击“确定”

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

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

登录到您的帐户