在閱讀過(guò)前面的基礎(chǔ)章節(jié)，相信現(xiàn)在的你已經(jīng)迫不及待想實(shí)現(xiàn)點(diǎn)特效晾浴。
那么我們先來(lái)點(diǎn)簡(jiǎn)單的辅肾，比如：老化特效（完整代碼在我的 Github 倉(cāng)庫(kù) 或 Gitee 倉(cāng)庫(kù) 中可以找到）陪毡。
老化特效在游戲中有很多使用場(chǎng)合米母。比如：
- 將照片老化
- 在玩家游戲通關(guān)過(guò)程中，如果玩家通關(guān)失敗毡琉，給游戲界面進(jìn)行老化
- ...
使用恰當(dāng)會(huì)給游戲帶來(lái)更好的體驗(yàn)铁瞒，現(xiàn)在我們看看怎么實(shí)現(xiàn)吧。
一桅滋、創(chuàng)建新材質(zhì)
如果你很清楚怎么創(chuàng)建材質(zhì)慧耍，那么可以跳到下個(gè)章節(jié)身辨。
既然我們要寫(xiě)自己的特效，那么這次芍碧，先來(lái)個(gè)基礎(chǔ)的創(chuàng)建教程：
- 我們先創(chuàng)建一個(gè)材質(zhì)和一個(gè)Effect文件
- 打開(kāi)材質(zhì)的屬性編輯器煌珊，指定 Effect 為我們剛剛創(chuàng)建的 Effect
- 將我們材質(zhì)綁定到一個(gè)場(chǎng)景中的紋理上，方便預(yù)覽調(diào)試
Ok. Let's go!
一泌豆、老化原理
其實(shí)定庵，老化的原理很簡(jiǎn)單，針對(duì)紋理的每個(gè)uv顏色踪危，執(zhí)行下面的公式就可以了
r = 0.393 * r + 0.769 * g + 0.189 * b;
g = 0.349 * r + 0.686 * g + 0.168 * b;
b = 0.272 * r + 0.534 * g + 0.131 * b;
現(xiàn)在蔬浙，打開(kāi)我們的特效 Effect 文件，找到 片段著色器 代碼部分贞远，加入如下函數(shù)即可:
ps: 可能你會(huì)注意畴博，框框部分，我加了一個(gè)宏 USE_OLD_PHOTO 蓝仲，這是我自己為了調(diào)試方便而加入的宏俱病，在 Cocos Creator Shader Effect 系列 - 3 - Effect 文件調(diào)試 文章中，我有說(shuō)到宏調(diào)試的方案杂曲，這里是一個(gè)應(yīng)用例子庶艾。
二、線性老化
通過(guò)上面的公式擎勘，我們得到的是一個(gè)直接老化后的效果咱揍。
而在實(shí)際使用的時(shí)候，我們有可能需要一個(gè)漸變過(guò)程棚饵，從不老化漸變?yōu)槔匣Ч?/strong> 煤裙。
那么，我們?cè)囍鴣?lái)做一個(gè) 線性漸變的老化效果噪漾。
線性漸變硼砰，其實(shí)也是很好理解一個(gè)公式：
finalColor = srcColor + (oldColor - srcColor) * oldLevel;
- srcColor：原始顏色
- oldColor：最終老化后的顏色
- oldLevel：老化程度，值在區(qū)間 [0.0, 1.0]
依舊還是在 片段著色器 中加入這部分代碼即可：
這里有些注意事項(xiàng)要說(shuō)一下：
- 著色程序執(zhí)行時(shí)是從上往下執(zhí)行欣硼，因此题翰，如果我們要在
main()函數(shù)中調(diào)用getOldPhotoColor()函數(shù)，那么getOldPhotoColor()函數(shù)要在main()函數(shù)之前定義 -
getOldPhotoColor()函數(shù)在main()函數(shù)使用時(shí)诈胜，要注意包裹在USE_OLD_PHOTO宏中使用豹障，因?yàn)檫@個(gè)函數(shù)是定義在該宏中。 - Cocos Creator 在 關(guān)于 UBO 內(nèi)存布局 中有如下規(guī)定：
首先結(jié)論是焦匈，我們規(guī)定在 shader 中所有非 sampler 的 uniform 都應(yīng)以 block 形式聲明
- 因此血公，按照這個(gè)規(guī)定，我們將
oldLevel屬性放在了UBO結(jié)構(gòu)對(duì)象中
- 我們定義了的
oldLeveluniform 屬性缓熟，還應(yīng)該在 CCEffect 結(jié)構(gòu)中聲明累魔，這樣子我們可以在編輯器中進(jìn)行變量修改調(diào)試
Inspector
ps: 注意摔笤，編輯器屬性的key是inspector名稱(chēng)，而官方文檔截圖中的editor垦写，小問(wèn)題吕世，提醒一下。
image.png
來(lái)自評(píng)論2樓的提醒
Creator 3D 中梯澜，這里的確為 editor 寞冯，Cocos Creator 從 2.3 開(kāi)始同步了這個(gè)修改，2.3 之前還是 inspector
OK晚伙，現(xiàn)在我們就可以打開(kāi)我們的編輯器，在 Inspector 中修改 oldLevel 去查看不同老化程度的效果俭茧。
三咆疗、修改材質(zhì) uniform 屬性
當(dāng)然我們也可以做個(gè)測(cè)試場(chǎng)景去實(shí)時(shí)看這個(gè)漸變效果。代碼中更新材質(zhì)的 uniform 屬性母债，在 Cocos Creator 上需要3步：
// 獲取渲染組件的材質(zhì)
let material: cc.Material = sprite.getMaterial(0);
// 給材質(zhì)的 uniform 變量跟新值
// let oldLevel: number = 1.0; // [0.0, 1.0]
material.setProperty("oldLevel", oldLevel);
// 重新將材質(zhì)設(shè)置回去
sprite.setMaterial(0, material);
配合一些其他組件午磁，比如：cc.Slider 等，我們就可以做出這種測(cè)試效果了毡们。
四迅皇、總結(jié)
寫(xiě)完下來(lái)，是不是感覺(jué)我很啰嗦衙熔，因?yàn)槭沁@個(gè)系列的第一個(gè)的特效登颓，所以難免寫(xiě)了很多基礎(chǔ)的內(nèi)容，后續(xù)的特效可能不會(huì)那么啰嗦了红氯。
Ok框咙，回歸主題。
其實(shí)痢甘，除了 老化原理的那條公式 之外喇嘱，其他都是屬于很基礎(chǔ)，很通用的東西塞栅，后續(xù)都可以用上者铜。
而類(lèi)似的，單單公式就可以實(shí)現(xiàn)的一些特效放椰，還有我們經(jīng)常用的 變灰特效 作烟。而這個(gè)特效已經(jīng)內(nèi)置在 Cocos 中，公式是什么呢庄敛？大家自行查閱俗壹，課后作業(yè)~~
OK，本章完藻烤，完整代碼在我的 Github 倉(cāng)庫(kù) 或 Gitee 倉(cāng)庫(kù) 中可以找到绷雏。
下一篇：
上一篇：
