Transcripts
1. Trailer: In this class,
you'll create Pong, a retro classic, or one of the first video games ever made. If you've completed flow 002, you'll have the
basic understanding needed for this challenge. We'll look at the Pong
gameplay, break down each part, analyze it, and then reconstruct each element
within flow lab. There's no need to
download anything, as everything is done
for your browser. By the end, you'll have your
very own retro pong game, which you can enhance with
new game mechanics learned in my other classes to bring
it into the modern era.
2. Start Screen: Welcome to the class. This is
a let's make a game series. This time we're going to be
making Pong, a retro classic. So I think we should
probably start and actually seeing
what Pong looks like, so we can analyze it, and then we can start
building things up. So if I put this on here. I've just taken something
from YouTube just to see what is the
classic 1972 pong game. Okay? We're going to be adding a few little changes and stuff, but essentially it's
going to be this game. So I just want you to
listen to the sounds. So the sounds make like they do little changes when you
hit the paddle or the edge, the edge, sorry,
and they also make a horrible sound when the
other person makes a goal. This is because
obviously, there was limitations back in that day. We flow lab, which we're
going to be using. There's a lot more
options that we can do. So, as you can see, you've got the scores
on the left and right, you've got something
down the middle, and then you've got the
paddles, and it's mostly black. Okay? So we're going to
recreate those bits. So let's start doing
little bits and start making every putting
everything together. This isn't a very long class, so you should be able to
make things relatively easy. We're going to be
clicking on New Game. Now, just remember,
this is a paid account. I've got the teacher version, but you can buy the
student version from me, and this will give you
an unlimited number, or you can buy an India
account on Flow lab. But if I'm completely honest, this game is so simple, you don't really need to do either. You can you can just have
a free account, okay? So I want you to
click on New Game. And then I want you to
go to Empty project. And then we're going to
change some settings, because we need to change
some settings to make it a little bit easier
for our paddles. We're going to do width
31. Let's just do that. We go down to settings, change the width to one, 31, and then we're going
to make the height 20. Height 20. Now, I didn't say this at
the start, but I should do. This is the number 2.1. You should really
complete class up to class flow 002 before you
can start doing this class. Just because we're going
to be using some nodes, I'm not going to
explain too much about because I would have explained them in those different classes. We're just going
to be adding and making these games
quite quickly. Well, we've done our layout. Obviously, we can
change our settings and we can change this two Pong. For now, let's keep everything
gravity and drag the same. Oh, actually, no, let's not
do that because remember, if I just go back to
the little game here, if I have to keep
on doing this on my streaming fin. Quite floaty. And if I do gravity. Now, there's many different ways when you've looked
to my classes, there's many different
ways that you can do something in flow lab, okay? So we could make the ball when we
eventually make the ball. We can make it so that it isn't affected gravity, which is fine. And this is this is where I kind of encourage
all my students, and obviously, I do
it to myself as well to just experiment and see
what the best way forward is. But for now, let's actually
change that to zero. So we just want to kind of like this float floaty thing, okay? So let's do that.
Let's go back there. And then let Let's change to drag right down to zero and
the gravity down to zero. We've got that. Then I want you to change the
background to black. We're going to change
that to there, go to there. We've
got black there. Then we're going
to call this one. Let's just call this
start again. Okay. So we're just going to be making the start like the
menu sort of thing. I know Pong doesn't
really have actually. I think when you first start
Pong, the very classic one, I know there's obviously many different games like that now, but they didn't have
a menu by then. You basically turned it on and you started playing the game. But we're going to do
a menu just because I think it allows us to add some more options right at the end or what I'd like you
to add at right at the end. And also, if you
want to experiment and add some little things, So, I want you to
create a sprite, and let's call this title. Like I said, hopefully, you are going to be kind
of whizzing through most of this because you kind
of know what you're doing, and you've done this
before in at least in up to class two,
flow zero, zero, two. I'm going to make now
I've done what is it? I've done three to seven, Hype free Whip seven. I want you to you can make that any sort
of size you want, but let's just say
that's fine for me. Then I'm going to click on.
We go to click on here? I'm going to go to insert text. I'm going to make this white. Now Pong is very much of
black and white game, so I probably recommend that we keep to
that sort of theme. We're just going to type
this pong, all capitals. That's fine. If you want that's like size and everything,
which is okay. Let's make that a lot bigger. But I don't like that font, Let's change a different font and let's see what else is here. This one, that's nice,
but way too big. Yeah, it like that. That's quite cool.
Let's change that. Yeah, and I'm going
to have to probably change the height,
which is fine. Again, I just did that just to we're going to
be experimenting. The heights, I could probably reduce down to one.
Yeah, there you go. And then I'm just going to use my little hand here,
move that one. Now use the little cross
hand here to position this. There you go. So I've got pong
there and stuff like that. If you want to make it bigger, it's entirely up to you,
let's just have that. I have that in the middle somewhere here.
So I've got that. Then I want you to create
a new one, a new sprite, and we're going to have
this as one player. One player. Again, I'm just going
to delete that one. I'm going to adjust the
height to about two. Let's see what that looks like, and then I can change
it afterwards. This is one player. Then now when you do this one, I want you to make
a bit of a gap between the left and right. When I did Pong, there was
not so much of a gap here. I want you to a
bit more of a gap. Not a lot. At that
one is about fine. Again, I'm quite
happy for you to make some artistic choices. We're going to make
this relatively. I'm not going to take
too much time on this because let's focus more
on the act mechanics. Yeah, I think that's fine
for a text, I guess. I'm not really What's that? That is, look, I don't
like that at all. D D D. Digital. Yeah, digital looks quite
quite nice, like that. S a bit of a gap like
that and then put it near to the top like that, then I'm probably going
to adjust the height. Again, Yeah, that's fine. And then I'm just going
to make this centered. Now that's done, and I'm I'm going to make an animation now, but only one frame animation. I'm going to click
on animation editor. I'm going to click on new. We've done this before
and do one called hover. Then I'm just going to do two little squares on either side, just like the
paddles of the game. That's fine. It's a bit too big. L et's fill these in
first and then adjust them. White and white. That one's a bit to large. Let's get rid of
that one. Like that. You've got you've
got it like that, and then you've got a hover one. So have player there, I'm going to put player down
here or something like that. You've got Pong, and then I'm just going to go
to its behaviors. And then very simply, we're just going to
have mouse click. And then we're going
to have animation. Animation. Remember,
the first animation is going to be there, so
it's going to be fine. We're going to have stay
on last frame when done, and then out just goes stop. That should work. Why
is that not working? L et's have a look. You've
got hover, that's fine. Go into your behaviors. Let's Let's do the ho one first. That works, that's fine. And then out goes to stop.
Why is that not working? I know what's high. So
this is another thing. So if you see how I've
hovered over here, It is actually working, but it's taking all the
little gaps in the middle. So all we have to do
is basically go to its bright and fill all
this like this. So basically basically it
counts as a as a whole thing. Now, do you see how it's a
whole thing now when I do it? If I move it across,
S how it works. Works now. There is a slight change in color
there, which I don't like. I'd like to make that black. Now, why can't I make
that completely back? Maybe you have to
sometimes change. If I click on that, click on
black there. There you go. Now, if I do this. Perfect.
Then that's a perfect one. If I click on play,
there you go. See? You've got Pong
there, is quite nice. And then if you want to you can have it play some music as well if
you really want to. O would just go play. Let's move that over
there, so it's a little bit easier to understand. And then just a
simple like I said, it's really entirely up to you. Yeah, that's nice. Then
maybe you can put that down to 70 60. See what
that looks like. Then if you have more options, it will do different ones, obviously, you can go
down. But that's fine. Then what we want to do is, we're just going to have it
set up for the next video, but we're going to
go to game level, and we're going to
go to new level, and we're going to go
to one player game. We've got one player game, and we want to do is we
want to have a progression. We've already got
the mouse click, very simple, game flow. Let's put that up there down, goes to go player game, one player one player game, and then we load
that up and then that's just going to
be a black color. Let's have a look at
that, obviously, very, very simple, and then
it loads up that level.
3. Layout Design: C. A, Let's start making
the actual level itself or the actual play area. So there's actually quite a lot that you can't actually
see within the game, and you have to
sort of think what limitations do I need to put in my game to make it
act like the pon game, ok? So obviously, what
we can see is, we can see the line down
the middle and we can see the scores and we can see the paddles, and
you've got all of that. But what you're not seeing is probably something on the top and bottom to bounce the ball, so outside of the play area, and when the ball hits
it, it disappears. So it disappears and then it restarts from the middle again. So there's probably
something like a destroyer, so it's doing lots of
different triggers. So we need to create all
of that within flow lab. Let's do that. Let's actually
recreate everything. Let's do the edges first. If we just do here, we
just call this wall. Now, this doesn't
need to be seen by like the player,
so it's fine. But we want to
have a few things. We want to have bounce down, and we want to have Actually, we want that and
that's pretty good. Let's do all of that
and then we just want to clone all of that across there like
so and all of that. Like, so like that. So we've got that.
So our ball now, because if we didn't have that, our ball would basically go
off into the infinite void, while we can actually
see just a black screen, the actual game kind of thinks that there's
still something there. We also need something
on the left and right left and right hand side. Let's do this one, and we're going to call this
NPC score because obviously, if the ball goes here, it's going to score for the NPC, and we're going to do
one for called player. We're going to just change this to Let's make this sort of red because if we want it, it's not good that
the NPC is scored. We do that as red, and then we'll have this
one as player score. Play a score, and
we'll make this one green just because it's easy. We're going to be creating
all the sprites ourselves. They're not very
difficult anyway, so it doesn't really matter. L for argument's sake,
just because we can. Let's just change this. You don't need to do
this because obviously, we're not going to have a
look, but then there you go. We've got all of this. We've got the two walls up and down. Maybe we can just make sure that nothing
goes a bit funny. And then we've got the
red and green squares. Obviously, when you hit
play, nothing shows on that. Now, we did this 31, half of 30 is 15. So basically, we want to
have it basically 15 across. So we want to have something in the middle there. We just
want to have a line. We want to go to layers,
and we want to go to the background because we don't really want to
have anything there. Then we want to count
all the way up to 15, about there that's 15,
and then there should be. Let's create there. We're just going to
call this white line. Lo as you imagine,
we're going to make this white. Like that. We make sure that's
one, two, sorry, it needs to be here because
this one counts as that's 14, that's 15, and then one, two, three, five, six, 78. 121014, 15, 16, so we
need that one like that. Two, six, seven,
eight, ten, 12, 15. Six, seven, eight, nine, ten, 12 13 and 14 15. Perfect. So we've got that in the
middle. Okay. And then we just want to clone
that down the middle. So we've got that. One have you've done cloning.
We can hit play. Obviously, we've got a line. Slightly off white. I think
that's just because of the. So I don't know if it's
actually for a paid version, but certainly for
sorry, a free version. But definitely for
the paid version, you have these different colors. I think you might
do. I don't imagine why that would be
under a paid feature. But, it is fine. So I've just done a white there. Okay, so we've got all
that, which is good, we want to go back
into game weld. And then for the final
thing for this class, all we're going to do
is we're just going to create a paddle. So we're going to call
this player paddle and then we're going
to have one across here called NPC, NPC paddle. Then all we do is we
go to edit sprite. And then we're
going to make that say four high. Let's
delete that one. We want to have about roughly half and put it
on to the right hand side, s off this sprite here. It's moved across,
not in the middle, so we want to have it there.
We've got that there. What we can do is we can have the same for this MPC paddle. You go to brows because
it's already created, it will kind of do all for you. So you've kind of got there. We might have to change
all the Ds in a bit, but for now, we're
absolutely fine. When we hit play, there you
go. We've already started. I mean, if you were
to show someone that and seeing started
to move around, people will say, A, that's Pong. But yeah, pretty simple, and then we'll go on
to the next video.
4. Player Paddle: Okay, so we've got our
player area set up. I think we should probably
change a few little things before we start analyzing
the Pong game again. So let's go to edit on your
player paddle just for now. We'll do it the same on the NPC one because it's
going to be the same. So we want the
bounce to be 100%. I think that's really
important because basically we want the ball to bounce on it. We don't want it to act
or weird or whatever. Also, at the same time, we want it not to
have any friction. So as you can imagine, just like a friction on
a car down the road. If you kind of let it roll, it will eventually stop, even though it's quite heavy, this to friction off
like the road surface, the wheels and everything. Whereas, if in space, obviously, things will go well
basically on forever. We want bounce up and
then friction zero, and we're going to do the
same for the NPC one. So bounce up friction zero. We want it solid
because obviously we want the ball
to bounce around. Also for the wall,
we need this to be friction zero because we don't want to
do that as well. We're going to do that
and see how that works around. Cool. We've done that. Now, if I quickly look
at the thing again, Uh, that's the punk game. Now, let's look at
the player paddle. So this is going to
be a player paddle. All it does is it
goes up and down. However, you can't move
it left and right, okay? So the only thing that you
can do is up and down. Okay? So we want to make sure
that we just recreate that. Okay? So we can do that very, very easily in flow p
by doing the following. So we go to edit,
go to behaviors, and we just basically want
to go to mouse Moth. Sorry. Do we want to do mouse smooth? Yes, we do want to do mousemove. Because what we're going to
do is you want its x and y. Well, we only want
its y position. So always getting
your mouse cursor. And then basically, all we
want to do is we want to go to or is it
properties position? And then we want to set y to y. Now, as you can see, as I move my cursor up and down, it will just move
the y position. Now, it won't move it left and right, if I
move it left and right, it will only do y, so I can move it up and down.
That's what we really want. It's a very very simple
one for the player paddle. Next, what we're going to be doing is looking at the ball and then obviously looking
at the NPC paddle.
5. Ball movement: C. Okay, so we've
got our paddle, and we've got our
basically player well, player paddle,
being able to move. But let's actually put the well, the main aim of the
show, the ball. So let's create somewhere
in this blank area. Call this one ball. And then we're going to physics, we're going to make
this bout 100% and it's V friction zero. We're going to do movable, and we're also going to turn
off effective by gravity, even though what
gravity is zero, and we're going to turn our
density right round down, and we're going to make
this a square as well. So Ao 100 friction, all of that. Then we're going to
go to our thing here. We're going to delete this,
and then we're just going to make a s maybe slightly smaller than the one
by one square here. Let's do it like this and then we'll put that into the middle and see how
that looks for a size. That's fine. And
then, like I said, you can change this whatever. What we're going to
eventually do is we're going to have this ball hit the edge and it's going
to delete itself, or it's going to
position itself, so it goes into di center. And that's why we've got
the solid white lines. So if I put the ball there, you can't see it,
but you can still see it when I hover over it. But for this for now, we're
going to put this here, okay. So, what do we want to do? We want to just go and
add some behaviors, so it actually moves around. So let's do that.
So what do we need? R. So we need some
numbers and we need some velocity. Let's do that. So let's get some numbers. Let's just get two numbers. And we're going
to put this we're going to put this ten and ten. And then we're going
to get a once trigger. Like that, and then we just
want to have the velocity, which is in properties. And then we're just going
to have this x and y, we're going to change
this in a minute. Because we want
this to be random. But just for now, we're just
going to see if this works. There you go, and it
works. It just bounces all around. That's all fine. We've got our ball bouncing. Obviously, when it hits the
edge, nothing's happening. But if we play it each time, you'll see how it goes
was to the bottom corner. This corner here. We don't always want it to go
to the right corner. We want it to go to left, top left, top right, or whatever. We need to do a few
little things on that. This is fine. Let's just
get rid of this here. Hold down shift to move
this up here like that. Then what we want is
a few other numbers. We go here, and we go here and we're going
to make this one. We'll make that 110, we'll
make this one minus ten. We'll make this one minus
ten and this 110. Okay. And then we're going to have
minus ten and ten to x, a minus ten and ten to y. Now we've got something that looks a little bit like that. Because we want to basically
have either a minus ten, which is going to
make it go backwards for x, which is left and right, or we're going to
have a positive ten to make it go for x, which will be basically
left and right. Minus ten, positive
ten is right, and then we want the same for y, which is going to
be up and down. We're also going to have
a few things where it's going to randomly select
a few other little bits. What do we need? We still
have our ones here. We want a random node here. We're going to have two
random nodes, actually, two random nodes, and then
we also need a router. We're going to have
a router here, and then let's actually
have two routers here. Basically, what we want
is we're going to have minimum value of one and
minimum value of two. We're going to have a
minimum of one and two. And this is going
to do a new thing. At the start of the
sprite when it's created. It's going to randomly
get either one or two from this node and it's going to get ran one or two
from this node. Then it's going to
select those nodes. We also want it to go into in as well because if
it just selects it, then it will just
select the node, it won't actually
activate, so we want to make sure that
in is selected. Let's put that like that, so
it's a little bit easier. And as you can imagine, we want to select a
specific route, okay? So if one is selected, then only output
one is selected, and then if it selects two, output two is selected. So we want to do the
same for this, okay? So, you should see this working. So if I put the node there, you'll see how it goes up, if I stop it again, If
I keep on playing it, it will do different things. S. It's only got
like one or two, say there it's in the
corner. There you go. So it's done all
the corners There. Bottom left, top right, bottom left, bottom
left, bottom right. There. And see how
it starts there. Every time when we play
the game or when we reset, it's going to pick
this random direction. And then we can play, it's not always the same.
We've got all that. What we also want because
we're going to be making this into a bundle to make things a
little bit easier. I want you to select
this highlight here, and we're just
going to select it all and make this into a bundle. And then we're
just going to have this called direction and speed. And then open up bundle because what we
want is we want to have something to add
into this bundle. I haven't worked
with bundles yet, but as in input
nodes into bundles. But it should be
pretty straightford. We've done bundles in
the previous classes. What I want you to do is
while you're in the bundle. I want you to click
on new input, This is going to basically act when every time
when we restart. Once a game starts, when this propriety is created, it's going to do this
one and then it's not going to really
use it again. But then when it hits the
edge and stuff like that, we want it to go back into the middle and then this
is going to activate. But for now, that's fine. We've done that, which is good, and then we've got
our little input sign here, which is all good. Let's do a thing where we've we've got our
Well, basically, if it hits the edge,
we want it to go back to the middle
and stuff like that. But we need to do a few things first in order to do
that because we need to actually know where the middle is or where you're
going to put the ball. Because where I
might put the ball, it might be slightly different to where you're going to do it. But we can easily do it so
that it's dynamic enough. So, what we want? We want two numbers. We're going to be making
this into a bundle as well, but just for now, we're
going to have this. We've got two numbers there. We need a one trigger. We also need a extractor. We want two extractors. Is going to get its value. This extractor is
x, which is a fine, and then this one is also x, we want to change that to y, we go to get and get, so it's going to get dis x, which is di left and right, and it's going to get this y, which is dis up and down. I want you to have this to set. When I hit play, that's
where it originally starts. 56272. If I move this ball
over to say on that side, and like I said, you
might change it, four, three, two, 272. So we want to have
it so that it's dynamic enough so that
regardless where I put it, or regardless where you
put it, it's the same. We're going to put this
somewhere in the middle now. I'd say recommend roughly in the middle here,
which is fine. Obviously, because
it's a white ball against a white line, you're not going to
be able to see it, but if you hover
over it, you can, then if I go to behaviors, That's going to be our center
4496 and 304. That's fine. We've got all of that.
Let's put that there. And then we basically we
want to go to position. And then we're going
to have x and y here. So once this activates because we're not going
to activate it yet. It's when it hits the edge, it's going to get
these two numbers because we've already
established at the start, and then we're going to
put it into that position. We're going to probably
have it pause for a bit, and then we're going to make
it go do some other stuff. But before then, we
need to do more inputs, and we also need to
do an output as well, and we probably need
to add that time. Let's do the time
of thing first. Let's put the time here. Let's just do x in, it's fine. It doesn't
really matter. And then we'll leave
this at ten. It's fine. We need to make
this into a bundle. Let's do this in a bundle here, and then we put
that in the bundle. This is going to me, we're just going
to call this one. We're going to call
this ball x and y. I want to note, I know that it's already started to get a little bit complicated, even though that the game
is very, very simple. But remember, all these
different elements, all this the bouncing, it has to reset to the start
and stuff like that. All these little things, we
have to tell the program, regardless of what engine
you're going to be using. You have to tell
these little bits how you want it to
function, stuff like that. But like I said, it's not too bad on this one. But as you can imagine, if you like, I don't know, you like Halo, you like
Grandf mine craft, you can see how it can
get quite complicated. Right. So we've got all this,
and we've got our x and y, and we've got a position, and we've also got a ser, which we're going
to be using because basically we want it to stop for a bit and then
we want it to start. Okay? So what do we need? We need two outputs because
now it's in a bundle. So we want new input. Which put there. Then I want you to put
this input to get. These two extractors are set. Now, if you remember in previous classes
and stuff like that, set does not activate the node. Only get and plus
activates a node. Once we have this node
activate for set, it's not going to
activate all of this. It's only going to set
these two numbers. Only when we activate
or the plus one, we're not going to use the plus one obviously
for this one, it will then activate
these two numbers and then activate
that position there. We've got input here, and
then we want an output for dput here and
we're just going to connect timer to
the output there. Then if we go back to this one, now we've got this
whole system here. Then all I want you to do is I want you to do
output to input, I want you to connect
those two together, We're going to have a way to reset, which we
haven't done yet. Again, we still have to
do a few little bits, and then we're going to
have this input thing here. But we still need to do
a few little other bits, and we're going to be using them for when we do
the schools as well. I want you to go to mailbox, and I want you to
do two mailboxes. To milk boxes, you've
got like that, and then we have this
one called MPC score. We'll have a space. But remember, mailboxes are case sensitive and
space sensitive. Whatever you put in the mailbox, the letter has to be
exactly the same. NPC score or lower case, and then we're going to have
player score all lower case. Then all we're going
to do is we're just going to connect
those two up here. It's very easy, so
input to input. Then what we're going to
do is we're also going to have a little thing here
called, where are you enable. Now, we've used this
for spaceship one. En enable basically turns
on its physics or not. Yeah, we want it to stop
moving because if you remember what we did is we
had it a movable object. We want it to stop moving bef
we have it reset each time. All we want to do is if
I put this over there, outgoes to true and then
outgoes to true for this. When it hits the left
and right hand side, which we're going to
be doing in a minute, it's going to activate
this, and then Because we've got that. Remember, we've got
this time here. We want this to do false, so it can be moved, and
then we can do that. Then all we've got to do is
connect these two bits here. It's very simple. A
we're going to do is go to behaviors,
go to triggers. Where are you? Collision,
sorry, triggers. Collision with a ball, This is, remember we're on
the NPC one here, and we just want to send a letter, which
is in components. So what did we say on this one? We said NPC NPC score, and we're going to choose
this to send to the ball. Then we're going to
copy that exact same thing for this one. Collision ball components. This one is now player, so we want player score. And then we're going
to choose object to send that to Ball. When the ball hits this,
this is going to trigger anything along this line here or anything along this
line for the other one, and it's going to send
a message to the ball, which will activate
these two here, and it will go here, and it will activate
this node here, this input node here. And it's going to put these
two positions to x and y, and it's going to start a time. At the same time. It's
going to activate these two notes here and it's
going to make this enable. Actually that's wrong, so
we need to change that. Enable if it's enabled or not. What we need is this
needs to be true and then is false, my mistake. Because we actually
want it to stop movie, want to turn off to physics. Hopefully, we can see
all that working. S. So it hits the whatever side, its the player score, and
here it hits the NPC score. Oh, sorry, I actually
hit the side there. It's actually doing pretty well, even though the paddle is
not actually doing anything, its the NPC score, turns it's enabled to one
to fall so it can't move, and then it resets it each time. So if I actually open this
bit here, see how it goes in. It's getting these two numbers because that's what
we positioned it for. It's putting it into x and y, and it's starting
this time, this time for 10 seconds
or this ten frames. If we want it to be
longer, obviously, we increase it and decrease
it if we want it shorter. Then it's going
out and it's going into this input
direction and speed, which we originally did, then it's coming out here
and you can see it's picking one or two just
like it did at the start, and it's either getting
minus ten or ten for x and minus ten or ten for y. With that, all we have to do, if I stop that there, we've got to do because p is pretty much the same is pretty much we've got the same sort of like mechanics for the ball, like we have in our game. All we has got to do is
got to do for the sound. So if I just put the
sound on quickly, if I just listen, Don't worry
about the scoring sound. We'll change that. If
it actually scores it. Okay. They're really,
really bad. There you go. So it makes a slightly
different sound to when it hits the edge, okay? So let's do that. So
let's go back here. Actually, we can
probably put the s the scoring sound in as
well because why not? So let's do some sounds. So we go to collisions. Here. Then if it if it hits the wall, we need to have a
sound for the wall. So we go to sounds. We hit play, and then
we just need to go to something that basically sounds like an actual wall.
It's go to impact. I mean, you're not
going to be able to get the same sort of
thing as in Pong, more or less can you can
upload them if you want. You actually can just go upload, and then you can upload
the actual thing from Pong. What's it? I would just want
something very short. That's fine. I think
number five is quite nice. Now when it hits the wall,
it should make that sound. That's nice, quite like
that. There you go. Then when it hits
either the paddles, I want it to make
a different sound. So we want it to go move that
down there and down here, and we just want it to be NPC
pale or NPC player paddle. And then we want a
different sound. We are you? Let's
put that there. Play and play. This one is a very simple click. Let's do another
sort of other click, clicky sound or different sound. Quite like that. You've got this sound and you've
got this sound. You've got two differ I know one is a click
and one is a pop, but again, I'm just sort of
limited to what flow lab has. I can obviously upload my own. But now, if I do it and play, or if it actually
hits on my end. There you go. There
go. It's quite nice. So now we've got the two edges. You can see how the two
sounds, how they play, which is again just like Pong. So we can have that down there, make that bill a bit neater. But what we can also have, we can because we've
already set this up, we can also do the one
for the player scores. So because we've already
got it out there, let's move that across. Starts to get ale bit messy, but we should be fine here. Um, let's make a sort of like a winning sound or up
like a different sound. That's quite nice,
quite like that. Again, so now when it hits the
NPC score or player score, the all player sound as well. So see how it does that. Boy. You really wanted to, you could have one
sound for player score, which would be good,
like a good sound, and you could have
this sound for the NPC score,
because obviously, you're going to be playing
against a computer, or when I ask you at the end, I' going to be asking you to do player twos and
stuff like that. It's entirely up two.
But just for now, just because it's so similar
to the actual pong game. Yeah, I think we're pretty
good on that. There you go. We've got the ball it resets. We've got the sounds just like Pong when it hits a paddle, and also it resets
in the middle, and then it plays again. I
6. NPC Paddle: C. We've got a game, but it's not actually not very exciting at the
moment because we can't actually get
the NPC to play. Now, I'm going to show
you a way to implement, I guess you could call it the AI or the brain
of the paddle, right? But it's very, very simple. I always have to kind of
remind myself that this is just for those who
obviously who love Pong, who want to recreate it. But also, fundamentally, it's like your very first clone game, you'll make a game
in this series. So we don't want to
make it too complex. So this is going to be
perfect. It does work. And obviously, hopefully
what you want to do, and you want to be applying this to pretty much to
everything that you make, even if it's this class
or a different class, you want to revisit
stuff because eventually what we
want as teachers, we want you to get
better than us. We want you to go back and go actually, This is pretty cool. We want you to improve upon
what we've taught you. Hopefully that you can then either impart that
knowledge to someone else or just use it for maybe other aspects
that you'd be making in your game
making journey. I'm going to show you
two ways how to do the paddle for the game. The first one is basically
going to be very, very unfair because it's
going to be perfect, and we're not going
to want that. But I just want to show you
because it is a way to do it. We're going to be
doing something very similar to what we have for what we did for
the player paddle. I just want to show you
quickly by just doing this. I'm just going to get these
two little bits here. Actually, I just need one, but we are actually going
to be using two. I'm going to take this from
the ball Object 10. And why? Because obviously,
I just need to know where the up and down is, and then I'm going to
have its position. Set that to y. And then what we're going to
do is if I hit play. See how I will not be able to basically beat this
player, like never. Because it's
extracting where y is, and it will forever
just was fix. It doesn't matter how
fast they do the ball. It's because it can
go super quick. It's going to be You
can have this is like a training version like
maybe option in your game, but for R one, we're
not going to have it. I'm going to get
rid of that one, but we are going to
have this extractor, but we're not going to
have this position. We're going to have that for y, and what else do we need? We need need to know
where the ball is, and we also need to know
where the paddle is, and we want to do some
calculations as well, okay? But also, we kind of
want to have it set on its x axis so that
it kind of, like, doesn't move around
backwards and forwards, because it will
eventually slow down and we'll have to change that in a minute to the ball when we
eventually start playing. We haven't been
playing that long. So let's do that
first and do that. So let's just do an
always trigger here. And we're going to put this
up here for now. This is a y. Let's just do this for now. And then this is just y because
we're actually going to need that. This is a y. Okay. I'll go through that in a bit. I always trigger, and then
I just want a number get. We're going to put this to say, then we actually do
need that position, and we're going to
have this to x. Sorry. Now if I hit play, see how it puts it under
the back there. We want to have it. I think 35 would be
good. There you go. Maybe a bit further
actually further out. So what was it? 45. Yeah, that's fine. I'm happy with that. Okay. And that's
so that the ball eventually when it
hits the paddles, it doesn't push it back, Okay? Anyway. So let's do this
calculation thing here. This y is di paddle here. So it's always
extracting that number. And then the other
y is the ball one, which we did, which is ball Object will be different
depending what you want. You need to make sure
that you select that. So you select ball,
from other object ball, and then you must select this object here,
whatever number there is. I should only be one because
we've already made one ball, and you need to make
sure that y is selected. Okay? So we need to have that, you need to have a timer, and then we need to
have an expression. Okay. So let's do that.
Let's put a time. We're going to make
this. I don't know. Let's put this to five
and repeat forever. Okay? This is going to be sort like, before we had an always
and stuff like that, this one is going to be like, Okay, it's always
going to check. The lower it goes down, the more harder it will
get and stuff like that. But I find five is quite good. Again, just like I said at
the start of this video, there will probably
be a different way, probably an easier way, obviously, probably
more complex way in how you would want to make this paddle to move
and react to the ball. So let's do a few little things and we want to have expression. Now, expression, really
neat thing in flow lab, it basically allowed you
to do a few little maps. We're going to do a
very very simple one, and we're just going to extract
that one from this one. So we're just going
to have a goingto there and B into there. It will get this number. I'll show if I show
you here, we'll see, 44288, those two numbers there. But we also want
this one to go to evaluate because just like
with the set one for numbers, if it's just set to
set, it won't trigger, so we need to have that as well. And we need to set this up as well. We need to expression. So all we want is A minus B, we want to take away from
this one to this one, and that's going to
give us a number. We go to filter,
and that goes to, and you'll see, see how
it If it's lower down, it's a plus sign, if it's higher than what it
is, it's a minus sign. If it's higher than
this sprite here, the paddle, it's going to be
minus. That's what we want. And if it's lower than here, it's going to be more than zero. And that's going to change,
obviously, the more is. So anything lower
than the paddle here, it's going to give a plus
number because this number will be more and that
number will be and so on, and this is going to be minus. So this is going to change. So, that's where we
have this filter. That's what we want. If it's greater than zero,
which is where it's at, we want it to get a number, and then we're going
to have plus or minus, and we're going to
set it to a velocity. Let's do that. We
want two numbers. And then we're going
to have pass or fail, and we're going to have this set to let's set this to nine,
let's set this to nine. And then we're going to
set this to velocity. This is going to be the y one. You can just see how
that looks there. You can see that if
it's greater than zero, it will get positive number, and if it fails that, if it's not greater
than zero, it won't, and then that's wrong. It needs to go to a minus nine. And then it will go y. Then
you should see this move. See how it goes up and
down, and there you go. You can start tab it play. It goes a bit too far up. So what we want is, we want that to be solid. And we also want that to be solid as well and
everything like that. So. Why is that, Why is that moving
over to the world. Oh, we want that to be movable, sorry. We want that
to be movable. We want the paddle to be
movable so that it stops. So hopefully, it should stop. Oh, it's not even moving now. I just changed it to react, and then I did
affected by gravity. For some reason, if I
don't do affected by gravity, it still moves. Okay. Sometimes sometimes flow lab
just needs a bit of a reset, okay? So that works fine. So if it does plays up, just look at my settings here. It needs to be
movable, it is solid. It can be affected
by gravity or not. It doesn't really matter
because we've got it to zero. Make sure that your
collision shape is square, and that your behavior
is basically like this. If you want this to
be faster, obviously, you can make this can make
sure it's the same number, so it basically
moves a bit faster. There you go. Nice. And see
how it will follow the ball. It will follow the
ball up and down. It will sometimes
do silly things. But that's just
because, like I said, it's not perfect, but it's
doing pretty well so far. Also, actually, I don't know
if you noticed it there, but the ball is slowly
getting slower, which is something that
we definitely don't want. We want the ball to
constantly be the same speed. If they play it long
enough, Hopefully. Can you see it started to get a little bit slow? We
don't want that. We can change that very
easily by going into the ball and then go into this paddle fhere
where the collision is. Then we go to go to properties
for speed, velocity. And we want just two numbers. We what was our speed? Our speed was ten. Let's do ten. We just want ten and minus ten. And then that just
goes to x and x. So if it if it hits
the player paddle, want it to get minus ten, if it hits the MPC paddle,
it'll get positive ten. Now, hopefully, they go. I should just keep
the speed constant. That's all we want.
There you go, we've done this
little score there. Makes it a bit better.
We can also make it so that see how
it went down there. It goes a bit funny. We can also make it so that it gets
faster and stuff like that. Again, you have all the options there on these little bits.
7. Scores / Reset: C. Okay, so we've got our game that we can
play, our little thing. And if I put the other one on, or is it pong here? Plays pretty much the
same, doesn't it? Very similar. In
terms of how it goes. Up and down, but we still
need to implement the score, which is what we're going
to be doing now. Okay? Let's do that. Let's stop that. Put that there.
Okay. Let's do that. We're going to create a sprite, create, and we're just
going to call this score. We're going to put this above the game world because no
one's going to see it. And we're going to
add a few things. We need to do GY. Do a label. And we're
going to have this one. We're just going to
have this as NPC at the moment, but we're
going to change this. And we're going to have this as what's a nice font
I like that's similar. Common. Common pixel
is pretty good. And we're going to have that
as make sure that's white. NPC thing is going
to go over here. That's going to
be the NPC score, and then We'll just
do another one. GY. We'll call this plum player. We're going to change
this in a minute, but just so that it's all
set up. It's all good. Make sure that's white as well. Make that the pixel one. Pixel, what was the
number? That was 20. Let's make that 20 as well. And we'll just put
that here we want it. There you go. We've got the player
score and the NPC score, and we're just going to change
these both to zero now. That's zero, and that
is zero as well. We're just going to
move that across. Actually, we'll make
this a bit bigger because if you actually
remember it's a bit, we'll have this as we'll
have this as a note. I remember you can add
notes onto your thing NPC and this is player. That's already useful for
just knowing where you are. Let's make that to
O, I don't know. Let's do 40. It was pretty big in the
Pong game, wasn't it? Let's do 40, and
let's do here. Cool. Make sure that's even. Cool. What we want? We want to score on this
side if it hits the red one, and then it wants to
score on this side if it hits the green one. We
can easily do that. Let's go to here logic and mas. We have two numbers.
These are going to be set as our our schools. Then we want two
mailboxes, two mailboxes. Then we'll just have this as
NPC score, and player score. And we're going to have
this to get to plus. Once this triggers,
it sends a message, we're going to get the
ball to send a message. NPC score is going to add one because when
nodes are activated, wind line is activated, it
always adds a one basically unless you tell it otherwise,
but default is one. It's going to add a one to this, and it's going to basically
add these numbers. Let's do that and
move that down there. Let's set that up, go to our ball, which
is somewhere here. We've already got
scores things here. So, let's move this a
little bit like that. Here. Okay. Let's go to
messages, two messages. Let's put that there.
You can see it. If the NPC scores, which is this one, and then player scores
sends it to that one. So we just want to do it. NPC score, send that to school because
that's what we've got it, and then player score, send this to score. Make sure you've got that sort. Make sure that's all right. That score. NPC score add that. Let's just see if that works. Sometimes I always get it
wrong and I get it mixed up, but it's easily sorted. So if we do the NPC, there go. So it adds one to NPC, and they will keep on adding. Let's see if we can
actually get one for us. Come on. Yeah, there you go. Cool. See
how it's not a line there. You can just adjust that,
making sure that's like, you know, just make sure
that you're happy with that. Okay, cool. So we've
got the NPC score, and we've got the
player score, okay? What we also want to do is a way to reset the
game and everything. Okay? So we want to
sort that as well. So let's do that. So we go to GY, do a new label. Okay. I'm going to call this one U let's do a wind condition and a loss condition. Win, we go up here, and we go pixel. I will this 15, make that Put that here, so we do win here, and do another one where
it is called loss. Again, you can have
whatever you want. Oh. Let's make that white. I can't pick so now is 15. C. Okay. So we've got a loss, and we've got a win condition. But we don't want these to activate until certain
things have happened, k? So let's put that up here
and down here because we want the loss to be near to the NPC and a win
next to the player. So let's get a node. Let's get this zero here. We also need a ch trigger. It's going to get
this zero here, and it's going to
make its Alpha 0%. Okay? So you look
at it like that. You'll see you'll see these
letters disappear now, see how they disappear because we're getting this zero and it's making the Alpha
zero, basically. Then we want to
have a few things. We want to have a filter. And then we have if
it's equal to five, we'll just have
the score to five, which's going to go in,
it's going to pass. Let's move this b here.
Make this a little easier. It's going to get 100%. Let's set its value to u to 100, so it'll basically be
sorry, that's wrong, there. So we don't want to do
anything to the label, just want to do the
stuff to the Alpha. So when the sprite is created
at the start of the game, even though it's out, so
the player can't see it, it's going to get zero,
make its Alpha 0%. And then once this per, the NPC score hits five, it's going to get 100%
and then do that. So we can actually do that
hopefully by showing you. So if we just make
it lose. So one Purposely lose. T. Mm. Okay, they get lose. There you go. Five. How we got loss. But
everything's still playing, but we're going to fix that. When it when it hits five, loss will come up, and that will show, which
is what we want. Then we're just
going to basically replicate it on this end here. We want to filter equal to five. Again, if you want the
score to be higher, it's entirely up to you,
have that in, have that in. If it passes, it gets 100 and it will set that to win. Right. So we've got a way to
win and lose the game. But what we also want is we want a way to be able to
play the game again. We want to be able to restart the game. So we're
going to do that. So we'll go to GY.
We'll go to Label. We're going to put
this here, and we're going to have this start here. We want to play again. Press r. We have that. Let's change that a little bit. It's just a little
bit a p again. Actually play again press. We'll have that move like that. Okay. And then we're going to have this
as an alpha as well. That's going to be zero,
that's going to be zero there. And then what we want is
if you basically lose, we want that to be 100, and if we win, we
want that to be 100. Regardless who wins or loses, whatever side, this will
always turn up. So a 100%. But we also want to do a few other little
things because we also want it we
want it to trigger, so we want it to
basically pause the game. When you basically Well, basically when it
hits number five, we want it to pause, and then we can actually
do something about it. Let's do that. Me. Probably make this into a little bundle because it'll be easier. U Let's do a pause, which is in game flow. Okay. I'm going to put that over here. I want to click on it and
then don't pause this object. If you don't do that, it will basically It will
basically just won't work. Frankly, it just won't work because it will pause everything and you won't
be able to activate it. And we're just going
to have a trigger. And then what we say
press R to restart. So we're just going to have
a thing here that says, so. That's going to go to play. Then this is going to gain flow load level, go
restart current. That's basically a way to do it, but we're going to have
a way to pause the game. In order to do that, all we want is we want
this to activate. We want out to go to
pause and that one there. Actually, that's fine.
That's okay there. Remember, these nodes
are in order in terms of how it activate
also for this one as well. If I do out for
here, it's going to a pause and I want to activate it on something
that says pauses, it's going to have to connect
something to this one here. But as I want it to do to play, it's only going to
do on that one. So there's quite a lot there, but if I show you how it works, if I move that up there so that you can see
everything. Yeah. Hit play. Obviously,
that goes away. That's because it's stopped. Yeah. Because I've done it
needs to be on the node. It needs to be when
this is activating. I actually need to Let's
actually put this in a bundle. I wasn't going to put
it in a bundle before, but let's put it in a bundle because I think it'd be easier. Just have this call restart. We start, Open up the bundle. Let's go to bundle behaviors. Let's do in new input. The same thing here like that. Let's put that here. Let's put that, that's fine. Basically, pass goes to in. Move that out there, so it's
a little bit easier to see. Pass goes to input there and also pas for this
one goes to input as well. Can you see how well
that's happening there? So we put that like that. Sometimes it's just
good to position your nodes so that you
know what's happening. That can go up there,
that can go up there. That can go there. That's that. That's that. That's a bit easier to
understand, isn't it? There you go. We know
what's happening. Once the game starts when
this thing gets zero, and it sets everything
to Alpha zero, because we've already
got that there. When when the player
gets scored or the PC scores, D
starts to add up. Then once it hits
five for either side, it's going to obviously get
100% for either or loss or a win and also for play again. But it's also going
to restart this one. It's going to pause the game, and then I'm going to press r to be able to play the game, but it's also going to restart. So if I hit play, I know it's covered a
little bit of the screen, but you should be
able to see you fine. F five, so pause a game. There it goes. So it pauses it. We, press R and restart. I can press R to restart the game at any
point if I want to. You can. You can fix that by putting a switch
in if you want. It's entirely up to you.
Just by having this on here. I play, that turns it on, and default is off. If I hit play and I press R, nothing's happening
because it won't, but only when it basically hits five,
then it will activate. Two, three, I've scored one. Loss, be able to
press and do that. There you go. You've
got yourself, your very own pong game. Like I said, the
MPC isn't perfect, but you should be able to play around with some of the
setting, some of the speed, some of the sort of brain
and stuff like that, and how you want to be doing
it in order to make it. But as you can see, we've got a one to one cologne of Pong.
8. Your Project: We have done. You made
your very own pong game. Now, just for your projects, I just want you to go through a few little things
just to enhance it. There's not going to
be as many requests as I do for my other classes. Just because for the
let's make series, I just want to make it quite
simple for your project bit. But I do actually have a
few little tasks for you. So I've got four additional
things I want you to add in. Want you to add the option for a two player for two
players on the menu screen. We did it for the first
player. I just want you to do the same again,
but for two players. Then I want you to be able
for two players to make sure that you can
use the keyboard in order to play it a game. Not with a mouse.
Again, if you've done, you should have done
flow up to zero, 02. That shouldn't be
an issue with you. Shouldn't be a problem to
move the paddles up and down. But I want you to be able
to play with a friend. That means you need to change
the first player paddle, obviously to go up and down, and then you need to
choose another set of keys for the other player so that you can play
on the same keyboard. We haven't really
added any music, so it's kind of a
little bit bland, so I want need to add some music onto the menu area, and I also want you to add
some music into the play area. So only four very
simple tasks with number two require a tirely a little bit more
thinking, but honestly, if you've done like
Flow one, flow two, even if you've done flow three and stuff like that, and so on, beyond, you shouldn't have any problems with additional
things for your project. And then once you've
completed it, please just follow the
instructions on how to put it onto the website so that other people would be able to play right here on the browser. Thank you very much, and
hopefully I'll get to see you some other classes and also
for other let's make series.
Gareth While, Digital Creator
