[Unity] 為 Canvas 加上 Post Processing 後處理效果操作教學

發表於

Unity

昨天開了一個新專案,打算要來統整關於遊戲 Menu 的系統。其中我為了「將圖片塞入主選單背景,並且要模糊化」找了兩種解決辦法,其一是用 PBR Graph 寫一個疊加多重偏移的模糊效果,另一個就是參考 Standard Assets 中已棄用的 Image Effect 的說明 — Post Processing (中譯:後處理)。

Post Processing 就我來說是一個比較常用在世界座標內、在 UI 的部分少見的特效系統。實際研究過後,我發現後處理直接作用在 Canvas 上會有一個明顯的缺陷,因為鏡頭照的是全範圍且效果是用疊加的,放在上層的 UI Camera 一套用模糊效果後會連帶影響後面的物件。

這個問題應該是有一些解決辦法,在這邊討論會拖太長篇幅,我們之後再將結果整理到其他文章中。

進入正式教學內容,在這邊我們要實作的是「為 Canvas 物件套用模糊效果」,。

安裝 Post Processing

打開 Unity,從頂部選單 Window 開啟 Package Manager,從 Unity Registry 中找到 Post Processing 後安裝。

建立 UI 攝影機

先選擇 Main Camera,取消選取 Culling Mask 的 UI。

建立一個新的 Camera,重新命名為 UI Camera,一樣要調整 Culling Mask,但這次只選擇 UI,其他取消。

最後確定 Main Camera 的 Depth 比 UI Camera 還要小,如果場景中有放物件的話才不會擋到 UI。

建立後處理物件

在 Hierarchy 中滑鼠右鍵 > 3D Object > Post-process Volume,建立一個 Volume。

選擇建好的 Volume,看它的 Inspector 視窗,點擊 Profile 旁的 New 按鈕,它會建立一個 Post-process Volume Profile。

Profile 的之後做,我們先調整 Post-process Volume 物件的 Layer。這部份看你自己的規劃,我是因為東西少,就直接跟 UI 共用 Layer。

選擇 UI Camera 後看它的 Inspector,為它新增 Post-process Layer 組件,將 Layer 調整成指定剛剛指定給 Post-process Volume 物件的層級。

重點開始,在 Inspector 中滑鼠右鍵 > UI > Canvas。

選擇 Canvas 物件,看到 Inspector 視窗,將 Render Mode 改成 Screen Space – Camera,並將有照到 UI 的攝影機拖拉至 Render Camera。

一定要用 Screen Space – Camera 或 World Space,否則後處理不會作用到 Canvas。(沒記錯的話 Overlay 是在 Post Processing 後進行繪製)

回到 Post-process Volume,將 Is Global 打勾,新增一個 Depth Of Field 特效,將 Focus Distance 勾選並調整為 0.1。

模糊效果測試

在 Canvas 中新增一個 Image,看一下 Game 視窗……
有模糊了,搞定!

但連帶產生的問題就是連後面的 3D 物件都會被模糊掉……
這我們再用另一篇文章來試著解決。

但這做法還是有用,像這種純 UI 的介面,我要將後面的影片模糊掉就可以用 Post Processing!

也有開發者用這個手法做模糊,雖然他是用 URP,但大同小異,我們之後再來說明。