圆角矩形grayscale修复

assets/resources/scenes/roundbox.scene

@@ -375,7 +375,7 @@
     "_priority": 1073741824,
     "_fov": 45,
     "_fovAxis": 0,
-    "_orthoHeight": 360,
+    "_orthoHeight": 432.71729185727355,
     "_near": 1,
     "_far": 2000,
     "_color": {
@@ -498,6 +498,7 @@
       "a": 255
     },
     "_sizeMode": 1,
+    "_useGrayscale": false,
     "_atlas": null,
     "_segments": 10,
     "_radius": 20,
@@ -602,6 +603,7 @@
       "a": 255
     },
     "_sizeMode": 1,
+    "_useGrayscale": false,
     "_atlas": null,
     "_segments": 10,
     "_radius": 41.8,
@@ -706,6 +708,7 @@
       "a": 255
     },
     "_sizeMode": 1,
+    "_useGrayscale": true,
     "_atlas": null,
     "_segments": 10,
     "_radius": 70,
@@ -826,6 +829,29 @@
     "_isUnderline": false,
     "_underlineHeight": 2,
     "_cacheMode": 0,
+    "_enableOutline": false,
+    "_outlineColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_outlineWidth": 2,
+    "_enableShadow": false,
+    "_shadowColor": {
+      "__type__": "cc.Color",
+      "r": 0,
+      "g": 0,
+      "b": 0,
+      "a": 255
+    },
+    "_shadowOffset": {
+      "__type__": "cc.Vec2",
+      "x": 2,
+      "y": 2
+    },
+    "_shadowBlur": 2,
     "_id": "fadO2qZxVJT7cg7SzoCeIZ"
   },
   {
@@ -984,6 +1010,7 @@
       "z": 0
     },
     "_distance": 0,
+    "_planeBias": 1,
     "_shadowColor": {
       "__type__": "cc.Color",
       "r": 76,

assets/scripts/components/GPRoundBoxSprite.ts

@@ -1,8 +1,9 @@
-import { _decorator, ccenum, CCFloat, CCInteger, cclegacy, Component, InstanceMaterialType, Material, Node, NodeEventType, RenderTexture, serializeTag, Sprite, SpriteAtlas, SpriteFrame, UIRenderer, Vec2} from 'cc';
+import { _decorator, CCBoolean, CCFloat, CCInteger, cclegacy, InstanceMaterialType, Material, Node, NodeEventType, RenderTexture, Sprite, SpriteAtlas, SpriteFrame, UIRenderer} from 'cc';
 import { BUILD, EDITOR } from 'cc/env';
 import { GPRoundBoxAssembler } from './GPRoundBoxAssembler';
 
 const { ccclass, property,type} = _decorator;
+
 enum EventType {
     SPRITE_FRAME_CHANGED = 'spriteframe-changed',
 }
@@ -26,6 +27,27 @@ export class GPRoundBoxSprite extends UIRenderer {
             this._applySpriteSize();
         }
     }
+    /**
+     * @en Grayscale mode.
+     * @zh 是否以灰度模式渲染。
+     */
+
+    @property({serializable:true})
+    protected _useGrayscale = false;
+
+    @property({type:CCBoolean})
+    get grayscale (): boolean {
+        return this._useGrayscale;
+    }
+    set grayscale (value) {
+        if (this._useGrayscale === value) {
+            return;
+        }
+        this._useGrayscale = value;
+        this.changeMaterialForDefine();
+        this["updateMaterial"]();
+    }
+
     // 图集
     @property({serializable:true})
     protected _atlas: SpriteAtlas | null = null;
@@ -188,8 +210,12 @@ export class GPRoundBoxSprite extends UIRenderer {
             value = (format === cclegacy.TextureBase.PixelFormat.RGBA_ETC1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_4BPPV1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_2BPPV1);
         }
 
-        if (value) {
+        if (value && this.grayscale) {
+            this._instanceMaterialType = InstanceMaterialType.USE_ALPHA_SEPARATED_AND_GRAY;
+        } else if (value) {
             this._instanceMaterialType = InstanceMaterialType.USE_ALPHA_SEPARATED;
+        } else if (this.grayscale) {
+            this._instanceMaterialType = InstanceMaterialType.GRAYSCALE;
         } else {
             this._instanceMaterialType = InstanceMaterialType.ADD_COLOR_AND_TEXTURE;
         }
@@ -333,4 +359,4 @@ export class GPRoundBoxSprite extends UIRenderer {
             this._applySpriteSize();
         }
     }
-}
+}