Hi, welcome to this new video. In this video, we're going
to continue working on the state machine game that we started on the previous video. If you haven't seen that,
we only start there. This is going to be
picking up that code and taking it all the
way to our final state. Again, we are trying to use all the different ingredients
that we've been covering. We are using if statements, we are using the runtime
environmental processing. Now we're introducing
this idea of states where allows us to identify how a particular entity in the rectangle might have
four different movements. As we transition
between those states, we can identify all the possible moves for
this rectangle. What we're going to do is
lay on top of a system, like another state machine. One that would identify two possible conditions for
the software as a totality. We could be playing the game or we have a
game over condition. We're going to
identify how do we transition from a play state
to that game over state, and perhaps what graphic do we want to show in the
screen, what that happens? Let's jump into processing
and see the code. Just as a quick reminder,
this is what we have. We have a rectangle that moves once you click
on the screen. Again, forgive my inputs, but if you click on the screen, you should see that the rectangle not only
change direction, but the speed becomes faster. At some point, you're
going to struggle to keep the rectangle within the canvas. We're going to use
that as a concept. Staying within the
canvas as an idea. What would it be
like to have a game over if we jump
out of the canvas? Let's start by creating another variable
called game state. Again, this is meant to be a slightly more advanced example that is certainly putting
together a lot of elements. If you feel like this
is getting complex, this is an invitation to see how you could actually start
using the concepts that we're learning here into a slightly more advanced
piece of script or code. We have one state that
is going to be playing, which is going to be the
default state and a game over. The current game state, it's going to be
game states zero. It's going to be just that. We're starting playing state, some transition will
take us to game over, in which case we could
display something different. What we're going to
do is quite simple as we are going to break
down this part here. The logic that currently is the logic of gameplay
and the way we represent the background and
all this content here as part of
one of the states. Let's just write here. I'm going to pick up
the current game state. We cannot be mixing the states. This is where you
have to keep track of your names need to
be expressed enough. If we are in the state zero, which we know refers to playing, let's just make a note
of that, what happens? Well, basically everything,
everything that we currently have could
be put into that state. Let's make sure that
we do background , the movement logic. If you're organized,
you probably would like to have this as a function. Maybe separate functions for
graphics versus functions for a logic-like movement
and things like that. Again, the invitation is for you to start making code
that makes sense to you. Here, we're going to
do an elif statement, which is going to check
this condition once more. We're going to do a game over. Let's start simple. Let's just do a red background. The background is
going to be red. That would be white
and then this is red, so a red background.
It's game over. If we press play right now, we are currently
in the play state. At the beginning of the game, we say our current state
is going to be State 1, which is the game over state. You see this is our
game over state. We could add font or a
text that says game over. The state is working, what we don't have is a
transition between them. I'm going to start with the playing state
because we obviously don't want to start in
the game over state. What would be the transition? Well, we do know
of if statements, and this is a collision. We could evaluate the collision. Not really a collision, but
if any of our variables x and y get outside the
domain of the canvas, we can trigger a
change of state. Let's define check collision. Let's just check collision. We will want to take
the global x and y, and we're going to be
checking the canvas. We might be checking
the variables, canvas width and canvas height. Let's access those. We have those variables
that are going to be required to write new statement. If x is bigger than the canvas, so let's imagine that
the variable x crosses beyond the 1,200 pixels that
we have for the canvas. What happens? The
only thing that we want to do here is change
the current game state. It's going to become
the game overstate. This condition here basically should happen quite quickly. Let's make sure
that we're calling our function here
in the draw loop. Let's see, we have x and y, and if the x goes beyond the width of the
canvas, we change state. We haven't done it for up, down, and left, so those will
be different conditions. But let's see if
this is working. We have our rectangle moving towards the edge of the
canvas here on the right, and if it reaches that edge, we should be triggering a
transition of change state. What is the problem here?
Well, I believe we are also having yet more
problems with our globals. We are not using global here. If you feel like the
lines are too long, you can do another
global line here. We are not affecting the global variable of current
state and game states. Let's check if this is in fact
what we have been missing. That we should be checking that global variable
and see if we can change that global
variable too. There we go. We managed to get to the edge and trigger our game over state. Now that we have that,
let's just copy paste these lines because
what we want is to have a condition for what
if x is smaller than zero. Smaller than zero
means that x is actually negative,
moving negatively, and it's less than zero would mean that it exits the
canvas on the left side. The condition of change
is going to be the same. We transition to a game over, and we can copy this once more. Let's do the y. If y is bigger than
the canvas height, we transition to the
game over state. Finally, if we have
y smaller than zero. These are basically the
four directions up, left, down and right, in which the rectangle either
through its x or through its y can
get out of bounds. All of those will trigger
the same state game over. Let's see if this is working. We have the rectangle, and moving down and I
transitioned the game over state. By all means, check if all those conditions
are working for you. Let's just finish this
video by doing a little bit of something slightly
more graphical. Let's add that text
that says maybe text size 40 and the feel of. We're going to write game over. The position, I will put it
somewhere near the middle but a little bit
pushed to the left. We might also want to include if we're
adding a feel here, I think that's fine. Let's see. How we might rectangle moving around trying to avoid
the border condition. Eventually, I don't manage to keep it within bounds and
trigger a game overstate. As you can see, we
can actually use state machines in conjunction. Some of them specifically for the behavior of a rectangle, some others to manipulate the behavior of the
software at large. If you have a button
or any entity that you can start
thinking of them. What are the states
that in which you switch button or agent within
our environment can be. That might help you
start breaking down and attacking each one of those different
behaviors individually. With this video, we're
concluding week 3, and I'll see you
in the next week.