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-01-13 17:42:53 +08:00
parent c95329e7ab
commit acf72e0e4f
6 changed files with 1585 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
assets/effects/sprite-flash-light.effect
View File

@ -37,7 +37,7 @@ CCEffect %{
} }
# 光束倾斜角度 # 光束倾斜角度
lightAngle: { lightAngle: {
valu: 45.0, value: 36.0,
inspctor: { inspctor: {
tooltip: "光束倾斜角度", tooltip: "光束倾斜角度",
range: [0.0, 1.0], range: [0.0, 1.0],
@ -46,19 +46,35 @@ CCEffect %{
# 光束宽度 # 光束宽度
lightWidth: { lightWidth: {
value: 0.4, value: 0.2,
inspector: { inspector: {
tooltip: "光束宽度" tooltip: "光束宽度"
} }
} }
# 启用光束渐变 # 启用光束渐变
enablGradient: { enableGradient: {
value: 0, value: 1.0,
inspecator: { inspecator: {
tooltip: "是否启用光束渐变。0：不启用，非0：启用" tooltip: "是否启用光束渐变。0：不启用，非0：启用"
} }
} }
# 裁剪掉透明区域上的光
cropAlpha: {
value: 1.0,
inspecator: {
tooltip: "是否裁剪透明区域上的光。0：不启用，非0：启用"
}
}
# 是否启用迷雾效果
enableFog: {
value: 0.0,
inspecator: {
tooltip: "是否启用迷雾效果。0：不启用，非0：启用"
}
}
}% }%
@ -124,49 +140,70 @@ CCProgram fs %{
float lightWidth; float lightWidth;
// 启用光束渐变 // 启用光束渐变
float enablGradient; // ps：编辑器还不支持 bool 类型的样子，因此用float来定义
float enableGradient;
// 裁剪掉透明区域上的点光 // 裁剪掉透明区域上的光
// ps：编辑器还不支持 bool 类型的样子，因此没在 CCEffect 中定义 // ps：编辑器还不支持 bool 类型的样子，因此用float来定义
bool cropAlpha; float cropAlpha;
// 是否启用迷雾效果 // 是否启用迷雾效果
// ps：编辑器还不支持 bool 类型的样子，因此没在 CCEffect 中定义 // ps：编辑器还不支持 bool 类型的样子，因此用float来定义
bool enableFog; float enableFog;
} }
// /** /**
// * 添加光束颜色 * 添加光束颜色
// */ */
// vec4 addLightColor(vec4 textureColor, vec2 lightCenterPoint, float radius, vec4 lightColor) { vec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {
// // 计算当前 uv 到 光束 的距离 // 计算当前 uv 到 光束 的距离
// float dis = distance(v_uv0, lightCenterPoint); float angleInRadians = radians(lightAngle);
// float a = 1.0 ; // 角度0与非0不同处理
float dis = 0.0;
if (mod(lightAngle, 180.0) != 0.0) {
// 计算光束中心线下方与X轴交点的X坐标
// 1.0 - lightCenterPoint.y 是将转换为OpenGL坐标系，下文的 1.0 - y 类似
float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));
// // 裁剪掉透明区域上的点光 // 以当前点画一条平行于X轴的线，假设此线和光束中心线相交的点为D点
// if (cropAlpha) { // 那么
// a *= step(0.01, textureColor.a); // D.y = uv0.y
// } // D.x = lightOffsetX + D.y / tan(angle)
float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);
// // 裁剪掉扩散范围外的uv（迷雾效果） // D 到当前 uv0 的距离就是
// if (!enableFog) { // dis = |uv0.x - D.x|
// a *= step(dis, radius); float offsetDis = abs(v_uv0.x - dx);
// }
// // 加入从中心往外渐变的效果 // 当前点到光束中心线的的垂直距离就好算了
// a *= 1.0 - (dis / radius); dis = sin(angleInRadians) * offsetDis;
} else {
dis = abs(v_uv0.y - lightCenterPoint.y);
}
// // 加点料，让中心点更加亮 float a = 1.0 ;
// // a = -1.0 * (a - 1.0) * (a - 1.0) + 1.0; // 裁剪掉透明区域上的点光
// // a = -1.0 * (a - 1.0) * (a - 1.0) * (a - 1.0) * (a - 1.0) + 1.0; if (bool(cropAlpha)) {
a *= step(0.01, textureColor.a);
}
// // 计算出扩散范围内，不同 uv 对应的实际扩散颜色值 // 裁剪掉光束范围外的uv（迷雾效果）
// vec4 diffusionColor = lightColor * a; if (!bool(enableFog)) {
a *= step(dis, lightWidth * 0.5);
}
// // 混合颜色：在原始图像颜色上叠加扩散颜色 // 加入从中心往外渐变的效果
// return textureColor * textureColor.a + diffusionColor; if (bool(enableGradient)) {
// } a *= 1.0 - dis / (lightWidth * 0.5);
}
// 计算出扩散范围内，不同 uv 对应的实际扩散颜色值
vec4 finalLightColor = lightColor * a;
// 混合颜色：在原始图像颜色上叠加扩散颜色
return textureColor * textureColor.a + finalLightColor;
}
#endif #endif
void main () { void main () {
@ -186,7 +223,7 @@ CCProgram fs %{
gl_FragColor = o; gl_FragColor = o;
#if ENABLE_DIFFUSION #if ENABLE_DIFFUSION
// gl_FragColor = addLightColor(gl_FragColor, lightCenterPoint, radius, lightColor); gl_FragColor = addLightColor(gl_FragColor, lightColor, lightCenterPoint, lightAngle, lightWidth);
#endif #endif
} }
}% }%

