Python Online Game Tutorial #1 - Creating a Client Using Sockets

Key Takeaways

hey guys and welcome back to a new tutorial Series so I'm just filming a quick intro here to explain to you guys how this series is going to work and what we're going to be doing so essentially this is online game development with python which means we're going to be using sockets and networking to connect what's known as a client and a server or multiple clients to a server where they can send and share information and therefore we can create an online game so we're going to start off with just the absolute Basics and just get shapes for example like if I move a shape on my computer um it moves a shape on your computer like if you're the other client and then we'll start getting into some more advanced stuff where we create a legitimate game and start sending Mass amounts of information to the server and back to the client and I'm expecting this series to be I want to say like 10 to 15 videos long I don't really have it completely planned out as of filming this intro um but if there is any feedback that you guys have for me while we go through there's anything you want to see please make sure you let me know so essentially what we're going to do today uh in this first video is I'm just going to show you guys guys uh how we can create like a very basic client and then in the next video we'll go to a server and then we'll connect those client and server together and then we'll start moving into more advanced things um like how we can get the game running on multiple machines and all of that so we'll start uh really simply by just getting anything working on our local network and then once it's working on our local network we'll deploy that to an external server which will allow us to play from anywhere in the world not just against people on our local network so I'm just going to quickly get into this video I'm going to show you guys an example of what a online game looks like with python it's something that I've personally created and then we'll get into writing a bit of code and in the next videos we'll do most of the uh serious coding okay so what I'm showing you right now is actually an online game that I created with python pame and networking and this is similar to something we're going to make obviously not as advanced uh but it works on the same principles so essentially I have what is known as two clients now if you don't know the way that any online game works is we have multiple clients connecting to one main location which is known as a server now right here on my screen we have two clients so this client on the left that my mouse is kind of going over that has this red uh highlight like where the Rook is or where I just am about to move this night is client one and then this black one over here so like you are black uh where I just moved this Pawn is client 2 now you can see in the background I have this command line thing going and it's sending and receiving information and this is essentially how a online game works and you might see uh whenever you guys play an online game it says waiting for server or connecting to server and that's because it's doing exactly that it's waiting to get a connection to the server and then grab information from that so that's the way that we're going to be doing things is using a client and server now I'm not going to be using any Frameworks that are pre-created like uh I know there's like twisted and some other Frameworks for python the only module we're going to be using that's external is p game and that's just to create some very basic Graphics uh okay so let's close this I just want to give you guys an example of what on online game looks like and you can see when I was moving something on one client it would move it on the other so let's close that up uh and let's actually get started with the tutorial oh did not mean to open that so I'm going to be working with py charm uh for this tutorial now if you don't know what py charm is it's an IDE uh to download it all you have to do is just go to the Internet type py charm and you can go here and click download whenever it loads up now if you guys don't want to use P charm that's absolutely fine you can do everything using the standard editor like idle you could use adom can use whatever you want um but if you want to follow exactly with the tutorial I'm going to be using py charm now the next thing we're going to need um other than IDE I guess you don't need py charm is we're going to have to install pame now for 90% of you the way that you're going to be able to install pame is just by going to command prompt uh loading it up like this and just typing pip install pame and then hitting enter now uh if this doesn't work for you I'll put a card in the top right hand corner of the screen right now which tells you where you can go to install P game uh and I have a video explaining you exactly how to do this and if this command doesn't work for you you can follow that video and I'll explain to you how to do that so once we have P game then we're ready to actually start writing a bit of code so while I launch up pie charm right here and create a new project uh let me just tell you about I don't know some of the things we'll be going through in this tutorial Series so obviously we're going to be working on coding both a client and a server and I'm going to explain obviously exactly how those things work uh and how we can create them and then what we're going to be doing is we're going to be dealing with a bit of uh server like Administration if you want to say that so actually deploying things to an external server um installing impend installing dependencies uh working with like a Linux server to deploy our game to and that'll be at the end of the series that we do that right now we're just going to be working with what's known as Local Host which means that we're going to be doing it on our own network so right now the games that we create are only going to work on our uh what do you call it against people that are on our Wi-Fi or on the same network as us and then later it'll work against anyone in the world that has uh that client downloaded okay so let's just create a new project here my new project I'm just going to say is tutorial uh let's say Network tutorial one or something uh and just as a what do you call it here just letting you guys know I did actually mess up my thumb a little bit it's kind of swollen so if my typing is not the best that is actually my excuse for that so now that I've got a new project open I'm just going to create a new python file let's just call this tutorial one actually let's call this client okay and just save that as okay because that's all we're going to be coding in this video is just a very basic client uh okay so now we've got client so what I'm going to start off by doing is creating a configuration for my client and keep in mind if you guys are using something else you don't have to worry about what I'm doing with this pie charm specifics this is just the way you have to set up a project in uh py term so I'm just going to set a client I'm going to go to script path Network game client okay apply okay now quick side note all the code that I'm about to write is available on my website Tech with.net usually I have as well as that a text based tutorial version I'm not sure if I'm going to be able to write the text based tutorial while um this first tutorial is out but you will see it on there at some point import tutorial import pame uh but yeah all the code will be available on there in case you guys miss something or something's not working so we're just going to start by importing P game and make sure that that's working once that's working we're going to create a window so to do that we'll just say win equals py game uh do display do update or what am I saying py game. display. setor Capt setor mode wow bit tired today guys and then in here we're just going to type width and height and then we're going to create these variables so we'll say width equal 500 height equals 500 okay so there we go width height win and now we're just going to set up a few Global variables that we're going to have to use after we create a caption so let's just say py game. display. setor caption and then here we'll just give it a caption let's just say client okay all right so now let's set up a global variable that we're going to use and what we're going to do for this Global variable is it's going to hold um the current like client so we're going to say like client number and we'll just start by making that zero but we're going to increment that based on like once we connect to the server which we'll do later okay so now that we've done that uh there's a few basic things this is what we always do for like a p game project or whatnot just going to Define redraw window okay and in here all we're going to do is just py game. display. update like that and we'll also fill the display before we do that oops didn't mean to do that uh with win. fill uh and we'll just pick a color in this case I want to do white so we'll just 255 255 255 okay now yeah I just realized this is actually going to be a lot harder type than I thought because my thumb so just excuse me guys if I'm making a few mistakes here okay so we got our redraw window now and what we can do next is we can um code our main Loop so I'm going to say Define Main and in here I'm just going to create a game Loop and this is going to run continuously while our program is going and it's just going to be what's checking for Collision checking for events can constantly asking the server for information and you guys will see how this works in later videos more so we're going to say run equals true and in here we'll say while run and we'll just set up some very basic things that we always do for pame so for event in py game. event doget okay and then all we're going to do is say if event. type equals equals py game. quit with all capitals then we will simply do pame do quit like that uh don't need a semicolon and I guess we can say run equals false as well okay uh for event that looks good and then what else we'll do in here is we'll just call that redraw window function so redraw window like that now what I'm thinking we should do next is probably set up a class for our character okay now our character is going to be just the only object we're working with right now and it's just going to represent like a rectangle that moves like left down up right around our screen and I guess we'll do that all in this video moving that character around and then we'll connect it to uh the server in the next one so let's create a class and we'll do that up here and we'll say class player uh like that okay so we'll give it a nit function and if you guys don't know much about objectoriented program and programming and you want to learn I do have a tutorial series on my channel um that I would recommend you go through if you don't understand a lot of the stuff that I'm doing right now okay so XY width height will be what we get in here and this is just going to represent actually let's give it a color as well cuz that'll be good to have XY withd height color and yeah this will just represent kind of our player and what variables they're going to have so we'll pass these values in when we create a new player so self. yal y this is very straightforward self. width equals width and self. height equals height and finally self. color equals color so these are just our initialization here uh this is what we're going to use when we're drawing wrong the character when we're checking for Collision or stuff like that um and what I'm also going to do to save us a bit of time in the future I'm going to say self. rect equals and then in here let's do this okay so XY width height like that okay and this will just make it a bit faster when we're trying to draw our character so the next thing we're going to need is to find draw now in the draw method here we're going to take a window so we'll call that wi and all we're going to do is just draw a rectangle that represents our character onto the screen uh and it'll obviously be the appropriate color so to do that all we have to do is just say win dot oh no we don't have to do that we have to do pame do draw. rect standing for rectangle we have to first give the window so we'll give when we need the color so we'll do self. color and then we need a rect which will be self. rect okay and that's actually all we need to do to draw the rectangle to the screen now we need one more method we're going to use and this is going to be called move and move actually I believe yeah we don't need to do anything else in there right now uh as a argument sorry so for move what this is going to do is it's essentially just going to check um what do you call it if they press like left key right key whatnot how can we move them around the screen so the way that we can do this really basically essentially is just do py game dot uh what do you call it do Keys dog getor press I believe that's it it might be key m might be Keys we'll see we'll see if which one works so this is essentially going to give us a list of all of the keys um actually a dictionary of all of the keys and essentially each key is going to have a value of either zero or one now if one is true that means we're currently pressing the key if zero is uh there then it means we're not pressing the key so the way that this is useful as opposed to doing what we could sometimes do which is just check for events in here is if you're pressing more than one key at once it'll allow you to move like diagonally or whatnot okay so what we can do here now is we can just check if certain keys are pressed and then change the X and Y values accordingly so we'll say if um what do you call it oh I guess we should probably put this in a variable let's we say keys equals pame do maybe I feel like it's key we're going to go key for right now py game. key. getri press we'll say if keys and then py game. Kore left standing for our left Arrow key and that's all we need to do for that one and then we'll say if keys and then py game. K underscore is this should this be all capitals I think it should be uh Kore right and then the next one if Keys py game. Kore up and then our last one obviously is down and then we'll change our values accordingly inside of these if statements so py game. Kore down okay so left right up down so if we press the left Arrow key obviously what we have to do is subtract from our our x value so to do that we'll just say self.x minus equals self. Vel now V is something we need to Define so let's do that up here self. Vel equals and let's do a value of like three for right now okay so if we're going right we need to add to our X so we'll do this very similar so self.x plus plus equals self. Vel okay if I could type that correctly and then to go up we're going to subtract from our y value so self.y equal self. V and to go down we'll do self.y plus equals self. V and that's the way the coordinate system works in pi game our coordinates actually at the top left hand of our player or our screen so if we want to go down we have to add to it and then left and right is the same in terms of subtracting and adding okay so that should successfully move our player uh we could add like a jump and stuff in here another time but for right now that's all we need I'm trying to think of anything else that we could do right now um we should probably create a player object and drw dra that to the screen just to make sure everything's working so to do that let's create a player um should we do it up here let's do it right above our main Loop here okay so we're just going to say actually we'll do it inside the main Loop this will work better we'll say uh P standing for player just equals player and then we'll give it some values need XY with height color so for XY we'll just start them at like 50 50 and then for our width let's just do 100 by 100 so he's nice and big and we can see him and then we'll do a color of green so that would be red green blue like that so 255 for green and then what we're going to do do actually is we're going to type in here inert in redraw window we're just going to pass P to our uh redraw window so that we can draw him and before we do that we'll call p. move and what this will do is move our character based on what keys we're pressing so inside redraw window let's add a player um what do you call it argument attribute whatever you want to call that um sorry parameter that's the correct name and then we'll just say player. draw like that and we'll pass win in here which probably should be passed in here as well because we do use win quite a bit so let's do p let's do win and then P okay so let's run this now and see if I made any mistakes I likely did um process finished oh we never calling the main function so let's call this main function from down here so that we're actually executing that code that we wrote and there we go so now we have a little green square and you can see H interesting it's not working for me to move this around uh so let's check this one more time p. move what is move doing get pressed let's just add I want to add something here and make sure this is working so let's we're going to say clock equals Pi game. time. clock okay and then in here we're just going to going to do clock. tick uh and we'll do 60 FPS I just want to see if this is working if not I do know how to fix this um okay so we're not able to actually move this oh I know why so very interesting we are not updating this wreck but we are updating um what do you call it like up down left right so at the bottom here all we're going to do is just redefine our rect by doing self.x self.y self. width and self. height right now I'll really quickly explain why this eror was happening essentially we're defining rect up here based on the input parameters when we're creating our player so that means we're always just constantly drawing our rectangle in the same position because we're never updating this wre variable we're only updating like XY width height right so we just have to redefine a re variable every single time that we're moving which is fine and we can do that so now let's see and we can move our green square around the screen I actually quite like the speed this movement um so yeah so essentially in the next video what we're going to be doing so I'm wrapping it up here is we'll add an a little bit more to this client and then we'll start working with sockets so we can connect this up to a server and we'll start talking about all the networking aspecting then so if you guys enjoyed the video and are you excited for the next one please make sure you leave a like And subscribe and I will see you again in the next video [Music]