波兰蠢驴式对话系统解构分析(上)——功能结构

用户头像
广州/UX设计师/5年前/1616浏览
波兰蠢驴式对话系统解构分析(上)——功能结构
用户头像
_FunX

「蠢驴」的倔用在了聊天上

        半年前,我写的《废土设定与精神内核》的开篇第一句是“你的狗帮你把2077申请了退款,并帮你打开了这篇文章”........然后我瞒着狗买了实体版(我真的不是为了朱迪)。

        奋战两个周末「朱迪2077」并成功“躲开”她之后,我陷入了空虚,开始一段段地回味我与她之间的每句对话。

undefined

BUG:血洗大鸟转转转酒吧后,遇到一位企图用T-pose只身阻止我离开的翘屁勇者

        抛开多到令人发指的BUG、铁憨憨一样的AI、谜一样的数值导向、鸡肋般的潜行机制.....不对,我这篇文章不是为了吐槽的!

        「2077」还是有可圈可点的地方的,比如对话过程中人物的剧情表演方面。游玩下来,且不论整体游戏的大叙事效果如何,至少单个小剧场下演出是非常丰满的。「蠢驴」在这方面从巫师开始一次比一次“倔”,在「波兰蠢驴」式对话叙事的路上越走越远。这次我不谈文化不谈概念,我将以「2077」为主要对象,来聊聊我眼中支撑        「波兰蠢驴」式对话演出的对话系统(Dialogue System)是怎样的。

        篇幅有点长~所以分成了上下两篇文章,本篇包含两个章节,6600多字【长篇警告】,同时包含少量剧透成分【剧透警告】。


     · 功能结构

        PART 1 :UI解构分析 - 本部分将从巫师1开始一直聊到到最新的「2077」,把他们各自的对话系统中各个小模块逐一拆解出来,并对比出它们的迭代方向,让你看个透;

        PART 2:适配方案 - 第二部分将反推「2077」这个系统都是怎么自适应适配的。



PART 1

UI解构分析

·UI基本组成结构

        首先我针对游戏的对话系统UI进行了简单的解构,为大家分析一下其组成和适配方式。

图01-「2077」对话系统UI

        上图01是经过解构反推出来的「赛博朋克2077」(后称「2077」)的对话系统的UI,排除一些如:出身专属信息、对话中付费等特殊结构,以上就是最常用的基础UI结构。

        我们再来详细解析一下单个对话条目的构成:

图02-对话系统单个对话选项的基本构成

        最基本的对话选择由图02中所示的三个部分组成,分别是:A-互动对象、C-对话条目,以及B-玩家悬停(Hover)将要操作的对话条目的状态。

        举个日常生活中的例子,我们到便利店买瓶可乐,我要做的是:①确认自己是否有足够的钱【条件】;②对售货员【互动对象】说“我要一瓶可乐!”【对话内容】;③进行付款【动作】。而因为这个行为是发生在计算机游戏中的,所以我还需要按对应按钮去告诉计算机执行这条指令(图02中的B)。

有朋友可能会觉得A和B好理解,但为什么C要这么复杂的构成?难道“我要一瓶可乐!”还不足以包含我要付款的【动作】以及我有5元这个【条件】吗?

        这个问题我们放在本文后面解答,我们先来了解一下「蠢驴」在开发「2077」前的游戏——「巫师」三部曲都是怎么做的,以及都是如何一步步将对话系统的UI改变成现在的样子的。


·《巫师》三部曲

        说起「巫师」,就不得不提一下「蠢驴」在开发巫师1之前在做的事情。在开发巫师前,他们原本做的是BioWare开发的经典D&D(龙与地下城)设定的RPG游戏「博德之门」的波兰代理权,还为其第二部做了主机移植PC的事情。在D&D复杂的世界里,你可以是善良、邪恶或是中立,D&D给予玩家的是足够支撑其成为任何他想要成为的人所需要的完善机制。但这个世界的核心是平衡,绝对的善良或邪恶都不可能支配这个世界。而从巫师给玩家呈现的世界来看,虽然未达到D&D那样的复杂程度,但「博德之门」对「蠢驴」的影响之大是刻在骨子里的。


