制作效率提升60%,日本大厂TA专家分享:动画式RPG制作优化实例

文/ 依光流 2022-05-06 10:19:46


今天分享一篇来自日本Cygames的TA专家横山晓的干货演讲。

众所周知,Cygames美术实力出众,不光是近年来高品质3D产品夺目,他们对于2D美术的研究可以说更是透彻。比如《公主连结》就是市面上最早一批打出动画式RPG标签的产品,这款产品几乎在游戏的每个角落,都塞上了2D手绘式动画。

但这不是重点,重点是《公主连结》的产量惊人。众所周知2D手绘动画制作成本高、制作周期长,要在保质的情况下保量,那可以说难上加难。而Cygames在游戏上线后,为了保质保量还提产,引入了2D动画摄影的自动化制作管线,并且将动画摄影制作周期缩短为原本的三分之一。以下为具体分享内容:

PCR是一款拥有豪华声优阵容、70万字以上的剧情容量的动画RPG,最大的特征,就是游戏中随处可见的2D动画,给人以看动画一般的游戏体验。游戏在每月中旬都会更新主线剧情,每月月末又会更新活动剧情,而且这些剧情都要用到短篇动画。

1651889994133635.png

活动剧情里总是会制作全新的ED动画,如同TV动画一般,会在故事关键节点播放出来,给人一种动画RPG特有的氛围感。

1651889994430476.png

此外, 游戏剧情里也会插入动画制作手法里常用的静止画,在其他各个角色的个人剧情,以及追加各种新内容的剧情里,都会用到相同制作手法的静止画。今天要聊的,就是以静止画为核心,在动画制作中用到的摄影手法,以及TA在其中能起到什么作用。

1651889994872539.png



01 动画摄影

首先要介绍的是动画摄影。在PCR里作为静止画使用的画作,会按照以下的流程来制作:草稿→设计图→原画→清稿→成稿→摄影。摄影相当于整个动画制作工序里的最后一步,如果出现返工的情况,就需要从相应的环节开始执行重做,最后再进行摄影。摄影之后,常规的动画还需要经过编辑和整合的工序,但静止画会直接进行实装。

1651889995656195.png

 简单来说,摄影是「将角色的赛璐珞(又称赛璐璐,在日本动画业界泛指用于制作动画的胶片)、背景等结合起来,制成用户实际看到的影像」这一工序。

下面这张图,就是为摄影而准备的前置素材,可以看到素材的颜色没有经过特别的处理,角色和她端着的料理在内,整个赛璐珞给人的观感都非常平面。背景也是因为没有摄影加工,所以看起来非常清晰。

1651889995110303.png

 通过摄影处理之后,画面融入了大量的光效,背景变得朦胧,色调层次更加细腻,整体观感也就显得十分立体,尤其在这张静止画当中,料理也加入了特殊的效果。与之类似,摄影这个环节需要对素材进行大幅度的加工,让影像散发出更强的魅力。

1651889996457769.png

 「摄影」这个词,源自过去采用赛璐珞胶片、背景板进行相机拍摄的工艺,虽然现在进入了数字化时代,但用词还是保留了下来。PCR里的摄影,一般指的是数字化的赛璐珞动画里的摄影,具体是用adobe After Effects载入素材以后,在不改变原素材的前提下制作画面。 

1651889996411003.png

 不过摄影并非完全在Cygames内进行制作,也有一部分由外包制作。目前,游戏战斗中的必杀技Cut in动画、主线剧情和活动剧情内的短篇动画,都是我们与外包合作制作的。

 1651889997450477.png

 此外,剧情里出现的眨眼、张嘴的静止画,以及主线剧情和活动剧情最后的ED动画,都是由公司内部进行制作的。

1651889997481323.png

 对我们来说,即便日程安排有所限制,但也要以最高的品质为目标。因此制作效率,就显得极为重要。



02 自动化摄影

