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
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/scripts/FlashLightCtrlComponent.ts
View File

@@ -26,7 +26,7 @@ export default class FlashLightCtrlComponent extends cc.Component {
// 将触摸点转换为OPENGL坐标系并归一化
// OpenGl 坐标系原点在左上角
this._flashLightUBO.certerPoint = cc.v2(
this._flashLightUBO.lightCenterPoint = cc.v2(
this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
);
@@ -35,8 +35,10 @@ export default class FlashLightCtrlComponent extends cc.Component {
}
private _onPropertyChange(localDiffusionUniform: FlashLightUBO) {
this._flashLightUBO.centerColor = localDiffusionUniform.centerColor;
this._flashLightUBO.radius = localDiffusionUniform.radius;
this._flashLightUBO.lightColor = localDiffusionUniform.lightColor;
this._flashLightUBO.lightAngle = localDiffusionUniform.lightAngle;
this._flashLightUBO.lightWidth = localDiffusionUniform.lightWidth;
this._flashLightUBO.enableGradient = localDiffusionUniform.enableGradient;
this._flashLightUBO.cropAlpha = localDiffusionUniform.cropAlpha;
this._flashLightUBO.enableFog = localDiffusionUniform.enableFog;
this._updateMaterial();
@@ -45,9 +47,11 @@ export default class FlashLightCtrlComponent extends cc.Component {
private _updateMaterial() {
this.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("centerColor", this._flashLightUBO.centerColor);
material.setProperty("centerPoint", this._flashLightUBO.certerPoint);
material.setProperty("radius", this._flashLightUBO.radius);
material.setProperty("lightColor", this._flashLightUBO.lightColor);
material.setProperty("lightCenterPoint", this._flashLightUBO.lightCenterPoint);
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("enableFog", this._flashLightUBO.enableFog);
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])
*/
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 _alphaSlider: cc.Slider = null;
private _alphaSliderLabel: cc.Label = null;
private _radiuSlider: cc.Slider = null;
private _radiuSliderLabel: cc.Label = null;
private _lightWidthSlider: cc.Slider = 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 _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._alphaSlider = cc.find("Canvas/Content/Controller/ColorAlphaSlider/Slider").getComponent(cc.Slider);
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._radiuSliderLabel = cc.find("Canvas/Content/Controller/RadiuSlider/ValueLabel").getComponent(cc.Label);
this._lightWidthSlider = cc.find("Canvas/Content/Controller/LightWidthSlider/Slider").getComponent(cc.Slider);
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._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._blueSlider.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._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._blueSlider.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._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._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._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 => {
childNode.emit("on_property_change", <FlashLightUBO>{
centerColor: cc.color(
lightColor: cc.color(
Math.round(255 * this._redSlider.progress),
Math.round(255 * this._greenSlider.progress),
Math.round(255 * this._blueSlider.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,
enableFog: this._enableFogToggle.isChecked
});