4
assets/effects/sprite-flash-light.effect.meta
View File

@ -5,11 +5,11 @@
{ {
"glsl1": { "glsl1": {
"vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n", "vert": "\nprecision highp float;\nuniform mat4 cc_matViewProj;\nuniform mat4 cc_matWorld;\n\nattribute vec3 a_position;\nattribute vec4 a_color;\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nattribute vec2 a_uv0;\nvarying vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n",
"frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\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\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n \n #if ENABLE_DIFFUSION\n\n #endif\n}\n" "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform float alphaThreshold;\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nvarying vec4 v_color;\n\n#if USE_TEXTURE\nvarying vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\nuniform vec4 lightColor;\nuniform vec2 lightCenterPoint;\nuniform float lightAngle;\nuniform float lightWidth;\nuniform float enableGradient;\nuniform float cropAlpha;\nuniform float enableFog;\n/**\n * 添加光束颜色\n */\nvec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {\n\n float angleInRadians = radians(lightAngle);\n\n float dis = 0.0;\n if (mod(lightAngle, 180.0) != 0.0) {\n\n float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));\n\n float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);\n\n float offsetDis = abs(v_uv0.x - dx);\n\n dis = sin(angleInRadians) * offsetDis;\n } else {\n dis = abs(v_uv0.y - lightCenterPoint.y);\n }\n \n float a = 1.0 ;\n\n if (bool(cropAlpha)) {\n a *= step(0.01, textureColor.a);\n }\n\n if (!bool(enableFog)) {\n a *= step(dis, lightWidth * 0.5);\n }\n\n if (bool(enableGradient)) {\n a *= 1.0 - dis / (lightWidth * 0.5);\n }\n\n vec4 finalLightColor = lightColor * a;\n\n return textureColor * textureColor.a + finalLightColor;\n}\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\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\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n \n #if ENABLE_DIFFUSION\n gl_FragColor = addLightColor(gl_FragColor, lightColor, lightCenterPoint, lightAngle, lightWidth);\n #endif\n}\n"
}, },
"glsl3": { "glsl3": {
"vert": "\nprecision highp float;\nuniform CCGlobal {\n vec4 cc_time;\n\n vec4 cc_screenSize;\n\n vec4 cc_screenScale;\n\n vec4 cc_nativeSize;\n\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\n vec4 cc_exposure;\n\n vec4 cc_mainLitDir;\n\n vec4 cc_mainLitColor;\n\n vec4 cc_ambientSky;\n vec4 cc_ambientGround;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n", "vert": "\nprecision highp float;\nuniform CCGlobal {\n vec4 cc_time;\n\n vec4 cc_screenSize;\n\n vec4 cc_screenScale;\n\n vec4 cc_nativeSize;\n\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\n vec4 cc_exposure;\n\n vec4 cc_mainLitDir;\n\n vec4 cc_mainLitColor;\n\n vec4 cc_ambientSky;\n vec4 cc_ambientGround;\n};\nuniform CCLocal {\n mat4 cc_matWorld;\n mat4 cc_matWorldIT;\n};\n\nin vec3 a_position;\nin vec4 a_color;\nout vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 a_uv0;\nout vec2 v_uv0;\n#endif\n\nvoid main () {\n vec4 pos = vec4(a_position, 1);\n\n #if CC_USE_MODEL\n pos = cc_matViewProj * cc_matWorld * pos;\n #else\n pos = cc_matViewProj * pos;\n #endif\n\n #if USE_TEXTURE\n v_uv0 = a_uv0;\n #endif\n\n v_color = a_color;\n\n gl_Position = pos;\n}\n",
"frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform ALPHA_TEST {\n float alphaThreshold;\n }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\nuniform Light {\n\n vec4 lightColor;\n\n vec2 lightCenterPoint;\n\n float lightAngle;\n\n float lightWidth;\n\n float enablGradient;\n\n bool cropAlpha;\n\n bool enableFog;\n}\n\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\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\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n \n #if ENABLE_DIFFUSION\n\n #endif\n}\n" "frag": "\nprecision highp float;\n\n#if USE_ALPHA_TEST\n \n uniform ALPHA_TEST {\n float alphaThreshold;\n }\n#endif\n\nvoid ALPHA_TEST (in vec4 color) {\n #if USE_ALPHA_TEST\n if (color.a < alphaThreshold) discard;\n #endif\n}\n\nvoid ALPHA_TEST (in float alpha) {\n #if USE_ALPHA_TEST\n if (alpha < alphaThreshold) discard;\n #endif\n}\n\nin vec4 v_color;\n\n#if USE_TEXTURE\nin vec2 v_uv0;\nuniform sampler2D texture;\n#endif\n\n#if ENABLE_DIFFUSION\nuniform Light {\n\n vec4 lightColor;\n\n vec2 lightCenterPoint;\n\n float lightAngle;\n\n float lightWidth;\n\n float enableGradient;\n\n float cropAlpha;\n\n float enableFog;\n}\n\n/**\n * 添加光束颜色\n */\nvec4 addLightColor(vec4 textureColor, vec4 lightColor, vec2 lightCenterPoint, float lightAngle, float lightWidth) {\n\n float angleInRadians = radians(lightAngle);\n\n float dis = 0.0;\n if (mod(lightAngle, 180.0) != 0.0) {\n\n float lightOffsetX = lightCenterPoint.x - ((1.0 - lightCenterPoint.y) / tan(angleInRadians));\n\n float dx = lightOffsetX + (1.0 - v_uv0.y) / tan(angleInRadians);\n\n float offsetDis = abs(v_uv0.x - dx);\n\n dis = sin(angleInRadians) * offsetDis;\n } else {\n dis = abs(v_uv0.y - lightCenterPoint.y);\n }\n \n float a = 1.0 ;\n\n if (bool(cropAlpha)) {\n a *= step(0.01, textureColor.a);\n }\n\n if (!bool(enableFog)) {\n a *= step(dis, lightWidth * 0.5);\n }\n\n if (bool(enableGradient)) {\n a *= 1.0 - dis / (lightWidth * 0.5);\n }\n\n vec4 finalLightColor = lightColor * a;\n\n return textureColor * textureColor.a + finalLightColor;\n}\n#endif\n\nvoid main () {\n vec4 o = vec4(1, 1, 1, 1);\n\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\n o *= v_color;\n\n ALPHA_TEST(o);\n\n gl_FragColor = o;\n \n #if ENABLE_DIFFUSION\n gl_FragColor = addLightColor(gl_FragColor, lightColor, lightCenterPoint, lightAngle, lightWidth);\n #endif\n}\n"
} }
} }
], ],

