跳到主要内容

Gameloft 利用 Unreal Engine 与 SDF 技术还原 Bluey 2D 手绘风格

来源:80 Level编辑:Gameloft Brisbane发布日期:609330

Gameloft 布里斯班详解《布鲁伊的快乐快照》如何复刻手绘风格

在《布鲁伊寻找金笔》中重现手绘世界

《布鲁伊的快乐快照》邀请玩家与家人一同漫步于布里斯班的熟悉街景,陪伴布鲁伊与宾果展开冒险,并为角色、野生动物及不期而遇的瞬间拍照,以此打造专属的可定制剪贴簿。本作由 Gameloft 布里斯班工作室携手 Ludo Studio 与 BBC Studios 共同研发,现已正式登陆 PC、PlayStation、Xbox、Nintendo Switch 及 Nintendo Switch 2 平台。

让游戏呈现出宛如互动剧集般的质感,远比其干净亲和的外表所暗示的要复杂得多。游戏中的角色均由多层始终面向摄像机的 2D 平面拼合而成,并嵌入至三维场景之中。

这套混合管线成功保留了原作的比例、轮廓、动态姿势与精心把控的配色方案,同时并未限制玩家的自由探索与 360 度镜头旋转。通过与开发团队多位成员的深入交流,我们得以揭开这看似简约的视觉风格背后,所隐藏的技术深度。

提问

《布鲁伊》拥有现代动画中最具辨识度的视觉形象之一。在将这种 2D 风格改编为互动式 3D 游戏时,团队认为必须保留的最重要特质是什么?

回答

Sean Gobey(技术美术):《布鲁伊》温暖亲切的基调很大程度上是通过形体语言与美术风格来传达的。在将 Bluey’s Happy Snaps 转化为完全互动的电子游戏时,我们竭尽全力保留了原作的美术风格。每个角色都必须忠于原剧,因为他们的性格与行为大多根植于该媒介的表现形式中。在构建 Bluey’s Happy Snaps 的角色时,我们的每一项决策都旨在赋予动画师尽可能多的控制权与灵活性,以便在 3D 环境中还原《布鲁伊》的 2D 世界。

在研发阶段,我们选择在 Maya 中完成角色建模与骨骼创建,随后将所有绑定工作移至 Unreal Engine 5 的控制绑定(Control Rig)系统中进行。由于角色本质上是面向摄像机的“2D”平面卡片,我们必须搭建一套相当精密的系统,使动画师只需在一个角度上制作动画,即可将其复制到其他 7 个角度,并支持按需微调。对于偏技术的读者而言,我们大量运用了有向距离场(Signed Distance Fields, SDF)来为角色绘制纹理,这不仅赋予了画面“矢量图”般的视觉效果,还大幅节省了纹理内存占用。

我们在角色制作中结合了模型几何体与 SDF 纹理翻页动画(flip books)。一个典型的例子就是角色的手、脚和嘴巴。所有角色可以共享这些部位的纹理与几何数据。眼睛部分则完全通过着色器实现,利用 SDF 贝塞尔曲线绘制(感谢 Inigo Quilez 提供的优秀资源)。在此方案下,我们可以选择通过运行时控制绑定程序化驱动眼球的转动与眨眼动作,也可以由动画师在 Sequencer 中手动逐帧制作。

Karl Von Der Luhe(游戏总监):在美术风格方面,《Bluey's Happy Snaps》需要呈现出与电视动画版一致的外观与沉浸感。

Hannah Crosby(首席美术师):随着我们对《Bluey》的风格与美术深入挖掘,我们越发意识到其色彩搭配、造型语言乃至轮廓线背后所倾注的巧思,正是这些元素让作品呈现出举重若轻的简约美感。电视动画版全由手绘完成,每一笔都经过精心雕琢。因此,尽管团队曾尝试探索自动化美术生成方案,但最终仍决定对大量贴图及 3D 资产采用手绘方式。例如,手动绘制特定高光并逐层叠加阴影,是精准还原剧集独特光影艺术风格的唯一途径。

独特的造型语言是我们重点打磨的方向。在 3D 团队中,当资产使用具备完美几何形态的软件进行建模时,这种特质极易流失;唯有重新注入手工创作的刻意感,才能真正还原《Bluey》的神韵。

