动画制作

Thanks to the 2015 Kickstarter, Krita has animation. In specific, Krita has frame-by-frame raster animation. There’s still a lot of elements missing from it, like tweening, but the basic workflow is there.

要使用动画功能,最直接的办法就是把工作空间更改为“Animation (动画)”,它会按照动画制作流程的需要显示相关工具面板并重新安排它们的位置。

注解

4.1 新版功能: The Timeline docker looks a bit different from the screenshots shown in this tutorial, however you should be able to follow it if you take care to select options mentioned in text.

动画曲线

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

制作流程

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

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

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

  2. The 动画. This docker contains the play buttons as well as the ability to change the frame-rate, playback speed and useful little options like auto-key framing.

  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

We can make it animatable by adding a frame to the timeline. mouseright a frame in the timeline to get a context menu. Choose Create Duplicate Frame.

注意

If you select Create Blank Frame, the content of the layer will be dropped and a new blank frame will appear; since you want to preserve the image, you need to use Create Duplicate Frame.

../_images/Introduction_to_animation_07.png

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

../_images/Introduction_to_animation_08.png

Use the Create Duplicate Frame button to copy the first frame onto the second. Then, use the Move Tool (switch to it using the T shortcut) with the Shift + shortcut to move the frame contents up.

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

../_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 新版功能: In Krita 4.3.0 and later, all new layers are pinned to the timeline by default.

../_images/Introduction_to_animation_18.png

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

../_images/Introduction_to_animation_19.png

导出

When you are done, select File ‣ Render Animation. To render to a video file, you’ll need a program called FFmpeg. To learn more, please read 导出动画.

../_images/Introduction_to_animation_20.png

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

../_images/Introduction_to_animation_walkcycle_02.gif

导入动画帧

In Krita you can import animation frames.

First let us take a sprite sheet from Open Game Art. (This is the Libre Pixel Cup male walkcycle).

We’ll use Image ‣ Split Image to split up the sprite sheet.

../_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