像素艺术家的Live2D指南

0 点赞
Aseprite
转载

Grat的所有Live2D教程,本教程将从头到尾告诉你如何在Live2D中为像素画绑定骨骼! 简介:欢迎来到Live2D骨骼绑定 :3 大家好,我是Grat, 我决定将我所有的Live2D教程整合为一个完整教程,而不是分成3个小教程。 我还对措辞和拼写错误等做了一些小修改。 本教程之前是一个系列,它讲解了我制作Live2D像素画模型的方法, 解释了我让Live2D按照我想要的方式运行的技巧, 以及我如何导出和构建它们。 内容有点长,但所有部分都分开展示,你可以按照自己的节奏阅读各个小章节,或者在遇到问题时将其作为查阅指南!

【不同分辨率模型排成一排】 注意事项:Live2D的不足之处 Live2D一直是虚拟主播模型实时动画的唯一选择,因此也是像素艺术模型的唯一选择。在使用它制作模型之前,有几个问题需要告知你! Live2D有时会在像素艺术模型的纹理/图层重叠处产生长长的白线,在使用大量深色的模型上问题尤其严重。 Live2D不支持点过滤,因此像素艺术模型需要调整到非常大的尺寸才能避免模糊(5000倍原始尺寸是安全的)。 我测试过Inochi2D,它在很多方面与Live2D类似,但没有这些问题,不过目前设置起来比较困难。Inochi也在开发中。 关于我的发现的博客文章。 Live2D在像素艺术模型方面不如Inochi2D。 第一部分:如何构建模型 制作像素风格的Live2D模型有点令人头疼,因为当时互联网上完全没有关于像素模型的帮助内容。所以我决定制作这个快速教程,分享我是如何做到的! 不过首先有一些小知识! ◆ 像素风格Live2D模型是由放大的像素艺术制成的。 ◆ 像素模型通常比数字艺术风格的Live2D模型更少见。 ◆ 像素模型通常像普通模型一样进行绑定,或者至少可以这样做。 这里还有一份制作/使用像素模型的虚拟主播/艺术家列表。在你决定构建模型的方法之前,这些可能值得参考!◆ NumachiTanegi(虚拟主播兼画师) ◆ KeinaNate(虚拟主播兼画师) ◆ BlubbrMuffins(虚拟主播兼画师) ◆ BokiPixelart(虚拟主播兼画师) ◆ Chibikki_ikki(画师兼虚拟主播) ◆ Poribaketu137(画师) ◆ 我,Grat-Grot-10-Berg :>(画师兼虚拟主播) ◆ 视差效果与变形器 像素模型不太喜欢被扭曲变形器弯曲, 而网上有聪明的人发现, 可以将头发分成多层,并利用它们制作简单的视差效果

[poribaketu137的其中一个模型左右张望,展示X轴视差效果] 通常,你甚至可以在制作模型头部之前,就在Aseprite中重新创建模型的“向左看”和“向右看”动作。

这里你能看到我在左侧那个(模型/图像)上犯了个错误,它的轮廓有点不对劲。 ◆ 关键帧跳变与透明度 像素模型在从一个位置突然切换到另一个位置时,看起来效果会很不错。但如果不注意的话,切换精灵时的透明度变化可能会显得有点模糊。 下面是透明度(眼睛部分)和跳变(翅膀部分)的示例。两者效果都很好,但对于翅膀来说,直接跳变是合理的,否则会产生一种“鬼影”效果。这些精灵动画是通过在不同图层上制作不同的关键帧来实现的。 跳变示例

眼睛透明度示例 ◆ 我制作模型的方法(已过时) 制作模型确实有点麻烦,但至少我们可以一起面对这份麻烦! 我通常从制作模型的面板开始。 记得像制作普通模型一样,将所有部分拆分成不同的图层。

类似这样,接下来我会选择制作刘海,或者眼睛,本次教程我会先制作眼睛。

你需要制作睁眼、半闭眼和闭眼的精灵图,我主要通过睫毛来实现这些效果。我将睫毛、眼白和瞳孔分开,把瞳孔单独放在一个文件夹里,这样你就可以添加更多瞳孔样式,比如爱心瞳孔或愤怒/病娇风格的瞳孔。

对我来说,图层最终看起来是这样的,现在对另一只(或其他)眼睛也进行同样操作。 我添加得意表情的方法是,在瞳孔和眼白上方的图层上,用角色的肤色画一条短线。 为了让导出效果更好,实际上需要把这条线向下移动一到两个像素,这样在Live2D中启用时,它会向上移动到正确位置,而不是通过透明度显示出来。