延续手工创作的主题,在无光照渲染的游戏中构建清晰可读的背景,需要对明度与色彩进行精细把控,以确保关卡内的视觉信息始终保持清晰,避免画面浑浊。同时,复刻轮廓线的视觉效果也是重中之重。为此,技术团队在 Unreal 引擎中开发了一套独特的着色模型,实时模拟 3D 资产的逆外壳效果。剧集中的轮廓线设定为固定粗细,不随物体与镜头的距离变化而改变;因此,我们的轮廓线也必须在资产远离游戏摄像机时保持恒定宽度,不能随之变细。

Dylan Perrett(动画副主管):从一开始,团队就明确要捕捉每集动画中蕴含的表情、嬉戏氛围与快乐气息。预制作阶段,我们投入了大量时间收集参考资料。从剧集片段、动画拉伸帧,到网友用番茄酱瓶估算 Bluey 身高的 Reddit 帖子,这些充满趣味的案例为我们提供了丰富的灵感来源。我们甚至有幸提前查阅了 Ludo Studio 的官方风格指南。希望最终成品能不负原作,让这些核心特质得以充分展现。

问: 能否为我们详细介绍一下《Bluey’s Happy Snaps》的美术管线流程?从参考收集、风格指南,到建模、贴图、绑定、动画、灯光以及最终实现,每一步是如何运作的?

Hannah Crosby: 我们的管线经历了多次迭代。为了还原《布鲁伊》的视觉风格,我们在角色、场景和动物资产上采用了截然不同的制作思路,因此各条管线差异很大。在参考收集阶段,我们始终优先以原作剧集为基准;同时我们也进一步研究了剧集本身使用的风格化参考,以便在创作那些没有直接剧集对应参考的独特资产时提供指引。

一旦确定了剧集参考或概念设计,场景美术师就会在 Blender 或 Maya 中进行资产建模,确保严格贴合原作的造型语言。贴图通常以简单的纯色基底为主,辅以少量手绘细节,并结合一种自定义着色器。该着色器允许我们通过不同的贴图添加贴花、平铺细节和阴影。本作中并没有传统意义上的动态灯光系统,所有光照信息均由美术人员在贴图或材质中手工绘制。不过,为了加快制作效率,我们也会在材质内部使用可自定义的方向光来为部分资产添加自阴影信息。

与任何项目一样,整体工作流也在不断演进并呈现出多种形态。轮廓线就是一个很好的例子:我们最初尝试将其作为后处理效果实现,随后改为几何体方案,即使用反向外壳(inverse hulls)勾勒剪影,用样条曲线(splines)绘制内部线条。而在最终定稿的方案中,游戏内的 3D 资产(例如动物模型)则采用顶点颜色来控制着色器生成轮廓线的分布位置。配合用于控制环境材质叠加图层的多套 UV 坐标,这些 3D 资产内部承载了相当丰富的数据信息。

尽管如此,对于游戏中的动物角色,我们依然保留了反向外壳方案,因为在该特定应用场景下它的表现最佳。对于需要被角色手持的资产,还有一个额外的“压平”步骤——当玩家拾取它们时,资产会在着色器中被压平,以便与 2D 角色进行交互。而角色本身的制作管线则完全不同,因为它们并非传统意义上的 3D 模型。角色的身体由在 Maya 中建模的 2D 平面构成,并使用 SDF(有向距离场)贴图来渲染各个身体部件。这些部件通过一套自研的 3D 骨骼系统进行绑定,使得具备 3D 动画经验的美术人员可以直接在 Unreal Engine 中使用 Control Rig 对其进行动画制作。

剧中的角色看似简单,实则不然。其造型、比例、表情与姿态均极为考究。团队如何将布鲁伊(Bluey)、宾果(Bingo)及全家福成员转化为 3D 形象,同时忠实还原原作设计?

汉娜·克罗斯比(Hannah Crosby)

为契合《布鲁伊》剧集的精髓,我们需要开发一套适用于 2D 角色的创建与动画制作方法,以便团队中受过 3D 训练的美术师与动画师能够顺利协作。该过程历经数月研发,期间我们反复尝试并测试多种方案,多次重构制作管线。

