How do you do the person disappearing effect in a lens?

  • Hi Carly,

    This effect takes two steps. On first tap, save the camera texture and apply it to a transparent SpriteVisual that's stretched to fit the screen. On second tap, fade the SpriteVisual in so that it's fully visible and covering the screen.

    To set your project up, first go to Add New > Billboard to create your screen covering Sprite. Next, create a new SceneObject (I named it "Controller") and add the following script to it, in the "Initialized" event:


    //@input Asset.Texture cameraTexture
    //@input Component.SpriteVisual sprite
    //@input Component.AudioComponent audioComponent
    //@input float fadeTime = 2

    var needToCopyTexture = true;
    var needToFadeIn = false;

    // Set the SpriteVisual's alpha to 0 so it's fully transparent
    script.sprite.mainPass.baseColor = new vec4(1,1,1,0);

    function onTap()
    {
    if (needToCopyTexture)
    {
    // If first tap, copy the camera texture to the SpriteVisual's material
    var textureCopy = script.cameraTexture.copyFrame();
    script.sprite.mainPass.baseTex = textureCopy;
    needToCopyTexture = false;

    }
    else if (!needToFadeIn)
    {
    // If second tap, start fading in and play sound
    needToFadeIn = true;
    if(script.audioComponent)
    {
    script.audioComponent.play(false);
    }
    }
    }
    script.createEvent("TapEvent").bind(onTap);

    function onUpdate()
    {
    // Every frame update, if we need to fade in, increase the SpriteVisuals's alpha value
    if (needToFadeIn)
    {
    var color = script.sprite.mainPass.baseColor;
    if(color.a < 1.0)
    {
    color.a += getDeltaTime() / script.fadeTime;
    // Keep alpha value <= 1
    color.a = Math.min(color.a, 1.0);
    script.sprite.mainPass.baseColor = color;
    }
    }
    }
    script.createEvent("UpdateEvent").bind(onUpdate);

    On the object, set "Camera Texture" to your Camera output texture, which should be called "Camera Output". Set "Sprite" to the screen covering sprite you just created. Set "Fade Time" to how long you want the fade to take, in seconds. If you want to add a sound effect, add an AudioComponent to the object and hook it up to "Audio Component".

    Hope this helps! Let me know if you have any other questions.

    Thanks,
    Jacob

    Comment actions Permalink
  • How can you make it fade back in?

    Thanks!

    Comment actions Permalink
  • Hi Abigail, 

    Do you want to fade the device camera texture back in so that the person is visible again? If so, you can fade down the alpha of the overlay sprite until it's 0, at which point it will be invisible and the device camera texture will be completely visible again. 

    Comment actions Permalink
  • Which part of the code would I edit to do that?

    Comment actions Permalink
  • Figured it out!

     

    color.a -= getDeltaTime() * script.fadeTime;

    color.a = Math.max(color.a, 0.0);

    script.mySpriteVisual.mainPass.baseColor = color;

    Comment actions Permalink
  • Glad you figured it out! Let me know if you need any more help!

    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!