鹰角网络鹰角网络CEO黄一峰谈《明日方舟》3D和2D的结合方案

11月16日，以“创新思维，享受未来”为主题的中国团结在线科技大会正式拉开帷幕。在19日晚的专题游戏中，鹰角网CEO黄一峰、明日方舟制作人海茂以“创业团队的曲折发展:明日方舟3D与2D的组合方案”为主题进行了演讲。

昨天我们分享了Seacats讲的“明日方舟”从0到1的故事。在本文的第二部分，鹰角网CEO黄一峰详细介绍了《明日方舟》3D和2D的组合方案，并总结了游戏开发中遇到的一系列问题。

以下是这次演讲的记录:

大家好！我是黄一峰，明日方舟前期开发的技术总监，上海鹰角网的联合创始人之一。

刚才同事海茂从他的角度讲了《明日方舟》从0到1的故事。接下来，从我的角度和更技术性的角度，我来说说我们为什么选择这样一个结合3D和2D的画面表现方案，以及我们做了哪些工程和技术上的取舍。我会尽量用适当的力度解释，希望能给类似的入选项目一些提示，避免重复踩坑。

接下来是大致轮廓。首先，我将解释为什么我们选择3D和2D的结合。而且这个角度可能和海猫刚才说的不太一样。第二，我来说说我们计划的具体内容，包括场景和单元两个维度。再次，我将详细说明我们在开发过程中遇到的三个典型问题，希望能给大家带来一些启示。

为什么是“3D+2D”？

首先，我相信在座的同学并不是都知道或者玩过《明日方舟》，所以我先放一个15秒的战斗视频，来自我们的暑期活动《丛林猛归》。

你可以看到整个画面的风格和感觉都偏向于2D画面，人物、特效、弹道学、敌人，包括视角都是固定的，这是一个2D式的游戏。但更特殊的是我们在场景中选择了3D模型和部分真实感渲染。我们整个场景的建模、光照和渲染都是以部分真实感的方式实现的，包括以标准PBR为工作流程的制作和渲染。

这种组合比较少见，也是我们今天要描述的重点。整个战斗画面的摄像头失焦，也就是我们传统上所说的透视摄像头。其实单位和场景空的关系还是挺特殊的。接下来我会在遇到问题的环节详细描述。

为什么我们使用3D和2D的组合？我觉得还是比较简单的，3D写实风格更能配合《明日方舟》相对严肃的世界观和我们特有的艺术风格。而2D Q版反派可以展现人物魅力，避免自上而下视角的限制。

你可以回忆一下自上而下的游戏，尤其是像我们这样的游戏，基本都是从俯视的角度看战斗场景。它的大部分角色都被它的头顶遮住了，所以你可以看到角色实际上看不到它动画的细节，包括他们服装的细节。你看到的大多是大头。为了避免这个问题，我们决定用2D Q版的反派。

当然，最重要的问题是，作为一个创业团队，我们希望尽可能降低风险。所以我们希望在市场上选择一个相对成熟的2D动画方案，避免我们当时认为不是特别好借鉴的3D反派的方案。当然现在很多朋友都做的很好。

同时也想实践一下3D开发的过程，积累一些3D开发的管道和工作经验，所以最后选择了这么一个特殊的选型。现在这个选择有很多现实的因素，但最后经过实践，我们觉得它是独一无二的，也是相当特殊的。

好了，这个概念刚刚论证过。其实是海猫在项目初期创作的一张图片。当我们创建这张图片时，我们没有开始编写一行代码。这张图是为了让整个团队成员对我们的游戏会是什么样子有一个统一的认识。我们可以从繁琐或者抽象的规划案例，堕落到这样一个视觉概念。

可以看出，这张图中的很多元素与我们目前的选择是一致的，包括3D场景和2D反派，都是模糊的，而且整个镜头的透视方向其实与我们目前的选择高度相似，这也是我们的幸运。

可以看到左下角场景中有一个小人垂直站立。这种垂直站在场景上的行为，符合场景和角色的关系，但不符合我们视角下更好看的关系，像一张纸。这个问题也为以后的发展埋下了一些伏笔。

这张图是我们早期的一些设计和参考图片。左图是反派的早期Q版。我们有八个反派，但是我们在Q版反派上的选择和当时主流的头身比小的主题不一样。我们选择它的腿和身体会更长，头和身体的比例会更大。在这个方向上，我们融合了美国Q版反派的一些风格。

右边的参考图是ArtStation的一幅艺术家的作品，但我们可以看到，它非常符合我们对3D场景的审美，包括现实场景。

为什么？首先，它的画风是程式化的写实。其次，其整体构成以网格为核心单元。代替最后的四边形或正方形网格，它使用正六边形网格。但总的来说，这样的视觉感受非常符合我们的预期，所以我们也把它作为我们创作的参考。

