Scripting in Lens Studio | SnapChat | Jake Anstey | Skillshare

Scripting in Lens Studio | SnapChat

Jake Anstey, Software Engineer

Scripting in Lens Studio | SnapChat

Jake Anstey, Software Engineer

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

      4:27
    • 2. Scripting Input Types

      6:50
    • 3. Scripting UI

      4:18
    • 4. Events

      6:25
    • 5. Access Component With GetComponent

      2:29
    • 6. Access Component With GetChild

      2:51
    • 7. Scripting a Practical Lens

      6:34
    • 8. The Touch Event

      3:27
    • 9. Reusing the Touch Event Script

      6:38
    • 10. Conclusion

      0:51
  • --
  • 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.

34

Students

--

Projects

About This Class

Making a lens is super easy, but there is only so much that can be done without the power of scripting. From showing and hiding objects, to moving things around on screen. This class will guide you through the basics of scripting to get you started in no time.

We cover what scripting is, why we need it, how to interact with objects in your lens, how to make your lens more interactive and so on. I know that you will find this lesson very informative, even if you have never written code before.

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, Thank you for joining the scripting tutorial for lead studio. This class is going to dive into how to script what scripting does for you and, ultimately, how to customize your project on a level you may not have known about. So in order to follow this class, you will need the latest recommended version of Lens studio, and at the time of this recording, its 2.3 point one seen here. If you don't already have led studio, open up your browser and go to lend studio dot Snapchat dot com and click the yellow download button. Well, they have to do is agree to their privacy policy. And quickly, I am not a robot button and download from here. Once you've downloaded, you'll see something similar to this where you can choose a product project that is already built for you, and you can go into and see how it's made for ideas. Or you can also customize these projects to create your own lenses. Here are some examples of what I've created with scripting and where scripting actually played a bigger rule than I would've thought in creating this lens. The 1st 1 here is one that I called Benjamin's, and I know it's a $1 bill. It's not an actual Benjamin. But the way that the bills float randomly is generated by a random number in my script, as well as how the finger tracks where the bill goes. That's all done in scripting. This next one is just a basic head binding with the skull and some particles above it to simulate smoke. But where the scripting plays a role is when you open your mouth. I rotate the bottom jaw, object a few degrees to make it look like you are opening the jaws mithi skulls mouth. And this last one was one of my first creations and does need a big overhaul because it doesn't look great, but it is ball in cup, and essentially, I simulate a bit of gravity and arch with when you throw the ball, you want to get in the cup. I also do a bit of object collision detection to check when the ball actually enters the cup properly. And like I said, this was one of my first projects, and I know I could do a lot better if I did go at this again, but ultimately this whole. This whole lens was created with scripting, and it was a big, big project. The majority of the projects we are going to be creating in this class will be blank projects from scratch. So to do that, you would click New Project. Scripting in Lens studio is Azizi is adding a new script. And then double clicking, which will open up your script editor and a hint that you'll need to know for later is if you want to go back to your three D view and clicking these objects don't work. You have to click this little seeing tab up top that will bring you back to your three D view and toggle between your script out of there as well. All scripting is done in JavaScript, which makes it super easy because you can also use any JavaScript library I believe, imported into Lens Studio to use. I have seen some projects that included a full physics library, which took their lens out of the box like it was very well done and just the idea of using a well known and well established programming language. Javascript. You can also create classes within it and do everything that you could in a browser on top of the JavaScript language being included in Land studio. They've gone as far as to include additional features where you can drag and drop objects onto your script to interchange them or make them reusable for other people to use. And there are examples. I've gone online and created scripts for people, and it's not custom tailored to them. But it is a reusable script, which is ultimately great because you can share projects. That way you can easily have a AH team collaboration with one person scripting and another person doing the project itself, where they could just drag the objects. They know what they have to do onto the script, and we will dive into that a bit further later. In the next lesson, we're going to go into what a scripting type is and how we can drag and drop objects onto our script to interact with them easily. 2. Scripting Input Types: in this lesson, we're going to go into script input types. What this will do will allow us to drag seeing objects that are already in our project into our script so that we can interact with them. It, for example. We can manipulate the position if they're enabled or not, and we can set different materials to different objects and so on. There are so many endless opportunities we can do with scripting to get started. Let's check out the basic input types. We can use Click Documentation in Lens Studio, which will bring you to their website. Once you're here, hover over reference and click a P I. They have a whole section for scripting input types, and it outlines the basic property types usable with script. These will include int boule, string float and some more complex objects like vectors materials, and the most basic one we will be interacting with is seeing object. This is the object that you will see in the actual project that will have components attached to it. In addition, component types and asset types can be used. We'll go into this a bit further now go ahead and open up a new project. Once you're in your new project, let's add a new script. Double click it open the script editor. Now in our objects, let's add a new empty object. This will add an empty seen object. We can rename this to script object. Now the inspector over here shows the thesis een objects. Ah, components, and you can add a component through add component button, or you can drag and drop components from your resources. So since we already have a script component, weaken, drag that onto the inspector for the script object. Adding an input type is as easy as typing slash slash at input, which is snapshots own notation. And then when you start typing, this is a brilliant future. When you start typing, you'll see that we can add different components. So I'm typing, see for component and then hit DOT And then you can scroll down the list here to see pretty much every single component you can use in your object. And like I was saying, you can add a basic seeing object, which could be anything really, and then add a name. So once you select the object you want to include at a name for it. So say script, object. So the way I typed this word for the name of our object, I did lower case first word and then upper case every other word. And this is called lower Camel case. Snapchat will parse this word as two different words separated by upper case letters. Make sure to hit save so that it reflects. And now, once you highlight your script object, you'll see that we have a variable that takes a scene object named script object and they're both uppercase. Like I was saying, this name here will reflect on the inspector for the name of the objects separated by upper case letters. And it will capitalize all words. So we can also say we can add another word to this input with a capital I hit, save, click away, click back and now you can see input. But if we were to say script, object input all lower case hit, save and go back, it will literally be script object and put one word. So that's why we separate with Camel case. This is a brilliant feature, in my opinion, because it will allow people that aren't familiar with scripting. It will allow them to understand what kind of object they'll need to add to the script. So we just added our very first script input type. Now, on a very basic level, we can interact with this input type. Since it's a scene object, weaken pretty much add anything we want to it. So in the script, let's just type script dot script object, because when we call script, it is accessing this up here to get your variables from the input type. So it'll always be script out and then the name not separated by space or upper case. It has to be the exact same name here, and then we can go ahead and click, enable or type enabled and say false semicolon. So we do get an error down here, and it's because we don't actually have a object attached to our script. So one thing we can do is say if script dot script object. And if we just put this in the brackets of the if statement, it will check if it has a value. If something is set to it, you could also say is not know, and that will do the exact same thing. But for ease of access, we will just take if script that seeing script, object. And then we will close this in some brackets. Click the front of script and hit tab to keep it clean, and that's it. So you hit, save no error. Now this will just check now if we actually have something set in our script. Object input. Let's add a head binding and then in our head, binding. Let's add a mesh box. So now the boxes attached to the face we could go ahead and drag the box hoops. Highlight your script object. Dragged the box into the seen object and voila, it's disabled. So if we were to turn this to true hit save, it will appear. This is a very basic interaction with a script input type. There are so many other things we can do. We can add different items, weaken spawn items, delete items, enable them, disable them, fade them all sorts of things, and so in the next lesson will go a bit further into script input types and how we can organized them. We can put in advanced mode on the u I, and so on 3. Scripting UI: in this lesson, we're going to go over scripting you. I in addition, descript ing input types scripting you. I allows whoever's using your script to view it more clearly, whether it's you or someone else. You can group different scripting input types. Add custom labels, custom widgets, which could be a color picker, a slider and so on and ultimately just makes your script way more user friendly. To get started, we can click the help icon, Click a P I. This will bring it to the A P I and then in scripting input types, click custom script ey, This is a very, very in depth article on what scripting you. Why is what widgets you can use and it can get very advanced. Let's start with a simple bull. The bull is true or false, and then we can say enabled. So now we have a bull called enabled hit save Click away, Click back and that will give us a check box in our script. We can actually set this true to script DOT enabled. Now when we click the check box, it directly interacts with our project. We can group these by saying slash slash you Why instead of at you? Why? Instead of input? And we can save widget group underscore start comma label. I hate him to disabled and then down here weaken se slash slash at you I and then we'll say widget good and no label needed. So we click away, click back And now we have an A group called Item to Disabled. Using all of these you why items will ultimately lead to cleaner scripting and a more user friendly interface for when you do want to reuse one script over and over again or allow other people to use it. Another handy feature is if you want to add an input of type int and we name it number to increase. Not that it has to do anything yet, but we have now and end number to increase. And it starts at zero, and you can go up by one. If we want to adjust that we just put in these brackets again. We say widget and it's called a We're gonna add a slider. So now we have a slider from zero in the middle to 9999 But we can also add it the men value and we'll set them into zero. And let's set the max to 100 that will give us a slider from 0 to 100. And ultimately you can edit demon and Max values as well as the step. So in the step on set it to its every time you move it, it will go up by two. Is there some basic? You? Why manipulations You can add to your script and you can read a lot more about it in the custom script ey article that I had brought up earlier. 4. Events: a crucial part of scripting is events. Events ranged from when the lens turns on when it turns off. And then there's an event that is called every time the script updates, which could be hundreds of times per second. And there is also events for when the user of your lens opens their mouth raises their eyebrows, kisses, etcetera. There are events all defined on the's snapshots, a p I, and they continuously add them. Events are great because it allows us to override when something happens. That's when an event is, and so the most important one, I believe, is the update event. This is the event that we can actually add logic to draw things on screen, move objects in three D space update text labels and so on. To add an event, go to our script, and all you have to do is typescript dot create event, and if you put in double quotes, it will give you a list of events that you can use. So turn on. Event is when the lens actually turns on, and we actually need to set this as a variable so we'll save our turn on event is equal to this. Then we'll say bar turn off event is equal to script dot create event, turn off event, and then we'll also get be update event. Wonderful. So to make these events actually do something, we're gonna need functions. Let's create a function called Turn on Let's create another function called Turn Off. And lastly, to tie these actual functions to the events we're going to type, turn on event dot find and then turn on and we can do the same with turn off event I don't find Turn off and then update event dot bind update. Now let's do something a bit practical. We're going to remove all of these, and I didn't input of component dot text and we'll name it label. We're going to add a variable count is equal to zero and then let's say count plus plus to add one to the count. And then we're going to say script dot label dot text is equal to count dot to string. Now, if you're unfamiliar with coding at all, um, don't fret. There are plenty of tutorials, especially on skill share of how to learn JavaScript and other languages that all follow the same practices with this plus plus and integers and strings and so on. And so now we need to create a text item. So we'll say screen, text, click this one ad that. And it has the text value of text, which is fine and then highlight over a script object. And then we'll drag this screen text zero. And as you can see now that the script is updating every time the script updates, it adds one to the count. And from the time the lens has started to now 300 plus So this is an example of the update method and how many times per second it gets cold. Now we could stop this and check something else out. It saves so that it stops. And actually there is something built in called Get Last Time. Get time. Sorry. So if we say, uh, script out label thought text is equal to get time, and this is a method dot to string, this is how many seconds since the lens started. It's a wonderful built in feature. Teoh get the second. Since the lens has turned on, you can go ahead and delete that and save and then one more thing to show you with the turn on and turn off. This will be handy for when you need to reset certain variables. Um, turn on. Let's just go ahead and print. And this is a built in function to print to this console down here. We're just going to say in quotes, Lens turned one. And then we're going in the turn off and say print blends turned off it saved lenses turned on. We can hit this reset preview over here and you'll see it turned off and then back on again . And every time you hit save it actually turns it off and on again. So very important to utilize these functions and events as well. This is a very basic intro into the events, and like I said, there are events for raising eyebrows and opening mouth and so on, and we will go a lot further into those in the near future. 5. Access Component With GetComponent: Let's look at another way to manipulate components with our script. We'll create a new project now what I mean by manipulating another component with our script in a different way. It's other than passing a input type of your component. So instead of dragging and dropping, our script will already expect this component and let me demonstrate. We'll add a new script with an update event, and then let's create a new head binding and in our head binding. Let's add a box. So now our boxes attached for face and it's enabled. What we can do with our script is say, Let's say, Let's get the boxes will set a variable called Box is equal to script dot get seen object, which we're getting now This scene object. When we attach the script, I'm getting out of myself, but you'll see in a second dot Get component and component. Get component, takes the component type. We're gonna say render master visual and then we'll say, if box make sure we don't get errors and then we'll say park stop enabled equals false. So all we have to do now is make sure the boxes highlighted and we'll see our inspector for the seen object. And then we just drag her script right onto the inspector, which now, let me tell you what it does is this script component gets the seen object, which then gets the component of Orender mash visual. And then, we say, enabled equals fault. And that's just another way to access our components without passing it in through a input type. And there's no wrong way. It's just this way. Might be a bit more reusable for a script than a input type. 6. Access Component With GetChild: one last way to access a component or a scene object through our script is by the method. Get child. Let's create a new project and immediately, let's at a script double click it open and again we'll just create an update event. I don't know what I'm typing here. Forgive me. Perfect. So now we have an update event. We're going to add a empty object and then dragger script right onto it. Now we'll add a box and then the boxes, actually already a child of our seen object. So in order to access this box seen object, we're going to say script, get seen object, which will get our seen object dot get child and then we're going to pass zero. It's expecting an index, and the index starts at zero and goes up so box would be index of zero and then we'll actually say we'll set. This is variable box object. So now we have the seen object keep in mind and then we'll say of our box is equal to Well , I guess we should check first if box object exists. Bar box is equal to box object dot get to component and we're doing the exact same thing is the last lesson. I just talked and we're looking for a render mash visual. And then again, we'll just check that there is a box in that scene. Object box stuff enabled. It was false and hit. Saving. Voila! Once again, now we can access the component of the box seen object. The render much visual from a parent script. And this can keep going down if we were to add se. Ah, what do we add? We had another. We had a sphere to the box. We could also keep going and say box object dot get child. So there you have it. There's three different ways to access components through our script. 7. Scripting a Practical Lens: Let's do something practical. We're gonna create a new project, and in this project, we're going to make a practical script that turns a face stretch on and off when the user opens their mouth. First things first. Let's add a face stretch. Go ahead and make this however you like. I'm gonna stretch mine the way I feel like it should be stretched. Select also that it opens evenly perfect. So once you have your face stretch, let's go ahead and add a new script. Double click your script to open it, and then we'll create a input type of face stretch. So now that we have our input type, we're going to want to disable it by default. So that means we're going to create an event for turn on. Once you have your event created in the turn on event, we can go ahead and say script. Actually, we'll check first. If script dot face stretch script dot face stretch dot enabled, he goes false. That way, it'll be off by default. We're going to create another event called Far Mouth Opened event. We'll create a function called mouth open and then we're going to find it in the mouth open event. We can go ahead and say Script dot face stretch dot enabled equals true, and we'll also add our check here. Go ahead and hit save, and then we'll create a script object, empty object and then drag our script on the inspector. It's looking for a face stretch so we can go ahead and drag her face stretch on to our script. So from here, if we change our person to someone with a mouth open, you can see it toggles on when they open their mouth. But now it stays on. So we're going to also need a new event. Four mouth closed, and we're going to just say if script the face stretch script dot face stretch dot enabled equals false go ahead and it save. And now when they close their mouth, it should turn off by default. If we want to go ahead a bit further, we can create a variable of our time to close mouth and then we'll just say is equal to zero. So when we open our mouth, we will say time to close mouth is equal to get time. It's a method plus one that way we'll say Close the mouth after one second. But to actually read this value, we're going to create one MAWR event for the update event and then creates a function and then find it. And then we'll say if script out face stretch if I get time is greater than or equal to time to close mouth script dot face stretch dot enabled schools false So now it will turn off after one second of your mouth being opened or when the mouth closes, and you can also go ahead and increase this time to say five seconds, just in case they look away or the face gets lost or the mouth closed. Event doesn't get registered, and that's it. There's a practical lens that we created in just a few minutes with a script, and hopefully you learned a bit from this to go ahead and apply this knowledge to something else. 8. The Touch Event: Let's dive into the touch event. The touch event will help you by bringing interactivity to your lens and allowing people to swipe, move their finger, tap on different objects to toggle different settings and so on. It's up to you with what you do with it. To get started. Let's create a new project. Let's add a new camera and make sure you set the camera type to Ortho graphic, and then we can go to our scene and select our or the camera hit W and just bring it over to the side, right on over. Perfect. And in our camera we're going to add a plane and then rotate this 20 which will show our plane. And now it appears right in front of our face, which is pretty much what we wanted to do. If we hit our we can resize the plane to be tap size and then w again just move it to the site. And for tutorials sake, we're gonna leave it as is. Nothing needs to be done about the color or anything. We'll just I don't need to save yet, so we'll add a script and then a new click away first at a new empty object, and this object will take. Our script will just put it there right away, and it will also, if you add a component we're going to need the touch component will choose our camera, which is actually let's rename it. So it's not confusing. We'll rename it or though camera home and then selected here hoops and then choose the master visual, which will be the one under or the camera. Perfect. So when a user touches this, it will toggle this touch component. Now in our script, double click to open, we're going to create an event. Var touch event is equal to script. Create event touch start. There's also touch moving touch end. But touch Start is all we need will create a function of our touched is equal to function. And then let's bind. And then, in our touched event, weaken Simply call print tapped. So now when we hit this, it will call tap. If we click around it, it won't and that's exactly what we want. So this is touch event. In a nutshell. Very simple and using the practices from before with using get child to get the component. You can also turn this script into a reusable script to attach to multiple different buttons along the screen. 9. Reusing the Touch Event Script: Let's expand on the touch event to where we can fully reuse it. We'll go ahead and create a new project. Now let's set up the seen object hierarchy by adding a new camera. We're actually going to change the layer and will add a new layer selected and de select. The default layer will also change the perspective to Ortho Graphic and change the name to or the camera with its selected Let's add an empty object. Add it to the seen object, and then we will also add a script dragger script to the inspector of the seen object as well. In the seen object will add a plane. Now The plane is out of sight at the moment, so we will need to rotate it. We'll need to change the layer to layer one and then we'll move it all the way to our Ortho camera and the or the camera is actually in the same spot. So hit W. Did you know if you need to move it all the way over, and that actually moved our plane as well, which is fine. We just select it and move it back into view are to resize W to move and then we'll just move it to the side. So in our script, double clicked open will create a few events. Far turn on event and var. Let's see tap event, and then we'll create the functions. And when we turn on, we're going to first get the seen object. And then we are going to create the touch component. Small referred to the seen object dot create component, and then we need the touch component, and we also need to set a few things. We will say touch component dot set camera and we're going to get the seen object. Don't get parent dot Get to component camera, which will get the or the camera. And we're also going to say touch component dot had mash visual and we need the seen object dot get child this time at zero. It's our first child. Don't get component, render mess visual, and then all we need to do is in our tapped event. We will tape print tapped. So now we have created the actual touch component for our script. All the script needs is a plane which could be positioned anywhere in the scene and weaken go ahead and add a new empty object to our camera and copy the exact same script as well as at a plane to the seen object will make sure that it's in view by clicking the scene. Drag it over. Also, make sure the layer is layer one. We will rotate it. Zero, resize it a little bit, move it to the right, and then when we select either of them well hit, save oops, they will both be tapped. And you can also in the seen object get a string will actually do this really quick. We're going to take a string and we'll name it, uh, words to say. And then we're going to set it to an empty string just so we don't get errors were going to print hopes. Sorry words to say, And then when we select our script, we can say tapped right and this one tapped left. I keep saving. Perfect. So this one script outwards to save my bed, and we'll also that was unnecessary. Tap left, tapped right. So now we can distinguish and it's fully reusable from left and right, and you can add other buttons and add different functionality. 10. Conclusion: so this will conclude the scripting introduction, and obviously there's so much more to scripting and to lend studio. But I will cover those in the next class that I produce going a bit deeper into how to manipulate three D objects in three D space, rotating them, moving them, simulating gravity and so on. It will go a lot deeper into manipulating those objects. For now, I do hope you've learned something, and I encourage you to go and create a lens. Go publish England. Share it. You'll be surprised if you have the next biggest idea. It could hit millions of views in a day. So with that, please practice your scripting, learn javascript if you don't know it yet and happy scripting.