在进行绑定工作时,我通常会将表情控制绑定到【EyeSmile参数】上,眼睛部分的工作已经完成,现在开始处理头发。

我实际上是把头发分成2到3部分来做发型的,分别是前发、中发和后发,后发还会被分成更小的部分。 像我之前说的,头发能够产生轻微的视差效果非常重要,我们通过分块来实现这一点。 我总是从前发开始做起,但当做到稍微靠后的部分时,我就会切换到中发,然后在两者之间来回调整,直到我对它们满意为止。

然后作为收尾工作,我会添加背面的头发,并确保分层精灵即使有轮廓也能轻微重叠。

那么我们就快完成了,还需要在面板和中间的头发之间加一个脖子,这样头部就完成了!

都完成了,我还添加了一些表情相关的内容,如果你愿意的话也可以试试。不过为了保险起见,测试一下它能否从左到右、或许还有上下移动而不导致轮廓断裂。 身体部分! 我得承认我不太擅长给身体绑定骨骼,但我可以把我知道的展示给你。我喜欢把身体分成两个文件夹:上半身和下半身。

我将它们拆分,以便更轻松地调整Live2D中的呼吸参数。我还在关节处拆分了腿部,这样当从侧面观察时可以让腿部活动,手臂也是如此。如你所见,模型显示了两套服装,之后你也可以在Live2D中通过参数让模型在这些服装之间切换。除此之外我没有做太多其他操作,我的模型身体都非常简单,不过这是它的样子。

非常简单的模型,之后你随时可以为其添加更多内容! 第二部分:从Aseprite导出模型到Live2D 开始之前,请确保你已准备好所有所需工具! 1. 首先,你需要一份Aseprite 2. 其次,你还需要Aseprite的【Export as PSD脚本】 3. 你还需要一份Gimp(免费软件) 4. 当然,还需要一份Live2D Cubism(提供免费试用) 首先,准备好一个像素风格的模型用于导出,这听起来比实际操作要难。只需按照任何Live2D模型教程中的方法分离图层,完成后效果应大致如下。

【Aseprite中的模型图层构建】 以下是我导出前的图层外观!

【Aseprite中的Grat模型】 这是我导出前的模型样子! 现在模型已准备完成,我们可以开始准备导出了! 【请记得备份你的文件(接下来的步骤可能会导致Aseprite崩溃)】 (这句话将在下一部分开始时重复) ◆ 从Aseprite导出模型 现在模型已准备完成,我们可以开始准备导出了! 【请记得备份你的文件(接下来的步骤可能会导致Aseprite崩溃)】

【Aseprite的编辑菜单,其中“Sprite Size”(精灵尺寸)已高亮显示】 首先我们需要调整模型大小,因为我认为Live2D并不擅长处理像素级别的模型。 只需转到你的【Sprite】(精灵)栏,将鼠标移过去并点击“Sprite Size...”(精灵尺寸...)。

【精灵大小菜单】 然后应该会打开此菜单,如果“锁定比例”尚未取消勾选,请取消勾选。现在将模型大幅调整大小。 我通常将我的模型导出为5000%,你可以在下方的栏中使用百分比而非像素(模型原本为55×110)。

【Aseprite 文件菜单中脚本和“导出为 PSD”选项已高亮显示】调整大小完成后,我们就可以开始导出了,这里要用到在入门部分安装的“导出为 PSD”脚本。将鼠标移到“文件”选项卡上,然后移到“脚本”选项卡,接着点击“导出为 PSD”。

【导出为PSD菜单】 此菜单打开后,你可以点击文件名来决定文件的保存位置(这是个好主意,首先能控制导出是否正确)。 然后当你点击导出时,你会看到Aseprite陷入停滞,因为你刚刚设置了一个5000x5000像素的文件,而脚本菜单是用于处理100x100这样小像素文件的,这会导致Aseprite冻结。但不要关闭它,就保持打开状态。 去散散步或做些别的事情,导出过程大约需要30分钟或更长时间(时间可能在5到30分钟左右),所以先去做其他事情吧。

【脚本成功消息】 ◆ 修复.psd文件并导入模型。 当你返回时,可能会看到类似这样的内容!现在它已完全导出为.psd文件,但有一个问题——它是损坏的。哦不,对吧?不过没关系,我们可以修复它(目前这种损坏状态导致无法导入到Live2D Cubism中……)。 使用GIMP打开该文件!

【Windows桌面显示如何用GIMP打开PSD文件】只需选择该文件并使其用GIMP打开,哪种方式都可以。

