The forum on this site is closed for new comments and posts. Continue the conversation in the new forum, and learn more here.

Interaction to a billboard

  • Hey Anwar,

    Have you checked out the Touch Input Scripting Guide? With a little bit of scripting you should be able to get the billboard to react to a tap interaction.

    Be sure to also review the Scripting Overview (if you haven't already) to get familiar with the basics of scripting before diving into the Touch Input guide.

    Let me know if you have any further questions about this, and I'd be happy to help.

    Best,
    Kaitlyn

    Comment actions Permalink
  • 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

    Comment actions Permalink
  • This is super useful! thank you so much!

    Comment actions Permalink
  • What if you have two sprites?

    Comment actions Permalink
  • 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

    Comment actions Permalink
  • 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.

    Comment actions Permalink

We're here to help! We just need a little bit of information...

What system are you using?

Have you downloaded the latest version of Lens Studio?

Please download the latest version of Lens Studio. If you still run into this issue, please come back and report it!

Is this issue causing Lens Studio to crash?

What system do you run Lens Studio on?

Version

Graphics

Follow the next steps to help us solve your issue:

  • Copy and paste this text into your TerminalCommand Window
    open ~/Library/Preferences/Snap/Lens\ Studio/ %LOCALAPPDATA%\Snap\Lens Studio Copy Text
  • Press ReturnEnter to run the command. The Lens Studio folder will automatically open
  • Prepare to upload your files: zip the "Log" Folder by right-clicking and choosing "compress."
    Locate the Log.txt file right above it.

    Attach a screenshot of the issue:

Name:

Email:

What is this most relevant to?

Please enter a brief description of your issue:

Thanks for submitting this issue.

Unfortunately, it's likely due to the operating system or hardware you're using – since they don't meet the system requirements for Lens Studio.

Still, we hear you loud and clear, and are logging the issue in case there's ever a workaround we can provide!

Minimum Requirements

Operating System: Windows 10 (64 bit); MacOS 10.11+

Hardware: Minimum of Intel Core i3 2.5Ghz or AMD Phenom II 2.6Ghz with 4 GB RAM; Intel HD Graphics 4000 / Nvidia GeForce 710 / AMD Radeon HD 6450 or better; screen resolution of 1280x768 or higher

We'll try to resolve this issue as soon as possible. Thanks for letting us know about it!

Keep an eye out for a followup email from us. We may have a couple more questions for you, or we might already have a solution to offer.

Happy creating!