您所在的位置:首页 > 新闻动态
万万没想到,让我无法自拔的竟是游戏中千奇百怪的图形!
2022-03-02 10:54:33

dc6072eba4f07.png


说到咱们游戏人的日常,那一定是这样,儿时:网吧、网吧、网吧……回家被妈妈暴揍一顿、哭泣完第二天继续网吧!直到被反锁在家。(这百分之百的次留率!)


成年日常:深夜酣畅淋漓打完一场游戏,看到手机上大大的“MVP”,顿时热血沸腾,觉得自己征服了全世界!我这么牛,还得再来几局!直到无法早起上班……


但你是否想过这无比优质的游戏体验、成瘾机制竟和小小的图形有着莫大的联系?三角形、四边形、圆形……每天穿梭于城市之中,图形随处可见。


在游戏的世界中,不起眼的图形和琢磨不透的用户体验之间到底藏着什么秘密?


本次炽天工作室美术组带来的分享会将由一个全新的视角出发,深入浅出地讲述图形和用户游戏体验之间千丝万缕的联系,干货多多、惊喜多多!


09d143daf8890.png


6a68bdb8d9068.png


20c84bd019907.png


游戏作为第九艺术,如同其他八大艺术形式一样,是一种叙述故事的方式;他们都在做叙述故事影响观者心理的事情。但游戏的特别之处在于,它在其他八大艺术上增加了独有的操作体验。


一、游戏通过节奏和对比提供优质的体验。


游戏通过玩法设计“节奏和对比”的控制,让我们通过操作获得打动自己的优质体验,所以游戏本身并不是体验,而是通过设计在操作过程和结果产生了体验。


二、优质的体验来源于美术、剧情、音乐、系统、关卡、数值、机制、反馈、流程的综合组合。


那么我们再想一下优质的游戏体验都是从哪些地方来的呢?影响游戏体验的美术、剧情、音乐、系统、关卡、数值、机制、反馈、流程,它们综合的组合造就了一个优质体验的游戏。


b4ef27a2fde03.png


对于我们美术而言,大家也都势必经历过利用美术制造情感体验的一个事情。那接下来我们从最基本的图形构成关系和图形心理来展示它在游戏中的运用。


为什么要讲基础构成?因为它足够纯粹。当所有人都追求复杂深沉的时候,简单纯粹反而是最有力量的。


e10ad1dcb0945.png


一、图形构成关系


大家都知道,图形基础由点线面构成,它们的构成是对作品艺术元素及元素结构有目的协调。


图中角色利用图形的面和线做主体趋势的设计,并把重点引导于点子上,让角色的主次结构有清晰的识别。


ad40ce2b92a93.png


这几个角色人物也是利用三角形的一个组合变体,呈现出不同角色的性格特点。


aaeb609377ed2.png


这两张场景图,也是利用了图形关系的正负形去凸显主体,让观众容易清晰识别主次的节奏和引导。


c046925a91647.png


在我们动画和特效中,我们同样也有这样的思路。比方上图,我们把它动画的一个运动轨迹画出来,我们在哪些节奏点上做设计也会显得更清晰明了。


不过在生活中,我们平时看到的现实太过复杂,所以为了简化描绘现实,必须将对象概念化为简单的图形,让我们能更好地从本质去剖析图像,接下来我们来看看基础图形的心理感受。


二、形状的心理


方形:成熟、稳定、平衡、顽强;圆形:单纯、年轻、精力、女性化;三角形:侵略、男性化、力量。


想象一下有人朝你扔球和右边的三角形状物,让你去抓住球是没有问题,但你会本能地犹豫是否去抓住三角形状物,即使你知道它并不会伤害你。这是因为你对尖锐物品的一个习得反应,不同于对柔软圆润物品的一个反应。


那么在不考虑设计原则的情况下,如何把左边的图形融到logo建筑、道路和车辆的设计中呢?


b3373f57658e3.png


三、改变它们的属性


生活中有很多利用设计图形给人们传达不同的心理感受。


比如迪士尼的logo,它的动态曲线为圆形。如果我们将它的圆形偏弧形的动态曲线结构改成比较尖锐的造型,它会怎么样呢?


迪士尼给人传达的更多的是快乐可爱的这样一个感受,尖锐的形状完全不符迪士尼的品牌形象。


我们再试试把不同的角色放在一个情绪基带上面,从左到右左边是偏可爱慢慢过渡到偏右边的一个比较严厉或者是比较有威胁性的角色身上。


52d8d0db74cb4.png


创造丰富、具有情感的游戏体验,角色形状只是第一步。


28a89a1333260.png


6c46b550dc505.png


我们接下来从任天堂的马里奥具体地说一下角色造型形状方面的感知。


一、角色形状


大家认为马里奥的性格是怎么样的?


在大多数人的认知中马里奥是活泼、积极的一个形象。它的性格特征也都体现在原型概念中,从他的身体形状到身上的各种细节,都利用了圆形造型或者是弧形造型。


