Make picture change on tap

  • Hi K-bilsoy, I created a little script to do this. 

    First create an empty project by selecting File->New Project from the menu bar. Then, create a script called “ToggleBillboards” and add the following to its contents.

    // -----JS CODE-----
    // @input Component.SpriteVisual billboardSpriteA
    // @input Component.SpriteVisual billboardSpriteB

    var audioComponent = null;
    var toggle = false;

    function onTurnOn( eventData )
    {
    global.touchSystem.touchBlocking = true;
    global.touchSystem.enableTouchBlockingException("TouchTypeDoubleTap", true);
    global.touchSystem.enableTouchBlockingException("TouchTypeSwipe", true);

    toggle = false;
    toggleBillboard();
    }
    var turnOn = script.createEvent("TurnOnEvent");
    turnOn.bind(onTurnOn);

    function onTap( eventData )
    {
    toggleBillboard();
    }
    var tap = script.createEvent("TapEvent");
    tap.bind(onTap);

    function toggleBillboard()
    {
    if( !script.billboardSpriteA || !script.billboardSpriteB )
    {
    print( "TOGGLE BILLBOARDS: Make sure to set your billboards in the Inspector panel!")
    return;
    }

    // Toggle billboard
    if( !toggle )
    {
    script.billboardSpriteA.enabled = true;
    script.billboardSpriteB.enabled = false;
    tryAnimation( script.billboardSpriteA );
    toggle = true;
    }
    else
    {
    script.billboardSpriteB.enabled = true;
    script.billboardSpriteA.enabled = false;
    tryAnimation( script.billboardSpriteB );
    toggle = false;
    }
    }

    function tryAnimation( billboard )
    {
    // Play animation
    var control = billboard.getMaterial(0).getPass(0).baseTex.control;
    if( control && control.play )
    {
    control.play(1, 0.0);
    }
    }

    Create an empty object and add a Script Component in the Inspector Panel to that object. Then, add “ToggleBillboards” to the new Script component. Make sure the event drop down is set to “Initialized”.

    Finally, create two 2D Billboard objects. Then, link your two 2D Billboards to the “ToggleBillboards” script. Press the refresh button in the Preview panel and then tap it to see your Lens working. Note, the "ToggleBillboards" script optionally supports animation playback so if you Billboard has animation, it will try to play it. Have fun!

    Comment actions Permalink
  • I'll try this now. Thank you 

     

    Comment actions Permalink
  • How do you make it so you don't have to tap to trigger the second animation?

    Comment actions Permalink
  • And can you add a third to the sequence?

    Comment actions Permalink
  • Hey Carly, we actually just released a template that's going to allow you to do what you want without any scripting. Basically, it allows you to chain together states of showing / hiding objects that transition on tap or time. All of it is tuned in the inspector and objects panel so you don't have to every write any code. 

    New template can be found in the update which you can download here:

    https://lensstudio.snapchat.com/download

    Check out the template overview video here:

    https://www.youtube.com/watch?v=qir7IRW1aUk

    And the template guide if you need additional info:

    https://lensstudio.snapchat.com/templates/fullscreen-template/

    Comment actions Permalink
  • I'm unable to zoom. Tried a few stuff but, my billboard zooms with the image. Any fix?

    Comment actions Permalink
  • Hi Hazim,

    I answered in another thread too, but you can enable zoom by adding this code:

    global.touchSystem.enableTouchBlockingException("TouchTypeScale", true);

     

    Comment actions Permalink
Have a comment?

Please sign in to leave a comment.

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!