64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
const { ccclass, property } = cc._decorator;
|
||
|
||
@ccclass
|
||
export default class OutlineEffectScene extends cc.Component {
|
||
private _widthSlider: cc.Slider = null;
|
||
private _widthSliderLabel: cc.Label = null;
|
||
|
||
private _examplesParentNode: cc.Node = null;
|
||
|
||
onLoad() {
|
||
// 关闭动态合图
|
||
cc.dynamicAtlasManager.enabled = false;
|
||
|
||
this._widthSlider = cc.find("Canvas/Content/Sliders/WidthSlider/Slider").getComponent(cc.Slider);
|
||
this._widthSliderLabel = cc.find("Canvas/Content/Sliders/WidthSlider/ValueLabel").getComponent(cc.Label);
|
||
|
||
this._examplesParentNode = cc.find("Canvas/Content/Examples");
|
||
}
|
||
|
||
onEnable() {
|
||
this._widthSlider.node.on("slide", this._onSliderChanged, this);
|
||
}
|
||
|
||
onDisable() {
|
||
this._widthSlider.node.off("slide", this._onSliderChanged, this);
|
||
}
|
||
|
||
start() {
|
||
this._onSliderChanged();
|
||
}
|
||
|
||
private _onSliderChanged() {
|
||
let outlineWidth = parseFloat((this._widthSlider.progress / 100).toFixed(4));
|
||
this._widthSliderLabel.string = `${outlineWidth}`;
|
||
|
||
// 更新材质
|
||
this._updateRenderComponentMaterial({
|
||
outlineWidth: outlineWidth
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 更新渲染组件的材质
|
||
*
|
||
* 1. 获取材质
|
||
* 2. 给材质的 unitform 变量赋值
|
||
* 3. 重新将材质赋值回去
|
||
*/
|
||
private _updateRenderComponentMaterial(param: {
|
||
/**
|
||
* 描边宽度 [0.0, 1.0]，比如：0.5，那么就是宽*0.5 高*0.5
|
||
*/
|
||
outlineWidth: number;
|
||
}) {
|
||
this._examplesParentNode.children.forEach(childNode => {
|
||
childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
|
||
let material: cc.Material = renderComponent.getMaterial(0);
|
||
material.setProperty("outlineWidth", param.outlineWidth);
|
||
renderComponent.setMaterial(0, material);
|
||
});
|
||
});
|
||
}
|
||
}
|