Detect click target

Hi, is it possible to decide which “entity” was clicked? am I able to add event listener that will tell me weather I clicked just skybox or the button or the text?
360 new | Editor (playcanvas.com)

Hi @Lukas_Zahumensky,

Check the following tutorial on how to get started with entity picking:

https://developer.playcanvas.com/en/tutorials/entity-picking/

For UI entities it’s better to enable input on your button elements and track them separately. Check this tutorial on buttons:

https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

Thank you @Leonidas for your reply.

To be more accurate I am seeking for a solution which can create only one event listener in lookCamera script and use e.g. alert to say which entity was clicked.

Then most likely what you need is the framebuffer picking solution (from the 1st tutorial I’ve posted above).

Here is an engine example that showcases how to set it up in code:

https://playcanvas.github.io/#/graphics/area-picker

I am not fully sure if it will pick up entities/elements rendering on the UI layer. @mvaligursky @yaustar do you have a take on this?

The approach that Leonidas has mentioned would be the way I would go. The picker can also ignore layers/pick from specific layers too.

https://developer.playcanvas.com/en/tutorials/entity-picking/#frame-buffer-picking

1 Like

The picker has a cost though, which means the scene gets re-rendered internally for picking purposes. If all you need is to click on elements, I’d suggest other approach if you need higher performance.

1 Like

Is there a way to listen for click without using button component?

Yes, if you go to the frame buffer picking tutorial, it links to a project that is used for the tutorial: https://playcanvas.com/editor/scene/440138

yes i just need to detect clicking on UI elements so I can disable camera movement when I drag scrollview wirth mouse or with touch . What is your suggestions? :slight_smile:

@mvaligursky

I think all options available to you were mentioned already … not sure what else to say. I would no use the picker for this, as the cost is just not worth it for just this. So the button option is a way to go.

do you mean making e.g.

  • button as the child of content in scroll view
  • make its opacity 0 so it’s invisible
  • the size is the size of viewport and it’s position is also same
  • click at that button causes camera disable (added script to achieve this)

I made this work but the question is how to enable camera movement again when i am not scrolling with e.g. touch?

scirpt looks like this

Similar to what you have above, yes. This can get quite tricky as you have to work out when it’s best to give control back to the app.

Sometimes I would write a central input controller that would send it’s own input events to scripts that are expecting input and therefore makes it easier to manage.

In this small example, you would give control back to the camera when the mouse leaves the UI element or when touch ends (although you may be dealing with multitouches so keep that in mind)