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

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

Need to consider

Least performance overhead for Node.
Less code size increment.

TODO:

Add some UnitTests
Editor: gizmo support
Editor: skew icon

Inspector Panel Preview

Limitation

If the parent node has a UISkew component, the world scale and world rotation of the current node may become inaccurate. It is recommended to use local scale and local rotation to modify the scaling and rotation of the current node.
(Reason: Skew transformations alter the scale and rotation components in the world matrix, making it impossible to accurately reconstruct the world SRT components from the world matrix.)

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 ⤴ 2095 bytes, old: 5230226, new: 5232321

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 节点下才可以被渲染。
      */
@@ -24197,8 +24253,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
@@ -24671,9 +24730,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);
@@ -26022,13 +26081,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

…and fix world matrix not updated while delete component in Editor.

dumganhar · 2025-01-21T09:26:50Z

@cocos-robot run test cases

dumganhar · 2025-01-21T09:28:03Z

@minggo This PR is ready now. I think we could put it in the v3.8.6 beta0 and get feedback from developers.

dumganhar · 2025-01-21T12:29:27Z

@cocos-robot run test cases

github-actions · 2025-01-21T13:49:12Z

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

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: FAIL
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/d71f2967-8e34-40c8-af8d-eb7aacd3c53e/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12886962440

Task Details

Platform	build	boot	runned
web-mobile	PASS	PASS	FAIL
ios	PASS	PASS	FAIL
mac	PASS	PASS	PASS

github-actions · 2025-01-21T13:49:13Z

@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/bcfb91da-89ba-49fe-9d02-bb6c2473da71/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12886962440

Task Details

cocos/2d/framework/ui-skew.ts

cocos/3d/skeletal-animation/skeletal-animation-state.ts

cocos/scene-graph/node.jsb.ts

native/cocos/core/scene-graph/Node.cpp

minggo · 2025-01-22T05:48:48Z

Please fix the CI error.

dumganhar · 2025-01-22T06:24:09Z

@minggo

I don't know what caused the CI failed.

minggo · 2025-01-22T06:28:08Z

Except clang tidy error, macOS/iOS also have error.

dumganhar · 2025-01-22T07:54:31Z

Except clang tidy error, macOS/iOS also have error.

I will check that. Good to point that out.

dumganhar · 2025-01-22T08:33:05Z

Fixed

dumganhar · 2025-01-22T08:42:55Z

Thanks for the merge. I will send an another Pull Request for UnitTest

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

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

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

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

dumganhar added 12 commits January 21, 2025 14:44

[v3.8.6] Add UISkew component support.

0391127

Update imports.

71135ee

Update API comments.

f31ed30

Add license

61bdefa

Skew should apply to local matrix, not world matrix.

6d53678

Fix compilation errors

a9de52d

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

c5a8cd5

Apply skew only when it's enabled.

918d5f6

Fix deprecated.

cfe2d1f

mangle Node.modifyParent.

04a372c

Fix deprecated.

0682d47

Fix world scale + skew.

cfd02f8

dumganhar added 5 commits January 21, 2025 14:44

Fix setWorldScale on native platforms.

3547950

Update Node.cpp and add some comments.

feb4497

Fix setParent with keepWorldTransform = true which is used in Editor …

1717d59

…and fix world matrix not updated while delete component in Editor.

Update, NOT FINISHED

14b07a6

Update node.ts

0110c15

dumganhar force-pushed the 386-ui-skew-comp branch from bb08c34 to 0110c15 Compare January 21, 2025 06:52

Update

621680f

dumganhar marked this pull request as ready for review January 21, 2025 09:26

dumganhar added 2 commits January 21, 2025 17:46

Use int.

2986c3b

Add comment for _skewEnabled hack

0961e17

minggo reviewed Jan 22, 2025

View reviewed changes

cocos/2d/framework/ui-skew.ts Outdated Show resolved Hide resolved

minggo reviewed Jan 22, 2025

View reviewed changes

cocos/3d/skeletal-animation/skeletal-animation-state.ts Show resolved Hide resolved

minggo reviewed Jan 22, 2025

View reviewed changes

cocos/scene-graph/node.jsb.ts Show resolved Hide resolved

minggo reviewed Jan 22, 2025

View reviewed changes

native/cocos/core/scene-graph/Node.cpp Show resolved Hide resolved

Rename UISkew._value to UISkew._skew.

effad1a

minggo reviewed Jan 22, 2025

View reviewed changes

native/cocos/core/scene-graph/Node.cpp Show resolved Hide resolved

minggo approved these changes Jan 22, 2025

View reviewed changes

Fix ci issues.

7c9cbe2

minggo merged commit aa841bd into cocos:v3.8.6 Jan 22, 2025
24 of 25 checks passed

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

dumganhar commented Jan 21, 2025

dumganhar commented Jan 21, 2025

dumganhar commented Jan 21, 2025

github-actions bot commented Jan 21, 2025

github-actions bot commented Jan 21, 2025

minggo commented Jan 22, 2025

dumganhar commented Jan 22, 2025

minggo commented Jan 22, 2025

dumganhar commented Jan 22, 2025

dumganhar commented Jan 22, 2025

dumganhar commented Jan 22, 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

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

Conversation

dumganhar commented Jan 17, 2025 • edited Loading

Inspector Panel Preview

Limitation

Changelog

Continuous Integration

Compatibility Check

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

⚠️ Package size ⤴ 2095 bytes, old: 5230226, new: 5232321

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 21, 2025

dumganhar commented Jan 21, 2025

dumganhar commented Jan 21, 2025

github-actions bot commented Jan 21, 2025

Task Details

github-actions bot commented Jan 21, 2025

Task Details

minggo commented Jan 22, 2025

dumganhar commented Jan 22, 2025

minggo commented Jan 22, 2025

dumganhar commented Jan 22, 2025

dumganhar commented Jan 22, 2025

dumganhar commented Jan 22, 2025

dumganhar commented Jan 17, 2025 •

edited

Loading

github-actions bot commented Jan 17, 2025 •

edited

Loading

dumganhar Jan 18, 2025 •

edited

Loading