Test_Project_Cocos/CocosCreator-Shader-Effect-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

整理项目

Browse Source
This commit is contained in:
caizhitao 2020-06-23 17:12:44 +08:00
parent 987bb8f58b
commit e6f520d4fa
14 changed files with 6206 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/effects/sprite-glow-inner.effect → assets/effects/sprite-glow-inner-v1.effect
View File

0
assets/effects/sprite-glow-inner.effect.meta → assets/effects/sprite-glow-inner-v1.effect.meta
View File

30
assets/effects/sprite-glow-inner-v2.effect
View File

@ -1,4 +1,6 @@
// Copyright (c) 2017-2018 Xiamen Yaji Software Co., Ltd.
// 相比起 v1 版本的变更
//
// 1. 切换了采样算法，由原来圆采样，改为矩形采样，减少大量三角函数运算，在保持差不多效果的前提下，性能得到大幅提升
CCEffect %{
techniques:
@ -25,21 +27,19 @@ CCEffect %{
spriteWidth: {
value: 500,
editor: {
tooltip: "纹理宽度"
tooltip: "纹理宽度（px）"
}
}
spriteHeight: {
value: 500,
editor: {
tooltip: "纹理高度"
tooltip: "纹理高度（px）"
}
}
# 发光宽度（相对于宽度）
glowColorSize: {
value: 0.2,
glowRange: {
value: 20,
editor: {
tooltip: "发光宽度",
range: [0.0, 1.0],
tooltip: "内发光范围（px）"
}
}
# 发光透明度阈值
@ -48,7 +48,7 @@ CCEffect %{
glowThreshold: {
value: 0.1,
editor: {
tooltip: "发光阈值",
tooltip: "发光阈值（只有超过这个透明度的点才会发光）",
range: [0.0, 1.0]
}
}
@ -117,8 +117,8 @@ CCProgram fs %{
// 纹理高度（px）
float spriteHeight;
// 发光范围
float glowColorSize;
// 内发光范围（px）
float glowRange;
// 发光阈值
float glowThreshold;
@ -152,7 +152,7 @@ CCProgram fs %{
*/
float getGlowAlpha() {
// 如果发光宽度为0，直接返回0.0透明度，减少计算量
if (glowColorSize == 0.0) {
if (glowRange == 0.0) {
return 0.0;
}
@ -166,8 +166,8 @@ CCProgram fs %{
}
// 每一圈的对应的步长
float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / range);
float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / range);
float per_step_x = (1.0 / spriteWidth) * (glowRange / range);
float per_step_y = (1.0 / spriteHeight) * (glowRange / range);
// 取样周边一定范围透明度
float totalAlpha = 0.0;
@ -216,7 +216,7 @@ CCProgram fs %{
alpha = 1.0 - alpha;
// 给点调料，让靠近边缘的更加亮
alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;
alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;
}
// 源颜色（内发光）
vec4 color_src = glowColor * alpha;

4
assets/effects/sprite-glow-inner-v2.effect.meta
View File

@ -5,11 +5,11 @@
{
"glsl1": {
"vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform vec4 glowColor;\nuniform float spriteWidth;\nuniform float spriteHeight;\nuniform float glowColorSize;\nuniform float glowThreshold;\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture2D(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowColorSize == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform float alphaThreshold;\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nvarying vec4 v_color;\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform vec4 glowColor;\nuniform float spriteWidth;\nuniform float spriteHeight;\nuniform float glowRange;\nuniform float glowThreshold;\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture2D(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowRange == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowRange / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowRange / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture2D(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
},
"glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n mat4 cc_matView;\n mat4 cc_matViewInv;\n mat4 cc_matProj;\n mat4 cc_matProjInv;\n mat4 cc_matViewProj;\n mat4 cc_matViewProjInv;\n vec4 cc_cameraPos;\n vec4 cc_time;\n mediump vec4 cc_screenSize;\n mediump vec4 cc_screenScale;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n v_color = a_color;\n gl_Position = pos;\n}",
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform glow {\n vec4 glowColor;\n float spriteWidth;\n float spriteHeight;\n float glowColorSize;\n float glowThreshold;\n};\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowColorSize == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowColorSize * spriteWidth / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowColorSize * spriteHeight / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) * (alpha - 1.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
"frag": "\nprecision highp float;\n#if USE_ALPHA_TEST\n uniform ALPHA_TEST {\n float alphaThreshold;\n };\n#endif\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\nin vec4 v_color;\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n#if SHOW_INNER_GLOW\nuniform glow {\n vec4 glowColor;\n float spriteWidth;\n float spriteHeight;\n float glowRange;\n float glowThreshold;\n};\nvec4 getTextureColor(sampler2D texture, vec2 v_uv0) {\n if (v_uv0.x > 1.0 || v_uv0.x < 0.0 || v_uv0.y > 1.0 || v_uv0.y < 0.0) {\n return vec4(0.0, 0.0, 0.0, 0.0);\n }\n return texture(texture, v_uv0);\n}\nfloat getGlowAlpha() {\n if (glowRange == 0.0) {\n return 0.0;\n }\n vec4 srcColor = getTextureColor(texture, v_uv0);\n if (srcColor.a <= glowThreshold) {\n return srcColor.a;\n }\n float per_step_x = (1.0 / spriteWidth) * (glowRange / 5.0);\n float per_step_y = (1.0 / spriteHeight) * (glowRange / 5.0);\n float totalAlpha = 0.0;\n for (float x = -5.0; x <= 5.0; x++) {\n for (float y = -5.0; y <= 5.0; y++) {\n totalAlpha += getTextureColor(texture, v_uv0 + vec2(x * per_step_x, y * per_step_y)).a;\n }\n }\n totalAlpha /= (5.0 + 5.0 + 1.0) * (5.0 + 5.0 + 1.0);\n return totalAlpha;\n}\n#endif\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n #if USE_TEXTURE\n o *= texture(texture, v_uv0);\n #if CC_USE_ALPHA_ATLAS_TEXTURE\n o.a *= texture2D(texture, v_uv0 + vec2(0, 0.5)).r;\n #endif\n #endif\n o *= v_color;\n ALPHA_TEST(o);\n gl_FragColor = o;\n #if SHOW_INNER_GLOW\n vec4 color_dest = o;\n float alpha = getGlowAlpha();\n if (alpha > glowThreshold) {\n alpha = 1.0 - alpha;\n alpha = -1.0 * pow((alpha - 1.0), 4.0) + 1.0;\n }\n vec4 color_src = glowColor * alpha;\n gl_FragColor = color_src * color_src.a + color_dest;\n #endif\n}"
}
}
],

0
assets/materials/sprite-glow-inner.mtl → assets/materials/sprite-glow-inner-v1.mtl
View File

0
assets/materials/sprite-glow-inner.mtl.meta → assets/materials/sprite-glow-inner-v1.mtl.meta
View File

8
assets/materials/sprite-glow-inner-v2.mtl
View File

@ -14,15 +14,13 @@
"SHOW_INNER_GLOW": true
},
"props": {
"glowColorSize": 0.1,
"glowColor": {
"__type__": "cc.Color",
"r": 255,
"g": 255,
"b": 255,
"g": 0,
"b": 0,
"a": 255
},
"glowThreshold": 0.1
}
}
}
}

