Make picture change on tap

Follow

K-bilsoy

Snap Lens Network Member Lens Studio Team

• January 29, 2018 22:42

I have a feeling I'm missing something very easy but I have 2 images and simply want to tiptoe screen so it goes from one image to another. How do I do this?

-1

• 

  Travis Chen

  Snap Lens Network Member Lens Studio Team

  • January 30, 2018 22:51

  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
• 

  K-bilsoy

  Snap Lens Network Member Lens Studio Team

  • January 31, 2018 17:48

  I'll try this now. Thank you 

   

  Comment actions Permalink
• 

  carcar999

  Snap Lens Network Member Lens Studio Team

  • February 08, 2018 01:11

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

  Comment actions Permalink
• 

  carcar999

  Snap Lens Network Member Lens Studio Team

  • February 08, 2018 01:13

  And can you add a third to the sequence?

  Comment actions Permalink
• 

  Travis Chen

  Snap Lens Network Member Lens Studio Team

  • February 08, 2018 01:22

  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
• 

  Hazim

  Snap Lens Network Member Lens Studio Team

  • April 15, 2019 12:36

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

  Comment actions Permalink
• 

  Jacob

  Snap Lens Network Member Lens Studio Team

  • April 16, 2019 00:30

  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

Please sign in to leave a comment.