- 巫师 1

undefined

图03-「博德之门1&2」与「巫师1」的对话系统对比

        图03是三款游戏的对话系统的对比图,可以说巫师1在对话文本上深得博德之门的“真传”,浓浓的cRPG味道。

图04-「巫师1」中与某旅店老板的对话界面

        如果只是剧情对话还好,如果涉及到如存放道具等与NPC产生交互的情况就会比较尴尬了。而巫师1的做法则是如图04这般...暧昧?

        上述几款游戏的对话系统除了功能入口的尴尬,还有一个很明显的问题——我不知道我选择的对话将产生的后果,无法对我的选择做一个准确的预判,我所选择的对话到底只是闲聊还是会发生什么别的行为。人类的语言是极其复杂的,我们经常无法准确地判断出某句话将是何用意,更不用说是抛开语气辅助的文本选项。当然,并不排除揣摩心思然后做出应对也是乐趣来源之一,但作为玩家的我还是更希望了解清楚我所选择的这个「意思意思」到底是哪个意思,以避免下方视频主人翁的境遇:

原Po:Dialogue Tree (video game parody) - from:Youtube



巫师1-UI结构

        从UI结构来说,巫师1的十分简单:【序号】+【对话文本】。

        就体验而言,序号除了标明条目数之外,还承载着通过键盘数字键快速选择对应条目选项的功能,这一设置也是延续了博德之门。

        借此,不得不吐槽一下,“跳过对话”操作与“选择对话”操作同为鼠标左键,且在进入对话选择状态时,鼠标会被强行锁定在上图黄色区域所示的对白选择区且进入该状态几乎无操作屏蔽间隔,导致极易误操作。

        总体来说,一代的交互体验以现在的目光去看待的话,可以说是非常糟糕的...


-巫师 2

        UI结构相比第一代优化不少,去除了无意义的序号、将功能入口融合进对话选项,还添加了许多辅助性图标来帮助玩家理解。

图05-巫师2-第二章-弗坚攻城记-杀死/放过科德温之王抉择

        更具重要意义的是巫师2加入了 主要对话 与 次要对话 的区分。图05可以看到有两个黄色选项和一个白色选项,黄色选项实际上就是决定剧情走向的主要对话选项,一般都是N选1的单一选择存在。

而大部分白色选项,无论是否触发它,都不会直接影响大故事的走向,它充当的作用大部分是“更多剧情”的选项入口。

        比如图05中,在杀死还是放过科德温之王的抉择中,如果你选了这个“更多剧情”,相当于让制作组添油加醋地劝你“杀了他!”。

        简单对比,二代无论从游戏性还是交互体验来说,都相比一代有了质的提升。


-巫师 3

        巫师3的对话系统与前两代比较明显的区别在于①增加了悬停指示标;②增加动作描述;③增加限时选择机制。

①悬停指示标

        与前两代不同,巫师3不再局限PC版,发布了主机版本。这意味着要支持两套操作逻辑,在主机平台上放弃光标操作(不是说主机不能用光标,而是在对话选择的情境下用手柄控制光标进行选择的效率非常低下),需要为线性操作的手柄操作提供一个足够明确的悬停状态来明确当前将要执行的选项。

②动作描述
        第三代对于动作预警的提示虽然在游戏中未能广泛应用开来,仅在比较少部分的章节对话中出现,更多出现的情形要么是对话实在讲不清楚选项的差别,又或者是不宜说什么但又必须让玩家选一个。但我相信,正因为有此尝试,才会为这个结构在「2077」中的大量出现提供前提。
③限时选择机制

        在为玩家提供选项的时候,实时继续演绎故事的推进,玩家必须在有限时间内做出选择或反应,否则将终止剧情或按照其中一个默认的选项让剧情继续发展下去。这样的设计一定程度上加强了紧张感和临场感,这个设计同样延续到「2077」中。

④平台差异

        第三代做了PC和主机双版本。针对PC版本恢复了二代弃用的序号辅助;而针对线性操作的主机版本,则去掉了该操作限制下无意义的序号。




拓展知识:

《巫师3的电影化对话的实现-GDC2016(Behind the Scenes of the Cinematic Dialogues in The Witcher 3)》
警告:纯生肉,全程硬核,时长近一小时(Mark下等于学会了)

B站视频链接(带渣机翻译字幕):

https://www.bilibili.com/video/BV1Q541167mZ?from=search&seid=8437353865356933571



        纵观巫师系列三代对于体验上的提升,一代到二代是肉眼可见的,而二代到三代则是润物无声的。



·赛博朋克2077

        简单分析完巫师系列的优化过程,再来到我们的本次讨论的主要对象「2077」,本作的对话系统的UX着实让我感受到了蠢驴的“倔”!功能性和体验都实实在在地比巫师系列提升了一大档。


(1) 对话文本

        对话文本是对话系统内容的主要载体,玩家需要通过概括性的选项来表达,表达出符合自己想要成为的「V」。详细的选项描述(如博德之门、巫师1)能尽可能准确描述清楚选项的内容,但这冗长的文本严重加大玩家的阅读负担,所以要进行概括。而概括又需要确保信息、倾向甚至情绪表达无误,所以这样的概括性文本往往很考验文案策划的功底。

        另外,为什么说是“主要”而不是“唯一”载体呢?因为「语言」不仅仅只是对白,还有动作。


(2)动作

【预警】
        「语言」的表达其实可以包含名词性表达和动词性表达。一句对白,是一个包含信息的【物件】,是个名词,它可以表达的可以意图、观点、感叹等等,比如“我要吃饭”表达的是这个意图,能否真的吃饭不得而知。而一个动作,则是执行信息的【事件】,是个动词,它所表达的是一个明确的指令、执行的过程。在游戏当中将「动作」从对白中明确出来,可大大地给玩家预警将要发生的事情。就像前面杰洛特的例子:“[对战] 我是猎魔人”与“[炫耀] 我是猎魔人”,这样杰杰就不用再担心这句话带来的后果了。

【自然流露】

        动作与对白分离还有一个好处就是:对话选项不再需要在对白里“塞进”动作的信息,与日常我们表达的方式是一致的。当我要抽根烟并说一句搭配这个行为的话时,我要做的是说出这句话并点上烟,而不是“吧啦吧啦~我要抽根烟”。

【关联强化】 
        切换对话选项时同步切换执行对象的辅助图标,强化操作与对象的关联度。(顺便看看杰克的手...PS4版跟PC版到底差多远...)

【动作排序】 
        这个优化方向是很好理解的,当前选项对后续剧情发展产生最直接作用的是【动作】,而非【对白】。将动作前置,对于玩家来说选择效率肯定是更高的。


(3) 条目启用条件

        其功能就是字面意思,启用这个条目,首先得达到对应的条件,如:拥有某个物件、使用过某个东西、装备了某个物品等等,而在「2077」中则是属性值。条件的设定为玩家的游玩提供了部分培养策略的考量,如何运用有限资源(如可用属性点数)在我更偏好的游玩风格上产生更多价值。不过这个属于另外一个设计范畴了,不在我们今天探讨的对话系统范围内。总地来说条件就是对玩家行为的一些限制,而之所以会有限制,那必然是突破了限制能带来“更多东西”。“更多东西”包含上图所示三种常见的流程:
        ①  岔路:选项间结果完全不同,这个很好理解,比如某个委托任务,你的对话(选择)就决定了被捆在车后备箱里的那个可怜虫的生死;
        ②  捷径:跳过繁琐的步骤,比如某个支线任务是要在酒店跑上跑下地问人寻找线索才能找到钥匙打开目标房间门,而如果你“肉体”值超过10点,则可以去威胁维修工直接去帮你把门打开;
        ③  隐藏奖励:这类设定往往会给玩家带来额外的收益,然后再「折返」到原本的既定剧情路线上。这里的收益可以是实质性的金钱或道具、更多对话剧情、NPC好感度等,比如要推倒朱迪,就得有较高的“技术能力”值才能博得其青睐。
        故事发展的流程不是只有以上三种简单的形式,它们还可以组合使用产生出很多意想不到的效果。总而言之,条目启用条件的作用就是这些各种发展流程的门锁,我把门放在那,你有钥匙的话就进去看看吧。