接下来要聊到的就是PCR里为了提高制作效率而实现的自动化摄影。

摄影的自动化并非在开发期间实现的,而是在刚开服后。游戏刚开服的时候,公司内部的摄影成员只有1个人,到2021年底增加到了6人,其中1人兼任TA,另外还有1人兼任3D制作。

由于开服以前,摄影都由外包担任,开服后公司内部提出要不要自制,不过内部成员对外包的制作手法并不习惯,所以必须用到自动化的工具。于是,我们首先对摄影里的角色处理、静止画处理中最占时间的部分,进行了自动化处理。

1  角色自动化处理

我们边看例子边做说明。角色处理是对动画的角色等素材进行赛璐珞的适配处理。下图左侧的图像是处理前的角色,右侧是处理后的结果。可以看到,处理过后的图像更加柔顺,给人一种润泽感,而且角色处理完之后,还会对一部分半透明的素材进行处理,提高整体画面的立体感,柔和的氛围感也更强。

1651889997263309.png

不同作品对角色处理的度也不同,在PCR里,我们是按照角色立绘的观感,来进行角色的处理,下图左侧的图像就是游戏内的立绘效果,右侧是游戏内动画用到的角色处理效果,能看到也是按照立绘的风格来处理的。

1651889997752659.png

由于角色处理实质上是对角色的各个素材部件进行处理,所以需要对部件进行颜色区分,以遮罩的形式来运用。下面就是角色处理时,实际用到的一部分遮罩。在PCR里,几乎所有的颜色都进行了相应的处理,所以需要进行细致的图层区分,比如从左到右,纯皮肤、纯头发、纯服装、纯线条、光照下的常规部分,没有光照的阴影部分。

1651889998541235.png

这些只是一部分区分好的遮罩,类似的遮罩还会制作出很多个,一个个组合起来进行处理。然而,这种区分遮罩的处理方法必定会花费大量的时间,因为光是遮罩的种类就有40种以上。不过,这些遮罩还用到了一个叫做颜色模型的颜色设计图。

以下就是实际的颜色模型。颜色模型依据设定会配备非常多种,在摄影之前要准备好的赛璐珞里,会依据这个颜色模型对角色进行上色。而摄影时,会提取这些图像上方框里的颜色,来生成遮罩,并对各个部分进行后续处理。

1651889998807388.png

服装不同,颜色模型也会不同。下图是2018年的活动剧情里登场的泳装,尽管看起来用到的颜色不多,但颜色框的数量却不少。此外,由于这次用到的武器也不同,也需要完全重新制作。

1651889998588444.png

2020年正月登场活动服装如下,头发上的装饰设计则又不一样了。与之类似的和服,还会产生一个粘贴的操作,这时候会由摄影环节直接制作相应的素材。

1651889999357382.png

下面是主线剧情里登场的公主模式服装,虽然图上没画出来,但这套服装是有翅膀的,翅膀还有一套专属的颜色模型。此外,武器设定也不同,所以也配备了另一套颜色模型。

1651889999850995.png

下面是三周年活动的服装。可以看到,服装不同,各种细节装饰都不同,因此在角色处理时,颜色的变化也有所不同。

1651890000661941.png

同时,颜色除了受服装影响,还受到所用的动画场景的影响。下图是常规颜色的颜色模型,以及暖灯映照下的颜色模型。场景改变后,整体的颜色也改变为橙色基调,稍显偏暗的味道。实际结合视频看一下所用到的场景。

微信图片_20220507102620.gif

角色受到右侧暖灯的光线照射,尽管场景处于整体偏暗的夜里,但仍然给人一种温暖的印象。

1651890000862882.png

下面是相同剧情里用到的,更暗一些的室内场景的颜色。跟先前不同,整体以青色为基调,更偏暗。

1651890000360624.png

能看到跟上一段视频不同,角色皮肤没有用到偏红的处理,而是对整体施加了冷色调的处理。

1651890001949630.png