2
assets/materials/sprite-glow-inner-v2.mtl.meta
View File

@ -1,6 +1,6 @@
{
"ver": "1.0.3",
"uuid": "ed801db5-01ea-4505-b505-e661a3f1bb07",
"uuid": "5e2baa0c-d8bf-493f-89f7-a11352092439",
"dataAsSubAsset": null,
"subMetas": {}
}

14
assets/scenes/GlowInnerEffectScene.fire
View File

@ -174,7 +174,7 @@
"array": [
0,
0,
416.1116748714887,
415.69219381653056,
0,
0,
0,
@ -5384,7 +5384,7 @@
"_enabled": true,
"_materials": [
{
"__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
"__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
}
],
"_srcBlendFactor": 770,
@ -5478,7 +5478,7 @@
"_enabled": true,
"_materials": [
{
"__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
"__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
}
],
"_srcBlendFactor": 770,
@ -5572,7 +5572,7 @@
"_enabled": true,
"_materials": [
{
"__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
"__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
}
],
"_srcBlendFactor": 770,
@ -5666,7 +5666,7 @@
"_enabled": true,
"_materials": [
{
"__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
"__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
}
],
"_srcBlendFactor": 770,
@ -5760,7 +5760,7 @@
"_enabled": true,
"_materials": [
{
"__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
"__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
}
],
"_srcBlendFactor": 770,
@ -5854,7 +5854,7 @@
"_enabled": true,
"_materials": [
{
"__uuid__": "ed801db5-01ea-4505-b505-e661a3f1bb07"
"__uuid__": "5e2baa0c-d8bf-493f-89f7-a11352092439"
}
],
"_useOriginalSize": false,

6028
assets/scenes/GlowInnerV2EffectScene.fire Executable file
View File

File diff suppressed because it is too large Load Diff

7
assets/scenes/GlowInnerV2EffectScene.fire.meta Normal file
View File

@ -0,0 +1,7 @@
{
"ver": "1.2.7",
"uuid": "6d781c30-9520-4a95-9e9d-eb99fb2bbded",
"asyncLoadAssets": false,
"autoReleaseAssets": false,
"subMetas": {}
}

13
assets/scripts/GlowInnerEffectScene.ts
View File

@ -73,9 +73,8 @@ export default class GlowInnerEffectScene extends cc.Component {
this._blueSliderLabel.string = `${this._blueSlider.progress.toFixed(2)} | ${Math.round(255 * this._blueSlider.progress)}`;
this._alphaSliderLabel.string = `${this._alphaSlider.progress.toFixed(2)} | ${Math.round(255 * this._alphaSlider.progress)}`;
// 这里为约束一下值发光宽度值在 [0.0, 0.1] 因为 0.1+ 之后的效果可能不明显，也可以自己尝试修改
let realGlowWidthProgress = this._glowWidthSlider.progress * 0.1;
this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(2)}`;
let realGlowWidthProgress = this._glowWidthSlider.progress * 200;
this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(0)}`;
// 这里为约束一下值发光阈值值在 [0.0, 0.5] 因为 0.5+ 之后的效果可能就是其他效果，也可以自己修改这里
// let realGlowThresholdProgress = this._glowThresholdSlider.progress * 0.5;
@ -85,7 +84,7 @@ export default class GlowInnerEffectScene extends cc.Component {
// 更新材质
this._updateRenderComponentMaterial({
glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
glowColorSize: realGlowWidthProgress,
glowRange: realGlowWidthProgress,
glowThreshold: realGlowThresholdProgress,
});
}
@ -99,9 +98,9 @@ export default class GlowInnerEffectScene extends cc.Component {
*/
private _updateRenderComponentMaterial(param: {
/**
* 发光宽度 [0.0, 1.0]
* 发光宽度（px）
*/
glowColorSize: number;
glowRange: number;
/**
* 发光颜色 [0.0, 1.0]
@ -119,7 +118,7 @@ export default class GlowInnerEffectScene extends cc.Component {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("spriteWidth", spriteFrameRect.width);
material.setProperty("spriteHeight", spriteFrameRect.height);
material.setProperty("glowColorSize", param.glowColorSize);
material.setProperty("glowRange", param.glowRange);
material.setProperty("glowColor", param.glowColor);
material.setProperty("glowThreshold", param.glowThreshold);
renderComponent.setMaterial(0, material);

128
assets/scripts/GlowInnerV2EffectScene.ts Normal file
View File

@ -0,0 +1,128 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class GlowInnerV2EffectScene extends cc.Component {
private _redSlider: cc.Slider = null;
private _redSliderLabel: cc.Label = null;
private _greenSlider: cc.Slider = null;
private _greenSliderLabel: cc.Label = null;
private _blueSlider: cc.Slider = null;
private _blueSliderLabel: cc.Label = null;
private _alphaSlider: cc.Slider = null;
private _alphaSliderLabel: cc.Label = null;
private _glowWidthSlider: cc.Slider = null;
private _glowWidthSliderLabel: cc.Label = null;
private _glowThresholdSlider: cc.Slider = null;
private _glowThresholdSliderLabel: cc.Label = null;
private _scrollView: cc.ScrollView = null;
onLoad() {
this._redSlider = cc.find("Canvas/Content/Sliders/ColorRedSlider/Slider").getComponent(cc.Slider);
this._redSliderLabel = cc.find("Canvas/Content/Sliders/ColorRedSlider/ValueLabel").getComponent(cc.Label);
this._greenSlider = cc.find("Canvas/Content/Sliders/ColorGreenSlider/Slider").getComponent(cc.Slider);
this._greenSliderLabel = cc.find("Canvas/Content/Sliders/ColorGreenSlider/ValueLabel").getComponent(cc.Label);
this._blueSlider = cc.find("Canvas/Content/Sliders/ColorBlueSlider/Slider").getComponent(cc.Slider);
this._blueSliderLabel = cc.find("Canvas/Content/Sliders/ColorBlueSlider/ValueLabel").getComponent(cc.Label);
this._alphaSlider = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/Slider").getComponent(cc.Slider);
this._alphaSliderLabel = cc.find("Canvas/Content/Sliders/ColorAlphaSlider/ValueLabel").getComponent(cc.Label);
this._glowWidthSlider = cc.find("Canvas/Content/Sliders/GlowWidthSlider/Slider").getComponent(cc.Slider);
this._glowWidthSliderLabel = cc.find("Canvas/Content/Sliders/GlowWidthSlider/ValueLabel").getComponent(cc.Label);
this._glowThresholdSlider = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/Slider").getComponent(cc.Slider);
this._glowThresholdSliderLabel = cc.find("Canvas/Content/Sliders/GlowThresholdSlider/ValueLabel").getComponent(cc.Label);
this._scrollView = cc.find("Canvas/Content/ScrollView").getComponent(cc.ScrollView);
}
onEnable() {
this._redSlider.node.on("slide", this._onSliderChanged, this);
this._greenSlider.node.on("slide", this._onSliderChanged, this);
this._blueSlider.node.on("slide", this._onSliderChanged, this);
this._alphaSlider.node.on("slide", this._onSliderChanged, this);
this._glowWidthSlider.node.on("slide", this._onSliderChanged, this);
this._glowThresholdSlider.node.on("slide", this._onSliderChanged, this);
}
onDisable() {
this._redSlider.node.off("slide", this._onSliderChanged, this);
this._greenSlider.node.off("slide", this._onSliderChanged, this);
this._blueSlider.node.off("slide", this._onSliderChanged, this);
this._alphaSlider.node.off("slide", this._onSliderChanged, this);
this._glowWidthSlider.node.off("slide", this._onSliderChanged, this);
this._glowThresholdSlider.node.off("slide", this._onSliderChanged, this);
}
start() {
this._onSliderChanged();
}
private _onSliderChanged() {
// 更新进度条值 Label 文本
this._redSliderLabel.string = `${this._redSlider.progress.toFixed(2)} | ${Math.round(255 * this._redSlider.progress)}`;
this._greenSliderLabel.string = `${this._greenSlider.progress.toFixed(2)} | ${Math.round(255 * this._greenSlider.progress)}`;
this._blueSliderLabel.string = `${this._blueSlider.progress.toFixed(2)} | ${Math.round(255 * this._blueSlider.progress)}`;
this._alphaSliderLabel.string = `${this._alphaSlider.progress.toFixed(2)} | ${Math.round(255 * this._alphaSlider.progress)}`;
let realGlowWidthProgress = this._glowWidthSlider.progress * 200;
this._glowWidthSliderLabel.string = `${realGlowWidthProgress.toFixed(0)}`;
// 这里为约束一下值发光阈值值在 [0.0, 0.5] 因为 0.5+ 之后的效果可能就是其他效果，也可以自己修改这里
// let realGlowThresholdProgress = this._glowThresholdSlider.progress * 0.5;
let realGlowThresholdProgress = this._glowThresholdSlider.progress;
this._glowThresholdSliderLabel.string = `${realGlowThresholdProgress.toFixed(2)}`;
// 更新材质
this._updateRenderComponentMaterial({
glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
glowRange: realGlowWidthProgress,
glowThreshold: realGlowThresholdProgress,
});
}
/**
* 更新渲染组件的材质
*
* 1. 获取材质
* 2. 给材质的 unitform 变量赋值
* 3. 重新将材质赋值回去
*/
private _updateRenderComponentMaterial(param: {
/**
* 发光宽度（px）
*/
glowRange: number;
/**
* 发光颜色 [0.0, 1.0]
*/
glowColor: cc.Vec4;
/**
* 发光阈值 [0.0, 1.0]
*/
glowThreshold: number;
}) {
this._scrollView.content.children.forEach((childNode) => {
childNode.getComponents(cc.RenderComponent).forEach((renderComponent) => {
let spriteFrameRect = (<cc.Sprite>renderComponent).spriteFrame.getRect();
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("spriteWidth", spriteFrameRect.width);
material.setProperty("spriteHeight", spriteFrameRect.height);
material.setProperty("glowRange", param.glowRange);
material.setProperty("glowColor", param.glowColor);
material.setProperty("glowThreshold", param.glowThreshold);
renderComponent.setMaterial(0, material);
});
});
}
}

9
assets/scripts/GlowInnerV2EffectScene.ts.meta Normal file
View File

@ -0,0 +1,9 @@
{
"ver": "1.0.8",
"uuid": "1c87571b-ed1c-476d-afc7-917037e08f5a",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}