創作內容

11 GP

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

作者:pudding│2020-07-03 18:27:22│巴幣:40│人氣:1319

最近因為好奇的關係跑去查了有沒有人試著用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,雖然那是這段特效的最後部分,但是以難易度和要講的長度來看的話我覺得先放在第二篇來講,希望大家還喜歡這次的筆記分享!
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4837006
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 6 篇留言

KK
超有趣!而且效果超酷~

07-05 17:15

pudding
多謝你這麼認為>< 目前的內容會覺得太難懂嗎? 或著我不小心說錯的07-05 21:01
KK
我看下來是還 OK,也當作認識 post processing 這塊,以前在做背景模糊角色清晰的景深效果時,是用 shader,沒想到這東西這麼方便,可以調的三塊設定都滿好玩的。

07-05 21:11

pudding
了解,其實我這幾篇寫完後也預計要去研究看看怎樣只用Shader就做到目前的效果XD 雖然我猜我到時候可能會懶的去研究QQ07-05 23:17
Cron逸
感覺可以跟Mix and Jam 一樣,拍成影片作成教學(感覺台灣好像都沒有類似的YT做這類型的影片),很簡單的教學,推推。

07-06 08:10

pudding
謝謝你覺得簡單~(那表示應該寫得還算清楚XD) 不過路程影片我可能現在還做不到呢 (不會後製影片+不方便錄音)07-13 16:46
瑪斯特
好教學!推個 [e7]

07-06 09:43

pudding
多謝!07-13 16:46
⊰⊱求出處學術用⊰⊱
請問下影片裡的i.ray float4是填甚麼值 不是很懂

07-13 23:43

pudding
阿阿,抱歉那麼晚才看到QQ
你是在說文章剛開始貼的那個教學嗎? 3:21出現的 i.ray
從程式碼看來的話,那是他用C#去設定了Shader "看出去的視線向量",這部分之後的筆記分享會提到07-31 15:07
阿團
UPDATE 的 stop coroutineHandler 為什麼要這樣做啊 是要先有一田執行序 後面在讓他跑嗎?

07-19 09:46

pudding
那邊之所以加上Stop CoroutineHandler是為了檢查說現在是不是有跑到一半的後製特效,假如有的話它就會先中斷並重新開始 (兩個Coroutine同時在處理後製的話可能無法保證看到流暢的後製,因為它們會搶著去設定同樣的那些變數)

07-31 15:10
我要留言提醒:您尚未登入,請先登入再留言

11喜歡★pudding70119 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:Unity開發者工具初學... 後一篇:在Unity當中製作《底...

追蹤私訊切換新版閱覽

作品資料夾

ShuLongQinHu給大家
小屋更新~APH軍服路德(德國)納粹軍服版插圖看更多我要大聲說5小時前


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

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