如何在LOL中成功制造一颗飞弹？

作者：Riot Game VFX首席艺术家Beardilocks 2020-06-01

作者：Riot Game VFX首席艺术家Beardilocks
原文链接：
https://realtimevfx.com/t/anatomy-of-a-league-of-legends-missile-part-1-creating-areas-of-focus/11614


大家好，

我是英雄联盟（League of Legends）皮肤特效首席艺术家奥利（Oli "Beardilocks" McDonald），今天我将在这里和大家讨论如何在LOL中成功制造一颗飞弹。

通常，在查看学生作品，候选人的艺术测试或者新同事的作品时，总是会出现同样的话题。我想在此提供一个全面拆解(Breakdown)，它来自于我为了改进他们工作的一些建议，希望它能够帮助到大家。

对此我们将通过分析联盟中一些设计非常成功的飞弹，并将其与可以改进的飞弹放在一起进行对比。

所以让我们先来看看被我认为是联盟中最成功的飞弹之一来开始：



这是长者之森维嘉的Q技能-黑暗祭祀。它会在一条直线上发射飞弹，从而伤害它所击中的前两个目标。这个皮肤的主题是充满了德鲁伊，仙子，妖精和森林精灵的神奇森林。这个宇宙中的维加是一只淘气调皮的森林精灵。

它的效果制作来自于联盟VFX艺术家Kelvin Huynh

那么，这枚飞弹成功的几个方面是什么：


这里有很多需要考虑的地方，但首先我们需要定义在联盟中什么是成功的VFX，以及在游戏中制作视觉效果时我们所需达到的目标：

英雄联盟的视觉效果目标

• 视觉传达游戏玩法(GamePlay)，同时最大程度地减少信息干扰或者杂乱。
• 促进皮肤的主题或者美感。
• 创造令人惊叹的视觉效果，让我们的玩家感到惊讶和喜悦。
  

这就是我们的3个目标。最重要的是，这是一个精心安排的列表。作为世界上最优秀的电子竞技之一，视觉清晰度(Visual Clarity)对于游戏的健康至关重要。因此，对于我们的游戏而言，最重要的目标是清晰明确地传达游戏玩法，但是我们也想实现我们促进皮肤主题的目标（在本例中为“ 长者之森”），并且创造一些令人惊叹的视觉效果。

最好的方法是在我们的效果中创建清晰的焦点区域(Areas of Focus)。

一、焦点区域

我将通过与插图的对比来证明该点。

我希望你对一些艺术品进行对比。仔细观察它们中的每一个，并告诉我你所认为的焦点区域在哪儿：


在这张图片照片上，你很难知道要把眼睛放在哪里，因为我还没有创建出清晰的焦点区域。

如果一切都很重要，那么什么便都不重要

让我们转到另一个完全极端，告诉我此图中的重要内容：


很显然，这个圆圈非常重要，但是它一点也不有趣。没有传达主题信息，也不会使你感到惊讶或喜悦。

现在，再来让我们看看世界上最著名的画作之一。


相比之下，让我们看看德拉克洛瓦的画作，你的眼睛马上便被举着国旗的自由女神所吸引。她站在与风格化的背景形成鲜明对比的地方，被光晕所笼罩，手里拿着场景中唯一饱和的颜色：三色旗(红色)。在这幅画中你还有很多事情需要去做：主题被清晰地传达出来，但是艺术家以一种使你立即知道其中最重要的人物的方式创作了它。自由女神便是焦点区域。

伟大的艺术具有焦点区域和休息区域。

让我们看看另一幅名画，分析艺术家创造焦点区域的方式：


同样，这是一幅视觉上很吸引人的画，它清晰地描绘了一个主题，但焦点清晰。前景和背景都是由人物组成的，但是我们会自然而然地首先关注前面的那些人物。让我们看看这是为何如此：


这些是艺术家用来引导我们的视觉并创建焦点区域的工具：

• 1.灰度值（或亮度）
• 2.色彩（或饱和度）
• 3.形状（或细节）
  

焦点区域具有以下属性：

• 最高和最低值（严格来说，指最高对比度）
• 最高饱和度
• 大量细节（例如，形状比背景更为锐利）
  

让我们把这些知识应用到我们的VFX上。

