Interaction to a billboard

Hi Anwar,

I just wanted to follow up on what Kaitlyn is saying and offer a simple example of how you can expand on the Touch Input guide to interact with 2D billboards.

2D Billboard Touch Detection

There may be times when you would like to detect a user’s “touch” or “tap” on specific 2D Sprites or Billboards. Let’s go over an approach on how to achieve this. This is based on the Touch Input guide in the Lens Studio Documentation.

Initial Setup

In order to detect unique taps and touches per object we’ll need to setup our 2D Sprite to receive this information. The first step is to create a plane by adding a Mesh Visual component to a new scene object. This plane will represent where we want to detect touches from the user for this object.

Next we’ll want to parent this new SceneObject to our 2D Sprite. We’ll need to scale the plane up or down to fit our content. Since this represents where we’ll detect touches we’ll want to keep that in mind while scaling.

Setting Up Our Touch Collision

We’ll need to apply an “Invisible” material to our plane mesh so that it doesn’t interfere with the rendering of other objects. To do this you can create a new material in the resources panel by right clicking and choosing Add -> Material -> Unlit. Make sure to disable Color Write, Depth Test, and Depth Write. Apply this material to your plane mesh. For more information on materials check out our Materials Guide.

Next we’ll need to add a “Touch” component to our 2D Sprite object. We’ll use our plane we created as the “Mesh Visual” input for our Touch component.

Note - If this is a fullscreen billboard attached to an orthographic camera then you’ll need to make sure you specify that as your camera for the “camera” parameter of the Touch component.

Script

Now we just need to listen for touches on our 2D Sprite. Create a script with some code that you’d like to trigger when the user “taps” the sprite. Then set the “Script” component to be called on the “Tapped” event from the events drop down field on the “Script” component.

An alternative to this method is to create a script that binds to a “Tapped” event and set the “Script” component to “Initialized” from the event dropdown menu.

// -----JS CODE-----

function onTap(eventData)
{
   print("tapped");
}

var tapEvent = script.createEvent("TapEvent");

tapEvent.bind(onTap);

Conclusion

You should now be able to control taps and touches for specific Billboards and Sprites. Here are some additional things to note.

• If this is a Sprite on the Surface that you can move around in 3D then you’ll need to make sure you set the “Camera” parameter for the “Touch” component to the scene’s perspective camera. You can locate this camera by looking at its “Camera” component and seeing if its “Camera Type” dropdown is set to “Perspective”
• If you don’t assign a “Touch” component to your sprite then any “Tapped” events you listen for will be detected as a fullscreen tap meaning anywhere you tap on the screen will register a tap.

I hope this is helpful!

Best,

Doug

This is super useful! thank you so much!

What if you have two sprites?

Hi Carly,

The cool thing about the Touch Component and the TapEvent is that any object with a Touch Component and a script using this code will only receive the event for that object when tapped. So if you're using two sprites you should be able to simple duplicate the sprite object which will duplicate the TouchCollision object and the script attached. There are a couple things to be aware of though that I've listed below.

• If the objects/sprites overlap then you may get a tap event for both at the same time.
• If you have a script listening for TapEvents like the code above and that object doesn't have a touch component then it assumes you're checking for a fullscreen tap. This means the event will get triggered if you tap anywhere on the screen.

Let us know if you have any issues with this.

Best,

Doug

To add to @Doug Holder's excellent post, it seems that as of 1.7.0 you don't need to add a collision object, you can use your billboard directly.

Just be sure to add a Touch Component to your billboard, and select the Sprite/Image you're using in the "Mesh Visual 1" field.