Camera Tricks | SnapChat | Jake Anstey | Skillshare

Camera Tricks | SnapChat

Jake Anstey, Software Engineer

Camera Tricks | SnapChat

Jake Anstey, Software Engineer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
8 Lessons (42m)
    • 1. Introduction

      1:08
    • 2. The Screen Transform

      4:20
    • 3. Camera Masking

      3:47
    • 4. Image Picker PT1

      8:14
    • 5. Image Picker PT2

      4:43
    • 6. Distinguish Snapchat vs Snap Camera

      7:30
    • 7. Hint Text

      6:59
    • 8. Create a Freeze Frame Lens

      5:20
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

16

Students

--

Projects

About This Class

Learn new camera tricks and features to implement into your lens.

We will go into using multiple cameras, masking the camera, a little bit of scripting, but only where its necessary. 

Did you know that when you create a lens for SnapChat, it also works for Snap Camera? Snap Camera is a desktop computer program that allows you to use SnapChat lenses in any other application that uses your camera. This has become a huge hit lately with the incredible amount of people working from home.

This class will teach you how to include more interactivity into your lenses, by ways of separating SnapChat from Snap Camera, while not creating two separate lenses.

Meet Your Teacher

Teacher Profile Image

Jake Anstey

Software Engineer

Teacher

