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

优化demo

Browse Source
This commit is contained in:
caizhitao
2020-01-12 00:35:56 +08:00
parent 7e197c0892
commit ba90b2170c
6 changed files with 718 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
assets/scripts/LocalDiffusionCtrl.ts
View File

@@ -2,9 +2,7 @@ const { ccclass, property } = cc._decorator;
@ccclass
export default class LocalDiffusionCtrl extends cc.Component {
private _centerPointPos: cc.Vec2 = cc.v2(0.5, 0.5);
private _centerColor: cc.Color = cc.Color.RED;
private _radius: number = 0.2;
private _localDiffusionUniform: LocalDiffusionUniform = new LocalDiffusionUniform();
onEnable() {
this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchStart, this);
@@ -28,50 +26,51 @@ export default class LocalDiffusionCtrl extends cc.Component {
// 将触摸点转换为OPENGL坐标系并归一化
// OpenGl 坐标系原点在左上角
this._centerPointPos = cc.v2(
this._localDiffusionUniform.certerPoint = cc.v2(
this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
);
this._updateMaterial({
centerColor: this._centerColor,
certerPoint: this._centerPointPos,
radius: this._radius
});
this._updateMaterial();
}
private _onPropertyChange(color: cc.Color, radius: number) {
this._centerColor = color;
this._radius = radius;
this._updateMaterial({
centerColor: this._centerColor,
certerPoint: this._centerPointPos,
radius: this._radius
});
private _onPropertyChange(localDiffusionUniform: LocalDiffusionUniform) {
this._localDiffusionUniform.centerColor = localDiffusionUniform.centerColor;
this._localDiffusionUniform.radius = localDiffusionUniform.radius;
this._localDiffusionUniform.cropAlpha = localDiffusionUniform.cropAlpha;
this._updateMaterial();
}
private _updateMaterial(param: {
/**
* 中心点颜色
*/
centerColor: cc.Color;
/**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2;
/**
* 扩散半径 [0.0, 1.0]
*/
radius: number;
}) {
private _updateMaterial() {
this.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("centerColor", param.centerColor);
material.setProperty("centerPoint", param.certerPoint);
material.setProperty("radius", param.radius);
material.setProperty("centerColor", this._localDiffusionUniform.centerColor);
material.setProperty("centerPoint", this._localDiffusionUniform.certerPoint);
material.setProperty("radius", this._localDiffusionUniform.radius);
material.setProperty("cropAlpha", this._localDiffusionUniform.cropAlpha);
renderComponent.setMaterial(0, material);
});
}
}
export class LocalDiffusionUniform {
/**
* 中心点颜色
*/
centerColor: cc.Color = cc.Color.YELLOW;
/**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2 = cc.v2(0.5, 0.5);
/**
* 扩散半径 [0.0, 1.0]
*/
radius: number = 0.5;
/**
* 是否裁剪掉透明区域上的点光
*/
cropAlpha: boolean = true;
}

62
assets/scripts/LocalDiffusionEffectScene.ts
View File

@@ -1,4 +1,4 @@
import LocalDiffusionCtrl from "./LocalDiffusionCtrl";
import LocalDiffusionCtrl, { LocalDiffusionUniform } from "./LocalDiffusionCtrl";
const { ccclass, property } = cc._decorator;
@@ -19,25 +19,29 @@ export default class LocalDiffusionEffectScene extends cc.Component {
private _radiuSlider: cc.Slider = null;
private _radiuSliderLabel: cc.Label = null;
private _cropAlphaToggle: cc.Toggle = null;
private _examplesParentNode: cc.Node = null;
onLoad() {
cc.dynamicAtlasManager.enabled = false;
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._redSlider = cc.find("Canvas/Content/Controller/ColorRedSlider/Slider").getComponent(cc.Slider);
this._redSliderLabel = cc.find("Canvas/Content/Controller/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._greenSlider = cc.find("Canvas/Content/Controller/ColorGreenSlider/Slider").getComponent(cc.Slider);
this._greenSliderLabel = cc.find("Canvas/Content/Controller/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._blueSlider = cc.find("Canvas/Content/Controller/ColorBlueSlider/Slider").getComponent(cc.Slider);
this._blueSliderLabel = cc.find("Canvas/Content/Controller/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._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/Sliders/RadiuSlider/Slider").getComponent(cc.Slider);
this._radiuSliderLabel = cc.find("Canvas/Content/Sliders/RadiuSlider/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._cropAlphaToggle = cc.find("Canvas/Content/Controller/CropAlphaToggle/Toggle").getComponent(cc.Toggle);
// 代码添加控制脚本
this._examplesParentNode = cc.find("Canvas/Content/Examples");
@@ -47,26 +51,28 @@ export default class LocalDiffusionEffectScene extends cc.Component {
}
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._radiuSlider.node.on("slide", this._onSliderChanged, this);
this._redSlider.node.on("slide", this._onPropertyChanged, this);
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._cropAlphaToggle.node.on("toggle", this._onPropertyChanged, 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._radiuSlider.node.off("slide", this._onSliderChanged, this);
this._redSlider.node.off("slide", this._onPropertyChanged, this);
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._cropAlphaToggle.node.off("toggle", this._onPropertyChanged, this);
}
start() {
this._onSliderChanged();
this._onPropertyChanged();
}
private _onSliderChanged() {
private _onPropertyChanged() {
// 更新进度条值 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)}`;
@@ -76,16 +82,16 @@ export default class LocalDiffusionEffectScene extends cc.Component {
// 通知子节点更新材质
this._examplesParentNode.children.forEach(childNode => {
childNode.emit(
"on_property_change",
cc.color(
childNode.emit("on_property_change", <LocalDiffusionUniform>{
centerColor: 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)
),
this._radiuSlider.progress
);
radius: this._radiuSlider.progress,
cropAlpha: this._cropAlphaToggle.isChecked
});
});
}
}