Gameloft 谈《Bluey’s Happy Snaps》：用 SDF 贴图、2D 面片与自定义 Shader 在 UE5 中复刻手绘风
《布鲁伊的快乐快照》邀请家庭探索布里斯班周边的熟悉地点，与布鲁伊和宾果一起游玩，并为可自定义的剪贴簿拍摄角色、野生动物和意外瞬间。这款以摄影为核心的冒险游戏由Gameloft 布里斯班与 Ludo Studio 和 BBC Studios 合作开发，已登陆 PC、PlayStation、Xbox、Nintendo Switch 和 Nintendo Switch 2。
让游戏看起来像一集可互动的动画，远比其干净、亲切的视觉效果所暗示的要困难得多。布鲁伊的角色是由分层、面向摄像机的 2D 平面构成，并放置在三维环境中。
其结果是一套混合制作流程，旨在保留剧集的比例、轮廓、姿势和精心控制的色彩搭配，同时不妨碍玩家自由探索其世界或通过 360 度摄像机观察。我们与开发团队的许多成员进行了交谈，以了解在看似简单的视觉风格之下，究竟隐藏着多少复杂性。
《布鲁伊》拥有现代动画中最具辨识度的视觉特征之一。在将这种2D风格改编为互动3D游戏时，团队认为必须保留的最重要特质是什么？
Sean Gobey，技术美术：《布鲁伊》那种非常温暖友好的基调，很大程度上是通过形状语言和风格传达的。在将《布鲁伊》的 Happy Snaps 改编为完全互动的电子游戏时，我们尽可能保持《布鲁伊》的美学。每个角色都必须让人感觉忠实于电视节目，因为他们的个性和动作有太多都植根于这种媒介。在构建《布鲁伊》的 Happy Snaps 角色时，所做的每一个决定都着眼于给动画师尽可能多的控制权和灵活性，以便在3D中让《布鲁伊》的2D世界活起来。
在我们的研发阶段，我们选择在 Maya 中为角色建模并创建其骨骼，然后在 Unreal Engine 5 的控制绑定（Control Rig）中完成所有绑定。由于这些角色本质上是面向摄像机的“2D”平面卡片，我们必须构建一个相当精细的系统，让动画师能够在一个角度上制作动画，然后将其复制到其余7个角度，并能在需要时进行调整。对于更偏技术的读者：我们大量利用有符号距离场（Signed Distance Fields）来为角色制作纹理，因为这赋予了我们“矢量外观”，还额外带来了大幅节省纹理内存的好处。
我们为角色结合使用了几何体和 SDF 纹理翻页书（flip books）。一个很好的例子是角色的手、脚和嘴巴。我们能够在所有角色之间共享手和脚的纹理与几何体。眼睛完全是在着色器中用 SDF 贝塞尔曲线完成的（感谢伟大的 Inigo Quilez 提供的资源），我们可以选择通过运行时控制绑定以程序化方式驱动眼球快速转动和眨眼，或者由动画师在 Sequencer 中手动制作。
Karl Von Der Luhe，游戏经理：《Bluey’s Happy Snaps》需要在美术风格上看起来和感觉起来像电视节目的互动版本。
Hannah Crosby，首席美术师：我们越深入探究《布鲁伊》的风格和美术，就越意识到为了让它看起来如此毫不费力地简单，人们在色彩搭配、形状语言甚至轮廓线上投入了多少思考。《布鲁伊》电视节目完全由手绘完成，并且经过费力的手工创作，因此尽管我们尝试了一些方法来试图自动化美术生成，但最终我们许多纹理以及 3D 美术都需要采用手绘方式。例如，绘制特定的高光并手动放置阴影，是准确捕捉节目所创造的艺术化光照处理方式的唯一方法。
那种独特的形状语言是我们努力想要达到的效果，因为当资产在具有完美形状的程序中建模时，这种语言在 3D 团队中很容易丢失；需要重新引入手工创作的刻意性，才能真正感受到《布鲁伊》的味道。
延续手工制作这一主题，在无光照游戏中创建清晰可读的背景时，明度和颜色需要特别的用心和意图，以确保视觉效果在整个关卡中保持可读，并且不会让场景变得浑浊。复现轮廓线的外观也是重中之重。为此，我们的技术团队在 Unreal 中开发了一种独特的着色模型，为我们的 3D 资产实时模拟反向外壳（inverse hulls）的效果。 节目中的轮廓线被设定为无论物体距相机多远都保持一致粗细；因此，我们的轮廓线不能因为资产离游戏相机更远而变细。
Dylan Perrett，副首席动画美术师：从一开始，团队就知道我们想要捕捉该系列每一集中所呈现的表现力、玩趣和快乐感。在前期制作期间，我们投入了一段时间收集参考资料。从系列片段和 smear frames 到试图用番茄酱瓶推断 Bluey 身高的 Reddit 帖子，有太多有趣的例子体现了我们想要捕捉的特质。我们甚至有幸得以一窥 Ludo Studio 的风格指南。我们希望自己已经公正地呈现了这部剧，并让那些核心感受得以彰显。
你能带我们完整梳理一下《Bluey’s Happy Snaps》的美术管线吗？从参考资料收集和风格指南，到建模、贴图、绑定、动画、灯光以及最终实现。
Hannah Crosby: 我们的管线经历了许多次迭代，而且为了呈现 Bluey 的风格，角色与环境必须采用非常不同的做法，动物又是另一套做法，所以这些管线差异很大。我们收集参考资料时始终以剧集为最高优先参考，但也会更进一步，研究剧集所采用的风格参考，以帮助我们在制作没有明确剧集参考的独特资产时有所依据。
一旦剧集参考或概念设计确定，我们的环境美术师会在 Blender 或 Maya 中为资产建模，确保符合剧集的形状语言。贴图通常是简单的色板颜色基底，加上一些手绘细节，再配合一个着色器，让我们能够使用不同贴图添加贴花、平铺细节和阴影。《Bluey’s Happy Snaps》中没有真正意义上的灯光，所有光照信息都在贴图或材质中手工制作。不过，我们确实会在材质中使用可自定义的方向光，为某些资产添加自阴影信息，以加快流程。
与任何项目一样，整个工作流程不断演进，并呈现出多种形态。一个很好的例子是描边：最初我们将其作为后处理效果进行测试，之后又尝试几何体方案，使用反向壳处理轮廓，并用样条线处理内部线条。在最终方案中，3D 资产（例如游戏内的动物资产）使用顶点颜色来控制着色器生成描边的位置。再加上用于控制环境材质中叠加层的多个 UV 集，这些 3D 资产包含大量信息。
不过，我们在游戏中的动物上保留了反向壳方案，因为它在那个特定用例中效果最好。 会被角色手持的资产还有一个额外步骤：被拿起时将它们“压平”，这样我们的 2D 角色就能与它们互动，而这一步是在着色器内完成的。角色本身则是一条完全不同的管线，因为它们并不是传统意义上的 3D。角色的身体由在 Maya 中建模的 2D 平面组成，并使用 SDF（有符号距离场）贴图进行贴图，以渲染身体各部位；这些部位使用自定义的内部 3D 绑定进行绑定，这样我们受过 3D 训练的动画师就能在 Unreal Engine 中直接使用 Control Rig 为它们制作动画。
剧中的角色看上去简单得具有欺骗性，但它们的形状、比例、表情和姿势都极其讲究。团队是如何把 Bluey、Bingo 以及家里其他成员转译成 3D，同时让它们忠实于原版设计的？
Hannah Crosby：为了保持《Bluey》电视剧的精髓，我们必须开发出一套创建和动画化 2D 角色的方法，让我们那些习惯 3D 的角色美术师和动画师也能上手使用。这涉及数月的研发，我们在此期间尝试并测试了多种方案，并多次重新设计我们的制作流程。
最终，我们的技术美术师创造了一种方法：使用 SDF 纹理，将其 UV 映射到分层 3D 平面上，这些平面蒙皮到 3D 骨架上，而骨架则在 Unreal Engine 中完成绑定和动画。这样我们就能在让角色于 3D 空间中移动的同时，精确匹配 2D 角色的外观。创建角色时，第一步是收集参考，以复现全部 8 个角度。
随后，我们的角色美术师为角色创建了调色板，并使用独特的 SDF 流程配合 Maya 中的自定义工具来预览这些角度，同时用 Photoshop 和 Substance Designer 为身体的不同部位创建贴图。SDF 纹理在 Maya 中组装，绑定和蒙皮也在那里完成。模型导入 Unreal Engine 后，再设置材质和颜色曲线。
Dylan Perrett：在 Ludo Studio 的指导下，我们始终留意那些让《Bluey》独一无二的细微之处。对我们来说，至关重要的是制作出具有正确重量感、动作线和吸引力的动画，同时保持动作清晰、易读。
此外，由于《Bluey’s Happy Snaps》允许玩家从各种角度观看角色，团队按 45 度增量制作了完整 360 度旋转所需的资源。我们很快意识到，虽然从电子游戏的角度看这很合理，但系列剧本身很少使用 0/90 度角度。因此，在电子游戏逻辑与系列剧的风格预期之间取得平衡变得至关重要。
在将2D动画外观与3D环境、摄像机运动、光照以及玩家控制的探索相结合时，最大的技术或艺术挑战是什么？
Dylan Perrett：为像《布鲁伊》中那样深受喜爱的角色在虚幻引擎中制作动画是一项巨大的挑战。我们的控制绑定给我们带来了一系列独特的限制。例如，七个角度中的每一个都有一套独特的控制。我们会为一个主要角度制作动画，并使用各种内部工具复制，然后清理动画以适配其余六个角度。此外，具有这些比例的角色存在明显的限制，因此找出绑定何时何地会出问题是一项有趣的练习。早期，这个过程与其说是寻找绑定会出问题的地方，不如说是寻找绑定能正常工作的地方。
我们一直牢记的一点是，在对话镜头中，让角色的嘴巴张开可以让我们识别出任何会阻碍口型同步、影响可读性或以不良方式破坏绑定的姿势。
Sean Gobey：我想说最大的挑战是为建模师和动画师创建工具，让《布鲁伊的快乐快照》中的角色栩栩如生。在制作过程中，很快就明显发现，游戏的许多部分需要围绕角色能够做什么来设计。一个明显的例子是在观察角色时向上或向下倾斜摄像机，因为这会暴露它们的2D外观。我们在开发过程中发现了许多这类限制。这被证明很困难，因为频繁的角色绑定更新有时会使之前的动画无法使用。
Hannah Crosby：在3D世界中创建2D角色是一个巨大的挑战，最初我们锁定了许多游戏摄像机，使它们更无缝地融合。然而，当我们发现需要在玩法中加入360度玩家手持宝丽来相机时，我们需要找到一种方法来压平分层3D平面，这样当从意想不到的角度观看角色时，错觉不会被打破。随着游戏摄像机围绕角色旋转，角色已经会切换到不同角度，但这一额外步骤有助于避免从锐角看到构成我们角色的平面。
动画本身需要在多达8个角度上制作，但我们开发了一个复杂的绑定，使我们主要在一个角度上制作动画并转移这些信息，这极大地加快了过程。还有一些微妙的着色器驱动的补间在进行，以防止角色在角度之间出现跳变，这有助于将它们融入3D环境。场景中的光照不是动态的或变化的，角色不会对游戏内光照变化做出反应，这极大地简化了问题。
在关卡中穿行并没有带来任何真正的问题，但让我们的角色坐在3D资产上或与之交互仍然是最具挑战性的问题之一。在拾取物体时将其压平解决了部分交互问题；然而，还要让资产能够适配构成角色的2D平面之间。
《布鲁伊》的世界充满柔和的色彩、熟悉的家庭空间和充满趣味的场景细节。你们是如何打造既忠实于剧集、又能支持探索、互动和拍照玩法的场景地点的？
Hannah Crosby：我们非常幸运，工作室就位于布里斯班——《布鲁伊》故事发生的城市，因此我们能够实地探访剧中出现的真实地点，为游戏中加入有趣的彩蛋细节寻找灵感。加入只有本地人才能认出的元素，同时又能增强场景的真实感，这真的是一件很愉快的事。我们必须在纳入该地区标志性元素与支持自由漫游玩法的区域之间取得平衡，因此美术和设计部门投入了大量思考与协作来设计关卡布局，使其既忠实于剧中的呈现、视觉上吸引人，又清晰且可互动。
由于《Bluey’s Happy Snaps》是围绕拍照构建的，游戏需要让每个场景从玩家视角看都充满魅力。拍照机制如何影响了环境构图、角色走位、动画和视觉叙事？
Karl Von Der Luhe：《Bluey’s Happy Snaps》鼓励玩家探索，每个关卡都有许多熟悉的角色可以相遇，也有互动乐趣。有些情境是为拍出迷人照片而设置的；还有许多照片则由玩家自行决定，可以拍摄许多真实的澳大利亚动物。让第二名玩家在画面中摆姿势，也增添了玩家创作难忘照片的乐趣！
Hannah Crosby：拍立得相机的使用让我们能够把有趣的惊喜藏在主游戏摄像机看不到的区域，鼓励玩家去体验游戏的摄影内容以及开放世界的玩具。
色彩搭配和光照对于传达剧集的感觉非常重要，每个资产都与该调色板相匹配，并根据它是可互动的、前景还是背景进行调整，以增强场景的可读性。我们从电视剧风格中学到的一课是，有策略地削减细节，让场景构图清晰易读。明度和饱和度被刻意用来把元素推向背景或吸引注意力。当通过取景器观看时，这一点尤其重要，这样玩家才不会迷失方向。
每个场景都必须经过精心策划，从任何角度都可读、有吸引力，因为玩家可能随时掏出相机四处查看。摄像机的移动有一些限制，刻意防止玩家打破2D/3D的错觉，我们在NPC可以出现的位置以及它们可以互动的物体方面也受到很多限制。不过，最终我认为从玩家的角度来看，游戏给人的感觉相当自由、没有约束。我们还在“微距”相机能力中藏了一些有趣的时刻，这让我们得以精心安排一些非常漂亮的近景场景，向《布鲁伊》中精美渲染的近景镜头致敬，短暂地提升真实感与细节。
在视觉方向、审批、动画参考以及确保游戏忠实于剧集基调方面，Gameloft Brisbane 与 Ludo Studio 和 BBC Studios 的合作有多紧密？
Karl Von Der Luhe：Ludo Studio 和 BBC Studios 是非常棒的合作伙伴，会定期分享参考资料和指导方针。他们还给予我们作为游戏开发专家的创作自由，让我们可以按照自己认为合适的方式来推进玩法循环。
Hannah Crosby：我们的技术美术和动画师与 Ludo Studio 共度了一段时间，以更好地理解他们如何为 Bluey 角色创建自己的 2D 绑定，并学习以 Bluey 风格进行动画制作的“规则”，以便我们能将其转化到自己的动画中。
我们与 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 搭建了一个可运行的系统，但它不够灵活，也无法实现快速迭代和功能实现，因为角色管线的许多部分需要游戏代码、动画、曲线和材质之间的紧密集成。
Hannah Crosby：我们的工具、着色器和引擎定制必须非常贴合这款游戏的需求。 如前所述，需要创建一个全新的着色模型，以捕捉纹理特定的无光照外观，并加入动态描边。 我们还为 Maya 构建了大量自定义工具，以加快通过添加顶点颜色来控制描边着色器的工作流，此外还有我们的技术美术师在多个项目中打磨出的标准导出和导入管线工具。
我们的角色可能是我作为角色美术师以来见过的最独特的管线。 由于需要制作 8 个角度，美术师们有特定的工具，可以在模型和纹理构建过程中预览它们。
使用的 SDF 纹理包含红、绿、蓝和 alpha 通道遮罩，因此在 Maya 中需要自定义材质来在构建过程中预览预期的颜色，因为角色的最终外观只有在它们最终进入 Unreal 并设置好材质和颜色曲线后才会呈现出来。我们的动画师从使用 Maya 转为在虚幻引擎中使用 Control Rig 制作动画，这还包括自定义工具，以便根据需要从所有 8 个角度查看动画，然后再将它们编译成动画蒙太奇用于游戏内。
对于80 Level的艺术家和开发者读者来说，把这样一部深受喜爱的2D动画剧集改编成一个玩家可以探索、拍照并在其中游玩的互动3D世界，最大的收获是什么？
肖恩·戈贝（Sean Gobey）：对原始素材有深入的理解非常重要。当你知道自己为什么做某件事，以及它会在整个项目的脉络中如何被使用时，做出有意的决定就会容易得多。我还觉得沟通以及对整个游戏开发流程的扎实理解至关重要。了解每个部门，并理解你的工作如何与它们对接，能让你有能力帮助创新和解决问题。也许如果你换一种做法，程序就可以省去整个步骤？或者设计正在绕开一个本可轻松解决的问题？美术可能在做一些不必要的事情，因为他们不知道还有更好的办法。
汉娜·克罗斯比（Hannah Crosby）：我在这个项目上学到的最大的教训是，永远不要低估技术美术在遇到一个看似不可能解决的问题时所展现出的韧性，而且当你跳出框框思考时，真正了不起的事情是有可能实现的。这无疑是我做过的最具技术挑战性的项目，而且它与画面看起来如此干净简单形成了直接对比。这也是一个绝佳的机会，去深入了解这样一部标志性剧集的艺术推理和精心策划的视觉呈现。我认为，作为一名艺术家，通过拆解《布鲁伊》中每个场景在视觉上为何如此奏效，我学到了很多关于构图、色彩和形状语言的知识。
所以，对于你们的读者，我想说，花点时间去尝试拆解你最喜欢的游戏和节目中的视觉是如何构建的。走进那些做出这些决定的艺术家的头脑，看看你能学到什么。
迪伦·佩雷特（Dylan Perrett）：愿意适应变化。到前期制作结束时，我们意识到Maya无法胜任让这个项目成为现实所需的工作流程。幸运的是，我们的技术美术肖恩（Sean）一直在摆弄UE的控制绑定，作为潜在的替代方案。我承认，一开始我很抗拒离开Maya转而使用另一个软件。幸运的是，UE5.6中推出的动画更新让过渡比我最初担心的要简单得多。归根结底，工具和工作流程总是在不断演进。做一个Maya/Blender/Unreal Engine动画师没那么重要，而做一个会使用Maya/Blender/Unreal Engine的动画师要有利得多。
喜欢这篇内容吗？