Coding

How to Program Connect 4 in Python! (part 3) – Background Graphics

  • 00:00:00 what's up guys and welcome to the third
  • 00:00:02 video in my programming connect for in
  • 00:00:05 Python series in this video we're
  • 00:00:08 actually going to implement the graphics
  • 00:00:09 for our game so at the end of the last
  • 00:00:12 video we had something that looked like
  • 00:00:13 this it was a fully functional command
  • 00:00:18 line based Kinect for game so we're
  • 00:00:21 gonna take this game and we're gonna
  • 00:00:23 expand on it to actually make it look
  • 00:00:25 nice so the first thing we're going to
  • 00:00:26 do to do that is import a library called
  • 00:00:28 PI game and just like the numpy library
  • 00:00:32 if you don't have PI game installed just
  • 00:00:34 open up a new terminal window and type
  • 00:00:36 in pip install PI game as you can see I
  • 00:00:39 already have it cool alright and now
  • 00:00:43 what we're gonna do is we're gonna have
  • 00:00:44 to start out by initializing PI game so
  • 00:00:47 this you have to do in any PI game
  • 00:00:48 project so before our game loop starts
  • 00:00:50 we're gonna do PI game dot an it ok and
  • 00:00:58 then what we're gonna have to do is
  • 00:01:00 define our screen size how big do we
  • 00:01:02 want our game to be so if I real quick
  • 00:01:05 just build the finished version I have
  • 00:01:08 you can see that you know it's pretty
  • 00:01:12 you know you can kind of break this game
  • 00:01:15 down into squares I would say you have
  • 00:01:17 squares that represent each column in
  • 00:01:19 each row and then I had this one extra
  • 00:01:22 row at the top so we're gonna define
  • 00:01:25 each one of those squares as a hundred
  • 00:01:30 pixels so the sizes we're going to talk
  • 00:01:32 about right now are all in pixels so the
  • 00:01:34 square size is going to be a hundred
  • 00:01:35 pixels and then our width for our screen
  • 00:01:39 is going to be the number of columns so
  • 00:01:42 the column count times the square size
  • 00:01:45 cool and the height is going to be the
  • 00:01:50 row count times the square size and
  • 00:01:54 actually if you saw my the game I just
  • 00:01:57 dragged in and I'll drag it in over time
  • 00:01:58 I actually added one additional row
  • 00:02:02 because I wanted this spot where I could
  • 00:02:04 display this circle that I'm dropping so
  • 00:02:07 we'll actually make this row count plus
  • 00:02:09 1 times square size 4
  • 00:02:13 and that will be packaged together
  • 00:02:16 nicely in a variable called size which
  • 00:02:18 will be a tuple of with comma height and
  • 00:02:20 then to get pygame to actually read that
  • 00:02:23 we need to type in the following screen
  • 00:02:28 equals PI game dot display dot set mode
  • 00:02:32 and then we'll have it read in the size
  • 00:02:38 and if you're wondering where I'm kind
  • 00:02:41 of just magically getting these
  • 00:02:42 functions from I'm looking at the
  • 00:02:44 documentation on the PI game site so if
  • 00:02:47 you go to PI game dot org slash Docs you
  • 00:02:50 can find all the kind of functions that
  • 00:02:52 I'm using I'll post a link to that in
  • 00:02:54 the description and we're gonna real
  • 00:03:02 quick test to see our screen is actually
  • 00:03:04 working so you can just run control B
  • 00:03:07 and as you can see the window popped up
  • 00:03:09 and then it disappeared we'll handle why
  • 00:03:12 it's disappearing in a second so it
  • 00:03:14 looked like though it is reading in that
  • 00:03:16 screen cool so let's now create a
  • 00:03:20 function called we're do a couple things
  • 00:03:23 so I think first we'll define a function
  • 00:03:26 called draw board and this will just be
  • 00:03:29 like print board that we defined up here
  • 00:03:31 but now we're actually gonna draw it
  • 00:03:33 with the PI game graphic so draw board
  • 00:03:37 is gonna have to take in the board and
  • 00:03:38 that's about it and I'll actually pass
  • 00:03:40 this for now because we're gonna make
  • 00:03:42 some changes to our loop before we do
  • 00:03:44 this drought board so the first major
  • 00:03:47 change we're going to do to our loop is
  • 00:03:49 PI game is an event based game library
  • 00:03:53 so PI game kind of works and allows you
  • 00:03:56 to function in the game by just reading
  • 00:03:58 all of your movements of your you know
  • 00:04:01 the keys you press the mouse buttons you
  • 00:04:02 click the mouse like how you move your
  • 00:04:04 mouse it reads those all in as
  • 00:04:06 individual events so that looks like
  • 00:04:08 something like this so for event in PI
  • 00:04:11 game event Todd get and as I just said
  • 00:04:16 events are like mouse motion mouse
  • 00:04:18 button down key down etc so we're gonna
  • 00:04:23 read in we're gonna drop a piece by
  • 00:04:25 clicking down so that's one of the
  • 00:04:27 important events we'll have to get so
  • 00:04:30 we're going to first do just kind of
  • 00:04:32 follow me on this one event type if the
  • 00:04:36 event type equals equals PI game dot
  • 00:04:38 quit so this is just something you want
  • 00:04:41 to handle in all of your games that you
  • 00:04:42 make just allowing your game to properly
  • 00:04:45 exit out if you click the button here in
  • 00:04:48 the top right that X out X is out of it
  • 00:04:50 so if that happens we have to do a
  • 00:04:53 system exit just so it properly shuts
  • 00:04:55 down and to get this cyst right here
  • 00:04:59 we're gonna have to import that into our
  • 00:05:00 project as well that means system and
  • 00:05:02 that comes default in any Python
  • 00:05:04 installation ok system makes it now to
  • 00:05:09 get to the more interesting stuff the
  • 00:05:12 event that we really are going to care
  • 00:05:14 about to start is mouse button down so
  • 00:05:19 if event taught type equals equals PI
  • 00:05:21 game dot mouse button down and all the
  • 00:05:25 different events you can also find on
  • 00:05:27 the PI game website under the docs the
  • 00:05:32 game is going to run by us clicking down
  • 00:05:36 on a specific spot in the screen where
  • 00:05:38 we want to drop the piece so instead of
  • 00:05:40 reading in the column we want to drop it
  • 00:05:43 in as we did previously now this column
  • 00:05:45 is going to be populated by where we
  • 00:05:47 click so I'm going to real quick put all
  • 00:05:50 of this all this behavior into this
  • 00:05:54 mouse button down event type because now
  • 00:05:57 the events of us dropping the piece
  • 00:05:59 always happened when we click the mouse
  • 00:06:01 button down so we don't want it to
  • 00:06:02 happen otherwise we don't want it to be
  • 00:06:03 asking for this input all right so
  • 00:06:06 column equals and this is gonna be where
  • 00:06:08 we click on the screen so just for now
  • 00:06:12 I'm going to just kind of comment out
  • 00:06:16 this stuff just so it doesn't run on us
  • 00:06:18 while we're testing and that's just real
  • 00:06:23 quick see if this fixed our error of the
  • 00:06:27 screen disappearing right when it pops
  • 00:06:29 up what happened
  • 00:06:40 French as you can see now we have this
  • 00:06:47 screen and it's not you know it's
  • 00:06:50 staying here so that's because we
  • 00:06:52 actually added in this event loop here
  • 00:06:54 it knows to kind of continue all these
  • 00:06:56 events are happening and the exit out
  • 00:06:59 will be handled properly by this the
  • 00:07:01 system makes it cool alright so we have
  • 00:07:04 our screen looking pretty good but
  • 00:07:06 doesn't have any graphics obviously so
  • 00:07:14 we're gonna implement the draw board
  • 00:07:16 function now so if we think about it
  • 00:07:19 I'll drag in the finish one I have again
  • 00:07:22 we're going to draw some sort of
  • 00:07:26 rectangle for each of these slots and
  • 00:07:28 then a black circle inside those
  • 00:07:31 rectangles and then we'll have to draw
  • 00:07:34 this afterwards this piece that we drop
  • 00:07:36 and then whenever we do drop a piece the
  • 00:07:38 the one or two that's in our command
  • 00:07:40 line based game won't it become like a
  • 00:07:42 red circle or a yellow circle based on
  • 00:07:44 what we're doing so let's implement this
  • 00:07:50 so first we're gonna iterate through
  • 00:07:56 kind of every spot in our board so for
  • 00:07:59 our or for we'll say C in range column
  • 00:08:06 count and then we'll do the same thing
  • 00:08:09 for our end range row count just as we
  • 00:08:17 did above here when we reading through
  • 00:08:19 all the spots well we need to initially
  • 00:08:23 just draw it as like an open you know a
  • 00:08:27 blue blue rectangle and then in that
  • 00:08:30 blue rectangle we want a black circle so
  • 00:08:33 we're gonna do a PI game draw function
  • 00:08:36 so first we're gonna draw a blue
  • 00:08:38 rectangle so that looks like kind of our
  • 00:08:42 game board and then the black circle
  • 00:08:44 inside of that will be the open slot
  • 00:08:48 we're gonna draw that on the screen and
  • 00:08:50 I'm gonna drag in again the the lie the
  • 00:08:53 library so I can see exactly what I'm
  • 00:08:55 doing so as you can see here pygame
  • 00:08:58 thought droughts wrecked we need to take
  • 00:09:00 in the surface the color the rectangle
  • 00:09:03 we want to draw and then the width so
  • 00:09:07 the screen is the surface we want to
  • 00:09:09 draw it on the color is we want a blue
  • 00:09:11 color so I'm gonna define blue as a
  • 00:09:13 global variable a global static variable
  • 00:09:16 up above this is going to be an RGB
  • 00:09:18 value so we're gonna say it's zero zero
  • 00:09:21 comma 200 and that means or 255 or so so
  • 00:09:25 that's going to be a very blue RGB value
  • 00:09:29 because this means red this means green
  • 00:09:31 and this means blue and the only color
  • 00:09:33 that's actually has some value is the
  • 00:09:35 blue here so the color we're gonna say
  • 00:09:38 is blue we just defined that that's the
  • 00:09:41 RGB value now we didn't define our
  • 00:09:43 rectangle so our rectangle is going to
  • 00:09:47 be there you need to have four different
  • 00:09:50 things to define your rectangle you need
  • 00:09:52 to have the size of the width and height
  • 00:09:55 and then also the position so the
  • 00:09:59 position is going to be this might be
  • 00:10:01 take a little playing around with to get
  • 00:10:03 this but it's going to be C times so
  • 00:10:06 these are numbers 0 2 you know the
  • 00:10:09 column count and 0 2 the row count
  • 00:10:10 there's gonna be C times square size
  • 00:10:14 because we want the actual this is the
  • 00:10:17 top left corner of it and that's going
  • 00:10:21 to the
  • 00:10:31 and then our position on the y-axis is
  • 00:10:36 going to be R times the square size and
  • 00:10:42 our height and width are going to be the
  • 00:10:45 other two parameters of this what that
  • 00:10:48 make up a rectangle object and that's
  • 00:10:50 just going to be it's gonna be a square
  • 00:10:52 so it's square size square size height
  • 00:10:54 and width are the same and the width op
  • 00:10:57 argument that I showed was in the
  • 00:10:59 documentation as you can see it's
  • 00:11:01 defined as zero so that's optional and
  • 00:11:04 think that's just the outline like the
  • 00:11:07 line that surrounds the square so we
  • 00:11:09 don't need to implement that alright
  • 00:11:11 let's test to see if just these
  • 00:11:12 rectangles draw properly so down here
  • 00:11:15 we'll just do a draw board taking the
  • 00:11:20 board as we did here and then what we
  • 00:11:24 have to do whenever we want to update
  • 00:11:25 our display is do pygame dot display dot
  • 00:11:28 update that will make sure that we
  • 00:11:30 actually see what we're supposed to see
  • 00:11:32 so we'll build that real quick oh and as
  • 00:11:34 you can see we have this just giant
  • 00:11:36 mound of blue and the one problem I see
  • 00:11:39 right now is it's not actually opening
  • 00:11:40 up the I wanted the top to be open so we
  • 00:11:42 could have a piece that swings around it
  • 00:11:45 so it shows us where we're dropping it
  • 00:11:47 so I think the problem with that is
  • 00:11:49 because our axis starts at zero zero we
  • 00:11:52 actually need to to shift down by one
  • 00:11:55 square size to kind of account for that
  • 00:11:58 offset that we left for that space so
  • 00:12:01 we're gonna have to add a square size
  • 00:12:03 here now I build this again as you can
  • 00:12:07 see it looks proper now we'll need to
  • 00:12:09 fill in some circles to represent the
  • 00:12:12 slots so we'll do that by drawing a
  • 00:12:15 circle and pygame and that's also in the
  • 00:12:17 documentation so where the PI games draw
  • 00:12:19 dot circle and that's going to take in
  • 00:12:23 the surface of a screen and now we need
  • 00:12:26 a color so I think a good color would be
  • 00:12:30 just black so we'll define black up
  • 00:12:32 above too and black and RGB is just zero
  • 00:12:35 everything zero zero zero
  • 00:12:41 okay so this is black and then let's
  • 00:12:46 drag in the documentation real quick to
  • 00:12:48 see how we're gonna finish off this
  • 00:12:50 circle so Circle Circle Circle okay
  • 00:12:53 position and then radius so this is
  • 00:12:55 going to be the position of the center
  • 00:12:57 of the circle as you see in the
  • 00:12:58 documentation and the radius will
  • 00:12:59 probably want to be a little bit smaller
  • 00:13:01 than our square size just so there's the
  • 00:13:05 circles aren't touching so let's define
  • 00:13:08 a radius – so our radius is going to be
  • 00:13:13 to find that under the width and height
  • 00:13:16 and whatnot so our radius is going to be
  • 00:13:19 a little bit less than the square size
  • 00:13:22 so we'll do I'm gonna make this also
  • 00:13:25 they have to be integer values I believe
  • 00:13:27 so once we start getting into division
  • 00:13:28 it might get a little bit messy so it's
  • 00:13:31 gonna be in square size divided by 2
  • 00:13:35 because it needs to be the radius is
  • 00:13:37 half the diameter and the diameter would
  • 00:13:39 be the full square size and then we'll
  • 00:13:41 just – an arbitrary like integer value
  • 00:13:44 off of that so now we can draw our
  • 00:13:48 circle with that radius it will have to
  • 00:13:51 do the position first so the position
  • 00:13:54 where is it I forget oh it's in draw
  • 00:13:56 board the positions going to be so if
  • 00:13:59 this the top left of the rectangle our
  • 00:14:03 position for the center of the circle is
  • 00:14:05 going to have to do be that then with
  • 00:14:09 some offset so square sighs then R times
  • 00:14:13 square sighs plus square sighs and the
  • 00:14:19 offset is going to have to be like half
  • 00:14:21 of it because we're talking about the
  • 00:14:22 radius so half of the rectangle is going
  • 00:14:25 to be adding an additional square size
  • 00:14:29 divided by two adding a square size
  • 00:14:36 divided by two
  • 00:14:38 all right let's see what happens now oh
  • 00:14:40 and then actually we have to do the
  • 00:14:42 actually specify the radius so the
  • 00:14:44 radius is what we define just a second
  • 00:14:46 ago build what happened
  • 00:14:50 yeah integer argument expected okay so
  • 00:14:54 it looks like this division caused us to
  • 00:14:56 have some floats in our code so we're
  • 00:14:57 gonna have to actually make this int a
  • 00:14:59 pie game it seems like only accepts
  • 00:15:02 integers so make sure that everything
  • 00:15:04 you every position and radius value you
  • 00:15:08 make a integer come on baby let's go
  • 00:15:14 cool yay we got a board all right I
  • 00:15:18 think that's where we're gonna end this
  • 00:15:19 video we'll actually animate the
  • 00:15:21 dropping of the pieces and then the kind
  • 00:15:23 of the piecing hovering over here and
  • 00:15:25 the text saying you won in the next
  • 00:15:27 video all right seeing a bit