debugDraw alignment issue

[Quitalizner]

@pandamicro, @linrm

A follow up to this topic Node attached with Rigid Body is displaced when the game is resized

I followed the advice and created an additional renderRoot2D and camera to hold all physics related objects.

With this approach the issue of gameObject being displaced on resize is fixed.
But the debugDraw gets completely offset when resized. I have attached screenshots for reference.

Additionally, I have attached a zip file containing the project.
physicsDebug.zip (1.9 MB)

I have a feeling that this happens because debugDraw is attached to canvas camera instead of root camera.

Please have a look and let me know what could be going wrong.
Would really appreciate the help.

[linrm]

why you use feeling? you can debug it and find what going wrong by yourself, feel easy to debug it.

[Quitalizner]

@linrm,

I followed your steps and changed the parent of PHYSICS_2D_DEBUG_DRAW node from canvas to root using the following method.

   this.node.on(NodeEventType.CHILD_ADDED, (node: Node) => {
        console.warn("node", node);
        if (node.name === 'PHYSICS_2D_DEBUG_DRAW') {
            const rootNode = find('root');
            rootNode.addChild(node);
        }
   });

But still the DEBUG_DRAW doesn’t align on resize. Any idea why?

[Koei]

You need to modify the orthoheight of the camera on the root node.
When the canvas size changes, it will automatically adapt to the camera configuration on the canvas and will not modify the root-node’s camera.

[Quitalizner]

@Koei,

Unfortunately this doesn’t solve the issue if using just fitWidth or fitHeight alone. If both are enabled it works well.

There seems to be some issue with changing the layer property of the Debug Draw node.
It is set to Layer.Enum.UI_2D when it is being created in physics-world.ts

I tried setting it to Layer.Enum.Default which is Layering of the root node.

But it doesn’t change.

As you can see in the screenshot shared. Value of Default is 1073741824. While UI_2D is 33554432.

Please advice on how I can go about changing the layer property.
I’m not sure if the problem is because of this. I don’t know much about hideFlags.

node.hideFlags |= CCObject.Flags.DontSave;

[Koei]

I tested it and it works fine, isn’t that what you want?

[Quitalizner]

@Koei,

I generally tend to modify fitWidth & fitHeight as per the aspect ratio during runtime.
The solution you provided me works well when both fitWidth & fitHeight is set to true.
Can you please uncheck the fitHeight or fitWidth and try again.

Here’s the build where I’m trying to change the layer property of the DebugDraw node.
physicsDebug.zip (2.1 MB)

Please Note: The canvas layer is set as test in the build. Hence the Debug Data may not be rendered.

[Koei]

[Quitalizner]

@Koei,

Thanks a lot Koei. This works as expected. I was under the impression that the layer settings couldn’t be overridden for debugDraw. I had no idea that I should update it a frame later for it to take effect.