Collision and triggers for UI elements

[marcusx2]

It seems that PlayCanvas doesn't support triggers and collision detection for UI elements. What about 2D games on the screen guys? I am writing to ask for collision and trigger support on UI as well.

[yaustar]

Developers don't tend to make games in the UI screen space

It would be in the world, usually with an orthographic camera. eg: https://www.youtube.com/watch?v=kp3KECoLy8o and game https://playcanv.as/p/rPSvNX5B/

They used Ammo but Will also has integrated a 2D physics library too using p2.js (see https://playcanvas.com/project/446127/overview/p2js-integration)

[marcusx2]

Developers don't tend to make games in the UI screen space

I do. What about games that happen on the screen, and you need to anchor elements on the bottom, top, etc? Games in the world doesn't have anchoring. I can't anchor something to the bottom of the screen using an orthographic camera.

[yaustar]

How would an object move if its anchor to a screen edge/corner? What happens when the browser changes size, does the object move with it? Would it collide with something else?

Do you actually want to anchor something to the screen edges or ensure that objects are always visible on screen (ie you want a game area to fit in the screen?)

[marcusx2]

I used to use Phaser3. When I say anchor I mean loosely. I need to know where the bottom of the screen is for example. On Phaser 3 I made a space shooter game, where the spaceship is always at the bottom of the screen. The spaceshipt scales according to the screensize of course. How would I anchor the spaceship to the bottom of the screen using PlayCanvas without using the UI system, because it doesn't have collision detection and triggers on UI?

So I mean I need the anchors to be able to place stuff on specific places of the screen, even if the image is going to move. So in the spaceship example it's always at the bottom but moves horizontally. I need to know how to place stuff on specific places of the screen without using the UI system, if there is no intention to have collision and trigger on UI system.

[mvaligursky]

You can find out world space corners from your game camera, and anchor your stuff using that. Something like

            const frustumPoints = Frustum.getPoints(camera, nearDist, farDist);
            const cameraWorldMat = camera.node.getWorldTransform();
            for (let i = 0; i < 8; i++) {
                cameraWorldMat.transformPoint(frustumPoints[i], frustumPoints[i]);
            }

[yaustar]

There are a couple of ways of doing this.

If you want a game area to always fit in the window no matter the aspect ratio, read more into this thread: https://forum.playcanvas.com/t/issue-with-non-square-aspect-ratio-and-resizing/10317

The other way is what Martin just posted as I was writing this :) or use the screenToWorld function on the camera using the window dimensions to get the edges in world space

For the space shooter example, it sounds more like that you should have a defined play area that fits in the camera at all times otherwise you may run into issues where the distance between the enemy and the player changes if the player changes the size of the window

[marcusx2]

Ok thanks for the information guys. I could use one these solutions. Or implement the trigger system in UI space, it's not hard to do that anyway. I just wish PlayCanvas supported screen space better. Like I made another suggestion about 3d models in screenspace. Yea sure you can get around it adjusting the camera and stuff, but it'd just be easier to have screen space support for this stuff. I hope you can consider my suggestion. Thanks!

[mvaligursky]

We're also open to community contributions. If you manage to develop any of these features in a generic way, please create an engine PR to have it included.

[Maksims]

I do. What about games that happen on the screen, and you need to anchor elements on the bottom, top, etc? Games in the world doesn't have anchoring. I can't anchor something to the bottom of the screen using an orthographic camera.

You can. You have a camera.orthoHeight - which is used to calculate exactly where is a bottom of the screen. So you can put things in 3D right at the bottom of your ortho camera screen. The same can be done for a perspective camera, with a bit more math.

[yaustar]

There is another use case for triggers for UI is drag and drop inventory style systems which we don't have an out of box solution for in the engine. I think people are using https://developer.playcanvas.com/api/pc.ElementComponent.html#screenCorners to do their own AABB checks

[marcusx2]

Happy to know there's another use case that is more "legitimate" lol. Hopefully that will push the development of UI collision and triggers. Thanks for all the info guys you're awesome!

[marcusx2]

There's screenspace for particles, why not for 3d models, collision, and triggers? Just saying hahaha.

[mvaligursky]

There is just never ending list of features we could be doing, that are also getting requested. We have finite resources, and simply cannot do everything. We prioritise things that are highly requested, and those larger changes that are harder to do by the community. Also as mentioned, we do welcome community contributions, and I'd encourage you do give it a go.

[yaustar]

This feels like more of what you want really for a 2D game that may have a window of any size

The game area is always in view and the player is always at the bottom of the play area.

https://user-images.githubusercontent.com/16639049/145264170-4489ce1b-0ee1-41ee-a7ed-8e792a5351a5.mp4

[marcusx2]

https://user-images.githubusercontent.com/5656275/177052100-384f66df-6686-46e7-b610-1c60453c6eaa.mp4