[v3.8.6] [2D Skew comes back] Add UISkew component support. #18212

dumganhar · 2025-01-17T11:07:48Z

Re: #17852

Need to consider

Least performance overhead for Node.
Less code size increment.

TODO:

Add some UnitTests
Editor gizmo support

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 · 2025-01-17T11:33:07Z

⚠️ Package size ⤴ 1568 bytes, old: 5232984, new: 5234552

Interface Check Report

! WARNING this pull request has changed these public interfaces:

@@ -1756,8 +1756,64 @@
         getComputeAABB(out?: geometry.AABB): geometry.AABB;
         protected _selfBoundingBox(out: math.Rect): math.Rect;
         protected _parentChanged(node: Node): void;
     }
+    export class UISkew extends Component {
+        constructor();
+        protected __preload(): void;
+        protected onEnable(): void;
+        protected onDisable(): void;
+        protected onDestroy(): void;
+        /**
+         * @en Gets the skew on x axis. Unit is degree.
+         * @zh 获取 X 轴斜切角度。
+         */
+        get x(): number;
+        /**
+         * @en Sets the skew on x axis. Unit is degree.
+         * @zh 设置 X 轴斜切角度。
+         */
+        set x(v: number);
+        /**
+         * @en Gets the skew on y axis. Unit is degree.
+         * @zh 获取 Y 轴斜切角度。
+         */
+        get y(): number;
+        /**
+         * @en Sets the skew on y axis. Unit is degree.
+         * @zh 设置 Y 轴斜切角度。
+         */
+        set y(v: number);
+        /**
+         * @en Gets the skew value of the node. Unit is degree.
+         * @zh 获取节点斜切角度。
+         */
+        get skew(): Readonly<math.Vec2>;
+        /**
+         * @en Sets the skew value of the node. Unit is degree.
+         * @zh 设置节点斜切角度。
+         */
+        set skew(value: Readonly<math.Vec2>);
+        /**
+         * @en Sets the skew value of the node by Vec2.
+         * @zh 设置节点斜切角度。
+         * @param @en value The skew value in Vec2. @zh 斜切角度值。
+         */
+        setSkew(value: Readonly<math.IVec2Like>): void;
+        /**
+         * @en Sets the skew value of the node by x and y.
+         * @zh 设置节点斜切角度。
+         * @param x @en The skew on x axis. @zh X 轴斜切角度。
+         * @param y @en The skew on y axis. @zh Y 轴斜切角度。
+         */
+        setSkew(x: number, y: number): void;
+        /**
+         * @en Copies and returns the skew value of the node.
+         * @zh 拷贝节点斜切角度值并返回。
+         * @returns @en The skew value of the node. @zh 节点斜切角度。
+         */
+        getSkew(out?: math.Vec2): math.Vec2;
+    }
     /**
      * @en The entry node for 2D object data collection, all 2D rendering objects need to be rendered under the RenderRoot node.
      * @zh 2D 对象数据收集的入口节点，所有的 2D渲染对象需在 RenderRoot 节点下才可以被渲染。
      */
@@ -24192,8 +24248,11 @@
         protected _scene: Scene;
         protected _activeInHierarchy: boolean;
         protected _id: string;
         protected _eventProcessor: __private._cocos_scene_graph_node_event_processor__NodeEventProcessor;
+        /**
+         * @dontmangle Ensure _eventMask not to be mangled since it is visited by UISkew._updateNodeTransformFlags with 'any' conversion.
+         */
         protected _eventMask: number;
         protected _siblingIndex: number;
         /**
          * @en
@@ -24658,9 +24717,9 @@
         protected _lscale: math.Vec3;
         protected _mobility: number;
         protected _layer: number;
         protected _euler: math.Vec3;
-        protected _transformFlags: TransformBit;
+        protected _transformFlags: number;
         protected _eulerDirty: boolean;
         protected _flagChangeVersion: number;
         protected _hasChangedFlags: number;
         constructor(name?: string);
@@ -25941,13 +26000,22 @@
          * @zh 节点缩放
          */
         SCALE = 4,
         /**
+         * @en Skew changed
+         * @zh 节点斜切
+         */
+        SKEW = 8,
+        /**
          * @en Rotation or scale changed
          * @zh 节点旋转及缩放
          */
         RS = 6,
         /**
+         * @en Rotation, scale or skew changed
+         */
+        RSS = 14,
+        /**
          * @en Translation, rotation or scale changed
          * @zh 节点平移，旋转及缩放
          */
         TRS = 7,

dumganhar · 2025-01-17T16:07:59Z

@cocos-robot run test cases

dumganhar · 2025-01-17T16:12:46Z

@cocos-robot run test cases

github-actions · 2025-01-17T16:50:38Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: PASS
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/9e837b88-11a1-40e7-a7c1-1f6293cf8a8e/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12832740622

Task Details

github-actions · 2025-01-17T16:50:38Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: PASS
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/bccc2c24-2a68-45a2-bfaa-2920443b7d49/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12832740622

Task Details

dumganhar · 2025-01-18T04:05:22Z