所以即便是相同的服装,也需要像这两个画面一样,针对不同的出现场景,适配不同的颜色。基于这种需要,我们针对相应角色的处理也会变化,哪怕是看起来相同的场景里,只要光线的照射方式等环境因素稍作变化,就需要重新处理相应的素材。

1651890002371997.png

因此,角色处理的时间如何缩短,就是一大重要课题。

角色自动化处理要解决的课题主要是三个:

1,通常处理一个角色需要三个工作日,这是因为在遮罩区分之后,要处理的图层最少也有50份以上;

2,为了确保能和外包用最少工序进行处理,所以事先进行了多次色彩数值的调整和设定;

3,PCR里登场的角色超过50名,新服装在每个月都会实装,所以随着运营的推进,要制作的量也在不断增加,而且提升现有角色品质也会带来更多的工作量。

为了解决这些问题,我们制作了如下的工具,来对相应工序进行自动化处理:

1,赛璐珞颜色区分工具;

2,部件遮罩整合工具;

3,赛璐珞颜色转换工具;

4,颜色模型重复色检查工具。

先看赛璐珞颜色区分工具。

在过去,我们是按照颜色、种类,来手动制作遮罩。而这个工具可以从颜色模型里自动提取颜色,并且程序化地生成遮罩。而且这套程序可以通过After Effects来使用,直接对颜色模型进行颜色的区分。具体看一下原理。

1651890002846951.png

颜色模型里,包含了对各个素材部件指定颜色的颜色框(Color box)。PCR用到的就是下图的形式,以前我们都是在After Effects里对每个颜色框提取颜色,再制作遮罩。然而,1个角色拥有100种以上的颜色,纯手动提取太折腾了。因此,我们希望能自动提取这些颜色。

1651890002178969.png

但具体怎么做?这个案例中,我们的切入点就是刚才提到的颜色框的特性。颜色框是由特定的大小、特定颜色的线条构成的,多个颜色框组合在一起,就成了一组颜色框。由于颜色框指定了颜色,那么只要识别了方框,就可以获得哪种颜色对应哪个素材的关系了。

1651890003122452.png

具体用到的识别手法,就是图像识别里比较简单的模板匹配法。由于颜色框的形状颜色是固定的,所以这种识别方法能判断出颜色框的位置信息,而且颜色模型里的颜色都是特定的BitMaP图像,所以也很好识别。

我们在这里用到的编程语言是Python,并且用模板匹配法指定完全一致的方框来进行检索。选择Python的理由是图像处理很轻松,而且程序也不复杂,我们便想直接用script语言来写,而且如果有必要,还能直接制作简单的GUI。

1651890003444735.png

为了进行模板匹配,我们分析了颜色框的特性。框格的形状如下图左上角所示,框线的颜色则分为蓝色和红色两种,提取根据这两个条件,可以得出单纯只有边线颜色的图像,如下图右侧所示。

1651890004647035.png

识别框格的时候,实际上用到的是只有边线的图像,如下图右侧所示。对比左侧的图像来看,这些边线的颜色没有用作角色各个部位的颜色。此外,虽然框格外会延伸出线条,但框格本身保留得十分完整。

1651890004223938.png

但是对上述结果应用模板匹配以后出现了一个问题。由于有些颜色框是成组出现,单独的颜色框和成组的颜色框形状不同,会导致组合被错误识别。

1651890005911850.png

于是,我们从框格衍生出的线条着手解决。单看实际的颜色框,单独的存在的颜色框不会紧贴两条以上的线条,多个框格相连的时候,相连的线条一定不少于两条,所以我们没必要识别一整个框格,只需要根据前面这个规律,识别框格连接线条的模式即可。

1651890005493504.png

为了识别相连的线条,我们对模板匹配所用的图像扩张了1个像素,以进行线条识别,于是就能锁定框格的实际形状。模板匹配时,针对单一框格实际用到的识别图像总共分为9种,由于单框格不会与两条以上的线条相连,所以很好区分。