Computer programmer, augmented reality developer and enthusiast and community contributor.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Introduction: Hello, everyone. Welcome to my sculpture class on lens camera tricks In this class, I'm going to show you how to play with different camera settings, add multiple cameras and ultimately have a bit of fun with them to experiment with different things to create new ideas. And what I mean by that is, Well, as you can see in the 1st 3 I show the background has changed, so the 1st 1 is an image. The 2nd 1 is a post effect on the background, and the 3rd 1 is actually previous frame from the camera. I call it Freeze Frame, and you can basically freeze time and and still exist within it. Um, and then the one on the right is, I just made it to maim yourself, and that one is very functional because it actually has a keyboard built into it. What's going to be involved in this class is cameras, camera masks, scripting lots of scripting, letting the user choose from the camera, roll layers of the camera and then render targets. Alrighty. Then let's get started 2. The Screen Transform: So let's start with the basics. If we want to add a image to our lens, we could go through, add new and then screen image. This will build a screen image for us In this screen image. You see that it has a screen transformed component and not the original transform component , as the camera might have these air two different components and there is only allowed to be one of them on the seen object at a time. What the screen transform does for us is pins the item to the screen in coordinate space zero X and zero. Why is the center of the screen negative? One is left, one is right and bottom is negative. One top is one. So if we would like to shrink this image itself, I say Let's do half the size we can do negative 0.5 0.5 and that will go centered horizontally and same thing for vertically will do. The bottom is negative 0.5, and then the top is 0.5. So this actually shrinks our image, and to see it better, you condone clicked stretch mode and go to fill and cut, which just stretches it And if you were to view this on a desktop safer lens camera, then it will do the exact same thing. We have half of the width and then half of the height, and the image is stretched to fit and cut off. Now let's say you added your own Ortho graphic camera and you wanted to add an image by yourself. So let's delete this or the graphic camera will. If you do not see the, uh, render layer icon here, just adjust your view settings, and I like to have all of these set to true. That way I can see exactly what an object has, and it also gives me easier access to the render layers and so on. So I will change this camera to the or the layer and un select the default layer. I'll change it to Ortho Graphic set my distance to something like 1 50 negative 1 20 to keep it out of the way. So this camera, I'm going to add a empty child object, and I'm gonna call this screen. The reason is because this screen is gonna have to components to it. The first is screen transform and then screen region, so a screen region will give us access to hold Children to this region without issue. Next, I'm going to add an image, not screen image, but just in image object itself. And as you can see, it has a scale of 32 32 32 for X, Y and Z. Now, if we were to add our screen transform component to the image, you'll see that in three D space. This image has just blown up. We'll fix that by clicking advanced on the screen, transform and changing our scale back toe 111 Now, if we go back to basic and we hopefully won't need to goto advanced anymore. It's back in the advanced there, back in the basic. And, uh, I haven't set my render layer yet to or though, So here's Ortho graphic. That's how you add an image without clicking screen image every time. Same goes for other seeing objects that you would like to pin to a screen, and you just can't figure it out. The steps you have to take is to add a new object with a screen transforming a screen region, and then the Children will have screen transformed component 3. Camera Masking: Now let's talk about camera masking. What we can do is canoe project. If you haven't already select the default camera, we won't need a prospective camera at the moment. We're just going to turn this one into an Ortho graphic camera and we don't need 1000 distance. So I'm just going to set that to 1 50 Not a big deal if you haven't, And also in our resources, we're going to go down to segmentation texture and select one of these. Now I'm going to select portrait background because this one is the easiest to deal with. And it makes the most sense for beginners. If we drag this onto the mask in the inspector of our camera Now our camera is masked to this portrait background segmentation, I guess. First, let me show you what this portrait background segmentation actually is. You don't have to do this. I'm just going to add a new camera with a new layer just to show you what this is. If you drank the portrait segmentation, porter, background segmentation onto the texture of this image. You'll see that the human is black and the background is white. This is instructions to the camera to tell the camera what is being used in what is not being used as well. If you select in the resources your portrait, background segmentation or whatever segmentation used chose, you can actually click invert mask, and it will now give the camera the human, and it will black up the background. I'm just going to delete this camera. So now that we have a mask, anything we add to this camera will only show up on the portrait background segmentation. And I'm going to un invert this mask. So that being said, if we add something like a post effect analog TV will have to set our layer to the default layer and get this perspective, we will drag it to the camera, delete this camera that it created for us. And now, as you can see, if you were to invert the mask, then it's on the human only. And if you're not, then it's on the background. Unfortunately, there are no good default samples with any good backgrounds. They're all white, so you won't be able to tell most of your effects without using the lens yourself. And if we were to add something like a portrait face and we change this up, we delete the analog TV. This time we're going to add a pixel ization. And again we'll drag it to our camera and delete this perspective camera and we will un invert our Maskell. It is. Oh, sorry. We will add our portrait phase segment segmentation. Now only the face is blurred because the camera only sees the face. 4. Image Picker PT1: lends studio supplies us with a sweet of you I controls that we can download and import into our project flawlessly. What I mean by that is, if you come to their website and you go into scripting and you scroll down to help her scripts, you'll find the user interface or just search lens studio, you Y or user interface. If we download this, which already have, and we go into our project, we go to our resources and click add new import files and we will find it in our minds. On my desktop. Click the hue I widgets dot L S o No, it hasn't stopped working. It's doing stuff in the background. You just have to wait a few seconds for it to populate in your actual and spin your actual objects. So it has given us this object that says please under Ortho graphic camera. So let's do that. We'll add a camera and we will make it forth a graphic, and you don't have to do exactly what I'm doing. I just like to move my camera out of the way because sometimes you can get right in the way and like it says places under the Ortho graphic camera. So now on our screen, we have you I controls and they work. If you click the button, it animates. And if you talk about the switch, it has a nice little animation as well. So we can now. We don't what we don't need. Let's keep the button. We'll keep this rounded button and we will just delete these other ones for now as well as the hint, because we don't need the hint and let's go ahead and add in our resources we're going to from image picker texture. We're going to add from image picker texture. Now, if we go ahead and come back to the A P I, we'll select a P I from the reference and let's type, uh, from image. Sorry image picker, I believe. Go ahead and search and not guides go down to a P I and we will find image picker texture provider. So if you go right away to the samples, you will be able to see that in script. This is how we would, uh, activated So we can do a few things. We can show the image picker and we can hide it. And then we can also get notified when the image has changed. So let's creating new child object of our camera and we will call it image picker. And this is going to add a We're gonna add a new script and add that to our image picker and then go ahead and double click your script. So first of all, we're going to take the you I button as a parameter. And if you remember from my intro deline students, Sorry, not my intruder scripting, uh, skill share class. Then you should know all about this. And if you haven't seen it yet, I do recommend going watching it. It's not a lot. It is quite simple. And it takes 45 minutes to get through. And I show you all the ropes and pulleys before you even start scripting hard core. But for now, I'm going to script as if you already know what's going on. We're gonna taken input, and it's going to be our button. So it's actually going to be a script, and this will be our button. Go ahead and hit save, and then we'll have to re click on our image picker object to refresh our inspector panel to accept the parameter. And now that it says button will drag the U I rounded button on to that. So without any method, we're just going to type script dot button dot k p. I don't add and call back. And I know this because I did previously look at the U I user interface, uh, guide, and it shows you exactly what you could do with it. So a quick overview I will scroll down to where they start scripting here. And it will show me that with a button. Here's what I can do so I can use event callbacks and I'm going to say on press up, I like the on press up function and even in their example here you follow this and it says to the button you call the A P I and then add callback. You pass the string of the method name and then the function you wanted to call so on press up and then I'm just going to say but press, even though I haven't made it yet and then I will say far but impressed is equal to a function and does it take any parameters? No, it does not. So now that we have a button pressed Well, actually, now in Uh um What are we taking in the image picker? So from image? No, not from image. Nope. Picture sorry. It's a texture. My bed. Um, this image picker is actually a texture object. And scripting doesn't actually have auto complete for Theo, the texture provider which we'll be interacting with. So we're going in blind, but you'll see what I mean in a second and we'll just say from image from camera. Hopefully, you guys, we're still sticking with me. This will be done in a second. And let's go back to our A p. I I'm just going to duplicate this tab and pick in age and its image picker texture provider. So what I need to do to actually access this is col dot control. So when I called out control, that gives me this class here, the provider, and then I can call these methods on it. So before I do that, I'm just going to click my object again in the Inspector and drag my image picker onto it. That way it doesn't throw any errors. So now I have that and I can now click their type. Script ducked from camera, roll dot control. And so it knows about control. And now I just taped show and I forgot already. Image picker. Perfect. So now when I click the button, maybe I need to actually put my method above the add call back. Yeah, so that's what it was I needed, declared my method after, and that was a rookie mistake. So when they click the button now, it actually allows you to check out the camera and on a user's device, it will show them the photos that they have on their phone. So I won't continue this lesson right now in one piece, but I will in the next one continue exactly from here where we left off just so that this one doesn't drag on 5. Image Picker PT2: Okay, so in the last one, we got the from image. Sorry, pick image to show. And the user can now go through and select what image they want. But now what do we do with the image? What are we supposed to be doing with it? Well, this ties in now to, um, the masking of the camera and allowing them to set their own background. So let's begin. Let's take our default camera and quickly turn it into Ortho graphic. And like I always do just set the distance to a shorter distance, and I'm going to move. Actually, that can step zero perfect. Um, so, yeah, now we have two orthogonal cameras, which is totally fine because the 1st 1 is going to be masked. We will add our segmentation texture as the portrait background. And in here, let's add a new screen image and let's mask the cameras well so that the image is behind her. And now we go back to the A P. I quickly, and we copy this, which is a method that takes a function. So once again, we will create a quick function of our image picked equals function, and then we will set it were script dot from camera roll dot a p I dog paste that and then we'll say image picked. Perfect. We haven't ever not a B. I control my bad. I'm getting confused here. Um, yeah. And then So now we know when they picked an image and all we have to do is now at one more input, and it will be our image, and we'll just call background and then refresh our inspector and dragger image over here. And so when they picked an image, we have to call script dot image, background, wow dot main pass dot based, tax based texture. And no, it doesn't show up. Is auto complete here, but that, um that's for reasons I'm unsure of. But in the examples of the image, this is what they show you how to set the texture of the image. And so we're gonna say, set the base. Tex is equal to script dot from camera because it's a texture. It translates so easily. And now when the click an image, it actually as the image. So I guess one more thing you'd want to do is just click the image itself. And from the very first lesson that I showed you, you'd want to select something like Fillon cut just so that it doesn't, um it is. It's a full image all the time. And yes, it will get cut off. But it's basically the best way to handle a full screen image every time. And if you would like to quickly move the button, you'll see that it's also a screen transform. And we'll just set our position to something like maybe negative point to, uh, my bad. That should be the why Negative 0.2 looks like it should work, and you can also check it on the desktop, and you can check it on the on different phones just to make sure it works and see the LG wouldn't work so well, Take it up to maybe 15 negative 150.15 You can play with that value that concludes this tutorial, and then the next one. I'm just going to show you how to handle something like a desktop versus of phone. Because of the growing hype in snap camera 6. Distinguish Snapchat vs Snap Camera: Let's talk about different devices, not phones, but snap camera on a desktop compared to snapshot on a phone. So in a typical lens, what I usually do is in my script. I will hide you. Why components or things that shouldn't be shown during recording by calling the is recording method on the scene in the update method. What this does is allows me to set things to hidden or enabled false when I don't want to show them on a desktop in snap camera. We do not have the functionality to call is recording because snap camera is just constantly on and not in a recording state per se. So this is where I take my own steps to find out what kind of device this in a nutshell. I take the aspect ratio of the camera, and the camera can be any one of these or those cameras, and I check if it's less than one, then it's probably a phone, and if it's greater than one, then it's probably a desktop Now. I went ahead and made the stomach project, not thinking about you guys recreating it, so I'm actually going to just create a new project. First things first, Let's add an Ortho graphic camera that renders on an Ortho graphic layer. And then we changed the camera to Ortho. Graphic. Change this students, and I'll move it left of it. Click the scene tab. If you're not seeing the scene every time and now we will add a new PBR. Just any one of these. Just click simple PBR's simplest and just uncheck all of these boxes. Change the color off the Channel 20 and then blend mode Normal. Rename this to transparent because that's what we just did. Now let's add a new let's add a new empty child object. We'll call it screen. And if you remember from the earlier lessons, you have to add two components that screen, region and screen transform to the screen and then below. This, we can now add. It's adding mesh well at a plane mesh, and it's rotated negative. 90. You want that zero. We also want to change that render layer to work and let's click it and it w on the keyboard and just move it back a bit. It's too close. Also, instead of transforming one screen transform on this playing and then just check advanced. Make sure that your scale is set to one and yeah, so now we have a plane that is the entire area of the screen, no matter what device you're on, and let's just drag are transparent material onto it. That way you can see right through it. Next. Let's just add a new object. We'll just call it controller. And then let's add a new script to our resources, and we'll call it controller. Highlight our controller, seen object and drag the controller script into the inspector panel and then double click controller script toe. Edit it. Let's add an input of the camera, Call it camera, and then let's add something like text. So now let's click. Add new, and then we're going to add a new screen text. This will create a brand new full for in region and everything for us that we probably don't need. But we'll just put it to the Ordo Channel and then let's drag it into our screen custom one . And delete this other full frame ridge, and it's the exact same thing. Just auto generated. So now we have text and weaken. Put anything you want here and you'll see what I'm doing in just a moment. But in our script, let's put a, um, tapped event, and then we'll save our tapped busy to function. So now we can handle when someone taps. But also, let's go toe back to our control or seen object. And now we actually have to add the touch component and will drag the Ortho camera. And then we'll drag The plane that we created actually cannot do that. We have to manually select it, just like the render mesh visual of the plane. So now when you use it, taps that it will call are tapped method. So in here, let's do a quick check will say if and actually before I do this to not get errors. Let's drag. Our camera here is well into our custom scripted in the text that we want. And then we'll say if script up camera don't aspect is greater than one. It's a desktop, so that's what we want right now is we want to desktop because, uh, to explain. What I'm doing is if you're on a desktop, the easiest way to hide things is to just tap the screen, and there's also a findable keyboard shortcut that toggles the tap on lens. Sorry on Snapchat camera, So users have unease of access when they're in a zoo meeting or Google meeting or anything like that. Instead of having to open up snap camera application again, they can hit a control on the keyboard to actually simulate a tap. So we take this method, and it's actually gold to us because this conduce so many things based on the keyboard shortcut. But it is only the tap event. So if our aspect is greater than one, let's just go script dot text that enable is equal to not script dot text dot enabled. And if you go to your phone preview right here, any tap it should absolutely nothing. But if you now change it to a desktop, you can click the screen and it totals. So this is the beauty of being able to create one lens that works for both phone and snap camera in two different ways. Without too much work 7. Hint Text: let's quickly go over how to create some custom hints and not just hints, because that's easy. But being able to kind of fade them away after a few seconds of the lens opening so they can read it and then ignore it completely. Forever? Um, yeah. So we're going to be scripting for this one. So we're just going to add a new empty object. We'll just call it hint controller, and then we'll add a hint script perfect. And then we'll click are hint controller and dragger script onto a double. Click our script in the resources and let's go ahead and take a text component. And so click it in these explorer and drag text onto it. Perfect. And then we'll just create an update event. Wonderful. And so we have a magic. A global method function called get time and Get Time gives us the amount of time in seconds after the lens started, which is perfect for our case, because let's say we want to fade the uh, text only after two seconds of the lens being on So we can say if sorry, not even script. It's just get time, and it's a method is greater than or equal to make sure you put the greater than or equal to, because if it's if you put an equal to clause, it will most likely never equal. The value you put because it happens in increments is greater than or equal to what state to perfect. And so now we need this text. So did I drag it on there? I think I did, yes, and let's take our text and I actually put an outline on it and the color is white. So Color is in a four format that has four values. Its X, y Z and W were interested in a W value because that's the Alfa Channel. And if you're not familiar with Alfa Channel, that's just the transparency of the color. So let's first of all, remove the outline after two seconds so we can call script dot hit text dot outline setting dot enabled, and that's easy to set up the falls. So after two seconds, if he had saved, the outline will disappear. Wonderful. That's exactly what we wanted. Next, let's grab will set a variable to the hint text color, so we'll just call it. Color is equal to script in text dot And here's where you get the colors in the text. Phil Property. Dark color And so now we're gonna create a new Vek four. Far um, it's called New Color is equal to New fact four, and we'll keep the same color as the text. So we're going to just pass in the same color dot exe color dot Why color dot z And then, let's say color dot w minus point 05 And it's part if I because I've experimented with it, and that's the one that I like best. That's the rate that I like best. You can adjust this number however much you want. You could make it fate longer by setting this value smaller, or you could make it shorter by setting it bigger. But 0.5 I think, is the perfect fading great for text. So we have our new color, and then all we have to do is script dot him text dot color start text filled dot Color is equal to color, and before I hit safe, I'm just going to without so actually let me back up a bit. Values can overflow and cause crashing, and I don't know if that's the case in Snapchat Orland Studio. But I put a safety measure in here, which is let me grab the color. So actually, let's just take this color and we're going to extract it to outside of the update event that we said it once. We only need it once. Really? It set ones. Um, I believe, let me just experiment. That's really quick. But anyway, I'm just going to say if and the color dot W is greater than or equal to zero, actually just greater than you. And if we had safe. So we will need to just set this every time in the update, which is fine. Um, hit save now and it will fade. So it was just keeping the reference to just that color object and not the color of the text. Phil. So with that, there's how you fade text, and what's happening here with the W is since we're subtracting 0.5 every loop, every update, that is after two seconds. If we kept doing that, if we kept subtracting 20.5 from the W in the back four, we eventually could end up if the lenses running long enough, going way too far past allowable value and just ultimately bogging down the system and it could crash. I don't know. I tried it, but it's good to put this measure here that if the W is greater than zero, because ultimately we just need to go down to zero. So, yeah, with that, that's how you fade. A hint. Texan. Every time it save a reset blends, you can show what's going on. You can show the the text and then just hide it immediately. 8. Create a Freeze Frame Lens: So for the final lesson of this class, I'm just gonna guide you through how to create a freeze frame lens where when the user taps , they become the background. But they're still active in the foreground. Let me show you first things first. Let's add a new screen image. This will create a new Ortho graphic camera for us, which is perfect, and then we need to mask it. So in your resources, that's at a new segmentation portrait background, and we'll click our camera and drag this portrait background segmentation to the mask. That way, the camera, the image is in the background. Let's create a new scene. Object, just an empty one, and we'll call it controller. This is where we'll put our controller script, and with that, we will need to add a new script and let's just name it controller and then select their seen object and drag the controller script onto it. Double click your controller script and we're going to take two things. We're gonna take a camera and we're going to take a image. Yeah, for about to name it perfect. So let's just go ahead and drag our perspective camera and our screen image so you can see the default image is in the background right now. We can fix that by inner script. We'll just call script dot image dot main pass based text his equal to script dot camera dot render target Perfect. So just the background image now is equal to the What you see is a camera. So hopefully there's no overlap, and it will always be the exact same thing that they see continuing. We can now create our tap event and then the function for it and then find it in our tap event. We're going to, um, do these pretty much the same thing we're going to say. Script dot image dot main pass dot based checks is equal to script dot camera dot last no dot Let me check the A P I, uh, we're going to call copy frame method, and that comes from the input texture. So let's say input texture dot copy frame. So now if we click the screen, you can see the background has frozen to a period in time, and if you click, then it's just going to keep updating it. But if you want to create something like toggle. Then we'll create one more variable. Frozen is equal to false, so it's a booming. And let's just check it here will say if frozen and then else. So if they tapping, it's frozen. Then we're going to want to set our background back to the camera. Um, just copy this here after seven corn look, we'll set it back to the render targets so well, just paste this here. Oh boy. And if not, if it's not frozen, then we will freeze it. And then just below here, we can just put frozen is equal to. Not that way. It's more of a toggle. So now it's frozen, and if you click again, it's not frozen. Click again. It's frozen and once again, this place to the effect that the snap camera work the exact same way. Except snap Camera has their own keyboard shortcut, like I said, so they can actually toggle this while in a meeting with not having open up snap camera application, which is really cool. So I hope you enjoy this class, and if he did, please review it, follow me and request Mawr tutorials because I am avid in this Lens studio program. And if I don't know something, I will figure it out and try to find the best way to explain it. So with that, enjoy and happy creating.