ae游戏特效 教程

如何使用After Effects for Game UI

Adobe After Effects无疑是Motion Graphics和Special FX的全球领先解决方案。从电影到电视再到游戏工作室，它是各种任务的首选工具 – 键控，编写，跟踪（仅举几例）。此外，它拥有庞大而活跃的社区以及第三方插件的强大生态系统。

在本教程中，我将向您展示如何使用After Effects在我们的FPS Kit的Mission选择屏幕中重新创建特殊FX 。

有3个主要步骤：

1.外汇创作
2.资产出口
3. CSS动画

请注意，本教程假定您至少是Adobe After Effects的中间用户。如果您是该产品的新手，我建议您在继续之前查看官方入门教程。

1.外汇创作

第一步是创造实际效果。我们将从具有透明背景的png图像开始，它将为我们提供效果的形状。获得它的一种方法是使用自动跟踪（图层/自动跟踪），它自动获取图层的轮廓并从中创建一个蒙版。

然后，您需要创建一个新的实体图层并粘贴蒙版。要将掩码从一个层复制到另一个层，只需选择掩码通道并按ctrl + c。然后选择其他图层并按ctrl + v。（提示：如果要调整蒙版大小，可以激活图层/蒙版和形状路径/自由变换点的自由变换。

现在我们有了形状让我们添加实际效果。这可以通过After Effects的内置工具来完成，但是使用来自videocopilot的一个名为Saber的超棒免费插件会更容易- 安装它之后只需在效果面板中搜索它并将其拖放到实体层。

Saber设置需要在“效果”控件面板中指定的一些重要设置：
自定义核心 – 核心类型 – 图层蒙版（这使得效果遵循我们之前创建的蒙版的形状）
复合设置 – 透明（这使得实际透明背景）

然后我们可以使用其余设置来获得所需的最终效果。在这种情况下，我们使用“激活”预设和开始偏移设置的动画。这是完成的效果！

2.资产出口

一旦我们完成了效果，我们需要从After Effects中导出它。有两个主要选项 – spritesheet或透明视频。该视频非常简单（这是一个以防万一的教程），所以我们将专注于spritesheet。基本上，我们希望通过spritesheet创建一个flipbook动画，其中每个sprite都是效果的一个框架。为此，我们可以将帧导出为一系列png并在Photoshop中排列或使用名为sheetah的插件。

在这两种情况下，最终结果应该是这样的 – 具有各个帧的行/列的单个图像。

3. CSS动画

现在我们只需要在游戏的实际UI中进行动画制作。这部分通常由UI开发人员执行，但实际上非常简单。我们可以使用background-position CSS属性沿spritesheet的x / y轴导航。然后我们只需要添加一个步骤动画，以便动画在spritesheet中从一个位置“捕捉”到另一个位置。步数取决于实际spritesheet的列/行中的帧数。

这是完整的CSS（顺便说一下spritesheet也有响应）spritesheetAnimation

我希望你喜欢这个教程，你会用它为你的游戏创造一堆很棒的特殊FX！