【GIMP错误弹窗,背景为Grats模型】 然后它应该会打开……出现错误。哦不,天哪!不过没关系,只需点击确定。 我们只需要使用GIMP内置的PSD导出器,因为它是有效的!

[在GIMP中显示导出为选项] 只需导出文件并替换旧的PSD,因为旧文件已损坏且无法使用。 现在你基本上拥有了一个可用的PSD文件,只需将其拖入Live2D Cubism即可。

【Grat的模型已导入Live2D Cubism】 现在模型已安全导入Live2D Cubism编辑器,你可以开始为新模型进行绑定,让朋友们眼前一亮! 不过,我也为即将成为像素模型绑定师的你准备了一些参考资料: 1. 我制作的关于像素模型导出与绑定的旧教程 2. @poribakete137的Live2D X轴视差效果教程 我还录制了自己制作模型的视频,如果你想观摩我制作模型的过程: 1. Grat-Grot-10-Berg模型(展示的那个)的绘制过程 2. Grat-Grot-10-Berg模型(同样是展示的那个)的绑定过程 3. 我的Live2D绑定/绘制播放列表,目前已有约10个视频 第三部分:欢迎来到绑定地狱(如何进行绑定) 你成功了!你已经制作并导出了自己的模型!(如果不行的话,或许可以回到教程?) 现在我们可以开始漫长的绑定流程了,我打算把这个教程做成更偏向展示和讲解的类型,因为说实话,Live2D这种东西,边做边看演示会更容易理解。 好了,这就是我们要处理的模型! (顺便说一下,这是HaybleneVT,她人超棒的)

[在Aseprite中展示的粉色护士虚拟主播]

【Aseprite】图层系统

[同一护士虚拟主播的特写图标,旁边配有Q版形象] (额外内容:Vtube Studio的大图标以及用于桌面装饰的.ico文件) 我现在使用了很多变形器来同时移动多个对象,比如将瞳孔都放在同一个变形器中,然后移动该变形器。 ◆ X-Y-Z头部参数及彩色轮廓 这次我对前发和后发做了不同处理,将它们分开设置。前发的轮廓被单独分到另一个图层,具体如下。

【Aseprite图层视图,显示两个图层被高亮】这种设置能产生一种很酷的效果:当前方头发超出后方头发的轮廓时,另一个备用轮廓会显现出来。

1. 【护士虚拟主播向左下方看】 2. 【护士虚拟主播向右上方看】

[Live2D Cubism的文件夹视图,显示变形器] 额外的轮廓即使在对角线处也效果很好,记得合成拐角! Z轴非常简单,就是一个旋转变形器,作用于包含整个头部的变形器上, (记住后发可能在身体后面!) ◆ 眼睛的关键帧跳转 现在来处理眼睛

1. [Live2D Cubism中眼睛图层文件夹的显示] 2. [Aseprite中眼睛图层设置的显示] 这是我的眼睛效果 得意表情图层位于眼睛下方,当我想做出得意表情时,会将其向上移动一个像素。我通常将其设置为眼睛微笑,但这样可能会显得混乱,所以如果你也遇到这种情况,将其作为单独的表情图层可能会更好! 我通过移动瞳孔的变形器来调整眼睛参数的X轴和Y轴数值。

[Live2D Cubism 中显示已选择“得意”部分] 通过调整不透明度并使眼眶相互重叠来实现眼眶切换,这样能形成相当流畅的眼部动作。不过,如果眼球追踪设置不正确,效果可能会显得混乱。例如在VTube Studio这类程序中,当眼球失去追踪时,可能会出现重影现象。这次我设置了这类眉毛。

1. 【Aseprite中的眉毛图层】 2. 【Live2D Cubism中眉毛所关联的参数】 首先,我通过移动左右眉毛的变形器来设置所有的X和Y参数。 这次我还设置了眉毛角度,眉毛的快速切换效果,如果使用不透明度来实现,很容易显得模糊。你可以通过在两端放置关键帧来使用快速切换功能,然后删除中间的所有其他关键帧。这样,当关键帧跳转到另一个当前激活的关键帧时,眉毛就会快速切换。 ◆ 简单嘴巴制作 嘴巴参数与眉毛参数基本相同!

【Live2D Cubism 中高亮显示的嘴部图层】 只需记住,1=微笑,0.5=介于两者之间,0=皱眉(嘴部形态)

[Live2D Cubism 内部所有参数设置等的全景视图] 大致就是这样,现在只需制作一个纹理图集,然后导出所有内容。 第四部分:额外资源 旧版教程(已过时,只需阅读本教程即可) Live2D 官网 Grat 的 Live2D 绑定/绘画播放列表