cocos/scene-graph/node.ts

            if (cur) {
-                if (dirtyBits & TransformBit.POSITION) {
+                if (positionDirty && !rotationScaleDirty) {
                    Vec3.transformMat4(childPos, child._lpos, cur._mat);


If position and (rotation/scale/skew) are both dirty. Doesn't need to go here to calculate world matrix since in the following if (rotationScaleSkewDirty) { logic , it will do that in Mat4.fromSRT ( get the local matrix) + Mat4.multiply ( get the world matrix = parent's world matrix * my local matrix ).

In this case, we avoid the unused Vec3.transformMat4 operation.

dumganhar · 2025-01-18T05:06:33Z

cocos/scene-graph/node.ts

                    Mat4.fromSRT(childMat, child._lrot, child._lpos, child._lscale);
+                    uiSkewComp = child._uiProps._uiSkewComp;


Don't use getter and make _uiSkewComp @engineInternal public property for fast accessing the UISkew component.

dumganhar · 2025-01-18T05:11:43Z

@cocos-robot run test cases

github-actions · 2025-01-18T05:48:58Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: RUNNING
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/64be0933-683c-4a50-83d4-e2b8812d5828/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12841151886

Task Details

github-actions · 2025-01-18T05:48:58Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: PASS
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/0da0a89e-eb3c-4a3e-9176-305f3fe2c59e/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12841151886

Task Details

dumganhar · 2025-01-18T14:54:18Z

@cocos-robot run test cases

github-actions · 2025-01-18T15:34:30Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: PASS
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/71a833e5-1067-4b2e-bba0-6aec3fe7ff00/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12845002283

Task Details

github-actions · 2025-01-18T15:34:30Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: PASS
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/b5f4a790-f676-4806-b828-fdc7728eaa56/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12845002283

Task Details

dumganhar requested a review from minggo January 17, 2025 11:07

dumganhar marked this pull request as draft January 17, 2025 15:51

dumganhar added 6 commits January 18, 2025 10:47

[v3.8.6] Add UISkew component support.

4330b33

Update imports.

f0ebb42

Update API comments.

a3b5728

Add license

0683950

Skew should apply to local matrix, not world matrix.

e2a81f6

Fix compilation errors

f4ee6f8

dumganhar force-pushed the 386-ui-skew-comp branch from ca8dcd3 to f4ee6f8 Compare January 18, 2025 02:47

dumganhar commented Jan 18, 2025

View reviewed changes

Don't subscribe TRANSFORM_CHANGED events in ui-skew.ts.

0d86c90

dumganhar commented Jan 18, 2025

View reviewed changes

dumganhar added 10 commits January 18, 2025 18:32

Apply skew only when it's enabled.

d95529b

Fix deprecated.

34a9bf0

mangle Node.modifyParent.

781a91f

Fix deprecated.

f5ea15a

Fix world scale + skew.

9f20050

Mangle _uiSkewComp

765f981

Revert _eventMask

d2be8dd

Fix deprecated.

a5e1898

Fix setWorldScale on native platforms.

513455d

Update Node.cpp and add some comments.

3c0a777

Update node.ts

6547c1b

dumganhar changed the title ~~[v3.8.6] Add UISkew component support.~~ [v3.8.6] [2D Skew is back] Add UISkew component support. Jan 19, 2025

dumganhar changed the title ~~[v3.8.6] [2D Skew is back] Add UISkew component support.~~ [v3.8.6] [2D Skew comes back] Add UISkew component support. Jan 19, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v3.8.6] [2D Skew comes back] Add UISkew component support. #18212

[v3.8.6] [2D Skew comes back] Add UISkew component support. #18212

dumganhar commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

dumganhar commented Jan 17, 2025

dumganhar commented Jan 17, 2025

github-actions bot commented Jan 17, 2025

github-actions bot commented Jan 17, 2025

dumganhar Jan 18, 2025 •

edited

Loading

dumganhar Jan 18, 2025

dumganhar commented Jan 18, 2025

github-actions bot commented Jan 18, 2025

github-actions bot commented Jan 18, 2025

dumganhar commented Jan 18, 2025

github-actions bot commented Jan 18, 2025

github-actions bot commented Jan 18, 2025

		Mat4.fromSRT(childMat, child._lrot, child._lpos, child._lscale);
		uiSkewComp = child._uiProps._uiSkewComp;

[v3.8.6] [2D Skew comes back] Add UISkew component support. #18212

Are you sure you want to change the base?

[v3.8.6] [2D Skew comes back] Add UISkew component support. #18212

Conversation

dumganhar commented Jan 17, 2025 • edited Loading

Changelog

Continuous Integration

Compatibility Check

github-actions bot commented Jan 17, 2025 • edited Loading

⚠️ Package size ⤴ 1568 bytes, old: 5232984, new: 5234552

Interface Check Report

dumganhar commented Jan 17, 2025

dumganhar commented Jan 17, 2025

github-actions bot commented Jan 17, 2025

Task Details

github-actions bot commented Jan 17, 2025

Task Details

dumganhar Jan 18, 2025 • edited Loading

Choose a reason for hiding this comment

dumganhar Jan 18, 2025

Choose a reason for hiding this comment

dumganhar commented Jan 18, 2025

github-actions bot commented Jan 18, 2025

Task Details

github-actions bot commented Jan 18, 2025

Task Details

dumganhar commented Jan 18, 2025

github-actions bot commented Jan 18, 2025

Task Details

github-actions bot commented Jan 18, 2025

Task Details

dumganhar commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

dumganhar Jan 18, 2025 •

edited

Loading