初始化闪光场景相关
This commit is contained in:
caizhitao
83
assets/scripts/FlashLightCtrlComponent.ts
Normal file
83
assets/scripts/FlashLightCtrlComponent.ts
Normal file
@@ -0,0 +1,83 @@
|
||||
const { ccclass, property } = cc._decorator;
|
||||
|
||||
@ccclass
|
||||
export default class FlashLightCtrlComponent extends cc.Component {
|
||||
private _flashLightUBO: FlashLightUBO = new FlashLightUBO();
|
||||
|
||||
onEnable() {
|
||||
this.node.on(cc.Node.EventType.TOUCH_START, this._onTouchStart, this);
|
||||
this.node.on(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
|
||||
this.node.on("on_property_change", this._onPropertyChange, this);
|
||||
}
|
||||
|
||||
onDisable() {
|
||||
this.node.off(cc.Node.EventType.TOUCH_START, this._onTouchStart, this);
|
||||
this.node.off(cc.Node.EventType.TOUCH_MOVE, this._onTouchMove, this);
|
||||
this.node.off("on_property_change", this._onPropertyChange, this);
|
||||
}
|
||||
|
||||
private _onTouchStart(event: cc.Event.EventTouch) {
|
||||
this._onTouchMove(event);
|
||||
}
|
||||
|
||||
private _onTouchMove(event: cc.Event.EventTouch) {
|
||||
let touchPointInWorldSpace = event.getLocation();
|
||||
let touchPointInNodeSpace = this.node.convertToNodeSpaceAR(touchPointInWorldSpace);
|
||||
|
||||
// 将触摸点转换为OPENGL坐标系并归一化
|
||||
// OpenGl 坐标系原点在左上角
|
||||
this._flashLightUBO.certerPoint = cc.v2(
|
||||
this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
|
||||
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
|
||||
);
|
||||
|
||||
this._updateMaterial();
|
||||
}
|
||||
|
||||
private _onPropertyChange(localDiffusionUniform: FlashLightUBO) {
|
||||
this._flashLightUBO.centerColor = localDiffusionUniform.centerColor;
|
||||
this._flashLightUBO.radius = localDiffusionUniform.radius;
|
||||
this._flashLightUBO.cropAlpha = localDiffusionUniform.cropAlpha;
|
||||
this._flashLightUBO.enableFog = localDiffusionUniform.enableFog;
|
||||
this._updateMaterial();
|
||||
}
|
||||
|
||||
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("cropAlpha", this._flashLightUBO.cropAlpha);
|
||||
material.setProperty("enableFog", this._flashLightUBO.enableFog);
|
||||
renderComponent.setMaterial(0, material);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class FlashLightUBO {
|
||||
/**
|
||||
* 中心点颜色
|
||||
*/
|
||||
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;
|
||||
|
||||
/**
|
||||
* 是否开启战争迷雾效果
|
||||
*/
|
||||
enableFog: boolean = false;
|
||||
}
|
||||
9
assets/scripts/FlashLightCtrlComponent.ts.meta
Normal file
9
assets/scripts/FlashLightCtrlComponent.ts.meta
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"ver": "1.0.5",
|
||||
"uuid": "3edca38f-0f12-489f-847a-0d89d9e55c6c",
|
||||
"isPlugin": false,
|
||||
"loadPluginInWeb": true,
|
||||
"loadPluginInNative": true,
|
||||
"loadPluginInEditor": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
94
assets/scripts/FlashLightEffectScene.ts
Normal file
94
assets/scripts/FlashLightEffectScene.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import FlashLightCtrlComponent, { FlashLightUBO } from "./FlashLightCtrlComponent";
|
||||
|
||||
const { ccclass, property } = cc._decorator;
|
||||
|
||||
@ccclass
|
||||
export default class FlashLightEffectScene extends cc.Component {
|
||||
private _redSlider: cc.Slider = null;
|
||||
private _redSliderLabel: cc.Label = null;
|
||||
private _greenSlider: cc.Slider = null;
|
||||
private _greenSliderLabel: cc.Label = null;
|
||||
private _blueSlider: cc.Slider = null;
|
||||
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 _cropAlphaToggle: cc.Toggle = null;
|
||||
private _enableFogToggle: cc.Toggle = null;
|
||||
|
||||
private _examplesParentNode: cc.Node = null;
|
||||
|
||||
onLoad() {
|
||||
cc.dynamicAtlasManager.enabled = false;
|
||||
|
||||
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/Controller/ColorGreenSlider/Slider").getComponent(cc.Slider);
|
||||
this._greenSliderLabel = cc.find("Canvas/Content/Controller/ColorGreenSlider/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/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._cropAlphaToggle = cc.find("Canvas/Content/Controller/CropAlphaToggle/Toggle").getComponent(cc.Toggle);
|
||||
this._enableFogToggle = cc.find("Canvas/Content/Controller/EnableFogToggle/Toggle").getComponent(cc.Toggle);
|
||||
|
||||
// 代码添加控制脚本
|
||||
this._examplesParentNode = cc.find("Canvas/Content/Examples");
|
||||
this._examplesParentNode.children.forEach(childNode => {
|
||||
childNode.addComponent(FlashLightCtrlComponent);
|
||||
});
|
||||
}
|
||||
|
||||
onEnable() {
|
||||
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);
|
||||
this._enableFogToggle.node.on("toggle", this._onPropertyChanged, this);
|
||||
}
|
||||
|
||||
onDisable() {
|
||||
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);
|
||||
this._enableFogToggle.node.off("toggle", this._onPropertyChanged, this);
|
||||
}
|
||||
|
||||
start() {
|
||||
this._onPropertyChanged();
|
||||
}
|
||||
|
||||
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)}`;
|
||||
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._examplesParentNode.children.forEach(childNode => {
|
||||
childNode.emit("on_property_change", <FlashLightUBO>{
|
||||
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)
|
||||
),
|
||||
radius: this._radiuSlider.progress,
|
||||
cropAlpha: this._cropAlphaToggle.isChecked,
|
||||
enableFog: this._enableFogToggle.isChecked
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
9
assets/scripts/FlashLightEffectScene.ts.meta
Normal file
9
assets/scripts/FlashLightEffectScene.ts.meta
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"ver": "1.0.5",
|
||||
"uuid": "6d3aff77-2683-4417-8960-2a5fd5d0757c",
|
||||
"isPlugin": false,
|
||||
"loadPluginInWeb": true,
|
||||
"loadPluginInNative": true,
|
||||
"loadPluginInEditor": false,
|
||||
"subMetas": {}
|
||||
}
|
||||
Reference in New Issue
Block a user