Tap to Trigger Billboard and Sound

Featured

Comments

14 comments

  • Avatar
    Patrick Henry Vlogs

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

  • Avatar
    Carly Cordero

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

  • Avatar
    Travis Chen

    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. 
  • Avatar
    Carly Cordero

    How do you link It? I linked the script to the new object and the ground grid will move but not the object.

  • Avatar
    Travis Chen

    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. 

  • Avatar
    The dark Bull

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

  • Avatar
    Travis Chen

    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;
    }
    }
  • Avatar
    Rhonda

    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!!

  • Avatar
    Travis Chen

    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!

  • Avatar
    Sandy Than

    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) 

  • Avatar
    Jonathan Solichin

    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

  • Avatar
    Jessie Heintz

    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?

     

  • Avatar
    Jonathan Solichin

    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

  • Avatar
    Jessie Heintz

    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!

Please sign in to leave a comment.