Tap to Trigger Billboard and Sound

Featured
  • Ha Ha I built same thing.. but so less elegant ! great work again Travis!

  • This seems to block the manipulate component from working. Maybe I'm doing it wrong but how can you use this along with manipulation?

  • Hi Carly, this shouldn't block the Manipulation component where you are able to drag, rotate and scale the object in the scene. What it does block is the ability to tap the ground to replace the content. This is because by adding a full screen tap, you are taking away the ability to tap the ground. Unfortunately, there's not really a way around this because you can't know the user's intent (do they want to tap the ground OR tap the full screen). 

    I was able to have this scripting running alongside the manipulation component (drag, scale and rotate) by following these steps:

    • Create a new Animated Object template project
    • Add a new object to the screen (outside of the WorldObjectController) and add the ShowBillboardOnTap script in the post
    • Add a new billboard and link it in the ShowBillboardOnTap
    • In the preview panel you can click and hold to drag the object in the scene (the manipulation component at work). And, you can tap the screen as well and the billboard will appear. 
  • How do you link It? I linked the script to the new object and the ground grid will move but not the object.

  • Your custom object needs to be a child of the WorldObjectController in the templates to have the ability to manipulate. To do this, drag your custom object onto the WorldObjectController object in the Objects panel. This will make the object a child of WorldObjectController. 

  • Is ist possible to make the billboard dissapear in a few seconds?

  • Try this, now has a configurable showTime which is how long the billboard is active:

    // -----JS CODE-----
    // @input Component.SpriteVisual billboardSprite
    // @input Asset.AudioTrackAsset audioTrack
    // @input float showTime = 1.0

    var audioComponent = null;

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

    audioSetup();

    if( script.billboardSprite )
    {
    script.billboardSprite.enabled = false;
    }
    }
    var turnOn = script.createEvent("TurnOnEvent");
    turnOn.bind(onTurnOn);

    function onTap( eventData )
    {
    // Show billboard
    if( script.billboardSprite )
    {
    script.billboardSprite.enabled = true;

    // Start the delay
    delayedEvent.reset(script.showTime);

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

    // Play sound
    if( audioComponent )
    {
    audioComponent.play( 1 );
    }
    }
    var tap = script.createEvent("TapEvent");
    tap.bind(onTap);

    function onDelay( eventData )
    {
    script.billboardSprite.enabled = false;
    }

    var delayedEvent = script.createEvent("DelayedCallbackEvent");
    delayedEvent.bind( onDelay );

    function audioSetup()
    {
    if( script.audioTrack && !audioComponent )
    {
    audioComponent = script.getSceneObject().createComponent("Component.AudioComponent");
    audioComponent.audioTrack = script.audioTrack;
    }
    }
  • Thank you for the great script!

    Is there an easy way to make this work to tap through multiple billboards? (For instance, if I wanted three different billboard options, tapping again would switch to the second billboard, and then tapping another time would switch to the third.)

    Thanks!!

  • Hi Rhonda! We actually recently released a template that makes this really easy. It's called the fullscreen update and it's in the latest version of Lens Studio. You just need to update to get it. 

    Basically, it allows you to setup "states" that transition to other states via a tap or wait. Each state defines what objects are shown (e.g. billboard), what animations to play and what audio to play. You are able to use the template to do what you want without any scripting. 

    Check out the tutorial video here:

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

    Hope that helps!

  • I was able to use the fullscreen update to trigger a few billboards showing up one at a time on top of a 3D object, then drag all of them altogether. It's exactly what I wanted. However, now i tap anywhere on the screen and that would enable the billboards. How can I make it so that the billboards would only appear when I tap on the 3D object? (just like when I used your script above) 

  • Hi Sandy, 

    In the Inspector panel of the object where your script is located, you can add a TouchComponent and define a MeshVisual which the touch event will listen to. 

    Now, the TapEvent should only respond to touches that touch the MeshVisuals in the list. 

    Let me know if you need any clarifications!

    Jon

  • Although the script works in the preview, I keep getting the following error and can't publish my lens:

    12:06:57 Error: Wrong argument number count, expected 1, got 2
    at [anon] () native strict preventsyield
    at onTap (BillboardSprite:34) preventsyield

    I tried switching to the second version you posted (with the showTime) and it gave me the same error:

    12:06:57 Error: Wrong argument number count, expected 1, got 2
    at [anon] () native strict preventsyield
    at onTap (BillboardSprite:38) preventsyield

    Line 34 (and 38 on the second version) are both:

    control.play(1, 0.0);

    Any idea why it isn't working?

     

  • Hi Jessie, 

    Is the texture you are using a video? If it is, can you remove the second parameter in the control.play function on line 34 and 38)?

    control.play(1);

    Unlike animated texture, the video texture does not allow you to set the offset from where the texture is played. 

    Let me know how it goes!

    Cheers,

    Jon

  • Jonathan - this fixed it but I think the video may have been too large because after that error was resolved, it started giving me an error saying that it was an invalid file (with the directory of my file). I ended up switching to a jpg image sequence (I used as many sprite sheets as possible but it's still pretty low res, unfortunately) in order to stay under the 4 mb limit. Now I am just dealing with an unrelated issue of my billboards not staying in proportion to each other when viewing on different devices - so I will have to start a new thread! Thank you though!

  • Hi,

     

    I just signed up for the platform.

    I am currently studying interaction design and planing a project for the year end show using sound. I saw this thread and wanted to ask your opinion about it.

    My idea is to have an empty food platter that will have the AR stickers for each type of food. Scanning the sticker will trigger a 3D visual and a voice telling the story about this food, where did it grow, what is it, etc. Can I trigger sound (a short narration) like that? Would you have any suggestions, recommendations?

    Thank you in advance for your time!

    Irem

  • Hi Irem! 

    Take a look at the Marker Template for an example how you can have the Lens recognize a sticker: https://lensstudio.snapchat.com/templates/marker/marker/

    Additionally, you may want to take a look at Behavior Script, which allows you to trigger things based on some event: https://lensstudio.snapchat.com/guides/scripting/behavior-script/ 

    Let me know if you need any clarifications!

    Jon

Have a comment?

Please sign in to leave a comment.