我们知道，VFX在比赛中的最重要的目标是视觉传达游戏玩法。因此，我们关注的焦点领域应该是传达游戏玩法的要素。在这种情况下，飞弹的正面是会伤害对手的区域，因此这应该是我们的“焦点区域”或者说是“首要元素”。飞弹的任何为了促进主题的部分，都应该是次要元素。


我们使用灰度值，对比度，饱和度和形状，以确保游戏区域为主要元素，所以我们已经实现了我们的目标：传达游戏玩法。但是我们仍在不断地促进主题，因此我们实现了“ 促进主题”的目标，我们为角色增加了一个初始效果，增加了玩家的满足感，而且效果一般都很不错，所以我们实现了让玩家惊喜和愉悦的目标。

前面我们讨论了如何使用在我们的武器库中的工具来制作“焦点区域”，吸引玩家的注意力到技能中最重要的部分。但是我们怎么才能知道最重要的部分是什么呢？在本文中，我们将向你介绍如何尝试通过视觉效果传达信息。

二、我们正在尝试通过VFX传达什么？

当我们为游戏制作视觉效果时，很少有人会想到，我们的唯一目标是制作一些看起来很酷的漂亮糖果。通常，VFX代表一种能力或动作，无论是飞弹，火箭爆炸还是魔法。因此，我们通常会尝试向玩家传达一些有关这些技能或者特殊能力的重要信息（以及使其看起来很酷）。所以，在联盟中我们想用飞弹来传达什么？

• 这是什么能力？
• 它有什么作用？
• 它会带来多少影响？
  

回答这些问题将有助于你设计视觉效果，以最有效地方式将这些信息传递给玩家。让我们进一步地来拆解

这是什么能力？

你需要有效地传达给玩家的信息中，最重要的部分可能是该视觉效果所代表的能力。

因此对于游戏中的每一种独特能力，你都应该通过某种独特的设计语言与该技能或效果所关联，以便玩家可以一目了然地学习和辨识出该能力。

这是《英雄联盟》中的一个例子。

莫甘娜这个角色会发射一枚飞弹，如果该飞弹命中你，你将在原地被禁锢几秒钟。


为了使得该能力变得容易辨识，它将具有一些特殊的设计元素，有别于联盟中的所有其他飞弹：


这些元素共同为飞弹提供了只有莫甘娜的暗之禁锢才所具有的独特外观。

而到了现在，当我们制作皮肤时，除了角色设计之外，我们经常会更改视觉效果的外观。这可能会带来一定的挑战性，因为我们需要在换色后仍然保持可辨别性。因此，在创建每个技能时我们都要为其创建一个强大且独特的视觉标识，并且为每一种皮肤都坚持该设计语言，这一点尤为重要。这意味着我们可以更改视觉设计的颜色或者其他方面，并且仍然保持可辨识性。


译者：riot近年来，通过大量出售皮肤的换色包。换个色系搭配便能恰钱，也是传统异能。关于具体又是如何搭配，可以通过逆向解包游戏文件，得到VFX纹理的源文件。可以看到，riot的shader通过了一张又一张的超小文件体积Gradient Map，得以快速换皮。以下将提供两篇官方文章以及末日使者的特效文件参考，如果想要学习riot的换肤色系搭配，建议拆开相关纹理进行学习参考，其背后的shader为DX所写，方便学习。




开发者基地 - 英雄联盟官网 - 腾讯游戏
https://lol.qq.com/nexus/pc/detail.html?tagtype=128&docid=6323488896084167623

Elementalist Lux: 10 Skins in 30 Megabytes
https://technology.riotgames.com/news/elementalist-lux

• 为每种能力建立一个独特的视觉标识，允许玩家快速将角色与其玩法关联起来
  

这些在实际比赛中尤其重要，因为能力通常具有着具有多重效果或者是独特的交互作用。对于其他游戏（例如射击游戏）也是如此，尽管独特的提示有可能是子弹后面的独特烟迹或者是枪口上特定形状的闪光。

它有什么作用？

即使每种效果都有着独特的设计，但是玩家仍然需要玩游戏或者阅读技能说明来理解每种技能的作用。LOL是一款拥有近150个角色的游戏，每个角色具有5（或更多）种能力，因此有750多种独特能力，全部具有独特的VFX！实在是有太很多需要学习和记忆的内容！

