从AFK2里提炼游戏视觉表现-拆解篇|动画|遮罩|afk

作者：Leo张凌鹏 微信：zk6763023

前言阐述：

一直想利用闲暇时间写篇文章介绍下视觉表现设计，正好最近一直在玩美服的AFK2，那就借爆品的设计进行一个简单的分析和介绍，睡前班门弄斧一波了！

视觉表现设计简而言之就是对游戏产品的视觉包装或者说是动效包装。涵盖了整个游戏的动态表现、特效、和衔接转场等，更高阶一点的还需要设计分镜。不过当前大部分游戏产品的视觉表现设计基本是基于UI交互设计的基础上进行系统的开启、常驻、关闭、衔接部分的动态+特效的美术设计制作。

在具体功能上，视觉表现功能设计=功能动画+UI动画+特效+模型（SPINE）动画+运镜+环境变化等等。

视觉表现设计其实更像是一个系统美术敲定后的精修过程，需要考虑到美术资源、功能以及性能消耗。先模拟演示，后精准实现复刻。视觉表现设计师不仅需要把握游戏的调性，实现阶段也要很好的协调相关板块的逻辑，才能很好的把想要的效果呈现给玩家。

AFK2整个游戏的视觉设计在美术层面的特点、手法以及节奏都非常好，性能上在资源利用率以及功能复用上也很自然。可以看出团队的视觉表现设计能力有一套很好的框架和功能支持。行云流水的视觉表现设计不仅仅能提炼产品的交互特点，同时能加深玩家的体验记忆，对于后续产品续航有很大的助力。

产品解析：

这边就从AFK2里边常见的几个表现设计给大伙一个直观的拆解分析：

角色创建系统手法：模型动画+UI扰动+UI动画

这个系统的开场视觉表现通过3D模型的立体感结合2D的界面设计，让画面立体了许多。在功能层面上能看到是红框标准部分流体带遮罩的扰动和人物溶解。

注册名字阶段手法：模型待机动画+UI扰动+UI动画+运镜（新增）

注册系统的视觉表现让我提神的是那一瞬的运镜，还保留了扰动的UI点缀效果。玩到后边我发现扰动的这个设计是AFK2的视觉表现的特点元素之一。在背包，获取物品，升阶等很多系统都有起到一个丰富入场动画的作用，把整个视觉表现的元素关联性串了起来。

首冲+开战+抽卡表现手法：压暗蒙版（新增）+UI动画+粒子特效+溶解+遮罩动画（新增）

找了几个视觉表现手法和元素比较相似的系统，很有特点的一个元素动态设计。大量的规则纹理溶解渐隐配合UI动画和遮罩的细节动画让整个看起来结构和层次表现都很丰富，UI资源的设计和拆解不得不说也很用心。

战斗结算手法：遮罩动画+预制体切换+UI动画+3D模型行走动画+字体带通道遮罩（新增）

战斗胜利整个表现大概2.8秒左右，利用3D模型动画+UI表现配合让战斗结束多了一种MVP的既视感。预制体的切换节奏也卡得很好。

拆解好以后，几个表达的核心元素也就一目了然了。

核心表现元素规则化纹理

流体扰动模拟

星星粒子贴图

流体纹

整个游戏体验下来，视觉表现中这几个核心元素是比较明显的，也让玩家记忆深刻。还有几个系统有利用相机深度做了景深模拟效果这里就不过多赘述了。

AFK2一直保持着个性浓郁插画风，配合层次感丰富的视觉表现设计，给人一种丝滑的体验感。当然这和性能优化得很好也有关系。很多系统出现了3D模型资源和模型动作结合UI和材质功能去增加画面的活度，这种手法在2D游戏也可以和SPINE结合去展现，效果也会很不错 。

总结概述：

分析完说说视觉表达设计的意义。

• 产品体验上，游戏里每个系统会更加生动有趣，丰富玩家体验感。同时能很好的引导玩家的视觉聚焦点和想传递给玩家的情绪，更好达到系统开发的目的性。
• 开发上面，项目前期立项和系统开发阶段，能有效降低系统试错成本。能在短时间内模拟出几个视觉表现模板，进行开发前的设计研判。
• 产品开发后期上，视觉表现设计模板产出后，能好精准的传达给美术和程序需要拆分优化那些美术资源，程序需要开发哪些功能，兵合一处，加快开发效率。
• 质量把控上，视觉表现的前期制作能快速的匹配各个系统的风格和节奏，传达给玩家的感受是否符合预期，及时对各板块进行矫正。
  

当然，视觉表现设计的制作也需要注意一些问题。

视觉表现设计师要熟悉比较多的软件，同时也要了解一定的TA常识，才能判断哪些设计是可以实现的，同时有哪几种方法实现，这样能更好的告诉TA你需要哪些功能加持。

在UI板块，笔者踩过一些坑，很多UI设计师的PSD的元素拆分不精细，以及UI元素刚好卡边并不完整，这对于视觉表现的设计会比较限制。

同时整个视觉表现开发过程中一定需要提炼共同点，在上边AFK2项目拆解里，相信大伙已经懂我的意思了。

最后整理了一个比较糙的思维导图

时间匆忙，不能尽善尽美，欢迎开发者和美术大佬们多指导交流！