效果
首先我們看下想要的效果
這是原圖片
素材是AssetStore 免費(fèi)資源
工具
1.UniversalRP 渲染管線
- 2D Light 新的2d光照系統(tǒng)
- Post Processing 屏幕后處理里的 Bloom 效果
實(shí)現(xiàn)
1.創(chuàng)建URPAsset 及 2DRedndererData （這個(gè)其他文章里有）
2.創(chuàng)建后處理配置選項(xiàng)
在Hierarchy面板 右鍵--> Volume --> Clobal Volume 保存
然后在配置文件里Add Override 添加 Bloom效果
把相機(jī)屬性 Post processing 選項(xiàng)打開(kāi)
添加一張sprite到場(chǎng)景中座哩，新建一個(gè)2D光照
調(diào)節(jié)Bloom里的參數(shù) 就會(huì)看到效果變化
前置效果實(shí)現(xiàn)
2d圖片部分高亮效果
這里需要兩張圖片 原圖和高亮區(qū)域的圖片（高亮部分白色其他區(qū)域?yàn)楹谏琑GB全為1 為白色 ,為零 黑色）
高亮區(qū)域是我在 Aseprite軟件里簡(jiǎn)單涂色制作的雷激，所以比較粗糙
由于我們要自定義圖片的顯示效果所以不需要默認(rèn)的 Sprite-Lit-Default 帶2d光照材質(zhì)理郑，Create-->Shader-->Universal R
ender Pipeline-->Sprite Unlit shader
在創(chuàng)建的shader上創(chuàng)建 Material
雙擊使用ShaderForge編輯Shader
MainTex 為原圖 （這個(gè)命名非常重要，和圖片屬性里是對(duì)應(yīng)的）
Emission 為高亮區(qū)域圖
Color 為開(kāi)啟了HDR的顏色選項(xiàng)
通過(guò)將高亮區(qū)域和顏色相乘 再和原圖疊加 就得到我們想要的效果
將場(chǎng)景里的圖片材質(zhì)替換為我們制作的材質(zhì)
Outline Light 效果
實(shí)現(xiàn)理論和 Text 的 Outline 一樣通過(guò) 在原始圖片下疊加4個(gè)方向偏移的單色圖片 實(shí)現(xiàn)外邊沿效果 加上 HDR 就得到了外邊沿發(fā)光效果
現(xiàn)在就通過(guò)shader實(shí)現(xiàn)這個(gè)效果
1.底色偏移
2.x 軸雙向偏移疊加 對(duì)偏移量進(jìn)行取反
3.xy軸四向疊加
- 由于疊加可能造成 alpha 值超過(guò)一 寂殉，所以使用 Clamp 限制為0~1
image.png
5.通過(guò)減法來(lái)得到原圖紋理和底圖紋理的區(qū)別---我們就得到了外邊沿陰影效果
image.png
6.給陰影疊加HDR效果image.png
7.最后將外邊沿疊加到原圖上
image.png
就得到我們的游戲效果了
拖入shaderforge 圖片空白區(qū)域亂碼的問(wèn)題
it's because PNG images store the entire 32-bits of a pixel (RGBA) even if the alpha channel is 0. So random color data that the artist left on the picture is sustained even if the pixel is transparent. It's super easy to fix without additional shader overhead - just pop the spritesheet into any decent image editor (e.g. GIMP) and export it with the "keep transparent pixels color" option deselected. You could also replace all transparent pixels with black transparent pixels instead.
