游戏开发论坛

 找回密码
 立即注册
搜索
查看: 14672|回复: 2

《纪念碑谷》是如何欺骗人们的视觉的?

[复制链接]

1万

主题

1万

帖子

3万

积分

论坛元老

Rank: 8Rank: 8

积分
36572
发表于 2015-5-5 09:36:03 | 显示全部楼层 |阅读模式
003500o5nhmz544m4mmtat.jpg


  GameRes游资网授权发布,文 / 杨州

  本人研究生程序猿一枚,毕设做的Unity游戏设计,最近刚刚玩通了《纪念碑谷》,被这款完美的作品震撼了。由于了解到《纪念碑谷》是用Unity进行开发的,本着个人兴趣和对这个游戏的热情,我大致地了解了一下《纪念碑谷》的开发流程和技术实现,在这里和大家分享一下。

  本回答将会大致解答《纪念碑谷》是如何在技术层面上实现这些不可能,从而让人们在视觉上获得完美的体验的(如何通过技术欺骗你们的视觉的)。资料来源是ustwo monument valley team的技术主管应Unity官方邀请对游戏开发者做的presentation

  由于主讲人讲得比较概括(不愿透露过多技术细节),以下答案还会加入一些我个人的分析,如有错误有请大神们指正。

  OK,废话说了好多,下面是干货。

  个人总结:《纪念碑谷》其实就是通过将人们从2D平面看见的路径,在3D的游戏场景中加以实现。人们看见的效果其实只是3D游戏场景的一个投影(Projection)。

  下面的内容我将配合图片进行讲解~多图预警!!

  这个是presentation的主题:创造不可能!由于本答案侧重介绍技术原理,presentation中涉及测试,用户体验和关卡设计等不相关内容不予提及。

1.jpg

  主讲人一上来就摆上了潘洛斯三角形,从别的角度看实物是一个奇形怪状的东西,可是如果从特定角度看过去,就变成了那个神奇的三角形~这就是monument valley team开发秉承的思想:See things in different angle!同时也是技术上实现的核心。

2.jpg

  然后可以看到,在Unity的游戏场景(左图)里其实也是这么个奇怪的几何体!可是调好摄像机的角度(右图)效果就出来了

3.jpg

  于是问题就来了。我们在玩游戏的时候看到的效果感觉艾达是在一条路上走的(右图中艾达可以从三角形最上面的角通过中间的角到达下方的角)。可是在3D的场景中两条路(左图中根本木有中间的角)根本没有交汇,那艾达是怎么走过去的呢?

  答案就是对路径进行标记,如下图

4.jpg

  由图中我们可以看到,可供艾达行走的矩形路面都用Node进行了标记,Node由蓝色的Boundary Point和绿色的Connection Indicator。我个人认为游戏程序的寻路算法是基于Node组成的路径网络的,而通过对Connection Indicator进行处理,可以决定不同的Node之间是否相连。通过这种方法,技术人员可以轻松地根据视觉效果在3D场景中标出路径,下面是效果展示:

5.jpg

6.jpg

  图中可以看见两个实际上分离的Connection Indicator,换个角度后就重合了。

  有些同学会有这样的疑问:就算视觉上重合了,可是艾达的位置应该也有改变呀,远近不同会导致物体大小在视觉上的变化,可是怎么完全看不出来?

  我来告诉你,其实艾达的位置并不是一直位于方块的上面,只是让你看着像而已...请看下图:

7.jpg

  由图我们可以知道艾达的位置并不是单纯地在方块上面,而是针对用户的视角进行了偏移。可是这些在技术上怎么实现呢。我推测是通过Node来实现的,由于Node是一个圆心处于矩形单位正中心的球体,通过预先设定艾达通过特定Node时离圆心的距离,从特定的角度看就像在大路上行走一样。

  我这么推测的原因是主讲人在presentation中明确表示艾达通过曲面的时候,是通过调整艾达和Node圆心的相对倾斜度来实现走曲线的效果的。

8.jpg

  而且Node还决定了艾达通过它的时候采取什么动画,这就是他们实现爬梯子和走楼梯的动画的原理。当一个梯子同时可以当做地面(左图路径)或者梯子(右图路径)的时候他们还头疼了一阵,后来通过在这种功能重叠的地方放置多个Node,然后通过艾达的位置来决定具体哪一个Node有效。

9.jpg

  由此可见艾达的行走是由基于标记的寻路系统决定的,用于标记的Node还储藏了特定的渲染方式。通过定义特定的位置,旋转角度以及动画,来保证艾达行走的真实效果。

  以上为大概的原理!看起来貌似是比较简单,可是据说实际实现起来问题一大堆。

  上面说了通过设置Connection Indicator可以标记哪些节点相互连接,可是实际玩得时候有些情况还需要对某些点进行闭塞,如下图

10.jpg

  在这个图里,通过视觉我们可以发现当艾达位于左上角的时候,她是三个地方都可以去的,寻路算法必须  通过人们的点击输入来选择性地闭塞掉一些Connection Indicator,如下图。

11.jpg

  然后下面是NPC的路径图,直接上不同的Node,各走各路哈~

12.jpg

  这些就是presentation关于纪念碑谷技术设计部分的全部内容啦。最后上一张完整关卡的实际效果与视觉效果对比图!

13.jpg

  相关阅读:浅谈游戏视觉包装中的“情感化设计”

0

主题

44

帖子

446

积分

中级会员

Rank: 3Rank: 3

积分
446
发表于 2015-5-5 11:52:16 | 显示全部楼层
太宽泛了,感觉似懂非懂。不过还是非常感谢你的分享。

0

主题

3

帖子

51

积分

注册会员

Rank: 2

积分
51
发表于 2015-5-6 08:03:18 | 显示全部楼层
PSP上以前有个梦之回廊。。。。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-25 15:49

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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