最终,技术美术设计了一套基于 SDF 纹理的方案:将纹理 UV 映射至分层 3D 平面,再将平面蒙皮至 3D 骨骼,最后在虚幻引擎(Unreal Engine)中完成绑定与动画制作。此举既精准还原了 2D 角色的视觉风格,又实现了其在 3D 空间内的自由移动。角色创建的第一步是收集参考图,以复刻全部 8 个视角的角度。

随后,角色美术师确定角色配色方案,借助 Maya 中的自定义工具与专属 SDF 管线预览各视角效果,同时使用 Photoshop 与 Substance Designer 绘制身体各部位贴图。SDF 纹理在 Maya 内完成组装,并同步进行绑定与蒙皮操作。模型导入虚幻引擎后,即可配置材质与色彩曲线。

迪伦·佩雷特(Dylan Perrett)

在 Ludo Studio 的指导下,我们时刻关注那些赋予《布鲁伊》独特魅力的细微之处。制作具备正确重量感、动态线与表现力的动画至关重要,同时必须保证动作清晰易读。

此外,鉴于 Bluey: Happy Snaps 支持玩家多角度观察角色,团队制作了支持 360 度旋转、步长为 45 度的资产。我们很快发现,尽管该设定符合游戏逻辑,但原剧集极少使用 0 度或 90 度的正交视角。因此,平衡游戏玩法逻辑与剧集风格预期成为关键所在。

核心问题

将 2D 动画风格与 3D 环境、摄像机运动、光照以及玩家自由探索相结合时,面临的最大技术或艺术挑战有哪些?

Dylan Perrett

在 Unreal Engine 中为《布鲁伊》(Bluey)这样深受喜爱的角色制作动画是一项巨大的挑战。我们的控制骨骼系统带来了一套独特的限制。例如,七个视角各自拥有独立的控制参数。我们通常会先在一个主视角上完成关键动画,然后利用内部工具进行复制,并逐一清理其余六个视角的动画数据。此外,这类比例的角色本身存在明显的形变极限,因此摸索骨骼系统在何时、何处会发生异常变形,成了颇具趣味的工作。项目初期,重点并非寻找骨骼会“崩坏”的位置,而是确定它能正常工作的范围。

另外我们始终牢记一点:在对话镜头中,保持角色张嘴的状态有助于我们提前识别出那些可能遮挡口型同步、影响可读性或以不理想方式破坏骨骼结构的姿态。

Sean Gobey

