[ 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 ]