Merge branch 'dev' into feature/gaussian_blur

assets/scripts/RoundCornerCropV1EffectScene.ts

@@ -1,9 +1,9 @@
 const { ccclass, property } = cc._decorator;
 
 @ccclass
-export default class RoundCornerCropEffectScene extends cc.Component {
-    private _roundCornerRadiuSlider: cc.Slider = null;
-    private _roundCornerRadiuLabel: cc.Label = null;
+export default class RoundCornerCropV1EffectScene extends cc.Component {
+    private _radiuSlider: cc.Slider = null;
+    private _radiuLabel: cc.Label = null;
 
     private _examplesParentNode: cc.Node = null;
 
@@ -11,18 +11,18 @@ export default class RoundCornerCropEffectScene extends cc.Component {
         // 关闭动态合图
         cc.dynamicAtlasManager.enabled = false;
 
-        this._roundCornerRadiuSlider = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/Slider").getComponent(cc.Slider);
-        this._roundCornerRadiuLabel = cc.find("Canvas/Content/Sliders/RoundCornerRadiusSlider/ValueLabel").getComponent(cc.Label);
+        this._radiuSlider = cc.find("Canvas/Content/Controller/RadiusSlider/Slider").getComponent(cc.Slider);
+        this._radiuLabel = cc.find("Canvas/Content/Controller/RadiusSlider/ValueLabel").getComponent(cc.Label);
 
         this._examplesParentNode = cc.find("Canvas/Content/Examples");
     }
 
     onEnable() {
-        this._roundCornerRadiuSlider.node.on("slide", this._onSliderChanged, this);
+        this._radiuSlider.node.on("slide", this._onSliderChanged, this);
     }
 
     onDisable() {
-        this._roundCornerRadiuSlider.node.off("slide", this._onSliderChanged, this);
+        this._radiuSlider.node.off("slide", this._onSliderChanged, this);
     }
 
     start() {
@@ -30,11 +30,11 @@ export default class RoundCornerCropEffectScene extends cc.Component {
     }
 
     private _onSliderChanged() {
-        this._roundCornerRadiuLabel.string = `${this._roundCornerRadiuSlider.progress.toFixed(2)}`;
+        this._radiuLabel.string = `${this._radiuSlider.progress.toFixed(2)}`;
 
         // 更新材质
         this._updateRenderComponentMaterial({
-            roundCornerRadius: this._roundCornerRadiuSlider.progress
+            radius: this._radiuSlider.progress
         });
     }
 
@@ -49,12 +49,12 @@ export default class RoundCornerCropEffectScene extends cc.Component {
         /**
          * 圆角半径 [0.0, 0.5] ，0.5 表示圆形裁剪
          */
-        roundCornerRadius: number;
+        radius: number;
     }) {
         this._examplesParentNode.children.forEach(childNode => {
             childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
                 let material: cc.Material = renderComponent.getMaterial(0);
-                material.setProperty("roundCornerRadius", param.roundCornerRadius);
+                material.setProperty("radius", param.radius);
                 renderComponent.setMaterial(0, material);
             });
         });

assets/scripts/RoundCornerCropV1EffectScene.ts.meta

@@ -1,6 +1,6 @@
 {
   "ver": "1.0.5",
-  "uuid": "d3d2bee7-2173-436c-a11c-94a31b2054c2",
+  "uuid": "d27658c5-a966-4e50-a162-09c7af01579e",
   "isPlugin": false,
   "loadPluginInWeb": true,
   "loadPluginInNative": true,

assets/scripts/RoundCornerCropV2EffectScene.ts

@@ -0,0 +1,80 @@
+const { ccclass, property } = cc._decorator;
+
+@ccclass
+export default class RoundCornerCropV2EffectScene extends cc.Component {
+    private _radiuSlider: cc.Slider = null;
+    private _radiuLabel: cc.Label = null;
+
+    private _examplesParentNode: cc.Node = null;
+
+    onLoad() {
+        // 关闭动态合图
+        cc.dynamicAtlasManager.enabled = false;
+
+        this._radiuSlider = cc.find("Canvas/Content/Controller/RadiusSlider/Slider").getComponent(cc.Slider);
+        this._radiuLabel = cc.find("Canvas/Content/Controller/RadiusSlider/ValueLabel").getComponent(cc.Label);
+
+        this._examplesParentNode = cc.find("Canvas/Content/Examples");
+    }
+
+    onEnable() {
+        this._radiuSlider.node.on("slide", this._onSliderChanged, this);
+    }
+
+    onDisable() {
+        this._radiuSlider.node.off("slide", this._onSliderChanged, this);
+    }
+
+    start() {
+        this._onSliderChanged();
+    }
+
+    private _onSliderChanged() {
+        // 计算半径px
+        let radiusInPx = Math.floor(100 * this._radiuSlider.progress);
+        this._radiuLabel.string = radiusInPx + "";
+
+        // 更新材质
+        this._updateRenderComponentMaterial({
+            radiusInPx: radiusInPx
+        });
+    }
+
+    /**
+     * 更新渲染组件的材质
+     *
+     * 1. 获取材质
+     * 2. 给材质的 unitform 变量赋值
+     * 3. 重新将材质赋值回去
+     */
+    private _updateRenderComponentMaterial(param: {
+        /**
+         * 圆角半径px
+         */
+        radiusInPx: number;
+    }) {
+        this._examplesParentNode.children.forEach(childNode => {
+            childNode.getComponents(cc.RenderComponent).forEach(renderComponent => {
+                // 计算半径px分别相对于纹理宽高的比例（也叫归一化）
+                let xRadiux = param.radiusInPx / childNode.width;
+                // 约束范围在区间 [0.0, 0.5]
+                xRadiux = xRadiux >= 0.5 ? 0.5 : xRadiux;
+
+                let yRadius = param.radiusInPx / childNode.height;
+                yRadius = yRadius >= 0.5 ? 0.5 : yRadius;
+
+                if (childNode.name === "Rectangle1") cc.log(`${childNode.name} : (${xRadiux}, ${yRadius})`);
+
+                // 更新材质
+                let material: cc.Material = renderComponent.getMaterial(0);
+
+                // 圆角x轴半径长度（相对于纹理宽度）[0.0, 0.5]
+                material.setProperty("xRadius", xRadiux);
+
+                // 圆角y轴半径长度（相对于纹理高度）[0.0, 0.5]
+                material.setProperty("yRadius", yRadius);
+                renderComponent.setMaterial(0, material);
+            });
+        });
+    }
+}

assets/scripts/RoundCornerCropV2EffectScene.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "24bbe7ba-5d1e-42d9-b2dd-f219fef90367",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}