1651890006373452.png

针对两两相连的框格,我们采用如下三种识别图像。两两相连的框格,特征是上下不会出现线条,如果有线条,只会出现在中间结合处的左侧或右侧。根据这个规则就能识别两两相连的框格,与三个以上的颜色框区分开来。

1651890007296296.png

如上所述,通过类似的手段,我们就能识别出各个颜色框。下图右侧就是实际用到的所有识别图像,识别工具如果检测到了对应的颜色框,就会从相应颜色框的文件当中,计算所包含的颜色种类,以供后续处理所用。虽然直接针对不同框格形状直接逐一识别的方式更轻松,但我们希望至今为止用到的框格都能直接适配,所以多花了些功夫。

1651890007941804.png

颜色框会根据每个框格的位置,来指定什么时候用什么颜色。比如,下图的颜色框从上到下分别用于高光、常规色、1号阴影、2号阴影。

1651890008569875.png

由于框格的位置可以准确识别,颜色的种类也就能准确地提取出来,这些信息都会输入到After Effects里,如下图右侧图像所记载的。以上就是颜色区分工具,以及颜色提取方法的介绍。

1651890008176210.png

下面来看素材部件遮罩整合工具。

如下图After Effects里按照颜色种类整合了各个素材部件遮罩的工具。刚开始,因为在区分遮罩之后,有需求提到想要生成一张只有常规色的遮罩,所以制作了这个工具。下图左侧粉色框内的部分,就是服装遮罩的常规色部分。由于通过图层名称就能辨别颜色的种类,所以我们可以单独提取出特定种类的颜色。通过选择多个遮罩图层,还可以提取出对应特效名的素材,生成额外的整合构造。

1651890008377060.png

下图是前面整合的遮罩构造中的特效的状态,根据生成的遮罩不同,可能会包含数十种以上的颜色,这里我们用OLM的Color Keep来对颜色进行整合,最多可以指定100种颜色,所以很适合用来进行自动化处理。

1651890009748894.png

下面要说的是赛璐珞颜色转换工具。

这套工具是为了满足「希望改变角色图像的颜色,或者转换场景的颜色」这类需求而制作的。而且本来在不同场景下就要使用不同的颜色,所以在颜色模型上也用到了这套工具。

1651890009116570.png

颜色模型如下图,左侧是常规色,右侧是第二部OP中夜晚场景用到的颜色。

1651890010571533.png

为了实现颜色的转换,我们制作了适配赛璐珞颜色的颜色模型转换工具。只要准备好转换前和转换后的颜色模型,执行这套工具,就可以生成基于赛璐珞颜色而调整的图层。这样一来,即便需要更换颜色,也不需要重新对素材上色。

1651890010924121.png

最后是颜色模型重复色检查工具。

这套工具可以检测颜色模型里是否存在相同的颜色。原本是用来检查相同颜色是否被用在了不合适的地方,但它也能用作从颜色模型中提取颜色的一种手法,所以后来也成了提高工作效率的一环。通过这个工具,不仅能节省检查各种出错细节所用的时间,也能在摄影之前复查,避免返工的情况。

比如说,下图的框格中存在相同的颜色。虽然它们所指定颜色的位置没有问题,但是不是不小心撞车,我们光看是很难确认的,毕竟人的肉眼无法正确掌握RGB的数值。

1651890011737819.png

存在相同颜色会带来什么问题?比如下图红框的部分,左侧是外衣的颜色,右侧是皮肤的颜色,如果这两者不小心被设定成相同颜色,那么本来是要对皮肤颜色进行的处理,也会在服装上呈现出来。这虽然是一个极端的举例,但为了避免这些不注意引发的错误,这套工具就很有必要了。

1651890011569097.png

这里我们用到的就是重复色检查工具了,用了这套工具,一眼就能看出相同的颜色。下图就是实际使用后的例子,我们对颜色框进行识别,用红线连接相同颜色的部分。如果有三个相同颜色的部分,各条红线的端点也会相互连接起来,方便肉眼识别。

