《英雄联盟》VFX视觉风格指南

作者:杨曦UEDC GameUE 2020-09-21 24.3k
感谢YAng的分享,本文基础内容来自编制@Katana个人汉化,由英雄联盟VFX学科指南所编制。

我把PDF内容重新整理,希望挖掘其中的设计方法论结构,希望未来也能对我们团队的设计也做一次拆解与沉淀。

1、确定设计指导思想

设计理念、设计哲学、设计目标

设计理念

创造引人注目的视觉效果

设计哲学

无论是魔法,火焰,烟雾,爆炸,还是临时的闪光。英雄联盟的视觉效果行为准则是让这些元素都变得生机盎然。

通过统一的视觉风格,来实现核心目标。

VFX核心目标:

  • 动效视觉清晰,无混乱信息
  • 提供促进冠军主题的视觉效果
  • 创造令人惊讶和喜悦的效果

2、确定信息主次关系

明确焦点区域,减少玩家视觉干扰

VFX设计师必须对《英雄联盟》有着深刻的理解,才能清楚地将游戏玩法转换为具有吸引力和可读性的视觉体验。(必须特别熟悉自己的游戏,或同类游戏。否则你不可能知道什么是焦点。)

为了做到这一点,设计之初一定要定义“主要”和“次要”的视觉元素。要确保每一个视觉风格都能提高游戏玩法的清晰度,减少可能会令玩家感到困惑的视觉干扰。

主要元素规则

  • 它是一个效果的焦点
  • 它作为法术的主要用途
  • 效果可以清晰而准确地传达游戏内容

次要元素规则

  • 元素提高对应主题的吸引力
  • 通过亮度、饱和度来支持主要元素
  • 元素运用多种色调增强整体视觉吸引力

例如,日蚀技能的主要元素是日食的边界,玩家必须能够很轻松地识别出效果的半径范围。次要效果是圈内微弱的电能,它们被用于增强源计划系列皮肤线条的主题。


如何准确定义主要元素与次要元素:


主要元素

  • 较高的亮度范围
  • 强烈的亮度对比或饱和度对比
  • 轮廓清晰
  • 高不透明度
  • 坚固的形状
  • 剧烈的运动

次要元素

  • 较低的亮度范围
  • 小尺寸
  • 轮廓模糊
  • 低不透明度
  • 简单的形状
  • 不易察觉的运动

定义应用效果的清晰度:

对于一场比赛的体验来说,清晰度至关重要。游戏玩法的准确表现可以使玩家和观众清楚地理解和预测游戏玩法。

不准确的表现

提莫的蘑菇爆炸半径大约是600单位。然而,蘑菇的爆炸却只覆盖了它半径的一半,而且还缺少一个区域指示。


准确的表现

欧米茄小队的提莫用了一个不明显的圆环来显示AOE,爆炸的影响范围被准确地表现出来了。


效果分配的重要等级

一个效果的视觉表现应该向玩家和观众传达出它的重要等级。例如,一个基础攻击效果和她的终极技能效果具有着相同的视觉重要等级,那么它就会让玩家或观众感到困惑。

按重要等级进行设计规划,可以确保界面与所有视觉效果的功能所匹配。在确定效果的重要等级时,有评估3个核心要素:

可读性

玩家和观众可以立刻理解其效果的用途

强调点

视觉效果引导玩家专注于重要技能,同时减少团战中的视觉干扰

重要程度

每一种视觉效果都应与游戏玩法的重要等级所匹配

拉克丝基础攻击VS终极技能

重要等级的设计规则

重要等级可以由大小、形状、时间分配、亮度、饱和度和不透明度来控制。每个粒子的重要性应该对游戏玩法影响的程度来决定,如下所示:



建立视觉拉杆

定义和使用亮度、颜色等范围

确定亮度范围

控制亮度范围是视觉传递的关键。所有的技能效果都应有着不同等级的亮度范围和不透明度规范,以确保每个视觉效果的能量等级能够被准确表现。

VFX亮度范围准则

  • 亮度范围越高,焦点便越集中
  • 对比可以创建清晰的影响范围
  • 避免使用100%或0%的亮度,因为它可能会混淆游戏环境或UI



VFX饱和度范围准则

  • 更高饱和度范围可以吸引更多视觉焦点
  • 对比可以创建清晰的影响范围
  • 避免使用100%或0%的亮度,因为它可能会混淆游戏环境或UI


与模型的对比范围

比模型有更高、更宽广的亮度范围和饱和度范围。



常用调色板







4、创建形状与时间规范

形状语言配合时间节奏形成设计风格

形状是定义VFX艺术风格的另一个主要元素,它可以帮助减少视觉干扰,常见形状包括:简练的细节、手绘纹理、柔软和尖锐形状的混合、清晰的轮廓和移动物体的纹理。

VFX纹理形状准则

  • 所有纹理都需要用简练的细节来手工绘制
  • 纹理需要是柔软和尖锐形状的混合

不准确的表现

避免使用带有过多细节的照片纹理或视觉效果,因为它会产生不必要的干扰。


准确的表现

线条软硬结合的手绘纹理效果最佳。


创建清晰的外形轮廓

创建清晰的形状是减少团战中的干扰、快速沟通游戏和传达法术主题的关键。

不准确的表现

由于在效果上有太多的细节和对比,很难分辨出实际物体在哪里移动,以及效果的形状是什么。


准确的表现

这是一个极好地正确形状轮廓的表现。它的形状很简单,但是它有着足够大的亮度范围来创建焦点。


VFX时间分配准则

  • 所有效果都应该具有预备和消散
  • 衰减能量可以通过改变亮度、色调、饱和度、不透明度或大小来表示
  • 色彩变化、亮度或不透明度是影响效果时间分配的重要因素

利用时间来传达游戏玩法

一个效果的时间分配传达了特定的游戏时刻。


动态时间分配增强其艺术感

动态的时间分配创造了最具影响力的时刻,为玩家创造了更高的满足感,并且增加了其对于效果的兴趣。

不准确的表现

由于投射效果是线性时间分配的,因此它所爆发出的冲击波创造了一个不那么有趣的时刻。


准确的表现

艾克的R是动态时间分配的,它创造了非常具有影响力和强力的时刻。


总结

触类旁通,按照《英雄联盟技能动效风格指南》进行拆解,对界面动效也可以整理出类似的设计指南,树立自己独特的风格语言,更高效、高质的保障视觉统一性、信息传达的准确性。

下图是我拆出来的指南结构,期待我们的游族UEDC团队在今年能产出一份《XX项目界面动效设计指南》,合适的话也会分享给大家。(赶快分享、点在看,支持一下吧。)



来源:GameUE
原文:https://mp.weixin.qq.com/s/A52B2GFLH6BRebDBpsCWhQ

相关推荐

最新评论
暂无评论
参与评论

商务合作 查看更多

编辑推荐 查看更多
FB出海
推广