The forum on this site is closed for new comments and posts. Continue the conversation in our Snap AR Discord server.

Take a Picture and Add/Generate a Billboard

  • Hi Nicolas! This is definitely possible. First, we'll create a new camera and camera texture that will represent our photo taking. Then, we'll create a billboard that utilizes this camera's texture. We'll then show the billboard when the "photo is taken". And this is very similar to how the freeze camera textures work in the Fullscreen template. I'll walk through how to set this up. 

    • Create a new camera. In the Objects panel: Add New -> Camera
    • Set the new camera's input texture to Device Camera Texture
    • Create a new camera texture from this camera. In the Resources panel: Add New -> From Camera -> select the newly created camera. You'll now have a texture in your Resources that represents the camera's feed.
    • Create a new billboard. In the Objects panel: Add New -> Billboard
    • Assign the billboard's texture to your newly created camera texture

    Then, to take a photo, you need to create a simple script to turn off the camera (which freezes the camera texture) and turn on the billboard. Here's a quick script to do that which I bound to the tapped event so that when you take the screen, it takes the picture and shows the billboard. Note, this script assumes you've turned off the billboard (unchecked) in the objects panel. 

    // -----JS CODE-----
    // @input Component.Camera camera
    // @input SceneObject billboard

    script.camera.enabled = false;
    script.billboard.enabled = true;
    Comment actions Permalink
  • Hello Travis!

    Wow! Thank you so much. I am going through this right now and am wondering what tapped event you are referring to. Are you referring to a tapped event inside of one the provided scripts in Interactive tap?

     

    Comment actions Permalink
  • Also, when you're assigning the billboard's texture to your newly created camera texture, are you assigning it to the Orthographic camera set up with the billboard? Or are you using a sprite with your new camera?

    Comment actions Permalink
  • https://www.reddit.com/r/SnapLenses/comments/7qrp7j/tutorial_how_to_add_freeze_frame_works_on_all/ 

    This might also lead to the right direction. I am thinking that you want me to assign the script to the sprite within the Billboard setup. I just need clarification. :)

    Comment actions Permalink
  • Also, I can't really seem to find a script that activates events when you take a picture with the camera. Is there a piece of script that I can set Events with taking pictures with the camera? 

    For example, If the user takes picture then activate Billboard. The user is going to be using "Tapped" to trigger the Tapped Event the Character plays in the Interactive Play. I want to trigger the Billboard when the user takes a picture, not by tapping once on the screen because I need that function to play animation.

    Comment actions Permalink
  • Hey Nick! I went ahead and created a sample project of this. You can download it here:

    https://storage.googleapis.com/snapchat-lens-assets/f1a09194-f02d-43ed-92b8-62e843179ff0/lensStudio/Forum-Helpers/TakePhotoOnTap.zip

    Hope that helps!

    Comment actions Permalink
  • Travis - is there any way that I can lock the shape of the billboard? I need my snapshot billboard (which I've resized to a square using the aligner width and height) to line up on top of a graphic on the billboard behind it, but when switching devices in the preview it is making the snapshot billboard stretch (the shape is still filled, but it is a horizontal rectangle, for example, instead of the original square). 

    iPhone8 Preview (Correct):

    Galaxy 8 Preview (incorrect):

    Settings:

    Thanks!

    Comment actions Permalink
  • Hi Jessie! 

    That's awesome that you're checking device resolutions! It's definitely important for a good user experience. 

    The issue is that because our billboard is in Fill mode, parts of the image is cropped out of the screen when the resolution changes. As a result the corresponding binding point of our sprite would be different!

    The Face in Sprite template actually solves this problem by doing math to account for this. We can modify the script to allow us to reposition sprites instead of just face insets. 

    Take a look at this example project which contains the modified script.

    All you have to do is use the script, and add your sprite visuals and billboard to it:

     

    Let me know if you need any clarification!

    Thanks,

    Jonathan

     

    You can see the result below:

    On iPhone8

    on Blackberry KEYone without the script:

    on Blackberry KEYone WITH the script:



     

    Comment actions Permalink

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!