在这个例子中,相同文本标记的框格被正确地连接起来,我们就能明白它们是相同的颜色。通过这个工具,应该颜色相同的部分,不应该相同的部分,都可以简单地检测出来。

1651890012554304.png

通过上面介绍的四个工具,我们最终得以在非常繁琐的角色处理环节,将耗时节省至三分之一以下。

1651890013839278.png

2  静止画自动生成

静止画的制作和一般的动画制作有着不同的部分,但摄影的基本操作不会有变化。简单来说,静止画就是在剧情里插入一张绘画。PCR里,静止画基本上都用与动画制作相同的手法来生成,而且能实现眨眼、张嘴的画面表现。

角色处理需要应用在所有登场角色身上,而且角色以外的赛璐珞素材也需要进行与角色相同的处理。下面这幅图像,就对三名角色、两把剑都进行了角色处理。除此之外的摄影操作基本没有变化。

1651890013605418.png

与一般的赛璐珞动画制作方式不同,这些图像可以实现眨眼等动作,但并没有用动画的方式来控制,而是采用游戏内程序控制、以压缩图像的形式来调用。因此,在摄影的时候,需要生成的就不是动画,而是连续的图像。于是如下图,在连续生成这些只有部分差异的图像时,又可以用到传统动画制作中的自动化制作流程。

1651890014772412.png

在自动化生成的时候,主要有两个课题。原本在PCR刚发售的时候,静止画是由外包来制作的,虽然后来决定在公司内部制作,但制作相关的规则还没搭建起来。同时,游戏刚发售时用的制作方式和公司内成员的制作方式不同,效率非常差。

为了解决这些问题,首先是以我们熟悉的动画公司为目标构建摄影的环境。其次在制作工具的同时,建立好所需要的各种制作规则。最后从制作成员的视角出发,构建一个适合制作成员习惯的摄影环境。

伴随自动化摄影的推行,我们在公司内各个部门的帮助下,建立了细致的制作规则。第一条规则,由于PCR一定会进行角色处理,所以赛璐珞素材会依据角色进行分类。第二条规则,由于静止画需要连续输出口型、眼睛不同的图像,所以要通过固定口、眼的图像格,以减少确认文件、整理的繁琐度,缩短耗时。这样一来,不仅核查更省时了,时间重置(TimeRemapping)制定起来也更简单了。

1651890015911387.png

在确定了基本规则以后,我们就推进了After Effects的自动化制作。为此,需要让软件自动读取大量的图层,并且按照正确的顺序进行排列。将这一环节自动化处理后,彻底省去了整理的时间,为摄影提供了更充足的时间。下面具体介绍一下赛璐珞、背景、LO参考文档的处理手法。

1651890015142654.png

赛璐珞可以进行文件读取,以及对各种素材进行必要的基本处理;也可以对color key和时间重置进行设定;同时在赛璐珞大小比较吃紧的时候,也可以对位置和锚点的小数点值进行整数补正;此外也能对赛璐珞文件进行指定规则的排序,避免手动产生的替换。

1651890016476864.png

背景文件在自动读取之后进行图层预合成,并按照BG和book顺序排列,这样可以节省需要对背景文件进行处理时的图层预合成操作。

1651890016186037.png

设计图以及摄影相关的参考文件也会按照便于调整的顺序排列。仅作为参考的文件,则会通过红线图层隔开,在渲染时避免产生影响。同时,标记了摄影这个词汇的文件,是摄影的概念文件,是摄影时必须查看的文件,所以用红底高亮显示。

1651890017514640.png

在提交成品的环节,过去的文件名和文件形式多少有一些模糊的部分,于是我们用下图左侧的工具,将其统一为同时进行保存和渲染的形式。这样一来,不需要制作成员的特别注意,成品都会直接按照统一的形式提交出去。此外,渲染后的图像可以直接通过Slack发送到专用社区内,上面记录了赛璐珞和BG的场次,以便于查重。