而像瓦里奥或其他的敌人普遍都呈侵略性的一个三角形状,就算是马里奥里的那个蘑菇,它在最先出来时虽然威胁性不强,但是它的整体造型也是偏三角形的。


我们再来看看展现角色不同情绪的一个案例。


下图是白雪公主与七个小矮人的一个片段,小矮人得到白雪公主的一个吻过后,从右到左,它的形态由侵略性较强的一个动作慢慢地渐变到温和,它给人传达的情绪是它气消了。


150c43635df87.png


角色形状表达情绪


下图,《风之旅人》游戏开场的时候,角色身体在行进的时候身体是偏直的,他跳跃的动作从容而优雅。


但是当游戏后期遇到暴风雪后,我们看到角色的身体状态发生了微妙的变化,使得当前角色传达出的情绪、带给玩家的感受和之前大不相同。


3e89e14a31527.png


那么创造丰富且具有情感的游戏体验的第二步,我们会放在角色的动态上面。


二、角色动态


从视觉上而言,相比角色微小的动作变化,动画的行进方式会更容易理解。因为角色的移动可以方便的视觉化为线条,所以我们可以考虑如何对其应用到游戏里面。


《风之旅人》游戏中角色跳跃飞行时它的背后有一个飘带,在游戏的进程中会不断地加长,它在进行移动和跳跃的时候,它整体会形成一个曲线。


隐形中形成了圆形结构的一个美学效果。我们可以从视频中来感受几个案例,不同的行进方式带给玩家情绪体验和感受是不同的。


另外一个战争机器的游戏,它的行进方式明显有区别于之前《风之旅人》的行进方式,整体感受的侵略性会相比之前两个更强一些。


那么接下来第三步是角色和环境的一个形状。


三、环境形状


我们来看看下面这四幅图,图中黑色物体是角色,绿色物体是背景。


5a5c740e5c777.png


左上:角色形状与环境都偏弧形,他们相互呼应,产生一种比较谐感的感觉。右下:它跟左上角的图类似,也会获得一种和谐感,只是在基本形态上面发生了变化,但它带来的情感和美感是有所不同的。


右上:圆形角色和三角形的背景,圆形角色会显得受到了威胁。我们平时在做一些比较威严或有压迫性的场景构图时,会用到类似这样的方式。左下:三角形角色在圆润的环境中呈现出了侵略的感受。


比方说我们去设计一个坏人,他来到一个非常和谐友好的村庄,他身上会有较多三角形结构,以和旁边周围的环境形成对比。


下面的例子大家肯定不会陌生。在《指环王》中,代表善良的霍比特人,与他们有关的一切都表现为单纯的圆形。而索伦侵略性的情绪,被包装到了极致,无一不体现出三角形的图形关系。


e78beb1b22504.png

我们再来看这个小游戏。


就算你知道策划在编辑地图路线的逻辑、阻挡都如左图一样,但你还是会被右图的一些尖刺形状影响心情,而对行进路线感到一丝犹豫,这就是我们通过经验感知到的图形危险性。

4aaf41fe0c9ee.png


四、行驶路径


创造丰富且具有情感的游戏体验还需要考虑到行驶路径。


我们平时去公园散步或者游玩有去观察过它的行进形状吗?路径的形状对身体和情感都有很强的影响,这就是为什么公园里的路径往往都是悠闲的弯曲形状,而不是大直路或者折线。


cf80d037f803e.png


《风之旅人》在关卡的前期和中后期也在随着进程,改变玩家的行驶路径,让玩家在游戏路径的反馈上产生不同情绪的体验。


在游戏的前期行进路径很宽广,玩家很随意的行进。但在游戏的进程中随着困难加重玩家的行走路线也得到了一定压缩。


关卡设计师会通过不同的物件组合,让玩家感受路径的变化,这在很多游戏上都得到了应用。


我们平时也可以从传统绘画作品中提取主次之间的引导结构线,应用到游戏的构成中。


比如下面这张油画,画师布置角色以及空间关系,刻意引导观众视线在画面中游离反复,那在游戏中场景物件的布置,和重点事件的引导,是否也可以用相通的概念来设计呢?


再下面这张油画,画师做了“Z”字型的曲折视觉引导排列,那我们提取“Z”字图形,可否像“战争机器”里一样去布置有困难或侵略性的路径体验?


场景人为的暗示,对于影响情感体验还有一点是在玩家的手势和操控上。


我们用手做不同节奏的姿势也会体现出情绪感受的差别。弧度更大、节奏更快的手势动作,会带给玩家更强烈、更高亢的情绪感受。


手游里面节奏类游戏会使用这种方式,在家用机平台“wii”上也有很多让玩家体验此方式的设计。


0abac74ce6fe1.png



一、图形在游戏中的应用分析


1.游戏概念形状化、玩法美学


游戏玩法产生的美学品质其实也和情绪相通。我们可以把游戏当做规则的系统、把游戏概念划为形状,来看一下游戏的规则限定了游戏的区域和形状以及参与者的一个分布情况。


