Button hit area changed after load scene

When I run project direct from scene there is no problem, UI buttons are working properly. The issue appear when I load that scene. Each button got extended hit area and I can’t figure it out why.

Can you provide a small project that shows the issue please?

Not really (NDA) also project is in advance state.

Is there any possibility that button will have different hit points that entity assigned to it?
Is there a wait to visualised hitting areas?

Oh and forgot to mentioned, buttons are on scene, but not under Screen2D.

I’ve not come across this issue before so without a reproducible project, it’s difficult to give advice/help.

The hit area should be the bounds of the element. You can get the world corners using the API: https://developer.playcanvas.com/api/pc.ElementComponent.html#worldCorners

And then render than by drawing lines from corner to corner using https://developer.playcanvas.com/api/pc.Application.html#drawLines

Can you take a fork of the project and remove everything but the bare minimum to reproduce the issue which sounds like the scene change and the button(s) in the next scene?

@yaustar thank you for your help, we have just figure it out. We have 2 cameras on both scenes with different settings.

Ah, I wonder if the two camera thing is related?

You may want to check the camera on the ElementInputEvent callback on element input events


I would need to check but it is possible that you are getting 2 events per element, one for each camera.

If they have different FOV or positioned different, then I can see how the element hit area could appear to be different

Yep, it was our issue. When I’ve matched settings from main scene to additional scene, then everything is working fine now.

It would be great to get a repro of this as I would like to dive a bit deeper into this.

Is the setup:

  • 2 scenes with 2 cameras each (what were the settings?)
  • Loading directly to the button scene was fine but going from the other scene first causes issues?

This looks like the issue where UI elements in World with multiple cameras.

At the moment, best workaround is to check the camera that has created the element input event. eg:

    this.entity.element.on('mouseenter', function (e) {
    }, this);

I’m sorry I can’t share the project. Both cameras are orthographic as experience is 2D game. They just had different size.

Out of interest, what’s the reason for both cameras being active at the same time? Do you have a split screen or doing render to texture?

There is no purpose for it. There were just two camera, from main scene and the one to load.