當前位置: 華文問答 > 遊戲

【紀念碑谷】是如何欺騙人們的視覺的?

2017-06-25遊戲

1.21更新: 感謝熱心的

@何凱

同學將相關影片搬運到墻內,影片地址附在本文末尾,有興趣的同學可以去觀摩一下~

***************更新的分割線**************

本人研究生程式猿一枚,畢設做的Unity遊戲設計,最近剛剛玩通了【紀念碑谷】,被這款完美的作品震撼了。由於了解到【紀念碑谷】是用Unity進行開發的,本著個人興趣和對這個遊戲的熱情,我大致地了解了一下【紀念碑谷】的開發流程和技術實作,在這裏和大家分享一下。

此問題有許多同學回答過,其中@趙甕祥大神對幾何圖形進行了詳細的介紹和分析。也有同學提出疑問,包括光影的效果和透視的遠近,這些問題在下面的技術介紹中也會得到解答。

本回答將會大致解答【紀念碑谷】是如何在技術層面上實作這些不可能,從而讓人們在視覺上獲得完美的體驗的(如何透過技術欺騙你們的視覺的) 。資料來源是ustwo monument valley team的技術主管應Unity官方邀請對遊戲開發者做的presentation

由於主講人講得比較概括(不願透露過多技術細節),以下答案還會加入一些我個人的分析,如有錯誤有請大神們指正。

OK,廢話說了好多,下面是幹貨。

個人總結:【紀念碑谷】其實就是透過將人們從2D平面看見的路徑,在3D的遊戲場景中加以實作。人們看見的效果其實只是3D遊戲場景的一個投影(Projection)。

下面的內容我將配合圖片進行講解~多圖預警!!


主講人一上來就擺上了潘洛斯三角形,從別的角度看實物是一個奇形怪狀的東西,可是如果從特定角度看過去,就變成了那個神奇的三角形~這就是monument valley team開發秉承的思想:See things in different angle!同時也是技術上實作的核心。

然後可以看到,在Unity的遊戲場景(左圖)裏其實也是這麽個奇怪的幾何體!可是調好攝影機的角度(右圖)效果就出來了

於是問題就來了。我們在玩遊戲的時候看到的效果感覺艾達是在一條路上走的(右圖中艾達可以從三角形最上面的角透過中間的角到達下方的角)。可是在3D的場景中兩條路(左圖中根本木有中間的角)根本沒有交匯,那艾達是怎麽走過去的呢?

答案就是對路徑進行標記,如下圖

由圖中我們可以看到,可供艾達行走的矩形路面都用Node進行了標記,Node由藍色的Boundary Point和綠色的Connection Indicator。我個人認為遊戲程式的尋路演算法是基於Node組成的路徑網絡的,而透過對Connection Indicator進行處理,可以決定不同的Node之間是否相連。透過這種方法,技術人員可以輕松地根據視覺效果在3D場景中標出路徑,下面是效果展示:

圖中可以看見兩個實際上分離的Connection Indicator,換個角度後就重合了。

有些同學會有這樣的疑問:就算視覺上重合了,可是艾達的位置應該也有改變呀,遠近不同會導致物體大小在視覺上的變化,可是怎麽完全看不出來?

我來告訴你,其實艾達的位置並不是一直位於方塊的上面,只是讓你看著像而已...請看下圖:

由圖我們可以知道艾達的位置並不是單純地在方塊上面,而是針對使用者的視角進行了偏移。可是這些在技術上怎麽實作呢。我推測是透過Node來實作的,由於Node是一個圓心處於矩形單位正中心的球體,透過預先設定艾達透過特定Node時離圓心的距離,從特定的角度看就像在大路上行走一樣。

我這麽推測的原因是主講人在presentation中明確表示艾達透過曲面的時候,是透過調整艾達和Node圓心的相對傾斜度來實作走曲線的效果的。

而且Node還決定了艾達透過它的時候采取什麽動畫,這就是他們實作爬梯子和走樓梯的動畫的原理。當一個梯子同時可以當做地面(左圖路徑)或者梯子(右圖路徑)的時候他們還頭疼了一陣,後來透過在這種功能重疊的地方放置多個Node,然後透過艾達的位置來決定具體哪一個Node有效。

由此可見艾達的行走是由基於標記的尋路系統決定的,用於標記的Node還儲藏了特定的渲染方式。透過定義特定的位置,旋轉角度以及動畫,來保證艾達行走的真實效果。

以上為大概的原理!看起來貌似是比較簡單,可是據說實際實作起來問題一大堆。

上面說了透過設定Connection Indicator可以標記哪些節點相互連線,可是實際玩得時候有些情況還需要對某些點進行閉塞,如下圖

在這個圖裏,透過視覺我們可以發現當艾達位於左上角的時候,她是三個地方都可以去的,尋路演算法必須透過人們的點選輸入來選擇性地閉塞掉一些Connection Indicator,如下圖。

然後下面是NPC的路徑圖,直接上不同的Node,各走各路哈~

這些就是presentation關於紀念碑谷技術設計部份的全部內容啦。最後上一張完整關卡的實際效果與視覺效果對比圖!

謝謝觀看!:)

對想要了解更多其他內容的小夥伴,這是影片地址:

https://www. youtube.com/watch? v=mCCC9hQm6MM

這是

@何凱

同學提供的墻內觀看地址:

http://www. tudou.com/programs/view /wmktBQ6Zeu8/