Click event

Today we don’t have a proper click event, we have a button-down event, which is not the same. A click event involves also the button-up event, both on the same object.

We have a conflict between clicking to drag the camera angle vs clicking to activate something in the world. You can accidentally click on things while trying to drag the camera. For many interactions, creators should ideally use a proper click event that includes the mouse-down and the mouse-up.

Once this new option exists, we’ll then want to update a lot of content so that it uses the click, including smart items, example scenes, Genesis Plaza, etc. Community creators too. So the sooner we make this option available, the better.

# **Solution**

We should offer a new way to interact with an entity doing a full click.

We consider a click is a click if both the button down AND the button up event happen on the same entity. We won’t be considering the path taken by the cursor, or the amount of time that passed between the two events. This is consistent with how click events work on the browser, so as users we’re subconsciously used to that form of interaction.

The button-down event is still useful, for some kinds of interactions you want to react as soon as possible, and not wait for the mosue-up. For example in a shooter, you want the shot to happen when you pull the trigger. But in less dynamic interactions, like opening a door, we want to encourage all creators to use the click event.

### Code interface

It should be as easy for the creator to set up as using the mouse-down event. We shouldn’t expect the creator to have to set up a system to listen for both mouse-down and mouse-up, and checking if the hit entity matches.

It will be implemented fully on the SDK side, we already have the information we need coming from the engine.

On code, just like we have an `onPointerDown` we should have an `onClick` with all the same features.

```tsx
// simple way:

pointerEventsSystem.onClick(
{
entity: myEntity,
opts: { hoverText: 'Click' },
},
function () {
console.log('clicked entity')
}
)

// systems-based way:

engine.addSystem(() => {
if (inputSystem.isTriggered(InputAction.IA_POINTER, PointerEventType.PET_CLICK)){
// Logic in response to button press
}
})

```

When using onClick, the default `button` should always be `IA_POINTER` (the mouse button).