她是 Lena ,影像處理課會出現的圖,被我臨摹成了大餅臉,真是抱歉。
來把這次 Game jam 接觸到有關 post processing 的部分做一個分享。
首先,想先回顧一下需求,
我們這次的遊戲是一個比較抽象的遊戲概念,
原本是一個細胞,吃了血後移動進化,
長出耳朵,可以聽到聲音,
開眼,看到瓶外世界......等,這樣的設計。
( 更新了網頁版連結可以比對實際遊戲畫面效果 )
2D 轉 3D 的移動變化,
黑白轉彩色的視覺震撼,
聽得到背景樂跟音效的能力開啟......等;
隊友很可靠的接走了移動功能跟運鏡功能實作,
所以我就來負責遊戲中怎麼讓畫面呈現,可以讓玩家眼睛一亮的這部分。
前言結束。
那麼,第一個要碰到的難題是,彩色跟灰階的轉換。
我最初在想這個功能的實作法時,是從 Shader 出發的( 雖然我根本是超弱的等級 )
腦海中浮現的是有個轉灰階的公式,寫一個偏計算型的材質球,
然後去代入公式,就能讓掛上這顆材質球的東西都會被渲染成灰階。( 理想 )
=> 這個想法提出後暫時被打退了,似乎在果醬中才開始寫 Shader 有點無謀@@
夥伴中有人提到,應該不用這麼麻煩,用 Unity 內建的 post processing 就可以了。
好......我來試試看。
直接添加 post-process Layer 來用!
提幾個需要注意的點,給初次使用的人,包含我筆記一下。
預設的 Layer 沒有照任何東西,要記得選擇,
特別是專案做到中後期才準備加入更好畫面效果的( 你們可能開了很多層級 )。
選擇 Is Global 全域打勾,就可以讓全部需要透過渲染成像的都吃到這個效果,包含 UI。
這些設定需要吃一個設定檔,生成後在 Profile 關連到那個檔案即可。
( 打到這的時候異想天開一件事,若是生成複數個,透過腳本動態切換是否可行?待實驗 )
這個設定檔都是預設的標準數值,而我們想要的效果,
則是透過 Add effect 去複寫它,而之中跟灰階有關的功能就是 Color Grading。
試著調整 Saturation 飽合度這項參數,去觀察之中的變化。
另一個則是 Contrast 對比,同樣隨便拉拉看,觀察之中的變化。
如此一來~~~想要的灰階效果,可以透過這兩個參數很簡單的實現。
要先看你們遊戲的表現方式,對比是用來加強靠近白一點還是黑一點,
對比拉強的效果也是很好的,很適合搭配漫畫型分鏡遊戲。
研究到此應該可以算這個功能可實行了吧?!
正準備進行下一步程式碼控制的時候,專案準備再升級一個部分......
由於我們這次是使用最新版 Unity 2020.2.2f1,
而早從 2019.3 開始,就可以使用它們的一個新技術-URP
不要被上面那串文字嚇到,我簡單的說明一下,
這項技術是使用了預處理( 預先計算 )的方式,透過光照的表現,
去達到不使用 Shader 也可以看到的畫面效果。( 包含物理反光跟材質折射 )
同時,2D 也吃這個效果,簡單來說,開啟這個 URP 的專案,你就擁有很方便的光照效果。
原本要使用到這樣的表現,可能需要美術夥伴去雕這樣的效果,
可能需要撰寫很多 Shader 去達到同樣變化,不過現在有個方式可以省下時間,是這個意思。
就我感覺,這個效果,有點像之前
母湯專案玩的
Light 2D -SRP 效果,進化版的感覺,
有機會的話應該會往 2D 的部分來試試。
在專案改成 URP 的渲染通道後,原本的後處理效果就失效了。
不確定是哪邊打架了,某一處設定有衝突但以 URP 為優先吧?!
只知道官網上有寫著,URP 也有它自己整合了後處理這塊,那就繼續研究下去。
升級了之後,原本 Camera 的 Inspector 上多了很多東西,大部分都不用改,我們也沒改。
不過針對後處理的部分有個地方要注意喔!
使用後處理這塊要打勾,
不過就算勾了這個,原本掛的還是沒有效果,要走另外一條路。
官方文件上說不用使用 Post Processing,直接掛上 Volume 這個元件,
一樣別忘了,全域、新增一個設定檔存放這些變量,
以及添加我們需要的效果去複寫到原本的設定。
這次 COMA 中使用了上述五個效果,色調變化、朦朧、縮圈遮罩、雜訊跟景深。
以下直接用影片展示。
依序變化,灰階關掉、朦朧效果關掉、黑圈關掉、雜訊關掉和最後將景深關掉畫面清晰。
覺得怎麼樣才叫做好看或者搭配專案的遊戲風格,可以詢問一下美術的意見喔。
打開 Color Adjustments ,就會看到已經研究過的好朋友,
飽和度同學,一樣給它 -100 就是灰階了。
那麼下一步,我想要在程式中去控管這個值,在某個時機點去將它從 0 轉換為 -100。
最直接的想法應該就是,去 Get 這個 Component,然後 SetValue 什麼的,對吧?!
很遺憾,就算到了今天,我還是找不到直接取得這個元件的寫法,
它們一定是藏在某個 namespace 下,但找不出來不 using 一下,
就是永遠在跟編譯器雞同鴨講,所以我採取的是,就算我不知道它是誰也硬寫值進去的做法。
講一下我的思路,參考一下。
Volume 是一定抓得到的,它是原本就存在的 Component,
試著把我所掛上去的屬性印出來看看,到底有沒有辦法抓到。
五筆資料,顯然是可行的,有掛上的才有,其它我沒添加的就沒有。
抓得到就有希望,至少先談有這東西,再談修改。
可以用 parameters 這個接口往下抓裡面的參數,就是我們要的飽和度那些,
隱約嗅到不妙的感覺,居然是 ReadOnly 唯讀屬性......見招拆招吧@@
不是很有把握的時候,不知道抓出來的變數是什麼型態的情況,var 很好用。
遍歷內容物,並印出來,驗證一下這個路線有沒有問題。
分別對應到 Post Exposure, Contrast, Color Filter, Hue Shift 跟 我們要的 Saturation。
目標只有最後一個值,找找看修改方法。
其實是有提供接口的,很好!只要能塞這個資料型態給它就好。
再回頭確認一遍。
我只有對飽和度這項變數打勾,這點可以利用。
那格欄位的變數是浮點數,又因為是參數型態,所以要用 floatParameter 去接,
接著提供一個開關,是否需要灰階 ←→ 彩色世界的切換,
就大功告成了。
延伸閱讀,直接變化很醜......
不論從 0 (彩色) 到 -100 (灰階),還是 -100 (灰階) 到 0 (彩色)。
夥伴說,可不可以在這個奇怪的寫法上,做出漸變的效果,不要直接變化可以嗎?
在約莫 30 個人間界的時間單位過去後,
我露出了一個微笑說,我試試看QvQ。
首先在 package manager 中安裝插件 Dotween,
using DG.Tweening 後,使用一個隨著 update 變化的 sequence 演出寫法;
這樣就可以實現漂亮的轉換了。
嫌時間太長太短都能在參數上再做調整,我有開相關變數。
上述的寫法有興趣的可以自己實作看看,
但我要強調幾個注意事項喔。
1. 不論後處理還是 URP,都只是一個不想走 shader 的方式的另一種做法,
這些效果表演 shader 都做得到!根本小菜一碟( 雖然我不會寫 )
2. 我還是找不到直接取得這些 component 的寫法,已經問過 google 老師了,
若你有更好的寫法,請跟我說,這篇分享的相關問題也歡迎討論。
3. 哪種做法好?省校能?我沒有足夠的數據分析可以佐證,
但是就我經驗來談,越方便的東西背後潛藏的效能危機越大,
我的直覺是後處理很吃資源,但效果快又方便,
請依照團隊規模跟需求斟酌使用,或者兩個都用看狀況跟時機開關。
4. 漸變的方式還可以用 update,或者 coroutine,不是只有 dotween 這一條路,
我只是選擇最偷懶熟悉的方式來戰鬥而已XD
5. 除了顏色變化外,其它的也可以玩一下,景深效果很強,朦朧很美,
雜訊很突出,茶杯頭的雜訊我就很喜歡,但我不確定它是不是 shader 寫的,
歡迎自行更改延伸使用。
以上,這次果醬中學習到的東西,吸收消化後,再分享出來。
希望能給也想快速在畫面表現上求亮點的朋友一起互相成長。
:)