這里制作了一個按鈕流光特效
流光特效.gif
- 主要構(gòu)成是在原圖片上面蔬浙，混合了一層中間實尸诽，兩邊虛的白色充當(dāng)光效观谦，然后移動
制作流程
-
首先創(chuàng)建流光特效需要使用到的材質(zhì)球和特效
材質(zhì)球 -
將材質(zhì)球的 effect 選擇為自己新創(chuàng)建的
effect -
修改 effect 里面的代碼实撒，制作特效
- 我這里貼出了 核心代碼
- %% vs 是頂點 shader 模塊
- %% fs 是面 shader 模塊疫剃，我們因為要做流光效果钉疫，所以這里需要修改的就是這里面的代碼
- v_uv0 是當(dāng)前要渲染的點，
- color 是當(dāng)前要渲染點的 texture 的 rgba
- gl_FragColor 是你告訴系統(tǒng)最終渲染顏色
- 核心就是去用系統(tǒng)給你的點的 rgba 和點的位置巢价， 去計算得出你需要的效果的 rgba
void main () {
vec4 color = v_color;
#if USE_TEXTURE
color *= texture2D(texture, v_uv0);
#if _USE_ETC1_TEXTURE
color.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;
#endif
float y1 = -1.0 * tan_value * (v_uv0.x - start_x);
float y2 = -1.0 * tan_value * (v_uv0.x - start_x - light_width);
if (v_uv0.y > y1 && v_uv0.y < y2) {
//計算現(xiàn)在的點到中心線的距離
float dis = v_uv0.y * -1.0 / tan_value + (light_width / 2.0) + start_x - v_uv0.x;
if (dis < 0.0) {
dis = dis * -1.0;
}
//距離所占比例
// * 1.0 后變?yōu)橥该鞫? 所以本身就是透明度
float sc = dis / (light_width / 2.0);
//計算光的透明度 營造光暈效果
// 中間不透明 兩邊透明
//用 sin 來達(dá)成先快后慢的變化效果
float lightA = (1.0 - sin(sc * 3.1415926536 / 2.0)) * light_strength;
float newr = color.r * (1.0 - lightA) + 255.0 * lightA;
float newg = color.g * (1.0 - lightA) + 255.0 * lightA;
float newb = color.b * (1.0 - lightA) + 255.0 * lightA;
float newa = color.a * (1.0 - lightA) + 1.0 * lightA;
color = vec4(newr, newg, newb, newa);
}
#endif
gl_FragColor = color;
}
流光特效
- 我這里主要的思想是牲阁，首先計算出光效的兩條邊線，在兩條線之間的區(qū)域就是我們要調(diào)整顏色的區(qū)域壤躲。
- 調(diào)整顏色的算法根據(jù)你的需要去調(diào)整
我首先是做了一條白色的光城菊，
但是實際光線應(yīng)該是中間明兩邊弱的，所以我又計算了一條中心線碉克，計算點到中心線的距離凌唬，根據(jù)距離去調(diào)整光線強(qiáng)弱。
-
實際做出來的效果顯得中間區(qū)域很亮漏麦，光線變?nèi)醯乃俣人俣蕊@得很慢客税，所以要做一條先快速變化后慢速變化的曲線，然后我想到了三角函數(shù)撕贞，然后用 sin 函數(shù)去控制變化曲線
image.png 最終就是整體的流光效果更耻。
小結(jié)
- 我這里只是給出一個思維示例，不代表你們做效果的時候完全按這個方法去做捏膨，只是提供一個分析問題和解決問題的思路秧均，希望看完能對你有所啟發(fā)。
- 另外号涯，我個人是 iOS 開發(fā)者熬北，對 cocos 不是特別精通，如果大家有什么好的建議诚隙，十分歡迎大家留言探討讶隐。
- 最后代碼已經(jīng)上傳GitHub，有幫忙到你的不要忘記點start哦久又！
- Demo
