作者：Yumir

哈嘍大家好我是yumir~

不知道今天大頭菜多少錢呢？

本篇文章使用Unity的圖形化Shader編輯器Shader Graph實現(xiàn)動物之森中的轉(zhuǎn)場動效，跟我一起輕松入門Shader，走向人生巔峰吧。

這個效果簡單又實用，但是因為unity并沒有提供這種類型的遮罩，所以需要自己用Shader寫一個，但Shader腳本對新手真的極其不友好啊，幸好現(xiàn)在有Shader Graph這個入門門檻極低的制作Shader的大寶貝了。

---------------------------------這里是萌新小課堂---------------------------------

一、Shader

我們都知道的是Shader是著色器，在Unity中我們用C#腳本控制“做什么”，用Shader腳本控制“長相”，似乎是個很厲害的大佬才能用的東西。而我們平時使用Unity提供的部分Shader就可以了，甚至不需要手動設(shè)置，只需要新建材質(zhì)球就可以了。

打開你的材質(zhì)球你會發(fā)現(xiàn)，材質(zhì)球的Inspector面板上有一個下拉菜單，選項名稱就是“Shader”。Unity的資源文件中用右邊這種花里胡哨的圖標(biāo)代表Shader。

在Shader文件中，會標(biāo)識出文件在上圖的下拉菜單中的路徑與使用了該Shader的Material的面板上顯示的可調(diào)試的變量，并編寫其他相關(guān)的渲染邏輯。也就是說，Shader Graph實際上就是在幫我們編寫這樣的文件。

二、Shader Graph

首先請使用2019.1以上的Unity版本并新建URP項目。

在Project面板右鍵新建Sprite Unlit Graph，是不受光照的2DShader Graph。

打開新建好的Shader Graph ，界面如下圖所示：

①面板有兩個內(nèi)容，一個是該Shader Graph的名稱和路徑（第二行灰色字體），一個是聲明的字段（圖中還未聲明），點(diǎn)擊+號新建新的字段。

②是一個輸出節(jié)點(diǎn)，每種Graph都有各自類型的輸出節(jié)點(diǎn)，常用的就是下圖這四種，可以自己新建對比。

③是效果預(yù)覽窗口，每次進(jìn)行改動要點(diǎn)擊④編譯一下，才能運(yùn)用到場景中。

在空白的位置按下鼠標(biāo)右鍵或者鍵盤空格鍵，就可以新建新的節(jié)點(diǎn)，開始制作Shader了，節(jié)點(diǎn)之間通過鼠標(biāo)左鍵拖動節(jié)點(diǎn)上的鏈接點(diǎn)就可以在節(jié)點(diǎn)之間連線，連著連著就做完了（So Easy~）。

最后我們想在腳本中控制Shader Graph中的字段進(jìn)行一些變化，只需要獲取到對應(yīng)的材質(zhì)球，在腳本中這樣調(diào)用：

material.SetVector("_Pos", maskPos);

?

第一個參數(shù)是對應(yīng)的字段名，就是這個位置：

那么現(xiàn)在你也會Shader啦！

-------------------------萌新課堂結(jié)束------------------------

三、動效實現(xiàn)

這個效果的實現(xiàn)思路其實很簡單，首先這個效果本質(zhì)上是動畫，也就是我們其實就是在屏幕上每次畫不同大小的透明圓形。

那么我們?nèi)绾萎嬤@個透明的圓呢？只要以屏幕中心為圓心，每次計算屏幕上的像素點(diǎn)要畫啥顏色的時候，判斷該像素點(diǎn)距離圓心的距離是不是比半徑大呀，如果比半徑大的話就是滿不透明，反之則是透明度為零，這樣一個圓就出現(xiàn)了。

將這個半徑提取出來作為公開的字段，在代碼中修改其數(shù)值，就可以做到動畫效果了。

Shader Graph的內(nèi)容如下：

• 為了更加方便使用我將半徑Radius的Mode設(shè)置為Slider滑動條，并在Shader中根據(jù)當(dāng)前屏幕大小的最大值設(shè)置最大半徑。

• 由于Screen Positions的值是0-1的float類型，所以需要和Screen的寬高分別相乘再組合成新的坐標(biāo)值，才能和半徑匹配。

• Step節(jié)點(diǎn)的功能是對比輸入值的大小，并輸出1或0（In>=Edge In=1，In<Edge In=0）

最終效果如下：

稍微進(jìn)行改動豐富一下功能，可以用來做游戲中的引導(dǎo)效果。

篇幅有限，感興趣的同學(xué)可以下載我的項目：

鏈接：https://pan.baidu.com/share/init?surl=WCr-68Pf7CJLjZ1aZhr10Q

提取碼：d2xq

雖然Shader Graph大大降低了門檻，但是很多節(jié)點(diǎn)光是看一看還是沒法理解掌握的，于是很多同學(xué)說深入很難。但是如果一個事物從入門到掌握都很容易的話，不也就意味著也容易被替代么？

——照例的分割線——

歡迎加入游戲開發(fā)群歡樂攪基：1082025059

對游戲開發(fā)感興趣的童鞋可戳這里進(jìn)一步了解：http://www.levelpp.com/