谈一谈《英雄联盟手游》渲染技术与画面

来自 Lute Li 2020-11-09
深度

[ 转载自 Lute Li ]

谈一谈《英雄联盟手游》渲染技术与画面

经过千难万险我终于在第一时间玩上了《英雄联盟》的手游,专门开一篇,谈谈《英雄联盟手游》的画面。

先看看PC版本《英雄联盟》的问题

《英雄联盟》作为一个上帝视角游戏,人物在战斗画面里占比极小,拿一张截图为例。

v2-83922ca710dd002ddb406e461afd4846_720w.jpg

1080p分辨率标准,4个角色加起来占比3%!平均一个角色才0.75%左右。

v2-2182db86efdf273ba44a7f8cdcea649e_720w.jpg

按画面贡献来排序,优先级应该是:地图>UI>特效>人物。

回想《英雄联盟》以往的更新,也的确是按照这个顺序在优化内容。

常看Riot技术分享的人应该清楚,他往往是讨论人物设计,特效制作等。之口不谈渲染相关内容,因为Riot知道这是自己短板,没什么可以说的。

几年前有人公布过第一人称《英雄联盟》视频,近距离看人物模型,来看一组对比图。

v2-dba5003d8bf1c083cd8938903dbc72cc_720w.jpg

PC《英雄联盟》原画和游戏模型对比(近几年的做好了不少)

所以在玩家群体里,常把英雄皮肤叫“付费PPT"。买的只是一张图片和技能特效,游戏内的人物只能自己脑补。

画面渲染的提升

先说下一个词:unlit。无光模型。

很好理解,在模型上画画,涂啥色最终就是啥色,没有灯光,没有亮暗面,想要影子就自己画黑点。

unlit几乎没有计算量,兼容各种低端设备,早期手机游戏常使用unlit来渲染模型。这也是《英雄联盟》常被人诟病"就是个手机游戏"的原因。

v2-4d6b727dc60236db663cd1e4da8e0935_720w.jpg

Riot已经把unlit做到了极限

对比下《英雄联盟》的竞品,《Dota2》和《风暴英雄》。

v2-91af6469b15aa9070658ad80e0eda0ea_720w.jpg

不像《英雄联盟》人物展示是一张图片,他们都是用3D模型,所以对渲染要求较高。其中Dota2使用魔改BlinnPhong来渲染。有兴趣的可以看下我之前写的dota2渲染)

常用技术按年份来排:Unlit→Lambert→Blinn-Phong→各种PBR。

而这次《英雄联盟手游》,是直接从Unlit跳到了成熟的PBR渲染。(可能还是魔改BlinnPhong?等抓帧老哥文章)

打个比方,类似于小学里的第一名,突然跳级高考进大学,而且大学成绩还名列前茅。

下面是游戏内截图。

v2-f86a9b08fb24392b70fb1229911aeeaa_720w.jpg

法线和漂亮的亚光高光(注意看眼睛下的一抹泪水)

v2-81f01bd932b707887c117cacc888ba06_720w.jpg

金属

v2-f8b2ad0a87b5a4ed590860f5f611da3b_720w.jpg

3S皮肤(像蜡一样)

v2-da9e40f86dfb20827b339f16276072ed_b.gif

霓虹反射(我也不确定是反射球就这么花哨,还是加了张ramp图)

顺着发丝的各向异性高光

制作过游戏的伙伴应该清楚,单看每个技术都不难。但是想让一直做unlit材质的美术,能一口气做出这么完备的效果,可不是一件易事,很考验团队能力。

人物展示界面的特写镜头

每个角色都有自己的特效镜头,甚至于特殊皮肤特效镜头还不一样。

普通镜头5秒左右,像kda的镜头有接近10秒。(这次手游简直是kda专场)

v2-2c34d4e3742fb91faac3da98eb3838f5_b.gif

每个角色!每个特殊皮肤!都有一个单独的特写镜头!

想想这个复杂程度。

物理模拟

裙摆,头发,在展示界面都有着相当精准的摆动。

  • 摆动起来形状很好看。

  • 除大幅度摆动外,少有穿帮现象。

v2-f45d227903c01f21f2ca023135986d0d_b.gif

资源无缝加载卸载

每个角色和皮肤,都有自己的 模型/贴图/背景/音效/特效/动画 等一系列美术资源。

正常加载下一个模型,需要三步:加载下个资源,显示内容,卸载上个资源。

这一来二去难免会卡一下,但在《英雄联盟手游》里,随意切换皮肤和角色,几乎是瞬间加载。

v2-270f7f0aa3428f6cb3a5d76d5c45ccac_b.gif

同样是unity,为什么你这么不合理。嘛时候官方发文章讲讲啊,急死了。

v2-94cdb1025b0dd57cd3cd71310b1f7038_720w.jpg

顶尖的UI设计

《英雄联盟》的UI设计,水平绝对是第一梯队。

v2-d88f18d3b6450811e6970d7e5777625b_720w.jpg

ui更新

《英雄联盟》的UI风格整整改过4版。

从最初模仿《魔兽争霸》,到具象的碉堡形状,到逐渐扁平化,到现代风格。不是修补,是整个风格推倒重来4次。

试问还有哪个游戏有这种魄力,《英雄联盟手游》完美继承了整套UI。

v2-dd2f73279ceca0ae163ca50558a748d5_b.gif

注意看(压缩太猛,建议看视频,原版比这好一万倍)

  • 每个元素出场和入场都有自己的顺序和动画

  • 前置菜单出现会模糊后面的画面(类似于景深)

  • UI的不同材质感,金属镶边/宝石/雾气/布料等

  • UI上的光效

动画,缩放,深度,材质,光线。

这不正是微软发的设计风格:Fluent Design,有兴趣的可以了解下。此前我只在《明日方舟》中见过这么高级的UI设计。

再打开某款moba游戏看看,有没有感觉这两个,一个是工艺品一个是儿童玩具。

听说你想做游戏??第九课 用户界面设计小程序

感兴趣的可以看下官方发的ui设计视频。顺便关注一下这个官方号,太可怜了才8w粉。

新的业界标杆已经出现

《英雄联盟》另一个很惊人的成就,是在美术风格上,让全世界达成了统一。邀请各国的美术家去设计角色,最终撮合成大众风格。不至于局限在亚洲。

受众广,手游,还在渲染技术上补齐了自己的短板。

相反,很多公司该紧一紧,过去还能说《英雄联盟》渲染还不如我的手机游戏,现在Riot不仅进入了手机市场,还直接拔高了业界标杆。

财大气粗的拳头这次着实让我震撼到了,给每个角色皮肤重置模型贴图,又把命给续上了。

流水的流行游戏,铁打的《英雄联盟》。

对了,你问我游戏内的战斗画面?战斗和人物展示界面是两套资源。

还是原汁原味,原汁原味。

v2-3325ecc6a5326038c6f399ea052072ed_720w.jpg

文章评论
游戏葡萄订阅号