第一个游戏是《皮纳塔》,它的玩法主要是玩家站在朋友、家人及其他人的围成的一个圆圈内,然后玩家蒙眼去敲悬挂的罐子,这个圆圈形成了鼓励玩家的一个安全区域。


第二个是捉迷藏的游戏,它的形状会让人感受非常孤独。因为玩捉迷藏时,捉人的玩家是看不到其他玩家的,对于他而言可获取的信息极度稀少。


最右边这个棒球类的游戏,它整体的形状是一个扇形,这是非常明显的一个对抗性形状。因为击球手的前方面临了8名防守人员,所以整体形状往里收缩,玩家会感受到更大的压力。


如果我们去强化这三个游戏,以捉迷藏为例,然后控制摄影机角度、动画和颜色等,从视觉上营造孤寂的氛围。把这三个游戏组合成一个游戏的三个关卡,我们分别能让玩家感受到快乐、孤独感和侵略性。


2.《风之旅人》图形应用分析讲解


接下来我们可以从游戏《风之旅人》里面具体看一下整个游戏是怎样通过图形影响玩家的情绪变化。


aa59316cb08ae.png


这个是一个多小时流程的游戏。在游戏的开始玩家出生在沙漠,玩家所看到的沙漠,大部分的造型都是通过弧线、圆形这样的结构构成让玩家感受到安全、平和。


a1d1a08b2e6bc.png


除开沙漠以外,天上的云也被设计成了一个偏圆滚滚的一个形状。


在玩家行进的过程中,逐渐会看到一些象征稳定性的方形物体,它暗示了玩家需要的符文被封印在这个地方。


游戏继续向前推进,场景中逐渐增多了偏方形或者是梯形这样的结构,打破了原本比较平静的弧线结构,让玩家的心理开始产生变化,从平静慢慢开始预警。


伴随着危险越来越接近,场景中开始更多地出现了三角的形状。但这些三角形的出现是有过渡的,并不是猛然出现。


它在游戏里面最先出现的时候是在洞穴,在下图右上角,有攻击性的三角形先被放在了“负型上”,慢慢危险增加,更多的三角形出现在了“正型上”,这就是一个微妙的过渡。


6ba0b2f605071.png


不光是图形,颜色和行进路线上其实也会随着游戏剧情和路径发生改变。


228b9a6c86aed.png


上图这个地方其实也同样利用到了方形这样稳固的一个造型。游戏中玩家需要躲进这样的物体,抵挡敌人的威胁。


行进到后期玩家慢慢地来到山脚下,仰视的构图和模糊的形状暗示一个巨大占比的三角形竖立在玩家面前,周围的石碑也都引导指向山体。当前已是玩家压力最大的时候。


当玩家死后轮回,突破飞升到达山顶的时候,我们观察山体会发现和最初的山体是有所不同的。


最初的山体是偏更锐利的一个三角形,但是当游戏接近尾声的时候,它慢慢地加入了一些方形到曲线的一个结构。这暗示了结局重生的完满。


3a6da13e27513.png


最后一个画面玩家慢慢靠近终点(我个人非常喜欢!),原本聚焦终点的这些引导线慢慢地聚焦在玩家身上。


历经千辛到达了终点,眼前却是一片荒芜,于是明白终点其实仅是用来制造精力和遗憾。然后整个游戏生于荒漠,了于荒无。这强烈的画面冲击、图形构成带给玩家浓浓的虚无感。


小结:


在《风之旅人》中的前期、中期到后期,它的行进路线、甚至还有积雪的方式都在从曲线到直线慢慢转为折线,从画面到玩家的操控上也在不断的变化。这些图形的变化与过渡给玩家带来了强烈的情绪体验。


二、启示


1.动态构图和基本形状概念不应该被公式化地使用


电影《疯狂动物城》构造了一个圆滚滚、非常有亲和力的羊秘书。但是我们在动画的后期,知道羊秘书其实是一个幕后黑手,是超级大boss,让不少人气得牙痒痒。


这种涉及暗示和反差的形象构造,有时候会让用户产生更丰富的情感体验。


2.利用图形的优势来创造游戏内心叙述,而不是过度依赖过场动画、文案、特效和界面。


我们的错误倾向往往是根据游戏类型或风格来引导游戏设计。如果我们做得好,我们就可以开始利用图形的优势来创造游戏内心叙述,而不是过度依赖过场动画、文案、特效和界面。


“优秀的设计彼此相通、感恩在游戏路上一起前行的大家!”


我们的学习是从简单到复杂再到精简的一个过程。


对于个人而言,分享是一种沉淀积累,并让我们有着更多试错的机会。我们不应当害怕讲错,而应当担忧没有意识到要去迭代之前的知识。


欢迎更多的小伙伴加入我们的分享小队伍,让我们看到你独特的视角,一起迭代成长!


(注:文中所有图片、视频均来源于网络,仅供学习交流使用)

上一篇:专题丨职场“她”力量,致动游的女神们! 下一篇:省委宣传部副部长胡勇政一行调研动游科技