(4)互动对象 & 悬停状态(Hover)

        悬停状态是PC和主机平台控件的必要状态,依赖它来明确反馈给玩家当前将要操作的对象控件。

        互动对象,是巫师系列里不曾出现的UI部件,因为它们不需要,巫师的对话系统大到剧情演绎,小到路边NPC买装备都要进入锁定视角的小剧场,结束对话还要礼貌地说声“再见”。

undefined

       「2077」存在大量的触发式互动对象,玩家可通过走进特定的区域、朝向来触发对话条目的唤出。而一个小范围中可互动的对象不限制在一个,甚至“我”有时候也是互动对象。在这样的前提下,明确互动对象是谁则是必需项。此外,游戏还支持在一定程度下通过转动视角的朝向来切换互动对象,可以说非常贴心了~
        这种触发式的唤出设定也算是蠢驴对对话系统的一次跃进,如果说锁定式的对话互动是坐在观众席下观看的小剧场,那么触发式就是将玩家置身于舞台当中。靠近即是激活互动,走开便是完结。
        不过当然,那些需要强剧情演绎向的对话,仍然是巫师那样小剧场锁定视角的,至少这样才能确保玩家不会冒失地错过必要的选择。此外,也期待有更新颖的互动形式来打破这样的小剧场。

(5)限时对话

        限时对话在许多对话选择类玩法中比较常见,因表现上有与QTE(Quick Time Event-快速反应事件)接近,需要玩家在有限的短时间内进行操作,而容易让人粗暴地定义为单纯地提高刺激度。
        其实QTE需要的是玩家去配合游戏指令——A键出现了你就得赶紧点它。而限时对话其实是一种配合剧情表演的【实时推进】,服务的是剧情,不是玩法。而操作与否也与QTE不同,不限制于成功与否。在「2077」中,如面对军用科技老女人斯托特的质问超过了限时,便是失去耐性把你干掉,作为玩家你不得不重新读档再次面对她的急性子;再如一些听NPC们对话的剧情也常见这样的限时对话操作来插一句嘴,而你保持沉默也无伤大雅;再来一些万万没想到的,若你没有事先联系军用科技老女人,直接去漩涡帮买小平头机器人,故意不选等限时对话结束的话,反而会触发额外剧情。

(6)最后一句话

        最后一句话,指的是剧情进入选择对白的“回合”的时候,将NPC/自己讲的最后一句话的字幕停留在画面上,辅助那些如我一样健忘的玩家进行对话选择。这个设计并不是「2077」才新增的,其实在巫师3里已得到应用。



PART 2

适配方案

        适配是即使在复杂硬件/软件变动情况下都要自动调节以保证信息有效显示的必要手段。硬件指的是显示端的分辨率,软件指的是游戏内功能模块间的优先级关系以及定位关系等。适配并不是简单配置一下对齐方式,它是需要花精力用心设计、配置的一门学问。


·适配对齐

        刚开始的时候总会有种对话面板偏左的错觉,而且也没有一个明确固定的对齐起点,第一反应是:“卧槽?这么随意的吗?”其实不然,认真分析一下其实不难反推到他们的适配方案。

        垂直方向的适配,是除互动对象以外的模块(上图蓝色虚线框)的总宽的中点相对于屏幕居中,而模块宽度取决于最长的条目。而互动对象则紧贴篮框模块左边缘进行右对齐。
        编辑器中构建方式:1.单个条目用水平框(Horizontal Box)包裹各组件内容,并勾选“大小到内容(Size To Content)”,那么水平框就会自动根据子集的总宽度自适应宽度;2.建立一个垂直框(Vertical Box)用于包裹条目,同样勾选上“大小到内容”,这样整个垂直列表的宽度就会根据最长的条目进行自适应拉伸适配;3.将上一步骤的垂直框的锚点设置为中点,并把对齐方式设置为垂直居中;4.将互动对象模块锚点设置为右上角,并将对齐关系设置为垂直框的左上角绝对位置。

