Unity 2D Outline Light

效果

首先我們看下想要的效果


image.png

這是原圖片


image.png

素材是AssetStore 免費(fèi)資源

工具

1.UniversalRP 渲染管線

  1. 2D Light 新的2d光照系統(tǒng)
  2. Post Processing 屏幕后處理里的 Bloom 效果

實(shí)現(xiàn)

1.創(chuàng)建URPAsset 及 2DRedndererData (這個(gè)其他文章里有)
2.創(chuàng)建后處理配置選項(xiàng)
在Hierarchy面板 右鍵--> Volume --> Clobal Volume 保存


image.png

然后在配置文件里Add Override 添加 Bloom效果


image.png

把相機(jī)屬性 Post processing 選項(xiàng)打開(kāi)
添加一張sprite到場(chǎng)景中座哩,新建一個(gè)2D光照
image.png

調(diào)節(jié)Bloom里的參數(shù) 就會(huì)看到效果變化

前置效果實(shí)現(xiàn)

2d圖片部分高亮效果


image.png

這里需要兩張圖片 原圖和高亮區(qū)域的圖片(高亮部分白色其他區(qū)域?yàn)楹谏琑GB全為1 為白色 ,為零 黑色)
高亮區(qū)域是我在 Aseprite軟件里簡(jiǎn)單涂色制作的雷激,所以比較粗糙

image.png

image.png

由于我們要自定義圖片的顯示效果所以不需要默認(rèn)的 Sprite-Lit-Default 帶2d光照材質(zhì)理郑,Create-->Shader-->Universal R
ender Pipeline-->Sprite Unlit shader
在創(chuàng)建的shader上創(chuàng)建 Material
雙擊使用ShaderForge編輯Shader

image.png

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.底色偏移


image.png

2.x 軸雙向偏移疊加 對(duì)偏移量進(jìn)行取反


image.png

3.xy軸四向疊加
image.png
  1. 由于疊加可能造成 alpha 值超過(guò)一 寂殉,所以使用 Clamp 限制為0~1
    image.png

    5.通過(guò)減法來(lái)得到原圖紋理和底圖紋理的區(qū)別---我們就得到了外邊沿陰影效果
    image.png

    6.給陰影疊加HDR效果
    image.png

    7.最后將外邊沿疊加到原圖上
    image.png

就得到我們的游戲效果了


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.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末囚巴,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子友扰,更是在濱河造成了極大的恐慌彤叉,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件村怪,死亡現(xiàn)場(chǎng)離奇詭異秽浇,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)甚负,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門柬焕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人梭域,你說(shuō)我怎么就攤上這事斑举。” “怎么了病涨?”我有些...
    開(kāi)封第一講書人閱讀 162,764評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵富玷,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我既穆,道長(zhǎng)赎懦,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,193評(píng)論 1 292
  • 正文 為了忘掉前任循衰,我火速辦了婚禮铲敛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘会钝。我一直安慰自己伐蒋,他們只是感情好工三,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著先鱼,像睡著了一般俭正。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上焙畔,一...
    開(kāi)封第一講書人閱讀 51,182評(píng)論 1 299
  • 那天掸读,我揣著相機(jī)與錄音,去河邊找鬼宏多。 笑死儿惫,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的伸但。 我是一名探鬼主播肾请,決...
    沈念sama閱讀 40,063評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼更胖!你這毒婦竟也來(lái)了铛铁?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 38,917評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤却妨,失蹤者是張志新(化名)和其女友劉穎饵逐,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體彪标,經(jīng)...
    沈念sama閱讀 45,329評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡倍权,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評(píng)論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了捐下。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片账锹。...
    茶點(diǎn)故事閱讀 39,722評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡萌业,死狀恐怖坷襟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情生年,我是刑警寧澤婴程,帶...
    沈念sama閱讀 35,425評(píng)論 5 343
  • 正文 年R本政府宣布,位于F島的核電站抱婉,受9級(jí)特大地震影響档叔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蒸绩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評(píng)論 3 326
  • 文/蒙蒙 一衙四、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧患亿,春花似錦传蹈、人聲如沸押逼。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,671評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)挑格。三九已至,卻和暖如春沾歪,著一層夾襖步出監(jiān)牢的瞬間漂彤,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,825評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工灾搏, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留挫望,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,729評(píng)論 2 368
  • 正文 我出身青樓狂窑,卻偏偏與公主長(zhǎng)得像士骤,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蕾域,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容