使用版本為：2022.3.10f1?

[原始圖]? ? ?[運(yùn)行前]? ? ?[運(yùn)行后]

更詳細(xì)的實(shí)現(xiàn)邏輯及步驟參考CodeMonkey的視頻：

https://youtu.be/FvQFhkS90nI?si=zy6XRlqGnzIdQkqD

OS：猴子老師，我永遠(yuǎn)的神?。?！

目錄

一、準(zhǔn)備工作

二、偏移效果與顏色疊加

三、單側(cè)描邊與原理

四、另一側(cè)與Sub管理

五、最終效果

六、文件下載

下面進(jìn)入正題

一、準(zhǔn)備工作

? ? ? ? 新建Sprite Lit Shader Graph，并給Fragment加一個(gè)Built-In。?

二、偏移效果與顏色疊加

????????這個(gè)效果的核心實(shí)現(xiàn)原理，是利用貼圖的偏移進(jìn)行疊加。如下圖所示，改變Tiling And Offset中的Offset X Y值，可以看到單側(cè)已經(jīng)出現(xiàn)了描邊效果。

????????為了節(jié)省空間看著干凈，沒用的窗口視圖都折疊了。中文那個(gè)灰框是Group Selection，框選要成組的節(jié)點(diǎn)，右鍵就能看到，框內(nèi)右鍵Cut就是解組刪除。

? ? ? ? Subtract的AB接口千萬別連反了，這個(gè)是疊加順序，錯(cuò)了后續(xù)顏色就會(huì)顯示不出?。?！（后文出現(xiàn)Subtract的地方會(huì)做提示，圖懶得改了）

?????????不過現(xiàn)在整張圖都是黑的，需要疊加原始圖，讓他顯露出來。如下圖紅框所示，Add一下就行。[Subtract AB點(diǎn)反了]

? ? ? ? 我們項(xiàng)目用的是URP渲染，所以Color選的HDR模式。運(yùn)行時(shí)，Volume自動(dòng)會(huì)后處理發(fā)光效果，內(nèi)置渲染是不會(huì)發(fā)光的。

三、單側(cè)描邊與原理

? ? ? ? 定義一個(gè)Float參數(shù)Outline Offect來管理圖片偏差值（邊緣厚度），連接上文提到Tiling And Offset中的Offset X Y值。（參數(shù)連接R因?yàn)檫@代表了X，同樣G=Y，B=Z，A=Alpha，不了解的可看[Unity] ShaderGraph實(shí)現(xiàn)一個(gè)類似浸沒、覆蓋的變色效果_shader graph 攻擊變色-CSDN博客）

? ? ? ? 調(diào)試過程中會(huì)發(fā)現(xiàn)，F(xiàn)loat參數(shù)的值為小數(shù)點(diǎn)后兩位，閱讀調(diào)試都很不方便，精度太高內(nèi)存也占的多。所以加一個(gè)Multiply乘以0.1，用來省略一個(gè)小數(shù)點(diǎn)。（參數(shù)本來就大的話，這個(gè)不加也無所謂）

? ? ? ? ?同理，復(fù)制另一邊效果。注意連線要改為G，也就是Y。

? ? ? ? Add兩個(gè)描邊效果，連接上文提到的Subtract。[Subtract AB點(diǎn)反了]

? ? ? ? 修改Outline Offect值，可以看到現(xiàn)在兩張偏移效果錯(cuò)位的厲害。

????????加個(gè)Clamp就行，PS：雖然翻譯叫夾緊、鉗住，但感覺可以理解為范圍限制，或者固定。[Subtract AB點(diǎn)反了]

????????注意Clamp還要連一下Alpha，這樣才可以把黑底去掉。

四、另一側(cè)與Sub管理

? ? ? ? 同理復(fù)制另一邊效果，加個(gè)Negate就行。完成之后再各自新建Add節(jié)點(diǎn)加起來。

????????PS：CodeMonkey老師Add這部分是這樣連的，實(shí)測(cè)下來沒發(fā)現(xiàn)有啥區(qū)別，具體可看原版視頻。

? ? ? ? ?連線過程中發(fā)現(xiàn)一直在重復(fù)新增Tiling和Sample節(jié)點(diǎn)，但里面的儲(chǔ)存內(nèi)容其實(shí)是一樣的。不如建一個(gè)Sub Graph統(tǒng)一管理，如下圖所示。（不了解的可看[Unity] ShaderGraph實(shí)現(xiàn)一塊破洞的裂紋玻璃-CSDN博客這篇的文末）。

五、最終效果

????????一通操作下，就完成最終效果啦。

六、文件下載

UnityShaderGraph實(shí)現(xiàn)Sprite圖片描邊/發(fā)光效果資源-CSDN文庫文章來源地址http://www.zghlxwxcb.cn/news/detail-807344.html

到了這里，關(guān)于[Unity] ShaderGraph實(shí)現(xiàn)Sprite圖片描邊/發(fā)光效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！