动画制作

作为 2015 年度 Kickstarter 筹款活动的一项重要目标, :program:`Krita ` 实现了动画制作功能,可用于制作逐帧栅格动画。尽管依然缺少了自动补间等功能,但最基本的动画制作流程已经就位了。

要使用动画功能,点击工具栏右侧的“工作区”按钮,切换至“Animation (动画)”工作区。Krita 将显示与动画制作相关的各种面板。

注解

4.1 新版功能: 时间轴面板经过数次改良,与本教程截图中的旧版面板有一些区别。请以文字描述为准,因为它已经为新版面板作出了调整。

动画曲线

要创建动画曲线 (目前仅支持不透明度),可在 动画 面板点击 创建空白帧 按钮右侧的下箭头,在弹出的菜单中选择 添加不透明度关键帧 。然后你便可以在“图层”面板中直接编辑该关键帧的不透明度。位于两个不透明度关键帧之间的各关键帧透明度将自动过渡。详情请见 动画曲线 章节。

制作流程

在传统动画的制作流程中,动画师首先要绘制 关键帧 (也叫“原画”),它们包含了重要的镜头和动作。接下来他们会在这些关键帧之间绘制过渡的动画帧 (也叫“中间画”)。

Krita 的动画制作流程要用到三个重要的工具面板:

  1. 时间轴 面板。用于按时间查看和控制当前动画的全部动画帧。该面板还具备图层管理功能。在时间轴面板中创建的图层也会在常规图层面板上显示。

  2. 动画 面板。提供播放和切换动画帧的按钮,可以更改帧速率、回放速度和 自动帧模式 等选项。

  3. 洋葱皮视图 面板。控制洋葱皮视图的显示方式,用于辅助观察当前帧的过去帧和未来帧。

动画入门:如何绘制步态循环

要想熟悉 Krita 的动画功能,最好的办法就是使用它们来进行动画制作的实践。步态循环是全动画的最基础形态,它会涉及到动画制作的每一个方面,因此我们可以通过制作一组步态循环来入门 Krita 的动画功能。

初始设置

首先我们要创建一个新文档:

../_images/Introduction_to_animation_01.png

打开新建文档对话框,在自定义文档的尺寸页面上,把文档尺寸设为 1280 x 1024,分辨率设为 72 ppi (因为它将用于屏幕显示),把文档名字命名为“walkcycle” (步态循环)。

接下来我们要切换到内容页面。在这里指定一个看起来舒服的背景色,然后选中“作为画布颜色”。这样 Krita 会在背景的透明区域填充这种背景色。你还可以在菜单栏的 图像 ‣ 属性 处对此进行更改。这一设置对于动画制作尤为重要,因为洋葱皮视图必须在含有透明度的图层上才能正常显示。

注解

Krita 有一系列与元数据相关的功能。你可以在 创建新文档 对话框里面编辑部分元数据。文档标题可以在保存图像时自动用作候选文件名,而描述则可以被数据库抓取,也可以用来留言。尽管单人匹马的作者应该用不到这些功能,但在大团队协作时它们将会派上用场。

点击 创建 按钮,完成新文档的创建吧!

现在,我们要让 Krita 显示动画制作流程所需的工具面板。点击窗口右上角的“工作空间选单”按钮:

../_images/Introduction_to_animation_02.png

红色箭头所指的就是“工作空间选单”按钮。

从弹出的工作空间列表中选择 “Animation” (动画)。

工作空间将会变为下图的样式:

../_images/Introduction_to_animation_03.png

动画工作空间会在窗口的底部显示时间轴面板和动画面板。要显示洋葱皮面板,点击动画面板的“洋葱”按钮。

绘制动画

我们刚才新建的文档里面有两张透明图层。双击图层名称,把下面的图层重命名为“environment” (环境),把上面的图层重命名为“walkcycle” (步态循环)。

../_images/Introduction_to_animation_04.png

用直线工具画一条水平线,把它作为地面。

../_images/Introduction_to_animation_05.png

然后选中 walkcycle (步态循环) 图层,随便选择一种笔刷,把人物的头部和躯干画出来。

接下来让我们把注意力转向时间轴面板。我们可以看到时间轴里面空无一物。这是因为我们还没有把当前图层添加成一个动画帧,所以 Krita 不把它视作动画的一部分。

../_images/Introduction_to_animation_06.png

想要把图层变为动画的一部分,我们必须先在时间轴上添加一个动画帧。在时间轴的空槽上右键单击 mouseright ,在右键菜单中选中 创建重复帧。

注意

如果你点击的是 创建空白帧,图层的内容将被抛弃,然后新建一个空白帧。因为在这里你需要保留上一帧的图像,因此你应该点击 创建重复帧。

../_images/Introduction_to_animation_07.png

你会发现这个图层的时间轴左边多了一个灯泡状的图标,它是洋葱皮视图的开关。这意味着这个图层已经成为了动画图层。

../_images/Introduction_to_animation_08.png

点击 创建重复帧 按钮,将第一帧复制为第二帧。接下来切换为 移动工具 (按快捷键 T) ,然后按 Shift + ↑ 组合键将第二帧的内容向上移动。

现在点击时间轴左边的灯泡图标,启用洋葱皮显示:

../_images/Introduction_to_animation_09.png

你会发现前一帧的内容被显示为红色。

警告

Krita 把白色也视作一种颜色,而不是把它当成透明。为了正常显示洋葱皮视图,动画图层在没有内容的区域上最好保持透明。如果你不小心在整个动画图层上面填充了底色,可以使用 颜色转为透明度 滤镜来补救。但比起亡羊补牢,防范于未然更加重要。

../_images/Introduction_to_animation_10.png

