Make Things Change on Tap

  • Thank you managed to get it working in the end for a sprite event.

  • Very helpful. I'm using your script to change the material colour (the one at the bottom of the guide), but it only triggers after pressing once first. Any clue how to solve this?

  • hi great feature.. are you able to share how you setup the texture?

    bit confused putting the two from the item to the texture

  • Figured it out...

    you add all the images in to inspector.

    this is great feature :)

     I misunderstood thought it went through the var +i switiching the images over you

  • 👍🏾

  • now how to make it cycle through the images when tapped once? so on tap cycle through textures?


  • Hi Patrick, Glad to hear! Don't forget to show us what you come up with :)

    Hi Tai, Can you clarify what you mean by "tap cycle through textures"? Do you mean when you tap once, it will cycle through multiple images (like every second?)

    Hi Patrick, Currently Lens Studio does not provide that. We'll add this to our feature request. Thanks!

  • Can’t share till my company approves the output (stupid working for the man!!!)

    This is related to this but can move out what about using hash table?

    Am I starting to push the limit of what can be done/ purpose of Lens studio?

  • Hi Patrick!

    You are able to use a hash table in Javascript. It might make sense when your project becomes more complex to use a central hash table for cleanliness. But it really depends on what you're trying to accomplish. 

    And finally, I wouldn't say you are pushing the limit. Lens Studio's Javascript is very powerful and I'm really excited to see more and more complex interactive experiences. 



  • Hey Travis.

    Good to know, at this stage I am guess I am trying to future proof and push the box with what Lens Studio's JS can do :) and how to work in certain limitations (dynamic Text, no external API etc)

    "I wouldn't say you are pushing the limit" - > Challenge accepted :D

  • Hello everyone! :)

    I do not understand what's going on with my script.

    How can I add my items to the board?

    Here's what I see in the console:

    22:23:19 Failed to parse scripts. Reason: incorrect value name 'text_english,' at line:

    And how do I add my objects in the script:

    @input SceneObject [text_english, text_english] elements


    // Tables are indexed from 0.

    // Disables everything except the first (0) element.

    for (var i = 1; i <script.items.length; i ++) {

    script.items [i] .enabled = false;


    I hope you know where the problem comes from :)

    Thank you!

  • Hi Mrtolien!

    Your @input should be 

    @input SceneObject[] elements

    Then, in the Inspector panel where your script is being used, you should be able to add your items. In your script you can access these items by doing something like: 

    var firstElement = script.elements[0]



  • Hello Jonathan!

    Thanks for the quick answer! I tried to do exactly the same example as you, but when I add my objects in the Inspector panel under the script, I still have this error in the console:

    11:04:35 SyntaxError: invalid token (line 2)
    at [anon] (Script:2) internal

    and this is my line 2: 

    @input SceneObject[] items

    So nothing happens when I touch in the preview :(

    I can't figure out the issue..


  • Hi Mrtolien,

    Please try this:

    // @input SceneObject[] items

    Looks like I accidentally dropped the slash ;)  


  • Hi Jonathan! 

    Thank you so much for your time! it's working very well !

    Thanks! :D


    Have great day!


  • I keep getting this error... please help!!!

    TypeError: cannot write property 'enabled' of undefined
    at activateNextItem (Script:22) preventsyield

  • Hi Nathan,

    If you're using the script above, it looks like the list of "items" hasn't been set in the Inspector panel and so when the script tries to set "enabled" it fails because there is no object.

    Here I add things to the Item list in the Inspector panel of my script:

    If this is not the issue, can you post your script so we can take a look at it? 



  • hi Jonathan

    is there a way to change these forehead binding on tap? and if i want to do it for more than one face could it be done?

  • Dear Jonathan,  


    i started a new project , but when i use the script provided above i get a mainpass  error as u can see in the attached photo, i would appreciate your feed back , the aim of the lens is to attach the hair do as a sprite and then change hair dos with a tap

  • Hi Sweet Ice!

    I think you're very close. In the Inspector panel of where you placed your script, make sure that you have your face sprite on the Sprite field: 

    Then once you add your different hair do as the values in Textures, you should be able to touch the screen to change hair do! (In this example I just add in the default textures that comes with the project). 


    Let me know if you need any clarification! Excited to see the result :)



  • Thank you that worked just the way i want it to, i just need to adjust my textures so they all the the same distentions and location so they would fit perfectly.

    follow up questions:

    i can use the same script for a second face right? 

    and if i wanted to add a different sprite as well ( lets say a nose ) in addition to the first one would that work?


  • Yup! You'll just need to add another script component to put the same script on so you can point it to the new Face Sprite. 

  • thanks for your help!

    I'm testing a lens, I changed an object when I tap, I would like add music and change them as the same time as object.

    Is it the same process?



  • Hi Takinours!

    Yes we can use something similar, instead of enabling or disabling objects, we can tell the script to change the audio track on an audio component, then tell it to play:

    // Get an audio component
    // @input Component.AudioComponent audioComponent

    // Get a list of audio files we want to play
    // @input Asset.AudioTrack[] items

    // We remember what item is currently visible.
    // When we start it's the 0th item.
    var currentItemIndex = 0;

    // Play the first sound on initialize
    script.audioComponent.audioTrack = script.items[currentItemIndex];;

    // Define what happens when you tap.
    function activateNextItem () {
    // Increment the current item index
    currentItemIndex += 1;

    // We need the current item index to wrap around
    // once it's higher than the number of items we have.
    currentItemIndex = currentItemIndex % script.items.length;

    // Set the audio component to play the new audio file
    script.audioComponent.audioTrack = script.items[currentItemIndex];;

    // Bind the function to the touch event.
    var touchEvent = script.createEvent("TapEvent");

    Then, you should have something like this:

    You can create an Audio component, by clicking "Add New" at the bottom of the Inspector panel, and clicking Audio.

    Then select the Audio Component field and choose the newly created audio component. Finally, you can drag your audio from the Resources panel into the different values in the Items field. 

    Let me know if you need any clarification. Can't wait to see what you come up with!



  • Thanks Jon! That's work perfectly! 


  • I thank you again for your help.

    When I tap, Is it possible to change element in same time on the front and back camera?

    I tap one time, I wear a component , if I switch on the back camera I find a component associated. If I tap another time I wear a new component and if I switch of camera I Have a new component.

    I don't if I'm clear ....



  • Hi Takinours!

    Yup! All you need to do is call the function when the front and back camera events get called. At the end of your script you can add the following: 

    // Bind the function to the camera switched to back event
    var cameraSwitchToFrontEvent = script.createEvent("CameraBackEvent");

    // Bind the function to the camera switched to front event.
    var cameraSwitchToBackEvent = script.createEvent("CameraFrontEvent");

    Let me know how it goes!



  • Thank you Jonathan,


    I would like to put a picture then when you tap on the screen it shows another picture then it keeps the last picture.

    Like this : Picture 1 *tap on the screen* -> Shows picture 2 and keeps the picture 2 on the screen.


    How can I manage to do that? sorry for my broken english?

  • Hi Appkit1, 

    Is that similar to how the first example under the bonus section in the first post?

    In that example, tapping changes the picture on the screen, and it won't change unless the user taps again.


    If it's not, can you explain a little bit more what you mean?

    Thanks in advance!


Have a comment?

Please sign in to leave a comment.