undefined

        水平方向也是配置的水平居中的形式作为适配,但不同的是下方是对白字幕模块要去避免重叠,所以此处还需要明确模块的边界。「2077」在此的做法是:若条目太多导致模块高度触及模块边界的,会将模块上移,以避免与下方模块产生重叠冲突问题。


·平台差异

        对于不同的平台,操作上有一定区别,部分游戏系统需要做较大的交互改动来适应平台操作特性。如上图战地1的好友系统,无光标的主机游戏只能使用线性操作,是无法复现PC鼠标的并行操作的,而在PC版下又不希望牺牲本应具备的并行操作便捷优势,于是就需要做两个版本的好友系统了。当然这样程度的适配必然产生巨大的工作量,这就要看项目的时间与成本与操作可牺牲的平衡是怎样的偏向了。如「2077」的功能系统也用PC光标的,并且没做多少光标附着优化;而场景中拾取的触发机制也是基于PC的,导致主机版“捡垃圾”体验极度不友好...对不起我又忍不住吐槽了起来,不过我想表达的就是不同平台操作体验上的适配是需要花精力去做区别的。

        回到蠢驴的对话系统,巫师3是做了平台差异适配的,PC版可用鼠标点击也可用数字键键入对应编号进行选择,而主机版则把服务于PC端的快速选择的数字序号隐藏了(红色字的选项只是不允许操作,并不是平台差异)。
        而「2077」的对话系统在UI结构的平台差异上并没有像巫师3这样的区别,切换选择配置了键位方案(主机十字键+方块,PC使用QE/滚轮/方向键上下+F),但它并不支持序号辅助选择,激活对话时也不唤出鼠标,这是不是又倒退了?其实不然,根本原因还是在于文中前面提到的演绎方式的区别,小剧场下操作是聚焦在对话选择上的,就像回合制(Turn-sequenced)游戏,世界是会等待你做出选择再继续推进的;而「2077」是一个存在大量触发式的“舞台”,玩家身处的环境是实施演绎(Real-time Play)的,进而决定了操作不能聚焦在单纯的对话上,在这个复杂舞台下最终结果势必是“123”数字键留给优先级更高的武器切换、将鼠标/右摇杆用在控制人物视角转向上。



BI DAO

小结

        有一句话是这么形容好的交互的——“好的交互体验就是一个笑话,如果你要去解释一个笑话,那就并不是那么好了”。但作为从业者,要“编”出笑话,那必须去解构好的笑话并加以吸收。这篇文章更偏具体到落地的功能向的解构,我在整理的时候也是为了帮助自己梳理清楚是什么让我感觉「2077」的对话系统好,对于一般玩家来说大可不必这么费力气~因为蠢驴的对话系统,确实是个好的笑话。



…………  END  …………




        全文篇幅有点长~所以分开了上下两部,本文主要针对【功能】、【结构】去探讨,而《波兰蠢驴式对话系统解构分析(下)——对话树》,将更多探讨【流程】、【导向】、【行为】等,有兴趣的朋友可关注我的公众号(我的站酷主页右上角二维码)留意更新,后续也可通过点击"往期文章"页签,或回复 “2077” 获取相关阅读链接。



29
举报
|
18
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
森系3D渐变流体抽象矢量UI背景图
新拟态风格 UI设计组件库
Security Camera UI kit
APP/小程序商业项目UI模板|99个高保真UI+79个原型
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI 登录界面设计模板包
【新年UI图标】钱包icon
新能源APP应用UIKit
3D渐变流体抽象矢量UI背景图
钱包ui模板
【新年UI图标】活动icon
手表表盘UI系列
我的钱包-UI界面设计-app
UI应用平面图标
科技医疗透明柜UI界面设计
【新年UI图标】积分icon
【新年UI图标】美食icon
【新年UI图标】旅行icon
【新年UI图标】体育icon
盲盒APP UI设计
【新年UI图标】汽车icon
高级感金属拟物 UI设计组件库
UI界面 组件
你可能喜欢
相关收藏夹
地产VI
地产VI
地产VI
地产VI
大家都在看
登录注册