未来帧的内容则会被显示为绿色。过去帧和未来帧的显示颜色可以在洋葱皮面板中进行更改。要显示洋葱皮面板,点击动画面板的“洋葱”按钮。

../_images/Introduction_to_animation_11.png

接下来我们要画出步态循环的两个极端动作。第一个动作是两脚迈得最开的瞬间;第二个动作是一条腿完全伸直,另一条腿已经收起准备向前迈出的瞬间。

现在我们要把这两帧复制到时间槽 2 和 3。要注意的是“鼠标拖动”在时间线面板里的用法有点讲究。直接拖动鼠标不会选中多个帧,而是会直接移动点击到的第一个帧。要选中多个帧,必须按住 Ctrl 进行拖放,但拖放的最后一个帧不会被选中。Ctrl + 左键单击 mouseleft 也可以选择或者取消选择一个帧。对于已选中的动画帧,直接拖放会移动它们,按住 Ctrl 拖放会复制并移动它们。

../_images/Introduction_to_animation_12.png

现在让我们再试一次,把动画帧 0、1 复制到时间槽 2、3:

  • 首先,用 Ctrl + 鼠标左键 mouseleft 来选中需要复制的帧。被选中的帧会显示为橙色,如上图下半部分所示。别忘了:在拖动选择时,最后一个帧不会被选中。

  • 接着,用 Ctrl + 拖放 把动画帧 0、1 复制到时间槽 2、3。

接下来我们要播放这个循环:

../_images/Introduction_to_animation_13.png

如果左侧工具面板空间不够,你可以把动画面板和洋葱皮面板拖放到底侧空间,和时间线面板并排。

  1. 确认动画帧 0 已被复制到 帧 2.。

  2. 确认动画帧 1 已被复制到 帧 3.。

  3. 在动画面板中,把帧速率设为 4。

  4. 在时间轴里面用 Ctrl + 拖动选中所有 4 个帧。

  5. 点击动画面板中的“播放”按钮。

  6. 你的第一条动画就做好了!

添加并绘制中间画

../_images/Introduction_to_animation_14.png

要在相邻的动画帧之间插入一些时间槽,可以按住 Alt 拖动任意帧,这将把该帧和它后面的帧一起整体移动。

然后在空出来的时间槽中插入并绘制中间帧。

../_images/Introduction_to_animation_16.png

不过你很快会发现,插入的帧越多,用洋葱皮追踪前后帧就越困难。

你可以用洋葱皮面板对洋葱皮的显示方式进行修改。点击顶栏的数字可以控制该帧数距离的洋葱皮显示开关,数字越大,意味着它与当前帧离得越远。数字栏下方的柱状图可以控制透明度的变化。面板下方的色块和滑动条可以调整颜色和着色强度。

../_images/Introduction_to_animation_15.png

制作多图层动画

这个步态循环还缺了一双手,我们打算在别的图层上绘制它们。我们可以在常规图层面板上新建图层,也可以在时间轴面板的左上角按“+”按钮,新建图层,把它命名为“hands” (手)。可现在问题来了……

../_images/Introduction_to_animation_17.png

刚才画的步态循环从时间轴面板上消失了!不必担心,这其实是时间轴和图层的协同显示功能在起作用。这是因为在全动画制作流程里,画面的组成部分可能会有很多,动画师会把一些当前无需处理的部分从时间轴上隐藏起来。你可以手动把任意图层添加到时间轴。

4.3.0 新版功能: 从 Krita 4.3.0 版开始,新建图层会默认被固定到时间轴。

../_images/Introduction_to_animation_18.png

想要将某个图层一直显示在时间轴,不管活动与否,可以在图层面板中右键点击 mouseright 它,在菜单中勾选 固定到动画时间轴 即可。我们建议你将所有具有动画的图层都固定到时间轴。

../_images/Introduction_to_animation_19.png

导出

动画制作完成后,点击菜单栏的 文件 ‣ 导出动画。如果要将动画导出为视频文件,你需要另外下载 FFmpeg 程序。具体操作请参考 导出动画 页面说明。

../_images/Introduction_to_animation_20.png

现在你就可以慢慢欣赏你的步态循环大作了!

../_images/Introduction_to_animation_walkcycle_02.gif

导入动画帧

Krita 支持导入动画帧。

首先,让我们从 Open Game Art 网站找一张像素拼合图 (以 Libre Pixel Cup male walkcycle 为例)。

点击菜单栏的 图像 ‣ 分割图像 ,把像素拼合图进行分割。

../_images/Animation_split_spritesheet.png

这个拼合图内含 9 张图,所以我们要把它分成 9 块。将垂直分割线设为 8 条,水平分割线设为 0 条,随便输入一个文件名前缀,文件类型为 PNG,点击应用。图像将被分割为均等大小。

新建一个文档,点击菜单栏的 文件 ‣ 导入动画帧 。在弹出的对话框中点击 添加图像 按钮,从导入对话框中找到刚才分割的拼合图。

../_images/Animation_import_sprites.png

你可以同时选中多个图像进行导入。

../_images/Animation_set_everything.png

即将导入的动画帧会被自动排序。你也可以在对话框右上角的“排序”选单对排序方式进行调整。

首帧

此参数指定从第几帧开始导入该动画帧序列。

帧长

此参数指定导入的每张图像在动画中停留的帧数。下方的“源帧速率”会自动按照此数值和当前文档帧速率来计算出被导入动画序列的理想原始帧速率。在本例中,动画文档的帧速率为 24,因此当帧长为 3 时,可推算出导入图像序列的理想源帧速率为 8,这和我们将要导入的序列是一致的。

点击 确定 之后,这个图像序列会被导入到一个新的动画图层。

../_images/Animation_import_done.png

参考资料