12
assets/materials/sprite-flash-light.mtl
View File

@ -10,5 +10,15 @@
"USE_TEXTURE": true, "USE_TEXTURE": true,
"ENABLE_DIFFUSION": true "ENABLE_DIFFUSION": true
}, },
"_props": {} "_props": {
"lightColor": {
"__type__": "cc.Color",
"r": 255,
"g": 245,
"b": 0,
"a": 255
},
"lightAngle": 36,
"lightWidth": 0.2
}
} }

1548
assets/scenes/FlashLightEffectScene.fire
View File

File diff suppressed because it is too large Load Diff

34
assets/scripts/FlashLightCtrlComponent.ts
View File

@ -26,7 +26,7 @@ export default class FlashLightCtrlComponent extends cc.Component {
// 将触摸点转换为OPENGL坐标系并归一化 // 将触摸点转换为OPENGL坐标系并归一化
// OpenGl 坐标系原点在左上角 // OpenGl 坐标系原点在左上角
this._flashLightUBO.certerPoint = cc.v2( this._flashLightUBO.lightCenterPoint = cc.v2(
this.node.anchorX + touchPointInNodeSpace.x / this.node.width, this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height) 1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
); );
@ -35,8 +35,10 @@ export default class FlashLightCtrlComponent extends cc.Component {
} }
private _onPropertyChange(localDiffusionUniform: FlashLightUBO) { private _onPropertyChange(localDiffusionUniform: FlashLightUBO) {
this._flashLightUBO.centerColor = localDiffusionUniform.centerColor; this._flashLightUBO.lightColor = localDiffusionUniform.lightColor;
this._flashLightUBO.radius = localDiffusionUniform.radius; this._flashLightUBO.lightAngle = localDiffusionUniform.lightAngle;
this._flashLightUBO.lightWidth = localDiffusionUniform.lightWidth;
this._flashLightUBO.enableGradient = localDiffusionUniform.enableGradient;
this._flashLightUBO.cropAlpha = localDiffusionUniform.cropAlpha; this._flashLightUBO.cropAlpha = localDiffusionUniform.cropAlpha;
this._flashLightUBO.enableFog = localDiffusionUniform.enableFog; this._flashLightUBO.enableFog = localDiffusionUniform.enableFog;
this._updateMaterial(); this._updateMaterial();
@ -45,9 +47,11 @@ export default class FlashLightCtrlComponent extends cc.Component {
private _updateMaterial() { private _updateMaterial() {
this.getComponents(cc.RenderComponent).forEach(renderComponent => { this.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0); let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("centerColor", this._flashLightUBO.centerColor); material.setProperty("lightColor", this._flashLightUBO.lightColor);
material.setProperty("centerPoint", this._flashLightUBO.certerPoint); material.setProperty("lightCenterPoint", this._flashLightUBO.lightCenterPoint);
material.setProperty("radius", this._flashLightUBO.radius); material.setProperty("lightAngle", this._flashLightUBO.lightAngle);
material.setProperty("lightWidth", this._flashLightUBO.lightWidth);
material.setProperty("enableGradient", this._flashLightUBO.enableGradient);
material.setProperty("cropAlpha", this._flashLightUBO.cropAlpha); material.setProperty("cropAlpha", this._flashLightUBO.cropAlpha);
material.setProperty("enableFog", this._flashLightUBO.enableFog); material.setProperty("enableFog", this._flashLightUBO.enableFog);
renderComponent.setMaterial(0, material); renderComponent.setMaterial(0, material);
@ -59,17 +63,27 @@ export class FlashLightUBO {
/** /**
* 中心点颜色 * 中心点颜色
*/ */
centerColor: cc.Color = cc.Color.YELLOW; lightColor: cc.Color = cc.Color.YELLOW;
/** /**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0]) * 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/ */
certerPoint: cc.Vec2 = cc.v2(0.5, 0.5); lightCenterPoint: cc.Vec2 = cc.v2(0.5, 0.5);
/** /**
* 扩散半径 [0.0, 1.0] * 光束角度 [0.0, 180.0]
*/ */
radius: number = 0.5; lightAngle: number = 45;
/**
* 光束宽度 [0.0, 1.0]
*/
lightWidth: number = 0.5;
/**
* 是否启用光束渐变
*/
enableGradient: boolean = true;
/** /**
* 是否裁剪掉透明区域上的点光 * 是否裁剪掉透明区域上的点光

35
assets/scripts/FlashLightEffectScene.ts
View File

@ -12,9 +12,12 @@ export default class FlashLightEffectScene extends cc.Component {
private _blueSliderLabel: cc.Label = null; private _blueSliderLabel: cc.Label = null;
private _alphaSlider: cc.Slider = null; private _alphaSlider: cc.Slider = null;
private _alphaSliderLabel: cc.Label = null; private _alphaSliderLabel: cc.Label = null;
private _radiuSlider: cc.Slider = null; private _lightWidthSlider: cc.Slider = null;
private _radiuSliderLabel: cc.Label = null; private _lightWidthSliderLabel: cc.Label = null;
private _lightAngleSlider: cc.Slider = null;
private _lightAngleSliderLabel: cc.Label = null;
private _enableGradientToggle: cc.Toggle = null;
private _cropAlphaToggle: cc.Toggle = null; private _cropAlphaToggle: cc.Toggle = null;
private _enableFogToggle: cc.Toggle = null; private _enableFogToggle: cc.Toggle = null;
@ -31,9 +34,12 @@ export default class FlashLightEffectScene extends cc.Component {
this._blueSliderLabel = cc.find("Canvas/Content/Controller/ColorBlueSlider/ValueLabel").getComponent(cc.Label); this._blueSliderLabel = cc.find("Canvas/Content/Controller/ColorBlueSlider/ValueLabel").getComponent(cc.Label);
this._alphaSlider = cc.find("Canvas/Content/Controller/ColorAlphaSlider/Slider").getComponent(cc.Slider); this._alphaSlider = cc.find("Canvas/Content/Controller/ColorAlphaSlider/Slider").getComponent(cc.Slider);
this._alphaSliderLabel = cc.find("Canvas/Content/Controller/ColorAlphaSlider/ValueLabel").getComponent(cc.Label); this._alphaSliderLabel = cc.find("Canvas/Content/Controller/ColorAlphaSlider/ValueLabel").getComponent(cc.Label);
this._radiuSlider = cc.find("Canvas/Content/Controller/RadiuSlider/Slider").getComponent(cc.Slider); this._lightWidthSlider = cc.find("Canvas/Content/Controller/LightWidthSlider/Slider").getComponent(cc.Slider);
this._radiuSliderLabel = cc.find("Canvas/Content/Controller/RadiuSlider/ValueLabel").getComponent(cc.Label); this._lightWidthSliderLabel = cc.find("Canvas/Content/Controller/LightWidthSlider/ValueLabel").getComponent(cc.Label);
this._lightAngleSlider = cc.find("Canvas/Content/Controller/LightAngleSlider/Slider").getComponent(cc.Slider);
this._lightAngleSliderLabel = cc.find("Canvas/Content/Controller/LightAngleSlider/ValueLabel").getComponent(cc.Label);
this._enableGradientToggle = cc.find("Canvas/Content/Controller/EnableGradientToggle/Toggle").getComponent(cc.Toggle);
this._cropAlphaToggle = cc.find("Canvas/Content/Controller/CropAlphaToggle/Toggle").getComponent(cc.Toggle); this._cropAlphaToggle = cc.find("Canvas/Content/Controller/CropAlphaToggle/Toggle").getComponent(cc.Toggle);
this._enableFogToggle = cc.find("Canvas/Content/Controller/EnableFogToggle/Toggle").getComponent(cc.Toggle); this._enableFogToggle = cc.find("Canvas/Content/Controller/EnableFogToggle/Toggle").getComponent(cc.Toggle);
@ -49,7 +55,10 @@ export default class FlashLightEffectScene extends cc.Component {
this._greenSlider.node.on("slide", this._onPropertyChanged, this); this._greenSlider.node.on("slide", this._onPropertyChanged, this);
this._blueSlider.node.on("slide", this._onPropertyChanged, this); this._blueSlider.node.on("slide", this._onPropertyChanged, this);
this._alphaSlider.node.on("slide", this._onPropertyChanged, this); this._alphaSlider.node.on("slide", this._onPropertyChanged, this);
this._radiuSlider.node.on("slide", this._onPropertyChanged, this); this._lightWidthSlider.node.on("slide", this._onPropertyChanged, this);
this._lightAngleSlider.node.on("slide", this._onPropertyChanged, this);
this._enableGradientToggle.node.on("toggle", this._onPropertyChanged, this);
this._cropAlphaToggle.node.on("toggle", this._onPropertyChanged, this); this._cropAlphaToggle.node.on("toggle", this._onPropertyChanged, this);
this._enableFogToggle.node.on("toggle", this._onPropertyChanged, this); this._enableFogToggle.node.on("toggle", this._onPropertyChanged, this);
} }
@ -59,7 +68,10 @@ export default class FlashLightEffectScene extends cc.Component {
this._greenSlider.node.off("slide", this._onPropertyChanged, this); this._greenSlider.node.off("slide", this._onPropertyChanged, this);
this._blueSlider.node.off("slide", this._onPropertyChanged, this); this._blueSlider.node.off("slide", this._onPropertyChanged, this);
this._alphaSlider.node.off("slide", this._onPropertyChanged, this); this._alphaSlider.node.off("slide", this._onPropertyChanged, this);
this._radiuSlider.node.off("slide", this._onPropertyChanged, this); this._lightWidthSlider.node.off("slide", this._onPropertyChanged, this);
this._lightAngleSlider.node.off("slide", this._onPropertyChanged, this);
this._enableGradientToggle.node.off("toggle", this._onPropertyChanged, this);
this._cropAlphaToggle.node.off("toggle", this._onPropertyChanged, this); this._cropAlphaToggle.node.off("toggle", this._onPropertyChanged, this);
this._enableFogToggle.node.off("toggle", this._onPropertyChanged, this); this._enableFogToggle.node.off("toggle", this._onPropertyChanged, this);
} }
@ -74,18 +86,23 @@ export default class FlashLightEffectScene extends cc.Component {
this._greenSliderLabel.string = `${this._greenSlider.progress.toFixed(2)} | ${Math.round(255 * this._greenSlider.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._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)}`; this._alphaSliderLabel.string = `${this._alphaSlider.progress.toFixed(2)} | ${Math.round(255 * this._alphaSlider.progress)}`;
this._radiuSliderLabel.string = `${this._radiuSlider.progress.toFixed(2)}`; this._lightWidthSliderLabel.string = `${this._lightWidthSlider.progress.toFixed(2)}`;
let angle = 180 * this._lightAngleSlider.progress;
this._lightAngleSliderLabel.string = `${this._lightAngleSlider.progress.toFixed(2)} | ${angle.toFixed(2)}`;
// 通知子节点更新材质 // 通知子节点更新材质
this._examplesParentNode.children.forEach(childNode => { this._examplesParentNode.children.forEach(childNode => {
childNode.emit("on_property_change", <FlashLightUBO>{ childNode.emit("on_property_change", <FlashLightUBO>{
centerColor: cc.color( lightColor: cc.color(
Math.round(255 * this._redSlider.progress), Math.round(255 * this._redSlider.progress),
Math.round(255 * this._greenSlider.progress), Math.round(255 * this._greenSlider.progress),
Math.round(255 * this._blueSlider.progress), Math.round(255 * this._blueSlider.progress),
Math.round(255 * this._alphaSlider.progress) Math.round(255 * this._alphaSlider.progress)
), ),
radius: this._radiuSlider.progress, lightAngle: angle,
lightWidth: this._lightWidthSlider.progress,
enableGradient: this._enableGradientToggle.isChecked,
cropAlpha: this._cropAlphaToggle.isChecked, cropAlpha: this._cropAlphaToggle.isChecked,
enableFog: this._enableFogToggle.isChecked enableFog: this._enableFogToggle.isChecked
}); });