游戏开发论坛

 找回密码
 立即注册
搜索
查看: 3568|回复: 0

《炉石传说》如何打造出使人身临其境的用户界面

[复制链接]

1万

主题

1万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
32069
发表于 2016-1-27 10:00:46 | 显示全部楼层 |阅读模式
image001.jpg

  在游戏开发中,UI用户界面设计这个部分常常被忽略。人们倾向于等到作品的完成阶段再去处理它,但如果在开发初期便对此多加考量,这对后面的开发工作将大有裨益。

  暴雪公司的爆款卡牌游戏《炉石传说》开发团队对此深有体会。《炉石》的高级UI设计师Derek Sakamoto在GDC2015(游戏开发者大会)的演讲上甚至表示,“UI是我们这款游戏的关键所在!”

  在演讲中,Derek深入详细地介绍了《炉石》UI开发一路走来的曲折道路,包括数次推翻早期方案,反复尝试,发掘想象力,就是为了要创作出一款有突破性格局和高自由度的卡牌游戏。

  多亏设计团队的不懈追求,我们才能看到今天的《炉石》。

image002.jpg

image003.jpg

  而不是这样的:

image004.jpg

  Derek在演讲披露了大量前期细节,值得艺术工作者和设计师们借鉴,对于正绞尽脑汁力图改进游戏互动体验的开发者来说,更是十分宝贵的一课。

  找到一个创意的种子十分重要

  Derek将创意或想法称为“种子”,寓意一颗优良的种子能够生根、发芽,成长为大树。

  最初的《炉石》是用Flash开发的单人游戏《魔兽传奇:火与冰》。首测前的视觉效果目标是下图的样子,画面呆板、繁琐而杂乱。这个概念没能实现并不遗憾。

image005.jpg

  他们考虑过很多构想,比如用一幅游戏世界地图做模版,玩家在其中旅行,通过完成任务解锁新区域;

image006.jpg

  还曾有过其它构想,比如单人模式冒险笔记,在树墩上进行的森林卡牌游戏,3D纸牌桌,甚至还考虑过全息卡牌。最后,所有这些设想都被否定了。

image007.jpg

  早期的对手匹配模式里有个圆形竞技场,英雄屏幕上依次闪现,匹配成功时两个人物就闪现在竞技场中。演示效果其实是相当酷的,但这个方案也被否定了。

image008.jpg

  经过一系列苦思冥想和头脑风暴,Derek与美术设计一席长谈后决定要用一个盒子。而这就是他们要找的“种子”。

image009.jpg

  盒子的匹配模式是这样的,先点击放大打开盒子,出现玩家地图,点击选择英雄,点击对手匹配,然后点击缩小,出现对战的游戏板。这就是今天游戏的雏形,虽不完善,却让他们看到了希望,

image010.jpg

  事实上,整个游戏就是从这个简单的盒子元素开始,神奇地走到今天的《炉石》。

  由盒子的形态,延伸出珠宝盒或音乐盒。又引进了钥匙、树等概念。盒子要安放在桌子上,所以引入了酒吧或酒馆的元素,于是有了一个“暴雪”酒馆的招牌,一个酒馆的半截弹簧门,暖黄色的灯光从里面透出。

image011.jpg

  如果系统繁忙,自然就有了这块“客满,请十分钟后来”的招牌。

image012.jpg

  下面这张美术设计图是安置在魔兽情景中的《炉石》牌桌。让玩家感觉自己是在魔兽世界里玩着卡牌,是不是很酷?

image013.jpg

  在暴雪推广活动上,一个实景展台重现并扩展了这个酒馆的场景,令设计师们十分兴奋,Derek开玩笑说他们简直想把布景搬回办公室,然后在里面办公!

image014.jpg

  Derek认为,创意之路不是笔直的,要在开发初期就不断积极发掘。他们的经验说明,一旦找到了对的种子,它会引导你进入一个创作境界,让各种元素顺理成章地组合起来。

  追求物体的真实感和高端质感

  当《炉石》设计时,在许多游戏的UI中流行着平面化的趋势,似乎仅用2D就可以做出平滑顺畅的效果。但《炉石》团队决定坚持最初的3D路子,利用3D的优势体现实物效果。

image015.jpg

  作为一款收费游戏,玩家投入的时间和金钱应受到尊重。因此他们让物体呈现出价值和质感,层次分明,结构繁复,赋予物体一种宝贵、高端的视觉质感。加上动画视觉和音效后,所有的游戏元素以酷炫的方式呈现出来,就形成了今天这种浑然一体、流畅愉悦的游戏风格。

image016.jpg

  为了提高玩家体验,他们还在游戏板四角加上了一些纯娱乐的附加效果元素,增加玩家对战时的愉悦感,连Derek家两岁的孩子都爱不释手,粉丝也非常欢迎。

image017.jpg

  在触屏设备上,UI的真实感显得更加生动。当玩家的手指碰到一个卡牌或形象,它就会发出声效,并跟随手指飞翔、闪烁或旋转,而这正是Derek他们最初设计时希望实现的奇妙效果。

image018.jpg

  事实证明,粉丝们对《炉石》的UI十分满意,纷纷晒出自己制作的《炉石》主题艺术品,有笔记本,盒子、牌标模型,甚至有人制作了整个对战板的翻糖蛋糕!可见这款UI界面深得人心。

image019.jpg

image020.jpg

  UI需要充分的重视

  就《炉石》而言,成功经验之一便是UI设计与游戏开发同步进行,把UI放在和游戏设计同等重要的位置,组建专业的团队,包括UI创意、程序员、美术师等角色。

image021.jpg

  Derek说,他们一般先将想法作成模型,然后对其进行简化。说《炉石》的关键之处就在于UI并不过分,因为这款游戏没有广阔的疆域、庞大的虚拟空间供玩家遨游,只有一个摆在桌子上的游戏盒子。因此,团队更注重游戏效率,风格优先。

  比如卡牌桌原来带有许多说明文字和数字,后来他们考虑到玩家——特别是新手玩家——可能不喜欢读太多说明,所以将游戏设计成玩家能够逐步了解各种属性的模式。

image022.jpg

  又比如,他们将卡牌的种类从60种减少到30种,因此玩家不用费时翻页就可以完成选择;现在对战板上最多能放7个随从,若增加数量就要将图形放大缩小,那样会显得不自然,削弱了真实感。所以他们决定保持不变。

  在原稿中,有一个卡牌反应链让玩家选择特定卡牌对抗敌人,但画面显得过于混乱,最终被放弃。

image023.jpg

  在设计过程中,UI人员经常与美术师及2D、3D设计师一同讨论创意,也经常与程序员沟通技术实现的可能性,以及需要怎样调整。由于团队的高度协作,工作效率非常高。

image024.jpg

  《炉石》在UI设计上的成功来自于团队的协作努力。Derek强调,这是一种资源密集型的创作,概念量极大,是这款游戏的重点。这个团队的设计成员约十名,他们在紧迫的时间压力下,通过2年的高强度工作终于完成了这项工作。

  视频中的Derek Sakamoto是标准的暖男大叔,形象亲和。他在暴雪工作了超过12年的时间,在早期职业生涯中参与过《魔兽世界》、《巫妖王之怒》的手机。6年后,他加入了Pegasus的《炉石传说》开发团队,担任高级UI设计师。

image025.jpg

  附:Derek Sakamoto在GDC2015上的完整演讲

via:界面

相关阅读:《刀塔传奇》UI信息架构和导航总览

声明:游资网登载此文出于传递信息之目的,绝不意味着游资网赞同其观点或证实其描述。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-11-25 14:35

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表