我认为最大的挑战在于为模型师和动画师开发专用工具,让《布鲁伊:快乐快照》(Bluey's Happy Snaps)中的角色真正活起来。制作过程中很快便显现出来,游戏的大部分内容都需要围绕角色的能力边界来设计。一个显而易见的例子是:观察角色时若将摄像机向上或向下倾斜,就会暴露其 2D 立绘的本质。我们在开发阶段发现了大量此类限制。这带来了不小的困难,因为角色骨骼系统的频繁更新有时会直接导致之前的动画数据失效。

Hannah Crosby

在 3D 世界中构建 2D 角色是一大难点。起初,为了让人物与环境融合得更无缝,我们将许多游戏摄像机锁定在了固定机位。但后来我们发现玩法需要加入一台由玩家手持的 360 度拍立得相机,这就必须想办法压平分层的 3D 平面,以免从意外角度观察角色时打破视觉错觉。

实际上,当游戏摄像机环绕角色旋转时,角色本身已经会切换至不同视角,而这一额外步骤能有效避免从锐角透视时暴露出构成角色的 3D 平面。动画制作原本最多需要针对 8 个视角分别创作,但我们开发了一套复杂的骨骼系统,允许主要在单一视角下完成动画并自动转换信息,极大提升了效率。

此外,我们还加入了微妙的着色器驱动补间动画,防止角色在不同视角间生硬跳变,从而更好地融入 3D 场景。场景光照并非动态变化,角色也不会对游戏内的光照改变做出反应,这在很大程度上简化了相关技术处理。

遍历关卡并未带来实质性问题,但让角色坐上去或与 3D 资产进行交互,仍然是最具挑战性的难题之一。拾取物体时将其压平处理解决了一部分交互问题;不过,该方案也使得资产能够自然嵌入构成角色的 2D 平面之间。

问题一

Bluey 的世界充满了柔和的色彩、熟悉的家庭空间以及充满趣味的环境细节。在构建既忠于原作、又能支持探索、互动与摄影玩法的场景时,你们是如何着手设计的?

Karl Von Der Luhe: Bluey 的故事背景设定在 Brisbane,我们的开发工作室也位于此地。这使得团队能够实地探访剧中出现的灵感来源地,如 South Bank、New Farm Park 和 Mt Coot-Tha,并将这些地点真实地还原到游戏中,既贴合剧集风格,又展现了我们城市的特色!

Hannah Crosby: 我们的工作室恰好设在 Bluey 故事发生的城市 Brisbane,这让我们非常幸运。我们可以实地走访剧中的实际取景地,为游戏收集有趣的彩蛋细节。融入只有本地人才能心领神会的元素,虽然小众,却极大地增强了场景的真实感,这是一件非常令人愉悦的事。我们需要在保留该区域标志性元素与支持自由漫游玩法之间取得平衡,因此美术与设计部门进行了大量的思考与协作,最终设计出的关卡布局既忠实于原作的描绘,视觉上引人入胜,又清晰明了且具备高度的互动性。

问题二

由于 Bluey 的 Happy Snaps 核心玩法围绕拍照展开,游戏必须确保从玩家视角看,每个场景都充满魅力。相机机制是如何影响场景构图、角色调度、动画表现以及视觉叙事的?

Karl Von Der Luhe: Bluey 的 Happy Snaps 鼓励玩家进行探索,每个关卡都有许多熟悉的角色可供结识,并提供了丰富的互动乐趣。部分场景专门布置了适合拍摄迷人照片的契机;而更多照片则取决于玩家的选择,其中包含大量地道的澳大利亚本土动物可供捕捉。如果有第二位玩家配合摆姿势入镜,也能进一步帮助玩家拍出令人难忘的照片!

Hannah Crosby: 宝丽来相机的设定让我们在主线摄像机视野之外的区域隐藏了许多有趣的惊喜,从而鼓励玩家深入参与游戏的摄影环节,同时也促进了他们与开放世界玩具的互动。

色彩搭配与光照对于传达剧集的氛围至关重要。所有资产都严格匹配了这一调色板,并根据其是否为交互对象、前景或背景进行针对性调整,以提升场景的可读性。我们从电视剧的风格中学到的一条经验是:有策略地精简细节,以确保场景构图清晰易读。明度与饱和度被刻意用来将元素推至背景或吸引视线。在使用取景器观察时这一点尤为重要,以免玩家产生迷失感。

每个场景都需要精心布置,确保从任何角度观看都清晰可读且富有吸引力,因为玩家随时可能掏出相机环顾四周。摄像机移动存在一些刻意限制,旨在防止玩家破坏二三维融合的视觉错觉;同时,我们在 NPC 的放置位置及其可交互物品范围上也受到了诸多约束。不过从玩家的实际体验来看,游戏最终呈现出的感受依然相当自由、不受拘束。此外,我们还在“微距”相机功能中埋藏了许多有趣的瞬间,该功能让我们得以精心打造一系列精美的特写镜头,以此呼应《布鲁伊》(Bluey)中那些细腻逼真的画面,从而在短暂的时间内有效提升真实感与细节表现。

提问

布里斯班游戏工作室(Gameloft Brisbane)在视觉方向、审批流程、动画参考以及确保游戏契合剧集基调等方面,与 Ludo Studio 和 BBC Studios 的合作有多紧密?

Karl Von Der Luhe

Ludo Studio 和 BBC Studios 是非常优秀的合作伙伴,双方定期共享参考资料与设计规范。作为游戏开发专家,我们还获得了充分的创作自由,可以根据自身判断不断优化核心玩法循环。

Hannah Crosby

我们的技术美术师与动画师曾深入 Ludo Studio,详细了解他们为 Bluey 角色搭建的 2D 骨骼系统,并学习遵循“布鲁伊风格”进行动画制作的具体规范,以便将这些经验转化到我们自身的动画管线中。

我们与 BBC Studios 及 Ludo Studio 保持了高度紧密的协作,以确保 Bluey 及其家人的行为举止始终符合角色设定,并准确传递剧集的核心价值观。针对游戏中的所有资产、交互逻辑与过场演出,双方始终保持持续的沟通与严格的审批流程。每一项资产都必须忠实于 Bluey 的世界观,并在剧集的整体背景与时间线中逻辑自洽。

特别是在过场演出环节,我们有机会在复杂度与品质上对标原版剧集动画。审批机制促使我们反复打磨、多次迭代,只为确保玩家体验能真正还原出观看一集正片般的沉浸感。

本作面向家庭及年轻玩家,登陆了包括 Switch、Switch 2、PlayStation、Xbox 和 PC 在内的多个平台。性能、可读性与无障碍设计是如何影响你们的美术与技术决策的?

Hannah Crosby: 低端平台的性能一直是个难题,但我们希望支持这些设备并提供相近的体验,因为许多核心玩家仍会在这些平台上游玩本作。轮廓着色器与复杂的角色绑定是主要的性能瓶颈,因此我们通过在 LOD 和纹理压缩等方面进行优化来挽回性能,力求不牺牲角色表现,毕竟角色才是本作的绝对主角。

合理分配多边形面数也至关重要。所有造型的柔和边缘在近距离观察或通过宝丽来镜头查看时都需要更高的面数,但这也会带来性能压力。

哪些工具、引擎工作流、着色器或自定义渲染技术帮助团队在实时 3D 游戏中还原了《布鲁伊》扁平而富有插画感的魅力?

Sean Gobey: 《布鲁伊:快乐快照》中的角色制作真正体现了团队协作的力量。当玩家游玩游戏时,我们会从建模、绑定、动画、着色器和代码中提取数据,在运行时动态构建它们。我们角色美术管线的核心依赖于 Signed Distance Fields 与虚幻引擎的 Control Rig。缺少其中任何一项,本项目都无法完成。

在最终确定使用 Control Rig 之前,我们的首席技术动画师 Dave Shaw 曾花费数月时间摸索更传统的方案。尽管 Dave 成功搭建了一套系统,但其灵活性不足,也无法支持快速迭代与新功能开发,因为角色管线的大部分环节都要求玩法代码、动画、曲线与材质之间实现紧密集成。

文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片

原文较长(约 20,010 字),完整内容请浏览更多。

【本文结束】

如需转载,请务必注明出处:glTFs

相关阅读

《戴帽子的猫》CG动画导演谈视觉设计与故事扩展

DNEG Animation负责制作,Erica Rivinoja与Alessandro Carloni联合执导。两位导演阐述了如何将原著短篇扩展为长片,通过原创角色和全新视觉风格,为现代观众呈现充满童趣与想象力的改编作品。

# Trajeform:人群数据嵌入

人群仿真旨在生成丰富、自然且与周围环境相适应的智能体行为。机器学习的最新进展使得此类行为模式能够直接从轨迹数据中学习,从而使仿真模型能够捕捉日益复杂的人群动力学特征。然而,这些系统的能力仍然高度依赖于训练阶段所使用的数据类型及其多样性。 在评估人群仿真器对真实数据集的泛化能力时,大多数现有指标主要关注轨迹层面

UniffordInteractor:基于统一功能推理的人机与多物体交互生成

针对现有方法在复杂多物体交互场景中的局限,提出UniffordInteractor框架。该框架利用微调的3D多模态大模型进行统一物体中心的功能预测,并通过分层自回归生成实现逼真的长时序人机与多物体交互,实验表明其性能超越当前最先进方法。

MG-CD-MPM:基于强化学习的多态材料灵巧操作物理模拟

提出 MG-CD-MPM 模拟器,通过局部化损伤求解与双向工具耦合,实现软体、脆性及粘塑性等多态材料的实时大变形模拟。该 Gym 兼容环境支持在线强化学习,成功演示了切割、挖掘等操作任务。

基于视觉语言模型与优化的城市3D植被布局生成方法

该研究提出一种在3D城市场景中自动放置植被的新方法。利用条件视觉语言模型生成俯视图,结合CMA-ES优化算法调整植物尺度与资产替换,并通过阴影和声学代理模型评估目标函数,实现兼具美学与功能性的城市景观布局生成。

NeuOctree:基于稀疏八叉树的神经显式3D表面表示

NeuOctree提出一种神经显式3D表示,直接在稀疏八叉体素角点存储特征并插值,预测射线与表面的交点、法线和反照率。该模型无需网格提取即可实现直接表面渲染,支持开放几何结构,并在多项对比中取得最低位置误差,实现了高效的几何与外观联合重建。

评分
暂无评分
共 0 条
点击登录后即可评论
200字

暂无评论,快来抢沙发吧~