作为视觉设计师，我们希望帮助玩家在玩游戏时能够尽快了解某项能力，最好是在游戏间隙进行研究。

因此，当能力拥有着彼此相似的效果时，我们希望建立并使用一套共享的视觉设计。

让我们以莫甘娜的暗之禁锢技能为例。当它命中目标时，会将其禁锢在原地几秒钟，以防止它们移动。

请注意，被莫甘娜命中的目标，在她周围的地面上有一个环，并且会有一个圆柱从上面冒出，这看起来会阻止她移动。这是我们在游戏中为类似这样的词根，所建立起的视觉设计语言。在开发新的视觉效果或外观时，如果是禁锢能力，我们将会尝试使其看起来与其相似。这里有一些例子：


我们还应用了许多其他规则来传达我们的技能视觉效果。包括但不仅限于：

治疗技能应该是绿色的，并且其形状不应令人感到威胁




魔法护盾有脉冲线扫过它们




能够将目标击飞的能力具有强大的垂直元素

• 对具有类似效果的能力，保持一致的视觉设计将会帮助玩家更快掌握它们，并能更容易地理解游戏机制
  

另一部分是利用现有电子游戏中的比喻来传达状态效果，如中毒、沉默或眩晕。在尽可能的情况下，我们都应该使用更直观更为令人理解的视觉设计，而不是试图在每个效果上重新发明轮子。


它会带来多少影响？

你的技能会造成大量伤害吗？还是你的攻击就像打台球一样？

作为VFX艺术家，总有一种诱惑力，让你创造的一切成为你所能想象到的最为令人惊艳、令人满意的视觉奇观。

但是，关键的是要使用可用的视觉设计工具来传达能力的强大程度。就像我在第一部分中所提到的那样，如果一切都很重要，那么什么便都不重要。

因此，造成更大伤害的技能应该更大，更明亮，更有威胁性，形状更尖锐，更加引人注目。


然而，有更多的因素需要考虑，而不仅仅是伤害。例如，如果一个技能会引起眩晕，禁锢或者其他状态效果，它应该有一个比单独造成伤害的能力更具影响力的视觉效果，因为禁锢将会导致一个玩家容易受到其他敌人的后续攻击。另一个需要考虑的问题是，这个技能你是否可以躲避？或者是当施法者隐藏在视线之外时，这个技能很可能会突然弹出。

我们在游戏中为新皮肤做的一个有用的练习是，让设计师为我们提供一个视觉层次文档，他们将一个技能的重要等级从1-10分打分。这有助于我们在制作VFX时，确保视觉重要等级和游戏玩法重要等级所匹配。下面是莫甘娜的视觉层次文档以及引用值的示例：


这为我们提供了在视觉上打造技能的重要等级的粗略指导。通过遵循这些指南，我们可以确保即使是在复杂的团战中，一次可能发生大量VFX的情况下，我们游戏中最重要的技能和能力也会马上脱颖而出。


你可以在文档中看到，我们不仅对玩家，而且还针对他们的敌人和其队友，评价了视觉上的重要等级；如果这些值相差很大，我们可能会考虑制作从不同角度观看结果不同的视觉效果。莫甘娜只有一种能力，其重要性差异足以确保不同角度，能够产生不同的效果：

让我们来看她的R技能范围圈：


在这种情况下，这是莫甘娜和受影响目标游戏玩法的重要信息-她的敌人需要离开圈，以免被链条所禁锢，莫甘娜必须设法确保敌人不会逃离自己。但是，对于她的队友来说这些并不重要，因为该圆圈并没有提供任何会影响他们游戏的信息。由于它只会给队友增加视觉混乱，因此该圆圈仅显示给莫甘娜和受链条影响的目标。这有助于我们最大程度地减少团战中的视觉混乱。

• 了解游戏中各种能力对于游戏的影响后，你可以使用VFX创建清晰的视觉层次，以传达技能的重要等级，并最大程度地减少不必要的混乱
  

因此，在着手制作效果时，你会提出一些问题，这些问题将会帮助你在设计视觉效果时指导你的创意决策。

（未完待续.....）

作者：Katana编译
译者专栏：https://zhuanlan.zhihu.com/c_1164910784064282624

参与评论