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-10 23:05:44 +08:00
parent f39e39e248
commit 6ac69a841a
7 changed files with 217 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
assets/scripts/LocalDiffusionCtrl.ts Normal file
View File

@@ -0,0 +1,76 @@
const { ccclass, property } = cc._decorator;
@ccclass
export default class LocalDiffusionCtrl extends cc.Component {
private color: cc.Color = cc.Color.RED;
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(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
this.node.on(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, 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(cc.Node.EventType.TOUCH_END, this._onTouchEnd, this);
this.node.off(cc.Node.EventType.TOUCH_CANCEL, this._onTouchCancel, 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坐标系并归一化
let normalizePos = cc.v2(
this.node.anchorX + touchPointInNodeSpace.x / this.node.width,
1 - (this.node.anchorY + touchPointInNodeSpace.y / this.node.height)
);
this._updateMaterial({
centerColor: this.color,
certerPoint: normalizePos,
radius: 0.6
});
}
private _onTouchEnd(event: cc.Event.EventTouch) {
this._onTouchCancel(event);
}
private _onTouchCancel(event: cc.Event.EventTouch) {}
private _updateMaterial(param: {
/**
* 中心点颜色
*/
centerColor: cc.Color;
/**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2;
/**
* 扩散半径 [0.0, 1.0]
*/
radius: number;
}) {
this.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("centerColor", cc.v4(1.0, 1.0, 0.0, 1.0));
material.setProperty(
"centerColor",
cc.v4(param.centerColor.getR() / 255, param.centerColor.getG() / 255, param.centerColor.getB() / 255, param.centerColor.getA() / 255)
);
material.setProperty("centerPoint", param.certerPoint);
material.setProperty("radius", param.radius);
renderComponent.setMaterial(0, material);
});
}
}

9
assets/scripts/LocalDiffusionCtrl.ts.meta Normal file
View File

@@ -0,0 +1,9 @@
{
"ver": "1.0.5",
"uuid": "ababac41-a736-4cbf-ad03-248962dd06e7",
"isPlugin": false,
"loadPluginInWeb": true,
"loadPluginInNative": true,
"loadPluginInEditor": false,
"subMetas": {}
}

37
assets/scripts/LocalDiffusionEffectScene.ts
View File

@@ -8,6 +8,8 @@ export default class LocalDiffusionEffectScene extends cc.Component {
private _examplesParentNode: cc.Node = null;
onLoad() {
cc.dynamicAtlasManager.enabled = false;
this._oldLevelSlider = cc.find("Canvas/Content/Sliders/OldLevelSlider/Slider").getComponent(cc.Slider);
this._oldLevelSliderLabel = cc.find("Canvas/Content/Sliders/OldLevelSlider/ValueLabel").getComponent(cc.Label);
@@ -29,10 +31,10 @@ export default class LocalDiffusionEffectScene extends cc.Component {
private _onSliderChanged() {
this._oldLevelSliderLabel.string = `${this._oldLevelSlider.progress.toFixed(2)}`;
// 更新材质
this._updateRenderComponentMaterial({
oldLevel: this._oldLevelSlider.progress
});
// // 更新材质
// this._updateRenderComponentMaterial({
// oldLevel: this._oldLevelSlider.progress
// });
}
/**
@@ -44,14 +46,35 @@ export default class LocalDiffusionEffectScene extends cc.Component {
*/
private _updateRenderComponentMaterial(param: {
/**
* 老化程度 [0.0, 1.0] ，1.0 表示完全老化
* 中心点颜色
*/
oldLevel: number;
centerColor: cc.Color;
/**
* 中心点坐标 ([0.0, 1.0], [0.0, 1.0])
*/
certerPoint: cc.Vec2;
/**
* 扩散半径 [0.0, 1.0]
*/
radius: number;
}) {
this._examplesParentNode.children.forEach(childNode => {
childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
let material: cc.Material = renderComponent.getMaterial(0);
material.setProperty("oldLevel", param.oldLevel);
// material.setProperty("centerColor", cc.v4(1.0, 1.0, 0.0, 1.0));
material.setProperty(
"centerColor",
cc.v4(
param.centerColor.getR() / 255,
param.centerColor.getG() / 255,
param.centerColor.getB() / 255,
param.centerColor.getA() / 255
)
);
material.setProperty("centerPoint", param.certerPoint);
material.setProperty("radius", param.radius);
renderComponent.setMaterial(0, material);
});
});