1651890017778915.png

通过以上的操作,我们收获了三项成果。其一是随着自动化的推行,团队搭建了能够立刻确认最新制作文档的架构;其二是很多反复操作和固定模板的处理都依靠工具避免出问题,节省了制作时间;其三是文件命名和提交都通过工具实现了自动化。



03 TA参与实际制作的优点

TA参与实际制作有两个好处,一是能从实操人员视角掌握整个制作流程,找到制作流程的优化点,二是能够通过深入沟通,得知工具的潜在需求。

对于第一个好处,以实操视角能发现更多可能提高效率的部分,并且能站在创作者的立场上,掌握产品最新的形态,甚至提出建议。尤其是用到游戏内的工具,会随着游戏的更新而产生新的需求,比如下面的案例。

微信图片_20220507102629.gif

第一个案例是眨眼、张嘴的预览动画制作工具。原本摄影输出的是连续图像,所以没有配备专门的预览视频。然而,眨眼、张嘴的时间点都是确定的,像游戏一样按照规则触发就能确认具体的效果,于是我们就制作了预览工具。下面就是实际的预览效果。

 第二个案例是静止画的分支图像生成工具。在确定表情规则,以及连续生成图像的制作方式后,切割图像特定区域的操作也进行了自动化处理。在过去,分支图像是由制作人员亲自确认每个角色的表情,切割产生表情变化的部分图像。

1651890019859381.png

但应用自动化工具后,能看到在PS里,制作人员只要选择大致的范围,就能进行切割操作。而且选择以后,工具会对比想听文件夹里的连续图像,检测出分支图像的影响范围,最终将切割控制在最小的范围内。然后在PS内会生成新的图层组,其中就包含了这些分支图像。

使用这套工具,不仅不需要肉眼确认就可以找到最优的切割范围,还可以将需要30分钟操作的图像,缩短到1分钟切好1个角色。此外,由于自动化处理也能自动命名,所以也不需要一个个检查切下来的图像名称。

再来谈第二个好处,面对大规模的项目和在家办公等情况,交流就显得极为重要。针对日常工作属于同一组的成员来说,构建一个能够进行杂谈的环境,就能获得良好的效果。

PCR的摄影团队设置了一个专供内部聊工作和闲谈的聊天群,成员就是现在负责摄影制作和管理的7个人。在需要与其他部门成员共享信息的时候,则会由负责的组内成员用专用频道沟通。而这个组内频道里,与工作相关的话题,仅限在摄影的范畴里,除此之外什么都聊。

1651890019191025.png

对于TA来说,做好工具后的反馈也十分重要,但公司内并没有相关的详细报告,这是因为伴随游戏运营,新内容的制作总是撵着大家跑,很少有时间做详细的报告。而在闲聊频道里,大家不仅能放下包袱聊天,也能收集到一些工具使用期间遇到的小问题,根据这些反馈,就能不断改善工具的性能。

以上就是本次分享的全部内容,我认为TA的本职,就是做出能满足制作流程和制作成员诉求的优秀工具,为制作最棒的作品,节省出宝贵的制作时间。一切都是为了那些鲜活的角色,感谢大家。

文章来源:

https://www.youtube.com/user/CygamesChannel/videos


消息来源:
Alex Matveev
2022-06-06 16:27:13
不合规
审核中
@苏某某: 她在音乐方面的喜好,以及对天文的兴趣,也源于这部动画的影响。一直很喜欢爵士乐的她突然开始想
乐方面的喜好,以及对天文的兴趣,也源于这部动画的影响。一直很喜欢爵士乐的她突然开始想,没有系统了解过此类音乐的她怎么会喜欢上 呢?后来听完《美少女战士》原声带后才发现,“原来我在那么小的时候
评论全部加载完了~