小屋創作

日誌2020-07-03 18:27

在Unity當中製作《底特律:變人》的掃描特效1——鏡頭模糊(使用PostProcessing package)

作者:pudding


最近因為好奇的關係跑去查了有沒有人試著用Unity製作類似《底特律:變人》的遊戲,意外地查到了有人試著做出了遊戲當中的掃描特效(雖然我覺得他的教學講的有點隨便XD)。

不得不說這玩意兒對我而言真的難到靠杯QQ,花了一個多禮拜的時間才勉強看懂,因此這次的筆記分享可能會寫得比較亂一些,還請各位見諒(或著我可能理解錯誤的話還請各位糾正)

(以下是我自己實作後的結果)

那麼我們先來看看掃描特效需要做到哪些效果吧,該特效主要分為三大部分

Lens Distortion (鏡面失真,然後我查了一下,好像拼法不是distorsion)

首先我們注意到畫面會先模糊並扭曲一下子,這裡我們預計將用到Unity提供的Post Processing工具 (需要去Package Manager另外下載),使用該工具製造畫面扭曲和失焦的效果。

Color Area (區塊上色)

隨後出現的是整個場景一塊一塊轉色的效果,一路從我們玩家身邊蔓延出去,為了做到這個效果,我們會需要寫一個特殊的Shader,並且將整個畫面以及深度紋理(Depth Texture)帶入該Shader。 (我自己覺得這部分是最複雜的)

Matrix Grid (矩陣網格)

最後緩緩浮現在畫面裡的,是方格狀的網格,這裡我們一樣也會特別去寫一個Shader,用來調整網格以及上面那些小圓點的不透明度。

好了,讓我們進到實作的部分吧,首先先去下載剛才提到的Post Processing工具。

載好後先在MainCamera上面掛上一個Post-Process Layer。

這個程式是用來渲染後製(Post process)效果的,要掛在你要用來顯示後製特效的Camera上。(官方說明)

而在這之後我們還需要建立實際上產生後製特效的PostProcessVolume。
(這裡建立一個沒有其他程式的空物件並掛上)

PostProcessVolume是用來承裝post-process profile的程式(官方說明),因此為了讓它能實質上地產生後製特效,我們還得再去創建一個post-process profile。(聽起來手續真多……)



先在Profile的欄位那邊按下new,然後它就會自動幫你到Scenes路徑下幫你建立對應的Profiles檔案。
建立好後我們就可以先來看一下Profile那裡的東西。

按下Add effect來加入我們要的效果


我們這次主要會加兩個特效,一個是Depth of Field(景深)另一個則是前面提到的Lens Distortion(鏡面失真)。

(翻譯:我使用了鏡面失真來製作鏡面失真)
忽然想插一張梗圖XD

不過讓我們回頭看一下這兩個特效分別長什麼樣子吧! 為了要能夠實際地看到後製特效作用在Camera上的效果,我們需要先去調整兩個東西,首先是去Camera那裡調整PostProcessLayer。


調整Volume blending的Layer,告知Camera它應該去感應哪些Layer產生的後製特效。 (不過好像也不一定要調就是了,預設的話直接用Default那一層)
再來則是去PostProcessVolume那邊調整。


從上到下分別是
  • PostProcessVolume本身的IsGlobal,這個欄位勾起的話代表該後製特效會直接作用在Camera上 (不勾選的話你要特別幫這個物件掛Collider,藉此限制說後製只在該區域作用,不過這部分就先不細談)
  • DepthOfField的FocusDistance(焦距),把這個數值調低的話就可以做出畫面模糊的效果,這邊打勾才能讓我們用程式碼去控制它 (或著應該說打勾了它才會產生校果)
  • LensDistortion的Intensity(強度),把這玩意兒調高的話就會使畫面向外扭曲,反之則朝內變形。
……然後遊戲物件的Layer記得調成PostProcessing,我忘記圈起來了。
想要更深入了解Post Processing工具的話我建議可以來看這個教學

現在把PostProcess的東西設置好後,我們就可以來看看程式碼怎麼寫了。
(初值設定部分)

(遊玩過程中的函式呼叫,話說雖然可能很多人已經知道,不過我最近才開始會宣告coroutineHandler以方便去中斷那些進行到一半的coroutine)


最後則是函式的部分,這裡在Coroutine裡面宣告了特效的計數器,每次跳回來時都去計算經過的時間,再用Lerp去算說現在模糊和變形的程度到哪。
Lerp是插值運算,它會去算說參數A往參數B過去幾%的數值,例如今天你寫Mathf.Lerp(6 , 10 , 0.25f)就會取得7,Lerp(6,10,0)則是6,最後面帶1則會得到10
……好我承認這一段解釋可能有點廢話XD 讓我們來看一下目前的效果吧


<當前程式碼>

好了,這次先寫到這裡吧,接著我預計會先寫怎麼生成Matrix Grid,雖然那是這段特效的最後部分,但是以難易度和要講的長度來看的話我覺得先放在第二篇來講,希望大家還喜歡這次的筆記分享!

11

6

LINE 分享

相關創作

日本各城市(東京大阪京都等) 素食蔬食餐廳統整 (日本蔬食素食餐廳)

Project AJ Developer log.2

【平■●】

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】