明日方舟视觉方案

然后给出了视觉方案的详细描述。我们分为两部分。现场

第一部分是场景，包括3D栅格地图，地图周围的装饰物，地图后面的远视，地图上的可交付物或者一些小的装饰物。所有的3D模型都是用标准的PBR工作流程制作的，美术生的雕刻会专门做一些图案化和风格化的雕刻，但我们不会以较低的表面线条的方式追求卡通效果，我们的脸的数量相对较高。

其次，我们会在贴图方面做一些功能性的尝试，但是一般来说，我们并不是在做一个比较常见的类似游戏的日式RPG或者漫画风格，希望用比较写实的风格做一些区别。

在着色器上，我们的照明模型基于统一标准着色器修改的PBR着色器。之所以不使用Unity的默认标准着色器，是因为我们对其进行了优化，增加了一些我们需要的功能。单元

第二部分是单位。单位包括人物、敌人、第三方单位和许多可以交给顾客的2D物品。所有2D动画都是使用脊椎骨骼动画软件制作的。在着色中，我们使用特殊处理的未亮着色器，它不会受到任何动态照明和阴影的影响。之所以选择这种方式，并不完全是因为我们的技术限制，也是因为我们通过实验发现，如果做一些更激进的事情，整个场景中人物和敌人的识别会变得更差，玩家在玩的时候不一定能分辨出自己需要注意什么。

这部分也是我们进一步提升画面表现需要处理的问题，如何平衡游戏玩法和视觉效果。

我们场景的视觉方案会有这三张图片作为最直观的展示。接下来的三张图是我们的实际效果图。第一张图，就在刚才，大家看到了密林般的场景，可以看到场景的细节和剧情。

第二个场景是熔岩洞场景。第三张图是龙门的夜景，我们故事发生的主要地点。如你所见，这三张图片都在建设中。以上，我们使用了一个以网格为核心的高度抽象的框架。整体的灯光细节，模型贴图细节，以及一些周边的装修系统，比如一些建筑，一些管线，都很逼真。

我们整个视觉方案如下。首先，我们的场景使用统一PBR渲染模型。在着色器上，我们使用稍微优化和修改的BRDF2。我们在性能上做了一些调整，并增加了可着色的阴影，这在PBR着色器级别上获得了高质量，并适应了一些场景的特殊效果。

在光照贴图上，我们对Shader中光照贴图的编码和解码做了一些特殊的处理，使其在所有平台上都可以达到更好的一致性。后面的提问阶段我会详细描述。

每一个场景都会使用统一的静态烘焙方案，烘焙两个画面，一个光照贴图，一个阴影贴图，所以会有精致的光影表现。照明方案中会有混合动态光，也就是说我们在跑步的时候，只有一个动态光会搭配很多静态的烘焙光，在特殊情况下，我们会增加更多的探头进行一些静态的反射，给一些场景增加一些必要的视觉效果。

除了整个模型外，我们还会在场景中添加一些Unity提供的添加方案添加的滤镜效果和模型效果。你可以看到刚才视频里有一个瀑布，是通过特效实现的，会增加一些味道。

接下来是人物的视觉方案。我们的大部分角色都可以在右边的图中看到。在我们的脊柱项目中，我们实际上使用积极和消极的一面来扮演每个角色。

你为什么这么做？我们参考类似的游戏。很多2D游戏其实只有一个正面，但是刻意避免冲刺、穿刺等方向性动作，在画面上选择类似于德州使用的半圆弧形切割方式，可以模糊方向性，但是这样会大大限制我们艺术家对动作的创作，包括武器。所以在权衡之后，我们还是选择让大部分角色做两面，拆分一个动作，而其他角色，

这样我们就可以看到，在正反变化的过程中，我们做出了一个类似纸人变化的动画。这部动画的灵感来源于任天堂著名游戏系列《纸马里奥》中的类似画面。相比之下，我们这个游戏的效果和这个比较接近，可以看出灵感来源于这里。

明日方舟开发中遇到的三大问题

好了，接下来我将详细描述开发过程中遇到的几个问题。其实这些问题都是我们结合3D场景和2D角色造成的。因为这个方案比较少见，遇到的问题也比较少。希望能给大家带来一些提示。

空之间的关系错误

首先第一个是空的关系不对。就像我刚才说的，我们的场景和相机不是垂直于场景的，而是实际上和场景的X、Y平面成60度角。角色，因为我们要表现角色，必须面对场景，面对镜头。它垂直于场景的方向。通过几个简单的关系，就可以得到场景的X和Y平面。也就是说，我们的角色不是站在现场，而是躺在现场，或者说我们是躺在现场。其实是斜插，其结果可能是容易穿模。这里可能不太直观，可以看看这张图。