[ Silence ] >> All right. Hello everybody. Welcome to the first CS50 walkthrough. So these will happen every week. We're going to come here and discuss the problem set, how things need to do, how to get everything done. And so these will happen every week and they'll be videotaped. The video will be posted as soon as possible, so probably tonight or tomorrow morning, so you can have a nice resource to refer back to as you're working on the problem set. So my name is Tommy and I'll be leading these all year. First, today's music, the White Panda, one of my favorite mash ups. So today we're going to be discussing scratch, which is not this, but this is courtesy of David's Facebook wall, but this. So it's a program written by some folks at MIT that allows for some drag and drop programming. So we're not going to get into actual text editing and all that fancy machine code stuff quote yet, but rather we can drag and drop puzzle pieces to create some demos like you saw in the lecture. So fundamentally scratch is always going to be operating on what are called sprites. And each sprite is just an object. So like the cat we saw in lecture that was pet, that was what's called a sprite. So if you want to have two cats you can't just have one sprite, but you'd have two sprites. So each sprite has associated with it a set of scripts. And so this is what defines their behavior. So if you want to make the cat meow or move, you can do that with this scripts tab, which we'll see in a moment. And they also have costumes. So a sprite isn't just a single image. But if you want to change what the sprite looks like or the image that represents the sprite, you can do so by just adding different costumes, a different costume. So there are a couple of ways to create sprites. You can use an existing image on your computer by clicking the little folder button or you can draw your own sprite, which of course is highly encouraged by clicking the little paint brush. Or if you're feeling lucky you can just click a random sprite, which might not be too useful, but it exists. So sprites and scratch live on what's called the stage. And so this is the little white square that you'll see in the sprite environment, the scratch environment at the top right. So this is where all the sprites will move around and your program will actually live. So just like sprites have these scripts which define what they do, stages also can have a script, which kind of can do things like set defining variables or do things that doesn't really fit in a single sprite. And so we'll take a look at that. And stage can also have a background. So if you don't want to have that white thing in the back you can have your own image. And just like you can change the costume of a sprite, you can change the background of the stage. So as we saw in the lecture, all of our scripts, or not all of them but most of them are going to start with this green flag. And so if you just put a puzzle piece onto a sprite and then click the green flag, nothing's going to happen because that puzzle piece isn't connected to anything. So what a lot of puzzle pieces are going to connect to is this when green flag clicked, so notice the top of it isn't really puzzle piecey, you can't really connect anything to it. And that's just so you remember that this is kind of the starting point for your script and the starting point for our sequence of connected puzzle pieces, and so this is something, in scratch, called an event. So an event is just something that happens. So an event could also be like a key press. So just like we have the green flag clicked little swirly thing at the top here, we also have one for other events, like of ran up arrow or a space bar pressed. We can use these events in the same way, when a puzzle piece that are connected to something that starts with this wavy thing will be executed whenever the user performs that action. So it starts off with just when space pressed. But if you want to change that you can just click the little black arrow to the right of it and you'll get a drop down with every letter and the arrow keys. So we also want to take a look at conditionals. And this is how we're going to branch off our code. So we obviously don't want our sprites to only do one thing, right? We don't want it to do the same thing pressing the left arrow and the right arrow, we want to somehow be able to respond to something like the user's score going up or the timer running out, so we're going to do this with what's called a conditional. So it's going to create kind of fork in the road, each fork being those two little inset slots for puzzle pieces, so one is going to happen if something is true and the other thing is going to happen if it's not true. And so how do we define what is actually true? We're going to use these green blocks, which you'll notice are the little shapes that are going to fit into right next to where it says if. So we can do things like check if values are equal, if one value is greater than another or we can combine these things. So we can say if the timer hasn't run out yet and the score is at least 100, then we can play music, or something. So we can do, if two things, if both things are true, if one of two things are true, or if something is not true. And so there are puzzle pieces for those three things as well. So [inaudible] is also really helpful for doing things like collision detecting or like where your mouse is, so there's puzzle pieces for like where is my mouse right now or are these two objects touching? And so you'll notice that the shape of these can also fit into our condition block. So we can say if you know the score is less than 100 and the distance to this sprite is less than 500 then do something. So in scratch we have those 8 tabs to the left and so the blue is going to contain everything sense things, like what the user is doing, what sprite's doing and kind of how to detect how things are interacting with each other. So finally we have something called variables. And so these you'll see a lot as you progress further in the class, but basically a variable is going to be a container for some value. And so that value can be a word, a letter or a number. But the most important thing about these variables is that they can change. So going back to our conditionals we can do things like compare a variable to a value or we can compare a variable to another variable. And that's when we're going to be able to start to do some dynamic things with our scratch program. So we also have loops. So a loop is very similar to a condition because we have this little if block so you can see forever if or repeat until, so very similar what's going to go inside of there is a condition. So if the timer has not run out yet then we can do something and it's going to repeat until that block is not true. So if we said repeat until there's nothing left, that's going to go until some variable reaches a point or we can say forever if, which is kind of the opposite of until. So there's similar things there. Or if we just want to have what's called an infinite loop or a loop that will never stop, we can just say forever. So we don't even have to bother specifying a condition, we can just so go forever until eventually I just want the program to end. So here's an example of what we would want to use a loop for. So we could have a little scratch script that looks like this, when green flag clicked we want to say hello three times. So does anyone see a little problem with this or how we can improve on this? >> [Inaudible] >> Yes, we can use a loop. So excellent. So which of these loops do we want to use, maybe? So how can we maybe spell this out? >> [Inaudible] >> Repeat until what? >> [Inaudible] >> Yes. So there's a bunch of different ways that we can do this. So we can just say, one we can just say repeat three times like this, but what this is essentially shorthand for is creating a variable that starts off at zero and then every time the loops goes through one what's called an iteration so once we get to that arrow there that's pointing back up we can say okay, let's add one to that variable and then the if condition we could say if we're still less than some value like three then we'll do it again. So any questions on how that works? So if you want to do something a fixed number of times you can just use this repeat and just specify a number. But if you want to do something more complicated than just three times in a row, we can use that variable approach. So just changing the value of a variable, making it go up, making it go down, and then check to see if it's above some value yet, and that way you can execute a loop a different number of times depending on what's going on in your program. So any questions so far? By the way, feel free to raise your hand and interrupt me. You don't have to wait until afterwards to ask me a question, just raise your hand whenever you have one. Yes? [ Inaudible ] >> So a few slides back we have mouse X and mouse Y, and so the scratch stage is basically a grid and so the grid has X coordinates, horizontal, and Y coordinates, which are vertical. And so as the user is interacting with your program you can actually get where their mouse pointer is on the stage. So if you wanted to do something like follow the mouse or aim a gun wherever the mouse is pointing, you'd want to use the mouse X and the mouse Y values. Other questions so far? Alrighty. So scratch also has a concept called messages. So right now if I have sprite A and sprite B there's really no way for those two to communicate, right? One sprite has it's own set of scripts and another sprite has another set of scripts. And there's no way for sprite A to say okay, I want to use something sprite B is doing. So the way to accomplish that is with using messages. So sprite A, let's say a cat, can broadcast a message. It's going to say okay, every sprite in the program, I'm going to tell you something. And other sprites can respond to that message. So as you can see with the swirly top here, it's another start of the sequence of puzzle pieces. So we can say when sprite A or any sprite sends this message I want to respond. So any questions on kind of that quick overview of scratch? Yes? >> [Inaudible] >> So is there a way to limit which sprites it broadcasts the message to? Unfortunately no. You might find yourself like oh, there should be a way to do this in scratch, but there isn't a lot of the time. And so you just kind of have to, you can prefix it with something like cat roar and just make sure other sprites don't respond to something starting with cat or some other conventions like that. Other questions? Yes? >> [Inaudible] >> Okay. So that's a good question. When is it appropriate to use variables for the sprite and when it is appropriate to use variables for the stage? So in scratch variables have something called scope. So there are two types of variables and we're going to discuss variable scope much later in the course. But there are two types of variables. One type of variable, everybody can see. So if set something like a timer, every sprite can see that timer. There's also something called a local variable that says if I'm in a sprite only this sprite can see this variable. So if I had a cat that has a variable called score and I had a bird that also has a variable also called score, we can do that because those two variables are separate. So there's two types of variable. So if you're doing something on the stage you probably want to set some type of global variable that all the sprites can look at. So I can do like in the stage I want to say okay, there's 100 seconds in the game I'm going to set that in the stage because it's not really the cat seconds, it's not really the bird seconds, it's for everybody, so that could be a global variable you could set in the stage. Other questions? Yes? >> [Inaudible] >> Can we define how big the space is? Unfortunately no. but there actually exists scratch mods if like modding scratch is your thing that allows you to do that. But unfortunately, as it stands, you can't change the size of the stage. I believe it's like 480 by 360, but that's unfortunately fixed. Other questions? Okay, so since this is a walkthrough, I thought it would be kind of good to walk you through creating a demo like we saw in lecture. So let's open up scratch. And so we're going to create a little Mario game. It's going to be nothing like the actual Mario but it's going to be using a lot of these building blocks that we just saw. So the first thing I want to do is set the background of my stage. Right now it's white and that's kind of lame, so I'm going to click down here on stage and you'll see now I have scripts, backgrounds and sounds. So no longer does that say costumes because I'm not working on a sprite, but it's a background. So I can click this tab and I can see all of the different backgrounds I have. So we just have one default background called background one and it's 480 by 360. So now I'm just going to click import. And I have a [inaudible] browser and I'm going to go into my backgrounds. So all of this will be posted on the website, by the way, including all the images and the actual source I used. So let's open this background. So there we go. So there is just a little snippet of the first Mario World. >> Whoa. [ Laughter ] >> So to do that, I clicked on the stage right here, then I clicked on the backgrounds tab up here, then clicked on import, and this is going to open up our little file browser and I had pre created, I just Googled like world 1 1 1 background and cropped it. And so this will be available to you if you want to do Mario or something. I just clicked okay and that changed the background of my stage. Yes? >> [Inaudible] >> So does it automatically adjust the size of the background? I don't think it does. I think it'll actually just show you like white or try to show the first 360 pixels of it or something. But if you want to resize it in something like Paint or [inaudible] then that's pretty simple to do. Other questions? Yes? >> [Inaudible] >> Oh sure. So can you get images off the internet and put them in here? Yes. So if you just download the image, which would be like a jpeg or a png file, so it'll be saved in your downloads folder somewhere, then when you click import you just have to navigate to that folder and double click it and then it'll be inside of your scratch project. Other questions so far? All right. So we can get ride of this white background. I'm just going to click this X right here because I don't need it anymore as this is the only background that we'll be using. So now I also probably want to change the look of this cat. So I'm going to click on where it says sprite one, and you'll notice up here in the costumes tab I actually have two costumes, so I can just delete it. So again, I'm going to click import and navigate back to where I have everything, should have picked a better place, all right, so there is one Mario. So that's Mario facing right. But when the user moves Mario around, I probably want him to face the other direction. So I actually can import a second costume that's just Mario standing there facing the other direction. So I go back into import and then I just flip the image and there's Mario standing right. Now this sprite has two costumes. By default it's just going to use the one that we click on, so I clicked on one and you'll notice that Mario is facing in the other direction again. So questions on how I change the appearance of different sprites? >> Did you also download your sprites off the internet? >> Yes. So I unfortunately can't draw so I did download these sprites off the internet. I just Googled like Mario sprites. What's that? >> [Inaudible] >> Yes. So these are just images. I believe they're all jpegs or gifs or something like that. Yes, I didn't do anything fancy to these images. I just downloaded them, resized them a little bit and then imported them into scratch. >> [Inaudible] >> So do I have a specific size of the sprites? You can see the size in scratch, so this one happens to be 26 by 32, but I really could have done any size that I wanted. So as long as it's not bigger than that 480 by 360 and it fits on the stage you can use that. Yes? >> [Inaudible] >> So if you download an image that has a white background, how do you get rid of it? So this is kind of more like an image editing PhotoShop trick. But a lot of image editors have something that takes some color, like white and can set it to transparency and then if you just save that as a png, portable networks graphic, it'll retain that transparency. So if you want to do something like select by color and then something like, along the lines of color to alpha or something like that it should be able to wipe out the white and make it transparent. Unfortunately more of an image editing thing than a scratch thing, but that's along the lines of how you'd do it. Yes? [ Inaudible ] >> Yes, so that is, yes, so that is what I did but you can do it in scratch, actually. If you go over here to, let's see, if you go over here to, yes, so if you go over here to motion you can actually do things like rotate it. Or if you go over here to looks you can do things like grow it or shrink it. But in this case, I did, I just literally downloaded Mario, opened PhotoShop, said flip vertically and then used the other one. Yes? >> [Inaudible] >> Yes. Yes so scratch also does have an image editor. It's a very rudimentary one. You'd be able to click edit and then I'd be able to flip it here as well. Not quote PhotoShop but you can do some basic things. Other questions on appearance of things? Okay. So let's make Mario move. So what block do I probably want to use? So we looked at different types of puzzle pieces. What's one type of puzzle piece that we saw that I might want to use to make Mario go right when I press the right arrow and left when I press the left arrow? >> [Inaudible] >> So yes, an event. So we're going to use motion after the event, but first we're going to use an event. And these are found in the yellow orange-ish control tab. So I'm going to click here and you'll see when space key pressed. Remember, we can change that with that little black arrow. So I'm going to drag this little guy in and so now its part of the Mario sprite because I have him selected. So before we do anything else we probably want to give Mario a better name than sprite one. So if I come up here and double click, I can type in Mario. And now this sprite I will be referring to as Mario and not sprite one. And this is going to be pretty helpful if you start using the same image for multiple sprites, how to tell them apart other than sprite 1 through 10. So we renamed him. We can come into this block. We can come down to the right arrow. And so now it says when the right arrow key is pressed. So now I want to do two things, I want to make sure that I have the right costume, so make sure that I have the Mario facing right. And I want to move him. So to change the costume we're going to go over here to looks and switch to costume. So right there, so we have Mario standing and Mario standing, I got cut off, so let's just say Mario right and Mario left, so just type in there and click enter. Let's go back over to scripts and we can say switch to costume Mario right because I pressed the right arrow key. So now we want to actually move Mario. So let's go up here to motion and let's say change X by 10. So we'll just keep that as the default, 10 being the default value, we can just keep that. And so now when I run my script, if I hit right, Mario goes right. So that's nice. So we can make him go left in the same way. Just drag this over, when the left arrow is pressed, switch to the left costume. And now what do we want to change the X by? >> [Inaudible] >> Exactly, so we're going to change the X by negative 10. So we can just double click in here and type in a minus sign and now when I click left he's going to go left and right he's going to go right. So you might say to yourself every time you run your program you have to click Mario and drag it over there and then you're ready to go. So that's not really the best user experience. We many kind of want to click green flag and then Mario's at the start and he's ready to go. So now we're going to want to star using that green flag. So now as soon as the user clicks that green flag, we want to put Mario where he needs to be. So let's go over here to control, when the green flag is clicked, now instead of changing the X by a value, which says okay, Mario is at some value. We want to change that. We want to change the value so we're going to just set it to some coordinates and unfortunately the best we can do is kind of guess and check. So here I see a negative 203, a negative 119, so let's say negative 203, negative 119. So now even if somehow Mario ends up over here, once I press the green arrow Mario's going to jump to where he needs to be. So we probably also want to make sure he's facing right, so just switch the costume, Mario right. So now our game is all set up. Any questions on what we did so far? Yes? [ Inaudible ] >> Yes. So the question is do the order of these pieces matter? And they do. So whatever piece happens first, so whatever's closest to that top piece, so the higher up pieces will be executed first. So if these were in the other order, what actually would happen is he would move and then he would face right. So just kind of holding down the arrow key you really wouldn't notice anything, but if you just pressed it once it would look kind of weird. And so it does. It does matter what order the puzzle pieces go in. some things don't matter, like if you're setting a bunch of variables and it doesn't really matter what order they're set in it doesn't. but most of the time you're going to want to make sure okay, I'm changing the costume and then I'm moving him and my puzzle pieces are in the right order. Yes? [ Inaudible ] >> So how fast do the puzzle pieces execute? So basically the next puzzle piece will not execute until the puzzle piece above it is done. So if this were not change X by 10, but change X by 100, or we can also do, which we'll see shortly, we can actually tell it how long it's going to take. We have glide one second, so if we said like glide 5 seconds, and then change the costume, you would notice. So in this case you wouldn't really, so it really depends on what you're doing that's going to define if people will notice or if order really does matter. Assume most of the time that it does because it will shortly. Other questions so far? Yes? [ Inaudible ] >> So how would I set a different direction? [ Inaudible ] >> Oh, sure, so we also have this point in direction, this point towards. So we can say turn 10 degrees and wait a 10th of a second, turn another 10 degrees, wait a 10th of a second. So that's actually a good candidate for a loop, right? We can say I want to make 180 degree turn, so 18 times I want you to turn 10 degrees and wait a 10th of a second and then basically what that would do is animate it. So we're not doing that here, but that's sort of how we're going to start thinking about things. There's not animate button so how can we make our own animate button? And so usually it's some combination of loops and variables is how we're going to be able to do that. Yes? [ Inaudible ] >> Sure, so we'll actually see that shortly, how we can use ifs in variables. So we're just not sure quite how to react to variables just yet, but we'll see that very shortly. Yes? [ Inaudible ] >> Oh, so that just might be another scratch limitation. What can be helpful is duplicating. So if you want to have like, so how do we kind of make editing faster? Unfortunately because scratch is so simple there aren't a lot of cool controls like dragging things among sprites, but you'll find the duplicate really helpful if you're creating a lot of similar sprites. But again, it's just one of those scratch is trying to be simple and so there aren't like those super fancy editing things quite yet. [ Inaudible ] >> Okay. So if you wanted to do that we could just duplicate and then you could actually just drag it, oh, yes you can, so you can just drag it there. And that's how to move from a sprite to another sprite or a sprite to a stage. All right. So now that Mario can move left and right, let's make Mario jump. And so this is going to be a little bit more complicated, but we're going to start looking at that glide instead of the change. So we're going to start off with the same thing we used before, this something key pressed, and we're going to use the up arrow. And so now if we go over here to glide, you'll notice that we have glide to a specific X and Y coordinate. So we can't just glide and say change it by negative 10 and then it'll basically animate for you. Instead, we can only say go to a certain position. But when we jump, we don't want to be jumping always at some fixed X value. We want to jump starting from where Mario actually is, right? So we need to start using that sensing tab. And we do want to use this glide block, so let's put this glide block here. And now let's go to sensing. So now can anyone here see any blocks that we might want to use to kind of increment or decrement how high he is, so changing it rather than just setting it? So make it, change it to something that's relative to where Mario is. >> [Inaudible] >> Yes. So we have this X position of Mario. And so what I thought wasn't immediately obvious is that we can actually take this and drag it in here. So now we want to glide to the X position of Mario. Now do we just want to keep that there? Is there anything else we need to do to that? No. we don't need to change it. It makes sense. If we jump upward then he's not moving to the left or to the right. So that makes sense. But now we want him to jump up some fixed height. So we can't just say drag the Y position of Mario into Y we need to do something. Question before we do that? >> [Inaudible] >> So will this halt any forward progress that he's making when he jumps? Yes. Because we're saying jump to exactly where you are, but move the Y upwards. So you could so some fancy like arc thing with sine's and cosines or something, I don't know, I'm not good at math. But since this is just P-set zero we're just going to halt this forward progress. So not particularly helpful for an actual Mario game. Okay, so we want to modify this Y value, so we can just say glide to the X position and Y position or he's just going to sit there. So now we need to go over to this green operator's tab. And what we're going to say is we need to actually click it, jump to some value plus some other value. So in this case we want to do, what's on the left here? >> [Inaudible] >> Yes. Y position of Mario. So this drags in there and we have puzzle pieces in puzzle pieces in puzzle pieces and we can say the Y position and then plus, I don't know, 50. Hopefully that's not too high. So let's pick a value like .12, totally not predetermined. And so after he glides up there we want him to glide back down to complete the jump or go back to where he was before. So we'll just do the same thing. So we'll glide 0.12 to the X position of Mario and now what do we want to have on this right side? Which of these green blocks do we want to use? So we just added 50. What do we need to do for him to fall back down? >> [Inaudible] >> Right. Exactly. So we're going to drag the minus guy and we can say the Y position of Mario minus, okay, minus 50. All right. So let's run our script. Now we click up, he's going to jump. So does anyone see a potential how we can improve this? It's a little design problem here. >> [Inaudible] >> Yes. So we could improve the physics of it, that's true. Unfortunately I'm not good at physics either. So what else? Does anyone see like a little redundancy here? >> [Inaudible] >> Exactly. So we can store, not the XY position, but how much we're jumping. So let's say I'm a Nintendo developer and I just finished this. It's awesome. We're ready to ship it. And someone says to me well, we'd actually like Mario to jump a little higher, so I actually have to change both of these 50s to 60s. Not a big deal here. But let's say that I had 10 million sprites and I said 50 in all of those 10 million sprites and now my boss comes over to me and says no, they need to be a little bit higher. I'd have to go in and change each of those 10 million values, so that's not the best idea. So what we can do here is use a variable. So let's come over here to the variables tab. And you'll notice that there's nothing. So we can make a new variable. And we can call it jump height and then you'll notice here that I have these two options, for all sprites and for this sprite only. So this is what I was saying before. So if you want to create a variable that every sprite can see I'm going to want to say for all sprites. Or if I want to say for this sprite only I'm going to click this. In this case, Mario's going to be jump, only Mario will be jumping so only Mario can see this variable called jump height. So if you don't believe me, if I come over here and click the stage, you'll notice there are no variables because the stage cannot see jump height, only Mario can see jump height. So after we've created this variable. Yes? >> [Inaudible] >> So Mario left and Mario right are the same sprite, so does it affect both of them? It does because there's only one sprite, he just has two different costumes or images that would be displayed. So we're just operating on this one Mario, but he has two different appearances. So let's say that we want to set the jump height value. So we can say set jump height to and we use 50, so we can set jump height to 50. so now we can just drag jump height in where it says 50, and so now changing how high Mario jumps is just a single change of a value, rather than what could be 10's of millions of changes to a value. So any question on how we're using that variable there? Yes? [ Inaudible ] >> No, so what I clicked on was make a variable and then that gave me a pop up, I just said jump height and then it created this over here. >> [Inaudible] >> Oh, so in set jump height to, I'd have 50 here. And so this says whenever the program starts I want to make sure that jump height is at the correct value. So if later Mario wants to get like a super mushroom where he can jump higher, I can potentially change that value. But when the program starts we want to make sure that he can just jump 50. Okay. So now Mario can jump. However we probably want to make Mario do something other than jump. So let's add another sprite. So I'm going to click on this folder and it's going to open up my images again. And if I click on block, I click okay, you'll notice that I just created another sprite and it's costume is the image that I clicked on. So this is just that little coin block, yes, the coin block, and so what I want to do is first change the sprite one to say block, so that we have a better name to work with. Then come over here to scripts, where we're ultimately going to do is say that when Mario jumps into this coin block we want a coin to appear. So we somehow need to detect if Mario has jumped into the coin block. So to do that we're going to say when the green flag is clicked, and we're going to use a forever loop, so what this says it that the entire time that the game is playing I'm going to be doing whatever is inside of this forever puzzle piece. So what we can say is if what? We want to detect if Mario is touching the block, so which of these blocks can we use? [ Inaudible ] >> Exactly. So we can use touching. We could also hypothetically say if distance to Mario is zero, or something like that, but that's just the same as if it's touching. In this drop down here we have Mario. We also could say built in are the mouse pointers, so wherever the user's mouse pointer is, that's how we did the [inaudible] cat in lecture or the edge, so if it's at the edge of the stage and you want to bounce off or something, that's built in there, too. But in this case we just want Mario. And so now let's just make sure this worked. We can just say well, let's say hello for two seconds. So here's my block over here. Let's just move it over to where that block is. And run our program so we can come over here, jump and there we go. We just hit our coin block. So you'll notice that up here there's this awkward Mario jump height. So remember that's what we called our jump height variable and we don't want that sitting up there because that's kind of odd. So if we go back into Mario, click over here to variables, you'll see a little checkmark next to jump height. And as soon as I click that, it's gone. So there we go. So now, yes? >> [Inaudible] >> What then does the hide variable command do? >> Yes. >> So that probably, oh, so that, you can dynamically do it. I could say when green flag clicked, hide the variable, and then it wouldn't be there anymore. Or I could, since I know I never want it there, I could just check that checkbox. Yes? [ Inaudible ] >> Yes. So this, so how do we copy and paste chunks between two scripts? So what we can do is let's say we want to duplicate this block, so I can right click it or double tap it on a Mac and I can click duplicate. So here it is again. So now let's put this back here. Now let's say that I wanted to somehow give this to Mario for some reason, I can just come over here to Mario, drop it down and here it is. So I just copy that script from block to Mario. So we can get rid of that. So to get rid of blocks, by the way, just drag them over to the left side and let go and they're gone. Having scripts not attached to anything like this will actually not affect your program or what's going on. But it's probably not that good of an idea to have them floating around. All right, so you'll notice here that we have several blocks. So let's just duplicate the single block. So duplicate, duplicate. So now let's move one over to this question mark and one over this question mark. So now you can see where having names other than sprite one and sprite two are pretty helpful because just looking at this I don't really know which block is which. So this is the left block, so let's just rename him to left block. This is the middle, this is the middle block and this is the right, so this is the right block. So now because I've duplicated them, they have the same scripts. So if I touch any one of these, hello, hello, hello. So you notice that these are all independent of each other. I can have two hellos up on the screen at once because I have multiple different sprites. So where Mario is just a single sprite with different costumes, this is actually two different sprites that can act independently of each other. Yes? [ Inaudible ] >> So is there a way to have multiple instances of the same sprite on the stage? That is thinking exactly like a computer scientist, but no, in scratch, unfortunately there is not. When we do actual programming, then that is exactly the way to be thinking about things. Can we reuse code and can we avoid having to copy and paste all over the place? Unfortunately in sprite we can't just because the script is kind of a container, I'm sorry, the sprite is a container for all the scripts. But this is the only week in which that will be the way things are. Other questions so far? Yes? [ Inaudible ] >> So I drag the coin boxes into place, will they stay there? Yes. So they're going to stay there until I say otherwise. In the case of Mario we need to reset his position because he's going to move around. But these blocks are never going to actually move, in this program anyway, so we can just leave them there. Okay, so now, one more question? [ Inaudible ] >> Talk about downloading? >> [Inaudible] >> Oh, so how I would like download Mario into my program? [ Inaudible ] >> Oh, okay. So yes, so if we just come over here to scratch.mit.edu we can just click on download scratch right here. [Inaudible] you can fill out the form. On windows this is going to download an installer so you can just double click it and click next until it's done. In Mac it's going to download what's called a DMG so you're just going to double click that and it's going to open up a little thing with the scratch logo and then your applications folder and you can just drag the little scratch pad into your applications folder and so then it'll be in applications and you can see scratch. So other logistical questions like that? Yes? [ Inaudible ] >> Yes, so instead of. >> [Inaudible] >> Yes, so instead of dragging the coin box, could I set it's location? Yes, exactly, I could have. I didn't, but I could certainly say set X to negative 55, negative 46 and that would be just as good a way to do this. Yes. Yes? [ Inaudible ] >> Oh, so sure, so you'll hear more about the submission instructions very shortly, but you're basically just going to go to a website and upload this. Yes. So nothing too complicated. Other questions? All right. So as Mario is jumping around and hitting all these blocks, maybe you want to keep track of a score. So what do you think we're going to need to use in order to keep track of what the player's score is? >> [Inaudible] >> A variable, exactly. So let's make a new variable. And so this time we want it to be available to all sprites because the score doesn't really pertain to just a single block or to Mario, so let's just call the variable score for all sprites. And now you'll notice that on block right we have score and on Mario we have both score and jump height. You can see this little divider line here and that says that these up here are for everyone and these down here are for just me. So when we start off we probably just want to set the score to zero and when we hit all of these blocks we just want to change the score by one. So we can drop that into all three of them. Change score by one. And so now as I run around you'll see that my score is going up. So questions on how we can add score or any other variable questions? All right yes? [ Inaudible ] >> So why do we need that green flag? So basically if there are puzzle pieces that aren't connected to like a wavy thing, those will just never be executed. So everything in scratch is triggered by an event. So the event is actually what starts everything connected to that puzzle piece from executing. So if it's not connected to any event, it's just never going to fire. Other questions so far? Yes? [ Inaudible ] >> So is there a way to cap it to just not hit the same block every time? So we could do something like each block have a variable that's like number of hits left. You can start that off at say 5. Every time you hit that block then maybe the score could go down one and if there are no hits left then you can't hit that block anymore. So that's one way of doing it. We could also say you know, Mario has like a maximum score of 10, so if he hits 10 blocks then he's hit the high score and he wins, or something like that. So yes, there's plenty of different ways you could implement something like that. The variables are going to come in really, really handy for things like how many, can I have a maximum number of times I can do this or how many times should I execute this loop or something like that. Other questions? All right. So one last thing. Let me just open up the final project instead of doing this by hand because it's kind of long. So I'm just opening a scratch project that I've already created beforehand. And so this is kind of the final version of Mario. And so let's just go over a few other things. So you'll notice when I play this version I have a timer up here in the top left and the timer is counting down and once the timer finishes, 3, 2, 1, so the game is over. And now even though I'm pressing the left arrow and the right arrow, you can see them lighting up over here, Mario is not moving. So let's take a look at how we would do something like that. So we're going to want to have a timer variable, of course. So to do that I just said make a variable, call it timer, and over here we're setting timer to some random number. So in the case you just saw it was 8, if I click it again, it's 1, good game. So now what I've done is I have this forever loop and I'm saying if the timer is zero, so that means the game has run out, I'm setting this other variable called can move to zero, which originally is set to one. So this variable is effectively a flag. If the flag is raised I can move around, but as soon as time runs out I'm kind of lowering the flag and saying you can't move anymore. So you'll notice in each of my arrow things I've said if can move is one, which means the same thing as if the timer is greater than zero then I move around. So if can move is zero, then I'm not going to move around. So that's why once Mario is finished he's not going to move around anymore. And we also have these little coins that pop up when you hit the blocks. So to do that, I've created another sprite called coin. And in here this is just why I didn't want to do it [inaudible] a little complicated, but we're using messages now. So we don't want the coin to always be there. So as soon as the green flag is clicked the coin is going to hide. So I could have had, like with my blocks, a left coin, a middle coin and a right coin, but in this case we're only going to have one coin on the screen at a time. So I could just have one sprite and set in it's position depending on which block was hit. So how do I know which block was hit? Well in each of these block sprites I'm now broadcasting a message and I said coin appear left. So I'm telling the coin I want you to appear over the left block. If I click this down arrow you can see all the other messages I've created, in this case one for each block. Now if I click new I can create a new message, which is what I did when I typed in coin appear left, middle and right, each of these times. So still [inaudible] touching Mario, we're going to broadcast this message. Now you'll notice that coin is going to respond to each of these messages. So now we're just doing something very similar to jumping. We're going to do is we're going to change the score by one, so the score goes up and now notice we're still hidden, right, because I said hide when the green flag is clicked. So I'm still hidden and then I changed the position of the coin. So I'm saying go to the X position of the left block. So that's going to put it right over the middle of the left block. And then the Y position is a little bit higher than the block so that it doesn't appear over the block and then animate up. And then after I set the position I'm going to show it. So that means the coin isn't going to be kind of flying around weirdly but it's going to be there before it shows. So then we're getting a similar thing to jumping. We're just going to glide up and then we're going to hide it because the coin is done animating. So that gives the final effect. The coin appearing up and then hiding. So you notice I can only have one at a time even though I'm kind of touching both of these blocks right here and that's because I only have one coin sprite. So any final questions? Yes? [ Inaudible ] >> So do we have to write any code to decrease the timer? Yes. I probably should have showed you that. So yes, so if the timer is zero that means I'm done. I don't want to decrease the timer anymore. But else if the timer is not zero then I want to wait a second and then subtract one from the timer. So if I didn't have this wait one second the game would just be over immediately. It would just subtract one a bunch of times really fast and it would be game over. So instead we want to say okay, wait a second and then decrease it so we have this countdown effect. So yes, that was a good question and then I totally forgot about that. Other questions? Yes? >> [Inaudible] >> Is there an undo key? That's a good question. Well there's undelete, that's cool. Like if I disconnect this and I do edit, nope, command z, nope. You can undelete, but you can't undo anything else. But deletes the important one anyway. Yes? [ Inaudible ] >> Yes. So messages are different than variables. [ Inaudible ] >> So if I wanted to create a new message this time I don't have to come over here and say make a new message or something. Instead when I drag in this broadcast block I can come down here to new and it's going to ask me what I want my message to be called. And I can say whatever, and so now that's in my list of all my messages and now if I'm another sprite, I want to respond to it, I can say control and then when I receive and then here's the message I just created. So as soon as like nothing is using some message then it's going to disappear from the list. So if I get rid of this and then go back over to here and say broadcast coin appear left, now that other message I created isn't being used here so in my when I receive it's just gone. So scratch is just smart enough to say it's not being used anymore, let's just get rid of it. Yes? [ Inaudible ] >> Sure. So all the timer logic is occurring inside of Mario. So this could also be something that's going to occur in the stage because it doesn't really pertain to anything. In this case it's in Mario. So the first thing I do is click make a variable. So over here, make a variable, I'm going to say timer and then it's going to appear hear. So the checkbox is there and you'll notice that it doesn't actually say timer. That if I just click it, I lied. If I click, there we go, so if I double click it I can actually change what it says. So if I click normal read out, it's going to say that. In this case I clicked large read out so I got rid of the text where the text is there on the score. So that's all I did to create that little block on the top left. So now all the timer logic is occurring right here. So first I need to start the timer off at some value, so I'm just starting it off in a random value from one to 10 on just because I like the random block. And now I'm entering into a forever loop. So what's inside of this piece is going to occur forever as long as the user is playing the game. So first you want to check the value of the timer. If the timer is done, we don't want to keep decreasing it because the it will be negative. And when the timer is done we also want to tell Mario you can't move around anymore and just say game over. So if the timer is not equal to zero and we know that the timer can never be negative, no it can be negative, that's okay, so if the timer is not zero, in this case it's some value that means there's time remaining in a game, then we're going to wait a second because if we don't wait the timer is just going to decrease really fast because we're not telling the computer that we want to decrease it. So then we want to change the timer by one so every one second this is going to decrease the timer by one. So just because we have a forever loop here that doesn't mean that neither of these can execute. Because these have different starting points they can execute independently of each other, right? Normally if I had, if I could put a puzzle piece down here it would never be reachable because this is never going to stop. But because these are connected to different starting pieces, just because this is forever that doesn't mean that this won't work anymore. So I can also have multiple when green flag clicks in case you ever run into that forever problem. So is that clear how that timer works? >> [Inaudible] >> So this can move is just saying effectively is there time left in the game? So if there is time left in the game it's the value one. So one often means true. So yes, I can move around. And only if I can move around am I going to actually respond to jumping, moving left and moving right. So when the game is over we're going to say can't move anymore, it's zero, so that means when I'm back up here, this will never execute. Does that make sense? >> [Inaudible] >> And how do I get the timer to run? >> [Inaudible] >> So right down here I'm actually saying change timer by negative one every one second, effectively. So forever, so when the game starts, we're going to say set everything, set Mario, and we're going to enter this forever loop. So timer is not zero definitely, because I'm taking a value from one to 10. So if timer is zero, it's not, so we're going to jump down here to else. So this block is going to wait a second. After it waits a second it's going to decrement the timer. So if it was at 10, now it's at 9. Now we're going to go back up here to forever. If it's zero, it's not, come down here, okay, wait a second, now it's 8, until timer is now zero, we've decremented it from one to zero. It's not a zero, oh, it is, so we're going to set this to zero and we're going to say game over. Are there any last, yes? [ Inaudible ] >> So can we also change the appearance of the screen just as we did to the sprites? We, do, yes so inside of stage over in the looks tab we have switch to background. You notice that we named these different backgrounds. And so if we just use that switch to background block we can do that. So if we want to change the stage based on something Mario did, how would we tell the stage to change it's background? [ Inaudible ] >> Yes. The stage would say switch to costume, but how does the stage know to do that? Yes? >> [Inaudible] >> Exactly, so you'd broadcast a message. So from Mario I'm going to broadcast stage white and in stage I can say when I receive stage white, switch to background one or whatever you called it. Yes? >> [Inaudible] >> Oh, so how do I have it so Mario doesn't walk through the pipe [inaudible]? And so how would you? So we could say a couple of things. I could say make this a sprite just like we did with the blocks, and I could say if I'm touching the pipe then don't go right anymore. Or I can, in Mario say if my X coordinate is greater than, I don't know, like 194, then don't go forward anymore. But basically it's going to boil down to using this sensing tab. You could say touching. You could even get really fancy and say if you're touching the green color then don't touch it, then don't move forward anymore. But it's basically going to boil down to this sensing. Where is Mario? Where is the pipe? Are they in a place where they shouldn't be? [ Inaudible ] >> So is the same thing true for the bottom blocks? In this case we just never allow his Y coordinate to get lower because up is going to go up and down a fixed amount and then left and right isn't going to affect where he is vertically, but you could do the same thing, yes. You could say well if Mario's Y is lower than something then just stop moving or something like that. But yes, the same principle, you want to sense where objects are and if two things are touching that shouldn't be, just kind of adjust them where they're not. Yes? [ Inaudible ] >> Yes, is there a way to make Mario jump in an arc? There is. And basically you could do that, you basically need to modify how we're doing this. You probably need to use a loop, but you wouldn't want to say go to the X position, you'd want to say go to some x position plus some variable and then modify that variable based on where he is in the jump. Yes? >> [Inaudible] >> So how did I prevent the timer from going down super fast? I just said wait one second. So that'll just make sure that the timer doesn't go down anymore. Last questions. We're kind of running out of time. All right. So feel free to come talk to me afterwards. I'll be here. Also the CS50 help boards, feel free to post questions there and get a really fast response time. Remember these happen every week at this time in this room for every problem set. So good luck on scratch. [ Applause ]