Integration of outline and shadow to label #16106

LinYunMo · 2023-08-25T09:11:19Z

Re: https://github.com/cocos/3d-tasks/issues/10661
depend: https://github.com/cocos/engine-extensions/pull/345

Changelog

Continuous Integration

This pull request:

needs automatic test cases check.

Manual trigger with @cocos-robot run test cases afterward.
does not change any runtime related code or build configuration

If any reviewer thinks the CI checks are needed, please uncheck this option, then close and reopen the issue.

Compatibility Check

This pull request:

changes public API, and have ensured backward compatibility with deprecated features.
affects platform compatibility, e.g. system version, browser version, platform sdk version, platform toolchain, language version, hardware compatibility etc.
affects file structure of the build package or build configuration which requires user project upgrade.
introduces breaking changes, please list all changes, affected features and the scope of violation.

github-actions · 2023-08-25T09:22:10Z

Interface Check Report

! WARNING this pull request has changed these public interfaces:

@@ -2468,33 +2468,19 @@
      *
      * @zh
      * 描边效果组件,用于字体描边,只能用于系统字体。
      *
-     * @example
-     * ```ts
-     * import { Node, Label, LabelOutline } from 'cc';
-     * // Create a new node and add label components.
-     * const node = new Node("New Label");
-     * const label = node.addComponent(Label);
-     * const outline = node.addComponent(LabelOutline);
-     * node.parent = this.node;
-     * ```
+     * @deprecated since v3.8.2, please use [[Label.enableOutline]] instead.
      */
     export class LabelOutline extends Component {
-        protected _color: math.Color;
-        protected _width: number;
         /**
          * @en
          * Outline color.
          *
          * @zh
          * 改变描边的颜色。
          *
-         * @example
-         * ```ts
-         * import { Color } from 'cc';
-         * outline.color = new Color(0.5, 0.3, 0.7, 1.0);
-         * ```
+         * @deprecated since v3.8.2, please use [[Label.outlineColor]] instead.
          */
         get color(): Readonly<math.Color>;
         set color(value: Readonly<math.Color>);
         /**
@@ -2503,18 +2489,20 @@
          *
          * @zh
          * 改变描边的宽度。
          *
-         * @example
-         * ```ts
-         * outline.width = 3;
-         * ```
+         * @deprecated since v3.8.2, please use [[Label.outlineWidth]] instead.
          */
         get width(): number;
         set width(value: number);
+        /**
+         * @deprecated since v3.8.2, please use [[Label.enableOutline]] instead.
+         */
         onEnable(): void;
+        /**
+         * @deprecated since v3.8.2, please use [[Label.enableOutline]] instead.
+         */
         onDisable(): void;
-        protected _updateRenderData(): void;
     }
     /**
      * @en
      * Graphics component.
@@ -2869,32 +2857,20 @@
     }
     /**
      * @en Shadow effect for Label component, only for system fonts or TTF fonts.
      * @zh 用于给 Label 组件添加阴影效果，只能用于系统字体或 ttf 字体。
-     * @example
-     * import { Node, Label, LabelShadow } from 'cc';
-     * // Create a new node and add label components.
-     * const node = new Node("New Label");
-     * const label = node.addComponent(Label);
-     * const shadow = node.addComponent(LabelShadow);
-     * node.parent = this.node;
+     *
+     * @deprecated since v3.8.2, please use [[Label.enableShadow]] instead.
      */
     export class LabelShadow extends Component {
-        protected _color: math.Color;
-        protected _offset: math.Vec2;
-        protected _blur: number;
         /**
          * @en
          * Shadow color.
          *
          * @zh
          * 阴影的颜色。
          *
-         * @example
-         * ```ts
-         * import { Color } from 'cc';
-         * labelShadow.color = new Color(0.5, 0.3, 0.7, 1.0);
-         * ```
+         * @deprecated since v3.8.2, please use [[Label.shadowColor]] instead.
          */
         get color(): Readonly<math.Color>;
         set color(value: Readonly<math.Color>);
         /**
@@ -2903,13 +2879,9 @@
          *
          * @zh
          * 字体与阴影的偏移。
          *
-         * @example
-         * ```ts
-         * import { Vec2 } from 'cc';
-         * labelShadow.offset = new Vec2(2, 2);
-         * ```
+         * @deprecated since v3.8.2, please use [[Label.shadowOffset]] instead.
          */
         get offset(): math.Vec2;
         set offset(value: math.Vec2);
         /**
@@ -2918,18 +2890,20 @@
          *
          * @zh
          * 阴影的模糊程度。
          *
-         * @example
-         * ```ts
-         * labelShadow.blur = 2;
-         * ```
+         * @deprecated since v3.8.2, please use [[Label.shadowBlur]] instead.
          */
         get blur(): number;
         set blur(value: number);
+        /**
+         * @deprecated since v3.8.2, please use [[Label.enableShadow]] instead.
+         */
         onEnable(): void;
+        /**
+         * @deprecated since v3.8.2, please use [[Label.enableShadow]] instead.
+         */
         onDisable(): void;
-        protected _updateRenderData(): void;
     }
     /**
      * @en
      * Set the UI transparency component.
@@ -3250,8 +3224,68 @@
          */
         get underlineHeight(): number;
         set underlineHeight(value: number);
         /**
+         ** @en
+         ** Outline effect used to change the display, only for system fonts or TTF fonts.
+         **
+         ** @zh
+         ** 描边效果组件,用于字体描边,只能用于系统字体或 ttf 字体。
+         **/
+        get enableOutline(): boolean;
+        set enableOutline(value: boolean);
+        /**
+         * @en
+         * Outline color.
+         *
+         * @zh
+         * 改变描边的颜色。
+         */
+        get outlineColor(): math.Color;
+        set outlineColor(value: math.Color);
+        /**
+         * @en
+         * Change the outline width.
+         *
+         * @zh
+         * 改变描边的宽度。
+         */
+        get outlineWidth(): number;
+        set outlineWidth(value: number);
+        /**
+         * @en Shadow effect for Label component, only for system fonts or TTF fonts. Disabled when cache mode is char.
+         * @zh 用于给 Label 组件添加阴影效果，只能用于系统字体或 ttf 字体。在缓存模式为 char 时不可用。
+         */
+        get enableShadow(): boolean;
+        set enableShadow(value: boolean);
+        /**
+         * @en
+         * Shadow color.
+         *
+         * @zh
+         * 阴影的颜色。
+         */
+        get shadowColor(): math.Color;
+        set shadowColor(value: math.Color);
+        /**
+         * @en
+         * Offset between font and shadow.
+         *
+         * @zh
+         * 字体与阴影的偏移。
+         */
+        get shadowOffset(): math.Vec2;
+        set shadowOffset(value: math.Vec2);
+        /**
+         * @en
+         * A non-negative float specifying the level of shadow blur.
+         *
+         * @zh
+         * 阴影的模糊程度。
+         */
+        get shadowBlur(): number;
+        set shadowBlur(value: number);
+        /**
          * @deprecated since v3.7.0, this is an engine private interface that will be removed in the future.
          */
         get spriteFrame(): SpriteFrame | __private._cocos_2d_assembler_label_font_utils__LetterRenderTexture | null;
         /**
@@ -3287,8 +3321,15 @@
         protected _isBold: boolean;
         protected _isUnderline: boolean;
         protected _underlineHeight: number;
         protected _cacheMode: CacheMode;
+        protected _enableOutline: boolean;
+        protected _outlineColor: math.Color;
+        protected _outlineWidth: number;
+        protected _enableShadow: boolean;
+        protected _shadowColor: math.Color;
+        protected _shadowOffset: math.Vec2;
+        protected _shadowBlur: number;
         protected _N$file: Font | null;
         protected _texture: SpriteFrame | __private._cocos_2d_assembler_label_font_utils__LetterRenderTexture | null;
         protected _ttfSpriteFrame: SpriteFrame | null;
         protected _userDefinedFont: Font | null;

SantyWang · 2023-09-04T02:27:31Z

cocos/2d/components/label-shadow.ts

@@ -77,7 +68,10 @@ export class LabelShadow extends Component {
        }

        this._color.set(value);


No needs to cache color anymore, just set label's property directly

SantyWang · 2023-09-04T02:27:43Z

cocos/2d/components/label-shadow.ts

@@ -100,7 +90,10 @@ export class LabelShadow extends Component {

    set offset (value) {
        this._offset = value;


No needs to cache color anymore, just set label's property directly

SantyWang · 2023-09-04T02:28:06Z

cocos/2d/components/label-outline.ts

@@ -82,7 +70,10 @@ export class LabelOutline extends Component {
        }

        this._color.set(value);


No needs to cache color anymore, just set label's property directly

SantyWang · 2023-09-04T02:57:04Z

cocos/2d/components/label.ts

+    @editable
+    @displayOrder(19)
+    @tooltip('i18n:label.outline_used')
+    get outlineUsed (): boolean {


Take a look at the names in other software

UE： Outlined enableShadow
Godot： outline_size shadow_outline_size
UGUI：皆为单独组件

LinYunMo · 2023-09-14T06:14:05Z

@cocos-robot run test cases

LinYunMo · 2023-09-15T02:19:00Z

@cocos-robot run test cases

SantyWang · 2023-09-15T02:33:59Z

cocos/2d/assembler/label/ttfUtils.ts

-        let shadowComp = LabelShadow && comp.getComponent(LabelShadow);
-        shadowComp = (shadowComp && shadowComp.enabled) ? shadowComp : null;
-        if (shadowComp) {
+        const isShadow = comp.enableShadow && (comp.shadowBlur > 0 || comp.shadowOffset.x !== 0 || comp.shadowOffset.y !== 0);


Use approx instead!

SantyWang · 2023-09-15T02:36:04Z

cocos/2d/components/label-outline.ts

+    /**
+     * @deprecated since v3.8.2, please use [[Label.enableOutline]] instead.
+     */
+    public onLoad (): void {


seems not needs onLoad anymore.

SantyWang · 2023-09-15T03:23:39Z

cocos/2d/components/label.ts

+     ** Outline effect used to change the display, only for system fonts or TTF fonts.
+     **
+     ** @zh
+     ** 描边效果组件,用于字体描边,只能用于系统字体。


description is not correct. And should hide it when font is BMFont?

fix: gulp-build-h5-source

Revert "fix: gulp-build-h5-source"

Integration of outline and shadow to label

382fff5

LinYunMo requested a review from SantyWang August 25, 2023 09:12

add test

8a532e8

SantyWang reviewed Sep 4, 2023

View reviewed changes

LinYunMo added 3 commits September 8, 2023 16:34

change getter/setter

cc3aae0

name change & use assert

2ec6076

test name change

6741339

name change

ec97648

SantyWang reviewed Sep 15, 2023

View reviewed changes

fix

33bc9d1

SantyWang reviewed Sep 15, 2023

View reviewed changes

remove old attribute & add visible

13d32f3

SantyWang approved these changes Sep 15, 2023

View reviewed changes

LinYunMo and others added 5 commits September 15, 2023 15:26

remove assert

7aedb0b

fix: gulp-build-h5-source

7b267d3

Merge pull request #4 from PPpro/PP

362af9b

fix: gulp-build-h5-source

Revert "fix: gulp-build-h5-source"

41bf5c7

Merge pull request #5 from LinYunMo/revert-4-PP

590bb88

Revert "fix: gulp-build-h5-source"

PPpro mentioned this pull request Sep 18, 2023

fix: gulp-build-h5-source #16277

Merged

6 tasks

SantyWang approved these changes Sep 18, 2023

View reviewed changes

LinYunMo closed this Sep 20, 2023

LinYunMo reopened this Sep 20, 2023

SantyWang merged commit d2d7623 into cocos:v3.8.2 Sep 20, 2023
20 of 21 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Integration of outline and shadow to label #16106

Integration of outline and shadow to label #16106

LinYunMo commented Aug 25, 2023 •

edited

Loading

github-actions bot commented Aug 25, 2023 •

edited

Loading

SantyWang Sep 4, 2023

SantyWang Sep 4, 2023

SantyWang Sep 4, 2023

SantyWang Sep 4, 2023

LinYunMo Sep 8, 2023 •

edited

Loading

LinYunMo commented Sep 14, 2023

LinYunMo commented Sep 15, 2023

SantyWang Sep 15, 2023

SantyWang Sep 15, 2023

SantyWang Sep 15, 2023

		@@ -77,7 +68,10 @@ export class LabelShadow extends Component {
		}

		this._color.set(value);

		@@ -100,7 +90,10 @@ export class LabelShadow extends Component {

		set offset (value) {
		this._offset = value;

		@@ -82,7 +70,10 @@ export class LabelOutline extends Component {
		}

		this._color.set(value);

Integration of outline and shadow to label #16106

Integration of outline and shadow to label #16106

Conversation

LinYunMo commented Aug 25, 2023 • edited Loading

Changelog

Continuous Integration

Compatibility Check

github-actions bot commented Aug 25, 2023 • edited Loading

Interface Check Report

SantyWang Sep 4, 2023

Choose a reason for hiding this comment

SantyWang Sep 4, 2023

Choose a reason for hiding this comment

SantyWang Sep 4, 2023

Choose a reason for hiding this comment

SantyWang Sep 4, 2023

Choose a reason for hiding this comment

LinYunMo Sep 8, 2023 • edited Loading

Choose a reason for hiding this comment

LinYunMo commented Sep 14, 2023

LinYunMo commented Sep 15, 2023

SantyWang Sep 15, 2023

Choose a reason for hiding this comment

SantyWang Sep 15, 2023

Choose a reason for hiding this comment

SantyWang Sep 15, 2023

Choose a reason for hiding this comment

LinYunMo commented Aug 25, 2023 •

edited

Loading

github-actions bot commented Aug 25, 2023 •

edited

Loading

LinYunMo Sep 8, 2023 •

edited

Loading