像素画PixelOver骨骼动画教程

打开网易新闻 查看精彩图片

文本概览:全文约 870 字,阅读约 3 分钟。

跟完这篇,你能在 PixelOver 里把拆好的图层绑上骨骼,做出下面的像素风游戏角色动画。(注意:不是手工画出来的,是插件渲染像素风效果)

打开网易新闻 查看精彩图片

先准备可拆的立绘

这篇跟练用的是 Smiley-Fakemon 的角色稿。整张立绘先留着当参考,后面拆层、缩尺寸、套像素着色都会用到它。

打开网易新闻 查看精彩图片

关键在这一步:动画前必须把图拆成独立部件——头、躯干、翅膀、腿、尾巴、配件。

打开网易新闻 查看精彩图片

注意:翅膀盖住的躯干、腿被身体挡住的部分,都要补一笔。像素化之后小瑕疵不显眼,但空一块会在关节处露洞。

导入 PixelOver

把每个部件拖进工程,选“分别导入为图片”,不要当成动画序列。原立绘也一并导入当参考层。

打开网易新闻 查看精彩图片

到这停一下:层顺序先别纠结,绑骨时再摆。

需要统一缩放时,Shift 多选后一起改尺寸,再进着色。

打开网易新闻 查看精彩图片

套像素着色

顶栏加载预设着色,或在右侧面板微调参数,先看清最终可读比例再绑骨。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

建骨骼层级

取消全选,切到骨骼工具。

打开网易新闻 查看精彩图片

按住拖拽长出骨骼,边建边改名。

打开网易新闻 查看精彩图片

建议层级:

  • Root(可设长度 0,当整只角色的锚点)

  • Bone_Torso

  • Bone_Head / Bone_Wing_L / Bone_Wing_R / Bone_Leg_L / Bone_Leg_R / Bone_Tail

骨骼不会自动带动图层。把对应图片拖到骨骼节点下面,父子关系才生效。

打开网易新闻 查看精彩图片

绑完后整棵树应像这样完整。

打开网易新闻 查看精彩图片

打关键帧做动作

打开底部动画面板,命名动画,设好时长和 FPS。

打开网易新闻 查看精彩图片

全选骨骼,给 Position、Rotation 各打一枚关键帧,锁住第 0 帧的休息姿。

打开网易新闻 查看精彩图片

时间轴往前拖,摆下一姿势。开着 REC 时,改骨骼会自动记关键帧。

打开网易新闻 查看精彩图片

重复姿势可直接复制关键帧到当前光标。

打开网易新闻 查看精彩图片

摆乱了就一键回休息姿。

打开网易新闻 查看精彩图片

示例:跳跃三段

起跳蓄力、腾空、落地缓冲——落地别瞬间弹回站姿,留一点压缩才有重量。

打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片
打开网易新闻 查看精彩图片

过渡不顺时,挪关键帧时间或给关键帧加缓动。

打开网易新闻 查看精彩图片

导出精灵

导出前确认 FPS,并可用右上角开关隐藏骨骼方便预览。

打开网易新闻 查看精彩图片

菜单Project > Export...

打开网易新闻 查看精彩图片

可选 PNG 序列、GIF、spritesheet;还能改像素倍率、分文件夹导出。

打开网易新闻 查看精彩图片

成品循环如下。

打开网易新闻 查看精彩图片

参考资料

2D Bones Animation: https://docs.pixelover.io/tutorials/bones_animation/