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
2019-12-20 15:59:56 +08:00
parent 5f5e4a9287
commit 5da364c862
12 changed files with 3124 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
assets/scripts/GlowInnerEffectScene.ts
View File

@@ -2,15 +2,47 @@ const { ccclass, property } = cc._decorator;
@ccclass
export default class GlowInnerEffectScene extends cc.Component {
@property(cc.Node)
examplesParentNode: cc.Node = null;
private _redSlider: cc.Slider = null;
private _greenSlider: cc.Slider = null;
private _blueSlider: cc.Slider = null;
private _alphaSlider: cc.Slider = null;
private _widthSlider: cc.Slider = null;
private _examplesParentNode: cc.Node = null;
start() {
this._updateRenderComponentOutterGlowMaterial(0);
onLoad() {
this._redSlider = cc.find("Canvas/SliderLayouts/RedSlider/Slider").getComponent(cc.Slider);
this._greenSlider = cc.find("Canvas/SliderLayouts/GreenSlider/Slider").getComponent(cc.Slider);
this._blueSlider = cc.find("Canvas/SliderLayouts/BlueSlider/Slider").getComponent(cc.Slider);
this._alphaSlider = cc.find("Canvas/SliderLayouts/AlphaSlider/Slider").getComponent(cc.Slider);
this._widthSlider = cc.find("Canvas/SliderLayouts/WidthSlider/Slider").getComponent(cc.Slider);
this._examplesParentNode = cc.find("Canvas/Examples");
}
onSideCallBack(slider: cc.Slider, customEventData: string) {
this._updateRenderComponentOutterGlowMaterial(slider.progress / 100);
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._widthSlider.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._widthSlider.node.off("slide", this._onSliderChanged, this);
}
start() {
this._onSliderChanged();
}
private _onSliderChanged() {
this._updateRenderComponentOutterGlowMaterial({
glowColor: cc.v4(this._redSlider.progress, this._greenSlider.progress, this._blueSlider.progress, this._alphaSlider.progress),
glowColorSize: this._widthSlider.progress / 100
});
}
/**
@@ -19,14 +51,23 @@ export default class GlowInnerEffectScene extends cc.Component {
* 1. 获取材质
* 2. 给材质的自定义 unitform 变量赋值
* 3. 重新将材质赋值回去
*
* @param size 描边长度比例[0,1] 比如0.5，那么就是宽*0.5 高*0.5
*/
private _updateRenderComponentOutterGlowMaterial(size: number) {
this.examplesParentNode.children.forEach(childNode => {
private _updateRenderComponentOutterGlowMaterial(param: {
/**
* 发光宽度 [0.0, 1.0]
*/
glowColorSize: number;
/**
* 发光颜色 [0.0, 1.0]
*/
glowColor: cc.Vec4;
}) {
this._examplesParentNode.children.forEach(childNode => {
childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("glowColorSize", size);
material.setProperty("glowColorSize", param.glowColorSize);
material.setProperty("glowColor", param.glowColor);
renderComponent.setMaterial(0, material);
});
});