Python Online Multiplayer Game Development Tutorial

hey guys and welcome back to a new tutorial series 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 gonna start off with just the absolute basics and just get shapes for example like if I move a shape on my computer 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 so we'll start really simply by just getting everything 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 okay so what I'm showing you right now is actually an online game that I created with Python pi game and networking and this is similar to something we're gonna make obviously not as advanced 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 highlight look where the rook is or where I just about to move this Knight is client one and then this black one over here so like you are block where I just moved this pawn is client two 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 whenever you guys play an online game it says waiting for server or connecting the 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 gonna be doing things is using the client and server now I'm not going to be using any frameworks that are pre created like I know there's like twisted and some other frameworks for Python the only module we're gonna be using that's external is PI game and that's just to create some very basic graphics okay so let's close this I just want to give you as an example of what an 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 and let's actually get started with the tutorial no it did not mean to open that so I'm gonna be working with pycharm for this tutorial now if you don't know what pycharm is it's an IDE to download it all you have to do is just go to the internet type PyCharm and you can go here and click download whatever it loads up now if you guys don't want to use pycharm that's absolutely fine you can do everything using the standard editor like ideally you can use Adam use whatever you want but if you want to follow exactly what the tutorial i'm gonna be using PyCharm now the next thing we're gonna need um other than idea I guess you don't need PyCharm is we're gonna have to install Pi game now for 90% of you the way that you're going to be able to install PI game is just by going to command prompt loading it up like this and there's typing pip install pygame and then hitting Enter now 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 PI game and I have a video explaining you exactly how to do this and if this command doesn't work for you can follow that video and I'll explain to you how to do that so once we have PI game then we're ready to actually start writing a bit of code so while I launch up PI charm right here and create a new project 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 gonna be working on coding both a client and a server and I'm gonna explain obviously exactly how those things work and how we can create them and then what we're gonna be doing is we're gonna be dealing with a bit of server like administration if you want to say that so actually deploying things to an external server does stalling impending installing dependencies 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 gonna be working with what's known as localhost which means that we're just gonna be doing it on our own network so right now the games that we create are only going to work on our would 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 that client downloaded ok so let's just create a new project here my new project I'm just gonna say is tutorial oh it's a network tutorial Warner's name and just as a what he caught 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 gonna create a new Python file just call this tutorial one actually let's call this client okay and just save that as okay cuz that's all we're gonna be coding in this video is just a very basic client okay so now we've got client so what I'm gonna 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 PyCharm specifics this is just the way you have to set up a project in PyCharm so I'm just going to sit a client I'm going to go to script path now we're game clients okay apply okay now quick sidenote all the code that I'm about to write is available on my website tech with Tim net usually I have as well as that a text-based tutorial version I'm not sure if I'm gonna be able to write the text-based tutorial wow this first tutorial is out but you will see it on there at some point import tutorial import plugin but yeah all the code will be available on there in case you guys missed something or something's not working so we're going to start by importing pygame and make sure that that's working once that's working we're gonna create a window so to do that we'll just say when equals PI game dot display dot update all right what am I saying PI game def display dot set underscore caps set underscore mode Wow bit tired today guys and then in here which can type width and height and then we're gonna create these variables so say width equals 500 height equals 500 okay so there we go with height win and now we're just gonna set up a few global variables so we're gonna have to use after we care to caption so just say hug him but display dot set underscore caption and then here we'll just go to caption let's just say reliance okay alright so now let's set up a global variable that we're gonna use and what we're gonna do for this global variable is it's gonna hold be current like clients we're gonna say that client number and we'll just start by making that zero but we're gonna increment that based on like once we connect to the server which we'll do later okay so now that we've done that there's a few basic things this is we always do for like a PI game project or whatnot I'm just gonna define redraw window okay and in here all we're gonna do is just PI game dot display dot update like that's and we'll also fill the display before we do that oops didn't mean to do that with win dot fill and it will just pick a color in this case I want to do whites which is 255 255 255 okay now yeah I just realized this is actually gonna be a lot harder to type that I thought because my thumb's so just excuse me guys if I'm making a few mistakes here okay so we got our redraw window and what we can do next is we can code our main loop so I'm gonna say define main and then here I'm just gonna create a game loop and this is gonna run continuously Wow our program is going and just gonna 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 but more so we're gonna say run equals true and you here will say well run and it'll just set up some very basic things that we always do for PI games so for event in high game dot event dog gets okay and then all we're gonna do say if event dot type equals equals PI game dot quit with all capitals then we'll simply do PI game dot quit like that don't get a semicolon I guess we can say run equals false as well okay for events 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 gonna represent like a rectangle that moves like left out up right around our screen and I guess we'll do that all in this video moving that character around and that will connect it to the server the next one so let's create a class and we'll do that up here and we'll say class player like that okay so we'll give it an it function if you guys don't know much of an object-oriented program and programming and you want to learn I do have a tutorial series on my channel 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 X Y width Heights will be what we get in here and this is just gonna represent actually let's give it a color as well because that'll be good to have X Y width height color and yeah this will just represent kind of our player and what variables they're gonna have so we'll pass these values in when we create an eclair so self-thought y equals y this is very straightforward self dealt with equals width and self taught height equals height and finally self that color equals color so these are just our initialization here this is what we're going to use when we're drawing the character when we're checking for or stuff like that and what I'm also gonna do to save us a bit of time in the future I'm gonna say self dot rect equals and then in here let's do this okay so X Y width height like that okay and this will just make it a bit faster when we're trying to draw a character so the next thing we're going to need is to find draw now in the draw method here we're gonna take a window so we'll call that wind and all we're gonna do is just draw a rectangle that represents our character onto the screen 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 do that we have to PI game dot draw dot rack standing for rectangle we have to first give the window so we'll give when we need the color so to do self dot color and then we need a rect which will be self thought wrecked 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 gonna use in the Skippy Club move and move actually I believe yeah we don't need to do anything else in there right now as they are you mad sorry so for move what this is gonna do is it's essentially just gonna check what do you call it if they press like left key right key what not how can we move them around the screen so the way that we can do this really basically essentially is just by game dot what do you call it duckies dog get underscore rest I believe that's it it might be key mmm might be keys we'll see let's see if which one works so this is essentially gonna give us a list of all of the keys actually a dictionary of all the keys and essentially each key is gonna have a value of either 0 or 1 now if one is true that means we're currently pressing the key if 0 is there that 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 in 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 what do you call it oh I guess we should probably put this in a variable list looks like keys equals PI game dot maybe I feel like it's key we're gonna go Kieffer right now puggy M key to again so say if keys and then pygame dot k underscore 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 pygame dot k underscore this should this be all capitals I think it should be I can't underscore right and then the next one if keys pygame dot K underscore up and then our last one obviously is down and then we'll change our values accordingly inside of these if statements so pygame dot ok underscore 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 x value so to do that we'll just say self that X minus equals self dot Val now Val is something we need to define so let's it do that up here self dot Val 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 dot X plus plus equals self dot Val okay if I could type that correctly and then to go up we're gonna subtract from our y-values so self dot Y minus equals self thought bail and to go down with yourself about Y plus equals self though now and that's the way the coordinate system works in PI game our coordinates actually at the top left hand of our player where 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 we could add like a jump and stuff in here as 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 we should probably create a player object and draw that to the screen just to make sure everything's working so to do that let's create a player should we do it up here let's do it right above our main loop here okay so we're gonna say brush it we'll do it inside the main loop this works better we'll say P stand for player just equals player and then we'll give it some values need X Y width height colors so for X Y we'll just start them out like 50/50 and then for our width let's just do a hundred by 100 so he's nice and big and we can see them 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 gonna do do actually is we're gonna type in here insert in redraw window we're just gonna pass P to our redraw window so that we can draw him and before we do that we'll call P dot move and what this will do is move our character based on what keys were pressing so an inside redraw window let's add a player witty code argument attribute whatever you want to call that start parameter that's the correct name and then we'll just say player dot draw like that and we'll pass win in here which probably should be passed in here as well because we do use wind 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 process finished oh we not never calling the main function so let's call this main function from down here so 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 hmm interesting it's not working for me to move this around so let's check this one more time pede 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 go we're gonna say clock equals PI game dot time dot clock okay and then in here which gonna do clock dot tick and we'll do 60 FPS I just want to see if this is working if not I dunno how to fix this okay so we're not able to actually move this oh I know why so very interesting we are not updating this Rex but we are updating what do you call it like up down left right so at the bottom here all we're gonna do is just redefine our erect by doing self dot X self dot Y self thought width and self dot height now I'll really quickly explain why this error 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 up this rect variable we're only updating like X Y width height right so we just have to redefine our rect variable every single time that we're moving which is fun 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 so yeah so essentially in the next video what we're gonna be doing is I'm wrapping it up here is we'll add 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 aspect then so in this tutorial we're going to be working on coding the server and that in the next video we're going to be connecting this client that we made in the last one to that server and then sending information to and from the server so let's get started and let's create a new file that is gonna be our server file so I'll just call this one server GUI and then in here we're just gonna have to import a few things and I'll talk about exactly what they're gonna do for us once we start using them so let's start by importing sockets our socket then we can import underscore thread and we'll also import OS ok so actually not OS or sys that's all we need for that so what we're going to be doing like I've talked about is we're going to be using sockets and threading to handle connections to our server and essentially what that means is we're gonna set up a socket and it's gonna allow for connections to come in to our server on a certain port so we're going to start by just defining server which is gonna be a string and port which is gonna be a number now for port you guys probably know what ports are you might have heard them before for example like a common port you would use on or a common port that is used like on your router would be port 80 and that is for HTTP connections there's also a port like 443 there's there's tons of other ports that have distinct uses but there's also a ton of ports that don't have any uses and that are just left open for programs like this or for different things to be used for so what port I'm gonna use which is typically open it depends on like what route are using and your internet connection but typically a port that's open is five five five five so we're gonna use this port to connect to and from and it's just a safe port to use as opposed to trying to use another number that we might not know if it's being used for something else or not okay so once we've done that we've created a server and create a port what we're gonna do is we're gonna set up what's known as a socket okay and we'll talk about exactly how this works in a second but we're just gonna say s equals socket dot socket and then here we're gonna type something that's probably gonna mean nothing to you but I'll talk about what I mean so it's socket equals AF underscore eye net okay and then socket dot sock stream like that all right now these are just the types of connection so since we're going to be connecting to a I P v4 address which again we're gonna keep talking about all this stuff as we go through in case you guys are unfamiliar with networks this is the type are gonna have to use and sock stream just I believe represents like how this server string comes in I could be wrong on that but this is the type we're gonna use and for any kind of applications like this this will be what you use for your socket okay so we're just initializing that and now the next thing to do is to bind our sir and our port to the socket so to do this we need to do a try and accept and the reason we do this is because like I talked about we don't know if this is actually gonna work initially doing it there could be in some instance this port is already being used for something and if that's happening that means that this is gonna fail so we need to try and accept this so it will accept what do you call it error as e so let me say socket dodged error as E and we'll just print that out to the screen just so we know why we're not working there otherwise what we'll do is we'll say s stop bind and then here we're gonna put server comma ports okay so will bind to whatever IP address we'll put in here to this Gibbon port okay so I hope everything's making sense so far essentially what we're doing when we do sockets is we're setting up a connection or we're using a port on our server on our network it's gonna look for certain connections and then we'll be doing this on the client side as well will be binding or not enough of you binding will just be connecting to a certain server and a port and then since we're connecting to that this server script that we're gonna have running will see that connection and handle it in some way okay so now that we've done that I'm trying to think what else we have to do okay so what we're gonna start by doing is we're gonna start listening for connections so we're gonna do s don't listen now s don't listen essentially just opens up the port so now we can start connecting to it and having multiple clients connecting and whatnot so in here this actually takes one argument now it's optional and if you leave it blank means it'll allow for unlimited connections to happen now depending on what kind of program you're writing is what you're gonna do for this now for me I only want two people to be able to connect to my what do you call it yeah to my server so we're just gonna do s dot listen to now this might actually be one cuz it might be like zero one but I think - maybe the correct thing so the rest I'll listen for now and then we're gonna do is we're gonna print after we listen I will just say waiting for connection and we'll say server started or something like that because once we get to this point we are running the server and everything actually is working like we're listening for connection we're ready to go okay so the next thing we're going to do is we're going to define something known as a threaded function okay and we'll I'll talk about again what this means but let's just do threaded threaded underscore client for now and I'm just putting you don't actually have to name it this you can name it whatever you want I'm just putting threaded here just so we know this is threaded and then it's gonna take one argument which is just going to be Co a 10 which stands for connection and let's just pass in there for right now so the way that threading works actually let's let's do the threading and then I'll talk about how it works says I'll probably make a bit more sense so let's do a while true down here okay so once we set up our server our port we bind it doing here we're starting to listen waiting for connections starting the server then what we're gonna do is we'll be get put into this while loop and what this while loop will do is will continuously look for connections okay because right here we're just listening like once right to see if anything's on that server report but down here we want to continually try to grab connection that see if somebody connected and if it does then we want to print something to the screen or we want to send information or we want to start a new thread which we'll talk about in a second so in here what we're gonna do is gonna say connection which Co n N and then ad R equals and then s dot and then we'll say accept and what s not accept is gonna do is it's going to will accept any incoming connections and then it's going to store the connection and the address and the connection is by the way an object representing like what's connected the address is going to be an IP address in the variables okay so if we get a connection what we'll do is we'll say print connected to okay and then a TR and this is just gonna show us what IP address is actually connecting so we can have a look at that and then what we're gonna do is we're gonna do start underscore new underscore thread and then in here we're going to do what was that name of the function that we had was threaded clients okay and I believe we do comma and then in brackets here we do Co n like that okay so start new thread is there a reason that's not working give me a sec guys I want to see why oh that's why so up here instead of saying import thread we're gonna say from underscore thread import star okay and not just gonna make it so we can just do this start a new thread thing and you know what I don't know if we're gonna need this sys but let's just leave it there for now okay so let's talk about what writing is gonna do so essentially the way that you guys are used to programs working I'm assuming unless you have some familiarity with threading is that I say we're in this while loop right and we were to call the function threaded client well before we continue going with this while loop we would have to wait until this function was done running or in other words we return back from this function some value or for example like he does like x equals five we would have to wait for this x equals five to execute and then it would come back in this while loop and keep going now we don't want that to happen because we're gonna be having multiple connections going at once so what we want to do is we want to start at what's called a thread and a thread is just another process that's running in the background so that just means when we do start a new thread and we do threaded client it's gonna run this function but it's not gonna need this function to finish executing before it continues the while loop so this is gonna be running in the background as like process two while process one is still running and still going so that means say we connect to a hundred different things we're gonna have a hundred different functions running so a hundred different threaded clients on the stock or like keep going and then what we're gonna have is this while loop still continuing to go what did I just do still continuing to run to look for another possible connection you guys will see more how this works but essentially just means this will run in the background and we don't have to wait for it to finish executing before we can accept another connection not that's the basic kind of wait that works so now let's start working with threaded client and then we will test the server out and see if it's working and then obviously in the next video we're going to connect to it and do all the connection stuff okay so in here threaded client so what should happen when we connect to a client well we're gonna have to do a while loop in here sorry I said Wow true because we want this to continually run while our client is still connected okay now what we're also gonna do is we're just gonna say reply equals blank like that and much copying from my other screen because this one is a bit finicky I don't mess it up we're gonna put a try in here and we're gonna say is we're going to try to receive some kind of data from our connection okay from whoever's connected we want to receive some kind of data so what we'll do is we'll say I believe it's s con dot receive that might be right yeah I think that's right and then here we're gonna put the amount of bits okay now if you guys know anything about computing you know like how what bits represents but essentially this is the amount of information we're trying to receive now if you're getting an error when say you'd like do this and you connect up and you get some area that says woody call it like object was true on store like you're getting any errors just increase this size okay and you can just do that by like putting this like times eight or something just note that the larger this size is the longer it's gonna take to receive information and that's obviously because the more information you're getting the longer it takes to send that over the server so 2048 bits is not a lot it doesn't take very long it happens almost instantly but if you bump this number up to a ton then it will take longer to do that okay so data I'm going to say reply equals and I'm going to say data dot I think it's actually string D hmmm let's see this Oh da da da decode cuz it'll be in that bad object that Dada decode and then here we gonna do u TF comma 8 now the reason we have to do this is because whenever we're sending information over a like client-server system we have to encode the information and you'll see that in the next step that we're gonna encode information before we send it back to the client but that means that we're receiving encoded information so to actually be able to read it like a human readable string we need to decode it first so it's really easy to do that we just do decode and we're just giving the format which is utf-8 okay so reply equals that and then we're gonna say it's gonna say if not data we're going to print disconnected okay and then we're gonna break and this just means if we try to get some information from the what decode the client but we're not getting anything we're gonna disconnect and we're gonna break and that likely means that we will disconnected from the client or the clients left or something like that so instead of continuing to run this while we've been trying to get information from a client that's disconnected we're gonna break this is just kind of a fail-safe to make sure you don't get into any infinite loops and it's also gonna show us if we're running into any issues with like receiving the data and decoding it which we'll talk about later okay so otherwise so if we are getting information all we're gonna do is we're going to print received is that how you spell received maybe and then we're gonna put what do you call it rip fly okay I didn't mean to do that let me see if I'm spelling this right I have known to get received reply so this just means we received from the client this reply let's print it to the screen and see what it looks like and then we're gonna print sending : and will this printer fly okay and then we'll talk about this again in a second why does this keep happening okay reply next now after this if not data break out what we'll do down here is when we say con dot send all and we're going to send STR dot encode reply now again remember that since we're sending information over the server we have to encode our information so all this is gonna do is just encode our string reply into a bytes object so that means when we read it in from the client side again we'll have to decode that information it's kind of annoying but I mean it's a security thing right so now we're just gonna accept I guess what it what kind of error would it even be I don't even know if there's gonna be any errors if we run into anything let's just break just to make sure that we're not you know getting in that infinite loop or we're not gonna ruin the program by doing that okay so this is actually about it for our server let's see how much time we're out 13 minutes okay so now what we need to do is figure out what this server number is and then we can actually test it and see if this is working so what we're gonna do now is we're gonna find this server number not to do this we're gonna be doing this over localhost okay that means that arc we're only gonna be able to connect over our local network meaning that like anything on our Wi-Fi network that can see each other that'll work fine but as soon as for you outside that network it won't work so we're gonna be using what's known as local IP addresses so to find the local IP address of the machine you're currently on you're gonna go to command prompt in the bottom left and then you're just gonna type IP config okay now some of you guys are probably freaking out because you can see my IP address right now this is a local IP address and that means that it is locally assigned to my network no one outside of my network can see this IP address or companion or cândido us it or anything like that okay so it's perfectly fine if you guys see this address or if other people know what this local address is good just as a note so we're gonna do is we're gonna take this ipv4 address so I'll just copy that and we're gonna paste that inside of the string here okay so 10 to 11.2 5207 is mine now yours likely is like 192.168.1 like a massive network usually they use 10.10 like as the default gateway which is what they're using so my IP address star to the 10 yours likely starts with 192.168.1 or dot like five or something like that and then the rest of it okay so that's the address we're going to use and this is going to be our server address so whatever machine that you're gonna be running the server script on that's the address you want so say you want to run this server on your laptop and you want to run clients on like your PC and your Mac or something like that then you want to make sure you get the IP address from your laptop and you're putting it in that script okay and we'll talk about more of this in the next video and we actually connect to it okay so now that we've done this I probably made a mistake but let's actually just create a configuration quickly for server and run this and just see if we're getting any errors as of now now it is worth noting that we're not gonna be able to connect anything yet so there's not really gonna be much we can see or really do but for now let's just test this out so let's have server let's run this and you can sees waiting for a connection service started so it's actually good if you're getting this string of text everything is currently working in the next video we'll probably have to debug a little bit once we start connecting to this but for now that is the main server script now I'll briefly just talk about before I end this video how it's gonna work in terms of running the server script and running the client script the server script always has to be running okay so whatever you're trying to connect you have to have first run the server script and then you can run multiple client scripts from wherever on the network you want now the server script has to be running on the machine that the IP address is like this little string here okay it has to be running on that machine and you can run a client script on the same machine that the server scripts running and you can run multiple client scripts on the same machine so like for example what I'm gonna do to test this in the next video is I'm gonna run the server and then I'm gonna run to clients on this machine and we'll see that it like is moving back and forth for them so what we're gonna be doing in this video is we're gonna be coding the kind of client side of this so connecting to the server I know we already coded a client but we're gonna code like the network aspect of the client so that it can connect to the server it's not as much code it's a bit more straightforward and then we're just gonna test out sending very basic information to the server and hopefully getting some back see if that's working okay and then in the next video we're gonna be connecting this so like the little user interface we created with moving that block around in the first video we're gonna be connecting that so that we can have multiple clients running and we can see like different blocks moving on each screen okay so that will involve a bit more work hopefully by video 5 we'll have like a fully working kind of game that's working over the network okay that's the goal so within this video I just want to start by saying on this server class here or sorry server file I did actually forget two lines of code in the last video so after this except break in threaded client just need to add this print lost connection and then connection dot close all this is doing is once we break out of this threaded client we're just letting the we're just gonna print this to the console so we can see what it looks like and then we're gonna close that connection so that we can possibly reopen it in the future okay really straightforward that's all you gotta add so just make sure you add that before moving on okay so next we're gonna do is we're gonna create a new file and I'm gonna call this network okay now you don't have to put what I'm going to in a new file it's just a lot easier so that's why I'm gonna do that so soon network and in here we're gonna import socket now what I'm gonna do is I'm just gonna code a class it's gonna be responsible for connecting to our server this just makes it like so I can reuse this class in the future and you guys could reuse this class in the future and it's just a bit cleaner and nicer and this way I like to do things so I'm gonna say class network again call us whatever you want and in here we're just gonna set an initialization function will take actually as Network do we need anything in network no I think we'll just leave like that so we're gonna say self dot clients equals socket dog socket it's gonna be the exact same arguments as last time so it's a socket dot if' net I think is that what it is AF underscore net AF underscore inet okay and then we'll do socket dot sock stream like that okay now we're gonna define the server and the port again so self dot server equals self thought port equals five five five five now for the server this again this number has to be the same as the one you used in the server what do you call the server file here so no matter what like no matter where you actually are like what client you're using this number is gonna stay the same because this is the server you're connecting to it's not the clients address we don't actually have to define the clients address anywhere it'll automatically get that for us okay so what we're gonna do now we have clients server port we need to do this so I thought addr equals and then we're gonna say server so self thought server and that self dot port in here okay and then self dot way decode self thought ID is gonna be equal to self dot connect okay now you guys actually let's just do self duck connects right now and we'll talk about why I was gonna add this ID later once we add that functionality the server again essentially I wanted to have an ID that was returned here alike that was stored in this network object just because we are gonna have to like be sending an ID to each of our clients so they know if they're like player one or player too but we'll do that later because we don't really we can't really do that yet okay so we've called this connect method so we need to write that now so let's say define connect okay and in here I believe we should probably be given actually like it's probably fun just use self right now what we can do is we can say self dot clients dot connect okay and then if you renew self dot addr now we're gonna throw this in a try and except just in case you know this isn't working so we say try so accept and it's a renew socket error let's say accept and we'll just pass right there okay just in case this doesn't work so we'll try this we'll try to connect accept pass now once we actually connect what we're gonna do is we'll return I'm just looking out the screen right now self-taught client receive and then we'll do 2048 dot decode okay so what this is gonna do I'll talk about this because it might be a little bit confusing is when we connect we want to actually send some kind of information immediately back to the object that connected to us so like for example it's going to I didn't mean to close that what's going to server here and you can see when we initially connect we're not sending any information until we receive something now that's fine but when we connect we should really send some kind of like validation token or like ID back to our network object or back to our client so what I'm gonna do in here that looks like calling dot send okay and then in here what we're gonna type is let's see what should we really type here uhm STR dot in code then here we'll say connect it like that okay just so we know that we did indeed connect so that means if we set this equal to a value so self thought I don't know let's say ID equals self dot connect what'll happen is when we connect will return that string connected so this will get connected and since it's encoded we need to decode it obviously so if we want to print actually in here self got ID it should say like connected ok let's see if that works ok so now that we actually have that let's see if we can connect to the server and then we'll deal with sending information from the client to the server as opposed to just getting it from the server ok I know it's a bit confusing right now understand figure out the best way to do this so let's try this guy so we're gonna say N equals Network oldest type is at the bottom of the script we won't do this after will delete this just for testing purposes and then we're just gonna say actually that's probably all we need to do because it'll just print our ID ok so let's create a configuration for a network so new configuration type network in here and then select that path and then let's test if this is working so remember what I said when we're gonna connect right to our server what we have to do is first run that server script so let's run the server script here waiting for connection server started ok let's run this network script now invalid argument was supplied s don't listen to hmm ok so I had a quick look here I realized the mistake was I was actually running this server two times so obviously that's not gonna work for us so we can put two back in this listen I'm not sure if you guys will see if I left that in the video or not but let's go to network and we also need to change this to AF instead of I F I don't know why I typed I F I've literally set AF when I was typing it but that's fine and we have server I'm actually running it right now so make sure you guys run that and then let's run that we can see if this works ok sweet so I know it doesn't seem like much but you can check here if we go to server it says connected to and then gives us that address is also printing out some other thing that I honestly don't know what that means and then saying disconnected and lost connection sweet that's actually really good and that means that where everything is working and you can also see that we have connected being printed here so that means when we connect to the server we're actually getting the value that is sending so we're getting this connected and we're printing it out decoding it all fine so that's really awesome so now the only next step is to actually send information to the server and keep like a loop going like sending receiving sending receiving sending receiving now let's actually just test if I run this again you can see again obviously it's working again so this is the server just continually is running I don't actually have to stop this unless I want to make modifications to it so let's just keep that running for now and let's add something to our network class so in our network class we're going to define a method that's gonna be sent now this method is gonna be very useful later on because it's gonna save us a lot of time so in Santa bridge can't take a string which is gonna be data ok and all we're gonna do in here is we're going to try to self dot client dot send and we say data STR actually dot income Donna and then we're gonna get a reply from that service we're gonna say return so exact same thing that we're doing here self-thought client I receive 20 48.2 code and will accept and I believe this is a socket error yeah the socket cut error as eat and just print e so if we get into some error we're you know either we're sending or we're receiving it's not working let's just print that Arab to the screen so we have a look at what that really means so now let's do test and try to send information to the server and then get something back okay now the information that we're getting back should just be the same information because that's what we have in server we're just gonna send exactly what we got right back right so doesn't make sense right now to do that but we'll talk about like what we can what valid information we can send how to send receive information in the next video when we connect up the client to the thing okay so what we're gonna do is gonna say and not send and we'll print and not send okay and we'll print and not send again and let's just send like a few bits of information and see if everything is indeed working ok so n dot send and then in here you let's just type hello and we'll type working okay and see if this works so we have actually we should have yeah server is working well let's run our client and you can see we get connected hello working and if we come here it says received hello sending hello received working sending working so that's awesome that means our network class is working sending information receiving information is working server is working and now the only thing that's left to do essentially is to connect that up to this so use this network class and some meaningful way here and then to actually store information on the server and then send that information to multiple clients which we'll doing in future videos what we're gonna be doing is we're gonna be hooking up our graphical client to our server so that we can send information back and forth and ideally at the end of this video what we're gonna have is we're gonna have two rectangles on each client so I like two clients running and when you move the rectangle on one client it moves on the other and vice versa okay so you guys will get the idea when we go through but there's a little bit of work we have to do and we're going to be modifying a few things within a lot of the files you've already created so just make sure you guys are paying attention and again if anything is going wrong feel free to download all the code off of tech with Tim net it'll be available there and it'll be exactly the same code that I'm writing right now okay so first thing we're gonna do is in this network class we're just gonna delete a few things so this testing stuff we don't need anymore this print statement for the self that ID we don't need that and we're actually gonna change this self dot ID to be self thought pause okay and you guys will see why we're doing that in a second and we're gonna add one quick method in here and it would you guys say define gets pause okay and all we're gonna do here is just return self thought pause alright and again we'll you'll see why we're doing that but I don't have to come back to this Network class so we'll do that right now okay so from inside our client now what we're going to do is we're going to import this Network class because we're gonna use it in here so we're gonna say from network import network and then in our main function down here what we're gonna do is actually above player we're gonna say and equals Network okay like that and then what we're gonna do is we're going to say start pause equals n dot get pause so essentially why I'm doing this is because when we first connect to our server what I want to happen is I want it to return to each of our clients the starting position of their character right or of their cube okay because it's going to depend where they're starting based on if their player one or if their player two so that on the client side what we're gonna do is when we initially connect to the server which is what we're doing when we create this network object we're connecting to the server we're gonna get that starting position and then for creating our own player we're going to use that starting position to determine where we're starting so the position is gonna come in as a topple all right and we'll be coding all this on the server side in a second but it's easier just to go through each file rather than going back and forth it's gonna come through as a table whether it look something like this so it'll be like 50 100 okay so what we're gonna do is you're gonna read this top line because it's actually going to comment as a string like right you'll see how it comes in we're gonna get the two aspects of it's like the x value and the y value and then we're gonna use that inside of this player initialization to accept the initial position so that reminds me what we're gonna be doing when we're sending information to the server is we're gonna send it using string data right and that's what we were doing in the last video is we were sending everything with strings so we're sending like hello and then we were decoding in and coding it now this is not the only way we can send information we can actually send information with objects and I'm gonna show you the advantage of doing that in the next video but for now we're just gonna send strings so since we're gonna be sending strings the strings that I want to send our positions okay I want to from each client send the current clients position to the server the server is gonna get that position update it on the server side and then send the other clients position back to the client you guys will see how it works in a second actually let's see if I can do a quick drawing to illustrate this because they'll make things a bit easier okay let's I don't know why I had this let's delete that okay so let's do a quick drawing so we're gonna have is gonna have client 1 and excuse me some drawing this with the mouse and client - I guess that's gonna be one and this is gonna be - all right this will do it as a red box is going to be our server and on the server what we're gonna do is we're gonna store positioned so select one has position like one - okay sorry this is harder than most guys and then client - we'll have position like three and one okay so it's gonna store these positions so what's gonna happen is when we initially connect client one is going to go to the server it's gonna connect to it and then it's gonna be sent back the starting position for the client okay so it's gonna be said okay so you client 1 so that means you're gonna start at position 1 - client - it's gonna connect it's gonna say ok we're client - so I need to send client two's position so let's send that back all right now let's say we've already connected quiet ones their clients twos there and we've set their starting positions what we're gonna do next is now we're gonna continually call to the client and update the position so what we're gonna do is say let's say we're working with client one okay what it's gonna do is it's gonna send its position to the server so it's gonna say let's just say pause okay it's sending its current position let's say that position is like four oh five sorry this is really hard with the mouse okay four or five what's gonna happen here is we're gonna say okay so you're updating your position so then it's gonna go in here it's gonna say okay client one will update your position to be four five like that okay and then what it's gonna do is instead of sending back this same position because we already know what the position is it's gonna send back the position of client - so it's gonna send three one and then on here we can draw that client so that it looks like it's moving right so we're getting we're sending our information and then in return we're receiving the other clients information now the same thing we're exhale with client two so if client two connects right and it's sending information it's gonna send its position let's say it sends the position one three okay that's its updated position so this is going to change to be one and three and then what's gonna happen is it's gonna say okay well we don't need clients twos position we need clients one sowhat's client one position well that is four or five so let's send four or five over to client two and then on client two we can draw four or five so you'll see they'll simultaneously be moving I hope that makes sense I just want to draw it out peace you guys know what I'm about to do in this video okay perfect now the only thing is we need to send these positions as strings so we're actually gonna have to implement two helper methods so that we can convert those positions which are gonna be tuples in districts and then we can also read the string into a tuple so what we're gonna do is we're gonna say define and I want to remember what I call this one we'll say this one is read underscore position which means we're gonna take a string value and we're just going to read the string in so we'll say STR equals Str don't split and we'll split it at a comma okay and you guys will see how this works in a second and then we're gonna do is we're simply gonna return int of string zero so STR zero okay comma int STR one so what we're gonna do is we're gonna take a string in that looks something like this if you have 45 comma 67 okay in in string value 45 67 we're gonna split it which means we're going to get a list that has the string 45 in the string 67 and then we're just going to convert those to int and return them as a topple so now we get that convert it to something that looks like this which is useful information that we can actually use okay so that's what read pause is going to do but we need to make one more which is going to convert that position into a string so we're going to say make underscore position and in here what we're gonna have is we're gonna take a topple so let's say top standing for topple and what we'll do here is we'll say let's see here return top actually STR of top zero and then we're gonna add that comma in so sorry I'm butchering my typing right now comma plus STR of top one and I hope that makes sense how we do that so that's returning the string value so we're reading pause and making pause and that's all we need to do for those helper functions okay so that means though that when we get the position initially from our server it's gonna come in in that string value right it's gonna look like 4567 so we need to convert that so what we'll do is we'll say read pause let's put that around and get pause because it's gonna return to us that string position so we're reading and now what we're gonna do is for our player we're gonna say start pause zero and start pause one okay and what this is going to do is just set it to the initial start position we're going to code all the server stuff after it'll start making a lot more sense okay now what we also need to do is we need to create a second player because we're gonna have to draw the first player and the second player on the screen right so we're gonna say p2 equals and we're literally just gonna copy this except for start position we're just gonna put it as 0 zero for right now and we'll update that in a second okay so we have p p2 and for now that's what we'll do actually once we can continue working in here so that we don't have to do anything else in here after we'll just code the server side so what we'll do now is we're gonna send our current position to the server right that's like the algorithm we've developed essentially we are when we connect we're gonna get the starting position we're gonna set that starting position and then every time after that so like every time the frame updates we're going to send our position and then get the other person so we're gonna say is we're gonna say P to pause is gonna be equal to and dot send okay and we're gonna send make position of and then we're gonna have to do in here is it's a little sketchy but we're gonna do P dot X P dot y now right because that's the position of our player the X and the y coordinate we're putting it in tupple form we're sending it to the function make position which is going to turn it into a string and then we're sending it to the server right okay awesome so I think that makes sense and then what we're gonna do simply is 4p2 we're going to update is its position so we'll say P 2 dot X is gonna be equal to actually + 2 dot sent but where you have to put around here sorry is make pause read pause because right it's coming in as a string so we need to convert this into our actual position so at P 2 pause is going to be P 2 position 0 and then P 2 dot Y is going to equal to P 2 P 2 pause 1 okay now the only thing that's left to do here is what do you call it draw P 2 and update P to s rectangle so what we're gonna do now is in the redraw window down here we're gonna put P 2 we're gonna go to redraw window or in say fillet here to here and then we're gonna do player 2 dot draw window because again it's gonna be a player object so that'll be fine and then last thing to do is just update the rectangle so what I'm gonna do is I'm going to say P 2 dot update and we're gonna go to player object now we're just gonna add this one function that is define update and then so you see I just made that self dot wrecked equals XY width height and then in here I'm just gonna say it self updates like this okay so I know these might be getting a bit confusing but we're almost finished just gonna do the server side and then we'll recap through everything what we've done explain things I'd kind of have to get this content out okay so define update so what we're doing again here as before we just had this line of code here so we're just replacing that with an update method that's pretty straightforward I hope that makes sense to you guys and that's just again so when we change the X and we change the Y value of p2 directly then we are updating the rectangle so when we draw it to the screen it's in the correct position okay so I believe that's all I have to do for the client side so now it's time to go to the server side and the server side is pretty straightforward now that the server needs to keep track V positions right it needs a whole player once position and players to position consistently so we can decide if we won't destroy that let's say like on a hard drive or if we wanted to store that in memory now in our case it's not a lot of information so we're just going to store it in the memory of the server right so what we'll do for that is we're gonna create a list and we're gonna say pause equals and just a blank list and this list is gonna hold the positions of our players now actually that reminds me we're gonna put two tuples in here and these are gonna represent serrate the starting positions of our players so we'll start with zero zero and like a hundred a hundred so player 1 will start at zero zero player two will start at 100 hundred okay and that's all we're gonna do for that little list there and then we're gonna do down here well this while loop is and we're gonna keep track of how many players have connected in our case we only want two to connect right and then we need to keep track of well those players so we're going to say is where I say current player equals zero now this is because when we connect we're gonna add one to this so that when we go back into this function it'll be you guys we'll see how it works but essentially every time we create a new connection so every time this we accept a new connection we're gonna add one to our current player so watch we do it at the bottom of the while loop we'll say current player plus equals one this is just to keep track of which player we're using so that we know what position to update what position to send to that player based on the connection right okay so keep track of current player and now what we're gonna do is when we start this new thread so this threaded client where else we're gonna pass another argument which is going to be the current player so instead of just passing connection we're also gonna pass player in here okay current player like that okay because that's gonna be important information to know all right so we're actually almost finished we just gotta update a few things so let's actually grab these two methods from our client class or client file and throw them on to server here so we're just gonna put them right above position because we're gonna need to use them read pause and make pause so now when we initially connect to our player right this is what happens when we initially connect the first thing that sent is this encoded message that is connected now in our case what we want to send is we want to send the starting position so how do we do that well we know what player we are we're either player 0 or either player 1 right because we hat when we have two players when we start with player 0 after player 0 connects then we do player 1 right so what we'll do is we're going to send pause player now that won't work because it's just a topple right we need to first convert that to a string and then encode that string and send it so it should go back here I want to keep this string dot encode so string dot in code and we'll say make underscore or pause and then we'll just put pause player in here and what that'll do is it'll convert it into string for us and then it will send that to the player for us right and then they'll read that string in compare it to position and update the position accordingly okay making sense hope so okay so that's how that works for player now the only thing we need to change now is what information we are sending every time this loop is running right every time we receive something from the player we want to send back the other players position so to do that what we're gonna do is we're gonna second receive decode so we'll get rid of this for now and now what we're gonna say is we're gonna turn this data into like readable a readable Topol right so to do that we are going to use the read position method that we've already created or function so say read pause Conda receive and we'll turn that into from that string like this right or whatever it was like 4567 we'll turn that into something that looks like this so that we can actually use it okay so now that we have that it's turned into that what we're going to do is we're going to update our current players positions we're going to say pause player equals data right because this is the position they sent to us so what's updated on the server so yeah so it's updated information okay sweet so we've done that now all that's left to do is send the other players position back to our client so to do that what we can do is simply say reply equals and we're just going to say pause or actually let's not do it up here let's do it down here I mean say if player equals equals one so if we're player one we're gonna send player 0th position right so let's say reply equals and then Thomas player or not pause not not player zero sorry and then else we're gonna send so say reply equals pause one okay so if we're player one we send player zero position if we're players here we send players one position right like I was talking about with that little algorithm we're gonna use okay and then instead of saying received and sending actually yeah we can say received replies sending reply or rulest a received data sending reply that should work fun okay all right now what we'll do is we're gonna send all the reply but the thing is our reply we need to first convert into a string so to do that we're and say make underscore pause write that function we've already created and then that should actually be about it now I'm probably made a mistake or two here but let's just test this out and see if everything's working so let's start by running the server and then let's run to clients and see if we can connect or if there's any errors okay so we've connected with client one let's run client two and let's see what happens so I'm on client one right now you can see that when I move my green square it moves on the other client kids go to the other one and when you look at this when I move it on here it moves on the other client so we have successfully set up and connected our two clients together now the only thing I want to change quickly is just the color of these so that we know who is whom like which square am on so to do this we're just simply gonna go well actually close the survey class so though I was gonna write it to an issue or server instance whatever it is what a client and instead of having the same color here we're just gonna change this to be 255 for player two and now I want to show you what happens because some of you are probably to be confused with what's about to happen here but it's kind of interesting so let's run server let's run client one let's run client two now notice that these colors are inverted now can anyone think of why that might be so Green right is gonna be your current player so right now I'm on here I'm on this where my mouse is and I'm moving the green square that's near the middle of the screen okay but notice on the other screen it's moving the red square that's because on your client it's unique to you so on your client you are green and red is the other person meanwhile if I go to this client and I start moving see green is me and red is the other guy right and he's not currently moving now if I wanted to move these at the same time I would just have to be running these on different computers or I would have to change like the arrow keys to move them and that's just because obviously right like if I'm pressing the arrow keys on here it's not gonna work on this client but if I were to load up my laptop and try doing it on there this would work fine as well there's a quite a few issues that we may run into when we're doing this so I've set this up essentially to be kind of like an example program or like an example problem to give you guys an idea of the way we go about doing things in terms of server and network but it's really not ideal the way that we've coded things so far now I did plan this for to do what we're about to do but essentially I'm gonna redo what we've just done in a much more elegant and nicer way that's going to allow for a better scalability of this program okay so what we're gonna do is I'm going to redo it here I'm gonna show you how we can actually send physical or not physical but like send objects to the server and from the server back to the client rather than just string data and then in the next videos we're actually gonna scrap all this code that we've written and we're gonna start from fresh and code like a networking game there's gonna be a lot more complex than just a few squares moving around the screen so that's my plan for this series let me know what you guys think of that I know it might be little bit frustrating to get rid of this code but now that we understand how a lot of this works it's gonna be really fast to rewrite it in a much more elegant way so what I need to first start by doing it's just taking this player class okay and I'm just gonna copy it into its own file so really straightforward I'm just go to new Python file I'm gonna call this player with a lowercase and then just copy that player class in there and just imports PI game up here okay import PI game now I'm just gonna go back into client we can delete this player class now and what I'm gonna do really basically it's just from player import player like that okay and that's the first step now remember I said we're gonna send objects so that actually means that we're not going to need this read pause and make pause thing and it's kind of annoying how we've had to well take that tupple object decompose it turn it into integers and then change object properties and then when we want to send something we got to put it into a string and we got to send it in just a pane and we don't want to have to do that especially when we're sending tons of different bits of information not just that same positional data right so we're actually going to delete this and we can delete this client number about there and we're gonna start just making some modifications in terms of sending data and receiving data so it'll start on the client side and then we'll go over the network the server side and fix some of that so wherever we see that read pause and make pause we can just get rid of that for right now we don't actually need any of that we're not gonna need this p2x stuff we don't need P 2 dot update well we'll get rid of all this for right now you know actually let's get rid of start position let's get rid of P and let's get rid of P 2 and we're gonna recode all this okay so actually um P 2 P that can stay there pita move is fun okay so we got rid of all that and you can see we've just cleaned up this file but and we'll start working with some more stuff in a second now what I want to do actually is go to this network file that we have and we're gonna start making some modifications in here as well so what we're gonna be doing is we're gonna be sending objects so that means we're gonna send like an instance of the player class and that's actually what we're gonna be sending instance of a player class to our server as opposed to sending like string data and then updating the object on or then updating the string data on the server then sending it back and then updating the object that's just a lot of work it's a lot easier just to send the actual object so we can do that using something called pickle okay now it's a weird module name but it comes default with Python and this allows us to do something that's called serialized objects and that just means we turn into byte information which is like all the zeros and ones send it over the woody codes send it over the network and then we can decompose that turn it back into an object and use it it's really easy to do that so what we're gonna do here is we're gonna modify a few things in our network class so first thing instead of having self dub pause we're gonna say self thought P okay this game equal to self dot connect and so saying get position will this to get P and then we returned self dot P okay and that's all we need to modify for that but now in the connect in the send we're going to change a few things as well so since we're gonna be getting object data what we have to do in the connect is we have to decompose that object data so to do that you do pickle dot loans okay now what this stands for is a sense for load byte data okay and we'll talk more about this as we keep going through but that's essentially what it means and same thing here in send instead of encoding this data what we're gonna do and I guess decoding as well is we're going to dump it into a pickle object and then send it so to do that we're gonna use sa pickle at least one pickle yet don't don't dumps like that and we'll just put data in there okay and then when we receive we'll do the same thing as before we'll say pickle dot loads and then we'll load that in so now essentially what we're doing is we're gonna be receiving an object decomposing that object getting the actual object not the bytes form of it and then we're sending it we're gonna first like what do you call it encrypt it like send it into that byte information and then on the server side will decompose that as well okay so we'll go through that but that's all we need for the network side so now let's go to server and start making some modifications so same thing here we no longer need this read pause and make pause functions we're not going to be using those and we don't need this pause list either we're gonna change this actually to be players and it's gonna be equal to two new players so notice that we're gonna actually store the player object on the server as opposed to on the client side and this is not only like safer because it means that the player technically can't really mess with the player objects they can only like do commands to update them but it's also just like it's gonna be a lot easier and you guys will see how it works we I said player and we'll do another instance of player and in here what we're gonna do is we're just gonna create two new players so here's a 0-0 50 50 and we'll give it a color in this case the first color will be red so we'll say red green blue like that and for the other player we'll start him out a hundred a hundred like before we'll be fifty fifty and then we'll make his color blue why not so I'll do that okay so now you notice that we're getting a little error for player here just cuz we forgot to import it so just say from flare import player like that and that's why I made this new file by the way just so that we'd be able to see it from the server side and the client side as well and then wherever we're doing this like send encoding stuff we're gonna change this so let's do that now actually so instead of con dots and instead of encoding some string information we're just going to send the player object so what we'll do is we'll say players like this and then player right so exact same kind of concept as before in that we're gonna send the initial like starting position of the player or like the but in this case we're just setting the initial player object which means any information that's stored in that player will be given to the client as opposed to just the position okay so next what we'll do is instead of saying data equals read pause and decoding we're gonna get rid of this dot decode and we're gonna put pickle dot loads okay and actually when I'm sending this player object my bad here guys we got to do pickle dot dumps okay and then we're just gonna have to import pickle up here so import pickle all right sweet okay so pick a lot loads pick a lot dumps and that is obviously instead of pause player equals data we're gonna say player players player equals data and again same concept as before what's going to happen is the what he called the client is gonna send us a player object we're gonna replace the existing player object with that new player object and then we're gonna send back the other player objects like the other clients okay so now what we're gonna do is just change these pause to be player or players like that okay same thing here employers and then when we send it back what we'll do is we will just turn it into a object right so we'll just do that pickle dog dumps and send it back so say pickle dot dumps reply like that and that should actually be about it so let's go back or sorry there's something we need to do in client so now what we're gonna do is essentially we've set up our network class so that we're gonna be able to send that object data we've set up the server so we're gonna be able to receive that object data we're gonna by the objects we're storing in the list here and then we're gonna send back the other ones to the other client so in clients all we have to do now is set up player 1 and player 2 and then send that data so really straightforward it's very similar to before what we're gonna do first of all just say p1 we're actually just P is is equal to n dot get P ok because in the network class remember what we're doing is when we initially connect so let's go back to server we're just gonna send the initial player object which is going to be whatever player it is so 0 or 1 so let's just say that this clients player object is gonna be and get P okay and then we'll say actually I think that's all we have to do for yeah that is all we have to do for that inside this while loop now what we're gonna do is every frame we're gonna send this player object which we'll be updating with P dot move and we'll just get the reply and say that that's p2 so we're gonna do is when I say p2 equals and then in this case we'll just say P dot or not P and don't send P and that's all we have to do and notice here that we don't have to do with all this like make what do you call it make pause read pause all that stuff and I believe this should be working if I didn't make any mistakes let's cross the fingers and let's try this out waiting for connection let's go to client one run that okay and client two running that and now notice that these rectangles are the same color and watch what happens if I move this red one see how it's red on the other screen as well now that already shows us one of the advantages of doing it this way is that we can store information like color as well not just position and if we want to store maybe like there was a text attribute on each of these players we could store that as well if we wanted to store more information in the player like a health or something like that be a lot easier to do that by just sending the actual player object that has like an unlimited amount of attributes rather than just sending a little tupple that has like five six or eight which is the position so the reason I went through the trouble of showing you the other way is to show you the massive advantage of doing it this way and just to give you kind of perspective if you're making something really simple and you don't use any objects that's how you can do it with string data but I think this way is a lot easier and we've just cleaned up quite a bit of code we've gone rid of a bunch of functions and moving forward this is going to make things a lot easier for us I'm pretty much gonna be gutting everything we already did we'll keep a little bit of it but we're just gonna really add to a bunch of that and just yeah we're gonna be gutting most of it and we're actually gonna be working to create online rock-paper-scissors now I know this sounds a kind of a lame game but let me show you because it's actually pretty complex and if you can understand how to make this game then you're gonna be able to understand how to make any other kind of online game because the principles are the same in terms of sending information waiting for players to go and there's a lot of different things and you might not think about that we actually have to do to code something like online rock-paper-scissors okay so let's this is client number one I'm just running another PI game window or PyCharm window with the server running on it and you can see obviously it's been oversized but it says waiting for player okay so I'm gonna launch another client and then excuse me you can see when I launch that it loads both of them up into the game and it says your move opponents your move opponents and currently it's waiting so I believe this one's player two and this one's player one so if I make a move here on let's say rock it'll lock in my move and says your move is rock and then over here it says obviously the opponent's move is locked in because it's like looking for this guy's move and now if he makes it move like let's say scissors then it says you win you lost and then it just resets and you can keep playing games now I'm also gonna be adding more to this this is just like the beta version I'm gonna have wins ties and losses keeping track and top hand corner and when you load in you're gonna be brought to a menu screen which will allow you to like start a new game or to leave or we'll add that later as we go but this is the main functioning game and you can see obviously it's working well tie game and it restarts this also allows for unlimited amount of clients to play so for example if I launch another two windows you can see these guys now have their own game going it's kind of difficult because I can't really get four on the screen but anyways if I go like scissors paper that works independently of these games and these games can kind of play at their own time which is really interesting and really cool and if you disconnect one of them it automatically disconnects the pair and that's just because obviously you can't play against no one right so yeah okay sweet so that's that let's start getting to the code okay so first thing we're gonna do is we're actually gonna code a game class okay and this is just gonna be responsible for holding all the information for our game that we need so for example did player 1 go yet 2 player to go yet what move did player 1 make one move did player to make are both of them connected to the server information like that and you guys will see how much information we actually need it's also gonna store things like keeping track of who won or who lost how many ties how many wins since we're gonna do with this game class so let's start making it so class game I'm doing this in its own file by the way just called game you are gonna need the end zone file because it's gonna have to be accessed by both the client and the server okay we're gonna define our initialization in here we're gonna take ID and say self thoughts p1 wedge equals false self dot p2 went equals false and obviously you guys know what this is gonna do it just gonna stand for if player 1 has made a move or not if player 2 is made a move we're gonna do self dot ready equals false if I could type that correctly we're also gonna add self thought ID so self that ID equals ID and this is just gonna stand for the current games ID so each game we create is gonna have its own unique numeric ID so that we can determine who is like what clients are a part of what game and whatnot we're gonna do self dot moves equals and then we'll just do none and not in here because currently the moves are none but we'll just store two positions so we can change that we'll say self thought wins equals and then 0 0 obviously this one is gonna stand for player 1 this one's gonna stand for player 2 we'll say self thought tie is equals 0 that's all we need for the anit so next one is gonna say get underscore player underscore move now what this is gonna do is exactly what it says is just gonna get I don't know how I added that there you're just gonna get the player move that we asked for so we're gonna take P which is going to be either a 0 or 1 and we're gonna do is simply return self dot moves and P and just remind ourselves we'll say that P is in the range of 0 and 1 so we're only going to take value 0 or 1 and then we're going returned a moose a move here okay and there's that's just to remind ourselves that we have to pass here or one obviously zero is going to represent player one and one is gonna represent player two okay next one play so this one's a bit more complicated not crazy we're going to take play we're gonna take a player and we're gonna take a move and what this is gonna do is it's simply going to update our moves list with that players move pretty straightforward so what we're gonna do here is we're just gonna say if player equals equals zero then what we'll do is we'll say self dot moves 0 equals move oh actually you know what let's do this sorry I'm just looking at my other screen right now we'll say self dot moves player equals move but now what we have to do is based on the player we have to update if p1 went or p2 went okay so what we'll do in here is if it's player one obviously we'll do p1 went equals true I'm gonna need a self before that and then we'll call we'll just do a little else here because it's not player 0 must be player 1 it will say self thought Pichu want if I could spell once equals trip so that will just keep track of if we've gone or not sweet next method this one's really easy it's gonna be called connected and it's just gonna tell us if the two players are currently connected to the game if they are it'll allow us to load in and that's how we can determine whether we should show waiting for player or not on the screen right so we'll say return self thought ready and that's just gonna tell us obviously if we're ready and that'll be updated from the server side which we'll do later next method define both went this is just simply gonna return if both of our players went so to do that we're just gonna say self thought p1 once and why can I not spell that word hand itself thought p2 went like that okay next one is winner this one is a bit more complicated but it's just gonna keep track of where it's actually gonna tell us who's won the game so if we call this method we're assuming that both players have gone we're gonna check their moves excuse me against one another and see if they want so we're actually gonna have to check nine possible cases because there's three moves each player could do 3 times 3 9 so what we'll start by doing is what I say p1 equals self dot moves 0 dot upper and that's here the reason we're doing this is because we just want to get the first letter of the move because the move is going to be stored as rock paper or scissors the string and it's just gonna be easier for us to type out for example R or s or what do you call it or P to check the moves as opposed to having to check the entire word so we're just going to get that first letter by doing move 0 we're gonna upper it and then we're gonna take that first leg we're gonna do the exact same thing for p2 except obviously we're going to need oh I don't know what I did there we're going to need moves one upper and now we can start checking to see who's won so we're going to stay to start winner is equal to negative one now that's because there could be no winner there could be a tie so if it's tied we're gonna say negative one if player one is the winner it's gonna be 0 if player two is the winner it's gonna be one okay so we're gonna do is going to say if P 1 equals equals R and P 2 equals equals Scissors what we'll do is we'll say winner equals zero because player 1 1 that will say L if P 1 equals equals S and P 2 equals equals R then we'll say winner equals 1 believe do another LF and I know this is tedious but this is the way you have to check for rock-paper-scissors I don't think there's an easier way to do it if you know an easier way let me know and P 2 equals equals R and if you guys don't want to type this you can always copy from my website check with Tim dotnet okay so say winner equals paper beats rock so beat winner equals 1 or 0 sorry we'll say L if P 1 equals equals R and P 2 equals equals P then winner equals 1 and we've just got two last ones to check here so we'll say L if P 1 equals equals s and P 2 equals equals our and then p2 is the winner so winner equals one believe that's oh sorry I'm gonna mess this up this should be P thanks so P rock rock paper scissors paper yeah when R equals zero okay LF p1 equals equals paper and p2 equals equals scissors then winner equals one and I believe that should be correct one two three four five six okay sweet and then the other cases are if it's a tie so if none of this is the case then they must have tied and then all we're gonna do is simply return winner like that okay and one very last method then we're actually done with this class we can move to something else is to find reset went and all this is going to do is say self-thought p1 went equals false and self thought p2 went equals false pretty straightforward and this is the game class I know I kind of sped through this but it's pretty trivial how this works we just need to get this out of the way so we can start coding some other stuff okay sweet so we've done this class next thing I think we want to work on is network so network actually you guys are gonna have to modify yours to look like mine now get P and what do you call it so this first half so an it and get P are gonna be the same as what we had previously the only thing this changes is connect and this end so in connect instead of what do you call it like unpicking an object so like pickled alt loads what we're simply doing is we're gonna just connect to the client like we did before but instead of unpicking it we're just gonna decode it I'm gonna say self dot client receive 2048 decode would return that value and that's because when we initially connect to the server what we're gonna get from the server is our player number which means we're either player 0 or reply 1 now that's important because that's going to determine where on the screen we're drawing certain things and how we're sending information back to the server and updating player 1 and player 2 right because technically each player thinks that their player 1 but each one needs to be assigned either a 0 or 1 by the computer so we know where to store information right okay so that's how we modify that just do D code instead of pickling sending I believe is the same except what we're gonna do is instead of pickling an object to send we're simply gonna send a string and we're gonna load an object so that means we're gonna send string data to the server and we're gonna receive back object data so when we receive something we have to pickle that loads it in but when we're sending it we just have to encode the string okay so just make sure it looks like this I don't think I need to go through this we've already done this for the past two three videos and that's the network class so game and network are done the next things to do our server and client now server and client are a bit more complicated so inside of server I guess we could do this first because it doesn't really depend on the client to work where the client kind of depends on the server we're gonna change a bunch of things so this is what it mine looks like now I've kind of gutted the entire threaded client I got rid of most of the stuff like most of the other stuff I just left this beginning thing so that the server IP the port the socket connecting listening waiting for connection so by the way some of you were saying you're having issues with FS don't listen you can just make this zero it doesn't really matter what's in here and some of you were saying like you're having issues just you can just delete it and type it in again and apparently that works that's what someone said so I don't know don't ask me about that but if you're writing it to issues do that okay so what we're gonna do now is we want to make it so you can have unlimited connections at once now that means we're gonna have to have unlimited games running at the same time so before what we were doing when we had those players moving around the screen so we were just wearing like player 1 player 2 and we just had a list that had two entries that's how we were doing that what we're gonna do now is we're gonna have a list that contains a bunch of different games and those games actually you're sorry it's gonna be a dictionary those games will be accessed by their ID and you guys will see how this works it's a bit complicated but just follow along and yeah so I gotta just open up my other file so don't make any mistakes here ok so what we're gonna do is we're gonna do connected equals set we're gonna define some variables we'll talk about these do games equals a blank dictionary and I D count equals zero so the reason we're adding these is games this dictionary is going to store our games so it's gonna have an ID as a key and the game as like a game object like this okay as the value this connected is just gonna store the IP addresses of the connected clients we're starting to set just so it's easier to access later I don't actually know if we use this we might but we'll see you okay ID count obviously is just gonna keep track of our current ID so that means what game we should recreate so we don't override games and say like two games have the same ID because obviously we can't have that happening okay so that's fine for that we're not gonna deal with anything threaded client right now we're gonna go down to our while loop and this is where we're gonna create new games based on new people joining or possibly delete games actually will delete games from threaded client so we're gonna do right now is when someone connects this this runs right and we run a new so like once we accept a connection everything after this runs so what we're gonna do is we're gonna say ID count plus equals one if you notice me looking away I'm just looking at my other screen to make sure I don't make any mistakes on this now what id count plus equals one is gonna do obviously is it's gonna keep track of how many people are connected to the the server at once because obviously right like once this happened we can except then we go down the while loop we start a new thread and then we wait for another connection so we're just gonna keep track of that what we're gonna do is we're gonna say P equals zero just standing for the current player we're going to say game ID equals and this is gonna be weird but just follow along with me we could ID count minus one integer division two now what this is gonna do is essentially every two people that connect to the server we're gonna increment game ID by one and what game ID is gonna be or every we'll say it's yeah well add it by one what game ID is gonna do is keep track of what ID our game is gonna be so like for example if we have ten people connected to the server we're gonna have five games right so that's what this line of code is doing for us it's keeping track of how many games or if we need to add a new game because obviously if we have like six people connected all of them are gonna be playing each other a seventh person connects well it doesn't have a game too giant we have to create a new game for it to join hopefully that makes sense okay so what we'll do next and say if I D count modulus two equals equals one and what this is gonna stand for is if you're gonna be player one or player two and if this happens is actually we need to create a new game because this means that we don't have a pair for our new player so for example like say this numbers three that means two people are already playing so though it's one person just connected so we need to create a new game that's what this modulus two is getting okay so to do that we're gonna say games game ID equals game game ID okay and I believe this actually speak capital so obviously start at the beginning of this I forgot to mention I import a game so from game import game that is important and yes actually what we're doing is we're just going to say that game ID which is that key in our dictionary is now equal to a new game so we can access that and add players to it and whatnot sweet so that works let's actually print out a message here and just say creating a new game dot dot just so that in our server we get some kind of output and we can have a look at that if something's going wrong so otherwise if there we don't need to create new game meaning we have let's say three people are connected so that second game already exists and another person connects well that person has to be a part of this new game so what we're gonna do then is ringside games game ID dot ready equals true now what this means is that the second player connected so there's two players now connected to our game so now we can say that that game is ready to start playing because both the players are connected so that means that they can will obviously play against each other right so that's what we'll do we'll set that dot ready equal to true and obviously we're storing all the games on the server side as opposed to on the client side and then we're going to say is going to say P equals one and what this means is player equals one and you'll see why we need to do this in a second ok so now we're going to do start new thread now notice insert new thread I added two new rameters pee and game ID so this means the current player so it's either player 0 or player 1 and the game ID and game ID is gonna stand for which game in this games dictionary are we playing in this threaded client like which one of our clients that's connected here is playing which game that's why we need that so let's pass that information so we have passed P which is either gonna be 0 or 1 like we have there and we're gonna pass game ID and then we'll have that up here and just remember that threaded clients one of these functions is continuously running for every single one of our clients so if we have a hundred clients we have a hundred different functions of this running in the background at the same time ok awesome so that's how about it's working inside our threaded client now excuse me I should take a break there inside of our threaded client we now need to add some things so the first thing we're gonna add is ID count we're gonna global ID count because if someone leaves our game or disconnects we're gonna need to subtract from that so we can keep track up accordingly like how many people are connected how many games are running and all that stuff ok now the first thing we're gonna do when someone can next to our woody called our server is we're gonna send them what player there remember what I was saying in this game class or in this network class sorry then when we connect we're initially just going to decode a string that's either going to be 0 or 1 to tell us what player we are ok so what we're gonna do is we're gonna send conduct send STR Dalton code Pete and I believe this should be actually string P like that so that we know if we're player to 0 or if we're player 1 that's the first step next we're gonna say reply equals a blank string you want to say a while true and this is where we're gonna start doing some more serious stuff in here so in the way that it's going to work in terms of sending string data from our client to our server is we're gonna send one of three different options we're gonna send get we're gonna send reset or we are going to send a move and the move is going to be like rock paper or scissors so if we send get what that means is we want to get the game from the server so we're gonna send that every frame we're gonna send get a string yet and then the server is gonna look and it's gonna say okay what are you sending your sending get alright we'll send you back the game that's how that's gonna work another option is reset reset means reset the game the game has finished both players played reset and that's gonna be sent from the client side because the client knows when we want to reset right the last one is a move same thing when the client makes a move so like rock-paper-scissors if they are a little out to make that move which will check on the client side we'll send that move to the server the server will update the game accordingly and then it will send back the game to the client and that's how that's going to work sweet so what we'll do now is going to say well true let's say data equals con dot receive and then we're gonna say 4096 and here instead of 2048 which you're using before dot decode the reason we're doing this is just in case we're sending too much information that is more than 2048 bits we want to just double this number so we can get more if you run into any issues that say like pickle data was true onst or like ran outta input just increase this number okay you can literally just do x 2 in here and that should hopefully fix the error if it doesn't work you can like x 4 x 8 and that should hopefully fix your error for you okay so now what we're going to say is gonna say if game ID in games now I'll talk about why we're doing this in a second we're gonna sit there and say game equals games game ID so essentially every time we run this while loop we're gonna check if the game still exists and that's what we're doing right so in this games dictionary we're seeing if this game ID which is the key to access the game is still there now why would we check that well if one of our clients disconnects from the game we're actually gonna delete that game from the what do you call it the games thing now what that's doing for us excuse me is not only like keeping track of our memory which means that we're not gonna continue Li keep creating games so like Sarah server ran for weeks and we never deleted any games then we probably rotten run out of memory on our computer right if we're playing a lot of games but it's also gonna tell the other client that was connected to that game that hey this game no longer exists that means the other person must have disconnected from it so we have to do something accordingly and go back to the menu screen right do something like that okay so that's we'll do there and then we're going to say in here is gonna say if not data we're gonna break this similar to before so I'll go through it a bit quicker we're gonna say else and now we're going to check the three different things that could have been sent right so we've received the data so we're gonna check if we got reset get or if we got a move so the first thing we'll check will save data equals equals reset okay then we're gonna say if data does not equal yet and then else sorry this should be an Elif Alec data it does not equal get else we'll do something else actually do we need an else no we don't you know okay so if data equals reset what we're gonna do is we're gonna say game dot reset right because we already have the game and if we look in here what resets doing is essentially it's resetting both players one so we can play another game really straightforward for that next one if data equals yet what we're gonna do is say game or if that it does not equal get sorry so if it didn't equal reset and it does not equal get well then it must be a move so it means we're either getting rock paper or scissors so we're gonna send that move to the game to update it so to do that we're gonna say game don't play and then we're going to do with the current player number which is P and then the move and the move is gonna be whatever this data is right so it'll be data okay and then otherwise so I guess after that um what should we do here we'll say reply equals game and that what we ready to do is going to be gone dot send all I'm going to say pickle dot dumps and not data sir reply okay and what this is gonna do let me just make sure I didn't rent any errors here is simply going to package up our game into that nice sin double form we're gonna send it over to our clients clients gonna receive it on picolit and then use it to obviously make moves and do different things and draw it to the screen and all that okay alright so I think that makes sense we can go through it really quickly what time we got 25 minutes all right so we'll go through really quickly essentially what's happening when you connect we're gonna check if we have an even amount of players or an odd amount of players if it's an odd amount of players when you connect that means we need to create a new game so we create a new game if it's not that means we need to assign you to a game so what we're gonna do is make the current game that only has one player in it ready we're gonna assign you to that and start a new thread when we start the new thread what's gonna happen is we're gonna send to the client what player they are either player zero or player one and then what we're gonna do is we're going to constantly receive string data from the client if the game still exists then what we'll do is we'll check if they're sending us reset get or remove they're sending us a move we'll make that move they're sending us reset we'll apply that reset to the game and then we're just gonna constantly send back to them the game object and now what we need to do is just really quickly add some else statements in here so that if some of this stuff doesn't happen we have like a catch for it okay so what we'll do here is we're just gonna simply say else break okay that should be lined up here and we're just gonna add a try and except up here so we're gonna say try and we're going to indent all this by just highlighting and pressing tab let's say accept and then pass I think that's yeah no not pass er accept and then break just in case you know something goes wrong with this data dot receive we want to make sure the server keeps running so we have that try and accept and then underneath this accept in line with the main function indentation what we'll do is if we break it out of this while loop we need to close the game and delete it so to do that is actually we're gonna print some on my wrong file here we're going to print lost connection and then we're gonna print what do you call it closing game okay actually we can print that game ID too if we won't see what game idea we're closing so said lost connection closing game game ID okay and then we're gonna try to delete games game ID otherwise we will accept and pass okay and then underneath here last thing we're gonna do is gonna say ID count - equals 1 and we're going to say connection got close now that I actually think about it we should probably put this closing game only in this try after we delete just so that we don't we only close the game once we don't say we're closing the game twice ok so what we're doing down here essentially is if we break out of this while loop so for example if the game no longer exists we're gonna break if something goes wrong with this getting data so like the player disconnected we're gonna break we're gonna say lost connection we're gonna try to delete that game the reason we have this try here is because if both players disconnect at the same time one player will delete the game before the other so if we try to delete a key that doesn't exist we're gonna run into an issue so we try that if that works we will say print closing game and then we'll say that game ID otherwise we're gonna pass we're going to subtract from the ID count and we're gonna close the connection sweet so we're rolling we're going pretty fast here now all we got to do is code the client now this is probably the most amount of code I think it's about a hundred lines it just is a lot of drawing stuff okay so I'm in take a break we'll be back in one second and we're gonna code the client all right so I'm back now and we've got about 150 lines to write for this file it's pretty tedious because a lot of the stuff is to do with the drawing like we need those buttons to be working we need like all that text to be showing up so that's like 90% or not 90% but like 70% of the code about to write is just gonna be cosmetic stuff but I mean what do you want to tell you that's what we need to do if we're gonna make an online graphical game right so let's start by just coding a class and this is gonna be our button class just that when we have those three buttons you know it just makes things easier so we're gonna do our own it when we need to be an itch I'm gonna go for text sorry I'm coding in the wrong file text XY and color and we're just gonna say that the width and the height will be uniform in here and we'll just make it the same for all of our buttons we're gonna say self-thought tax equals text self-taught x equals x sellout y equals y and self the color equals color okay sweet we also add a width and a height here so we'll say self dot width equals 150 self-thought height equals 100 and feel free to play with these numbers it's just what I decided by the way guys just really want to say this I'm not focusing on how good this game looks I know it looks like crap but you guys I know can go through and tweak the colors and tweak the positions and all that I just don't want to focus on that because I want to get the hard stuff out of the way in the tutorial okay so let's do a little draw method in here pretty straightforward there's a new play game dot draw dot rect and then for the rectangle we're going to take window which is that parameter for the draw and then we're gonna do what should we do cover herself docked self thought color and we're gonna do that rectangle position which is gonna be self dot X self dot y self dot width and self thought height like that okay and then I guess let's see if there's anything else we need to add to that no that's fine we're going to find a font so we actually need to make sure you just add this at the top pygame font got a net okay make sure you guys add that and we're gonna do font equals high game dark thoughts dot s sys font should help every spell font correctly and then here you're gonna pick your favorite fonts I like Comic Sans I'm gonna make this how big should this be let's make it 40 and then what we're gonna do is going to render some font so we're gonna say text equals font render and we're gonna put self dot text we're gonna do one and we're gonna do the color which will be I guess in this case black or white 255 255 255 okay next we're gonna draw this on the screen now we want this to be centered on the button so I'm gonna do some like decently complicated math it's not really that but we're gonna say wind-up blip text and then we're gonna say self-thought X - is it - no it's + self-thought X + in brackets and we're gonna round in these brackets I know this is confusing or into yourself though with over 2 - round I'm going to say text get underscore width / 2 now what this is doing essentially is we're starting out our exposition but obviously we want our text to be centered so to send our text we need to know not only the width of the like container of the button but the width of our text so we're gonna get the width of our text our VAR button we're gonna subtract that from the width of woody coats our text so that way it should add like 20 or 30 pixels from the left side so our Texas Center okay for the Y we'll do a similar thing so inside make sure you don't mess up these brackets inside here we're just gonna actually copy this and we're gonna paste it right after a comma and we're simply gonna say self dot y + round self dot height okay + TxDOT get underscore heights or - text up Gunners gonna write / - and that should Center our button yeah okay next we're gonna say define click we're gonna add a position here this is just gonna tell us if we clicked on the button or not so it's a really basic if statement yes we're just going to say X 1 equals pause 0 + y 1 equals paused 1 now what we're gonna say is gonna say if self thought X is less than or equal to X 1 less than or equal to self dot X + self Bell width and self dot Y is less than or equal to Y 1 less than or equal to self dot y + self dot height believe that's correct let me just check this yep that's correct then what we'll simply do is we'll return true indicating that we did press the button otherwise we will return false now I know I'm speeding through this but it just because really basic pygame stuff and we're doing online games so make sure I change that so don't want to focus too much on the cosmetics but essentially what this is doing is it's checking if the coordinate which we're gonna pass in here which is gonna be at up of x and y of our mouse position is actually in the button and the way we're doing that is we're saying well we go on the X right we check if it's greater than the X we check if it's less than the X plus the width so like if it's in between the little box and then for the Y value we do the same thing but we're checking vertically to see if it's in that box if you don't understand that I have PI game tutorials where I go through like collision and how all that works I'm not really going to talk about that right now okay sweet so we've got that working now what we're gonna do is actually let's see what I want to code now let's code the main function and that will get them to redraw window so the first thing we're going to do is we're going to find those three buttons so we're gonna have at the bottom of our screen so rock-paper-scissors do that we're gonna say buttons equals and we're just gonna make three buttons first button will be rock it's going to say rock we're gonna start it at 5500 and then we're just gonna go and give it a color of zero zero zero okay we're gonna create another button will say button and then we'll say scissors we'll give it a let me just check here 250 as next 250 is next 500 as a Y and for the color for that I gotta check what color I made this I believe that I made that ah right okay so the two 5500 and then one more button can anyone guess what this one is gonna be it's gonna be paper we're gonna put this out of position of 450 so I can go here 450 500 and we will simply make it blue or green sorry 0 255 0 so red green blue okay sweet so that should be it for our buttons and now we'll get into the main function and start coding some stuff the first thing we're gonna need to do so you need to say run is equal to false or good to true I always do that we're gonna say clock equals PI game time clock capital C hereby bad okay next we're gonna say N equals Network right because we're importing Network up here we're gonna do a very similar thing to what we did before and all the previous tutorials where we just connect initially by doing that initialization and then we're gonna say P equals actually player equals and dot get P right and you should already have that method it's just returning that like connect what we connected to right so when we connect we get the player number which is either 0 or 1 so we need that now it reminds me it's gonna be a number so we got to put int around this so that we can compare it with other integers ok and last we're gonna just print just so we have this you are player player now this just indicates to us like when we initially run if we know we're zero or 1 just to make sure everything's working fine now we're gonna make a while loop we're going to say it's not main game loop we're gonna say well run and then in here we're gonna do clock dot tick 60 very similar to what we've done before guys I'm gonna start adding some new stuff in a second ok so now that we've done this it's time to start actually connecting and asking the server for information so what we should be doing here is every frame we should be asking the server to send us the game especially at the beginning of this loop because right now we haven't actually created a game class right we need to get that from the server so we're connected now we know what player we are so now what we can do is we can try to get that from the server so to do that we're going to say game equals n dot send get and that's literally as easy it as it is we're doing except and then we'll just what he call it will say run equals false and we'll say print couldn't get game ok and the reason we're doing this and we're gonna break as well is because when we if we send this and we don't get a response from the server that means the game doesn't exist and what what if that happens well then what we should do is we should exit out of this game we should print saying we couldn't get the game and then we should try to reconnect or start a new game with someone else so this main function is gonna be like the actual game running but once we exited this main function we're gonna go to a main menu and the main menu will allow us to choose like who we want to play against and a bunch of other stuff as well okay you guys will see that later okay so that's how we do that next what we're gonna do is we're going to say if game dot both went now what we're gonna do here is if both players went well we're not waiting for anything now we need to see which one won so what we're gonna do here is going to check which player one and we're gonna display that message accordingly on the screen so what we're gonna do initially is we're gonna redraw the window the reason we do this right away is because we want to make sure that if both players went we're updating the window and on the window it'll check like if both players have gone like in this redraw window and it'll draw the player moves for us so you guys will see how that works in a second we're gonna do a delay when a pie game time delay 200 and now what we're gonna do is we're going to try game sorry game equals Adam don't send reset now why we're doing this obviously is because well if both players went we need to tell the server to reset those player moves right so inside a game if we call reset went we're just gonna reset it so that we were able to play the next round after okay we're gonna except except of course I can't spell that we're gonna say Ryan equals false we're gonna do the same thing as before we're gonna print couldn't get game couldn't get game and then we're gonna break okay now under this so after we send that reset now what we want to do is we want to display a message on the screen indicating whether player one one or player two one or like if you want or if the other player one so the way we're gonna do this and it's actually a decent amount of lines is because we have to like render font and then we got to determine where we're gonna draw the font and what's gonna be on the font so we're first good just gonna by defining thoughts will say font equals PI game dot font dot sys font okay in here we'll say comic sans font size let's go to 94 this one now we're gonna say if game dot winner and remember if we go to game winner is going to respond to us with either a 0 a 1 or a negative 1 so it would you have to check if winner is 1 and player so whenever our current player is 1 then we're going to set you one if winner is 1 but the current player is 0 we're gonna set you lost right so that's how we can check this so to do that we're gonna say if game note winner equals equals 1 and player equals equals 1 and remember we got that player from the server so we know if we're either player 0 or player 1 on the client side and is actually is do I need an ant oh sorry or let's we need to do or game dot winner equals equals 0 and player equals equals 0 so essentially what we're gonna do here is we're going to check if this player won so we know what player we are and we know what player 1 so if that coincide like what player we are and the player that one then will print out and we'll say or we'll put on the screen you want right telling that client they want so we'll say text equals font render and then here we simply say u 1 exclamation point and then we can just do one and then a color and obviously color we just you like red like that ok on the screen okay so else actually L if and now we're gonna check if they lost washi I think we could do this easier we're gonna say L if game winner equals equals negative 1 so if it if we tied what we'll do here is we'll say text equals font dot render and we'll just say tie game exclamation point 1 again we'll put that in red ok and now else so if we didn't win and we didn't tie we must have lost so we can literally just copy this and we'll just say you lost as the next okay so you lost dr. sweet and now what we're gonna do is just render that font put it on the screen so our not render it just put on the screen so say wind blitt text and now we're gonna do the exact same thing that we did before to get it in the middle of the screen and just be a little bit easier so we're just gonna say I believe to a needler brackets no I don't think so we'll say width over two and that's the width of the actual screen - text get underscore width we need those brackets over - I'm gonna do comma and now we'll just do the same thing with height so say height over two - text dot get underscore Heights over - okay so that's gonna put it in the middle screen we're gonna update the display eye game display update and we're going to delay so pygame dot time dog delay and I'm gonna put two thousand for two seconds you guys can put whatever you want in here okay so let's break this down really quickly if both players went that means now we're gonna check who won so we're going to do is we're going to redraw the window we're going to what do you call it apply a small delay of 0.2 seconds just so that we can see what both players did before it immediately pops up who wanted who lost so actually let's make this a lay half a second we're gonna send to a server reset so we're gonna reset both players went so the next time that we start playing we can both players are allowed to move we're gonna say Ron equals false if this doesn't happen if this doesn't work we're gonna prank couldn't get a game we're gonna break now otherwise so like if this worked we sent the game we're gonna create a font we're going to check who won so either we won we tied it we lost when display that to the screen we're in delay for two seconds and then we're gonna play the game again after okay awesome so we're almost done I'm just gonna add this pretty actually complex for loop in here serene do now is gonna say for event in PI game event dot gets very standard for Poggi probably seen this before I'm gonna say if event dot type equals equals PI game dot quits then what we're gonna do is gonna say run it was false and we're gonna say pygame dog quit so this just means that they hid the whole X button at the top of the corner now we're gonna check if they actually press their mouse button down so this is how we're gonna check if they pressed a button this what we're gonna do now it's a if event dot type equals equals PI game dot mouse button down then we will do is we'll get the mouse position to do that range say if we're gonna say PI game you've got pause hi I'm dawn Mouse doc get underscored pause so what we're doing here is we're checking if they press right middle or left mouse button if they do let's get the mouse position now for every single button we're gonna check if we click that button if we did we're gonna do something accordingly okay so we're going to do now I'm gonna say for button in BTN s remember we define buttons up here then what we're gonna say is if BTN dot click pause now if they did click the position there's a few things we need to check oh and else when you check this sir and game DUP connected sorry so what this game duck connected is doing is just making sure that it's not gonna let us press like rock-paper-scissors unless we both players are on so that's just so that we don't run into an issue where we can make a move before the other player connects okay so just add this and game enough connected what we'll do now is we're gonna check what our current player is because this is gonna determine how we send a move so we're gonna do now is gonna say if player equals equals zero if not game dot what do you call it p1 went then we'll do something otherwise so we'll just put else here and we'll check if not p2 game vt1 okay so what we're doing now and I haven't coded the rest of it yet is we're just gonna check if we press one of the buttons so remember we have that click method in our button that tells us if we clicked on it so if we do click on it and we're connected to the game what when a check of our current player is zero or one now what we're doing is if we're player zero well we're gonna check if player zero has gone yet if they've gone obviously we're not gonna let them make a move right because they've already made that move they can't change their move once they made it same thing with player two so if we're not player zero we're player one clearly that means we're gonna check if player two is gone yet and if they haven't gone we'll allow them to move okay so what we'll do in here now is we're gonna make a move now to make a move remember we just need to send to the network our move so we're just gonna say n dot sent or to the server sorry and all we're gonna do is we're just gonna send the text of the button now the text of the button will be a rock paper or scissors right and that's it precisely the move that we're gonna make depending on what button we're clicking so it's a really nice dynamic way to do that now once we've done that right so if we go to server what happens here is if we send that we're gonna play that move and we're gonna update it on the game so that the other client when it gets that game board again we'll have the update move you guys we'll see how this works in a second okay so that's working well now all we need to do is just add in line with this right here we're gonna say redraw window we're gonna give it win we're gonna give it what else do I need to give it game and P which stands for a current player and that's actually it for and make sure you just call are calling main down here at the end of climb that's actually it for this main function so now all we need to do is do redraw window and we're really close to done so we got another like twenty lines and then once we do that we're actually finish this game and then we can start testing it out and talking about some more things we can add to it okay so what we're gonna do now is yeah it's actually quite a bit of work is we're gonna draw all the stuff on the screen now so we've done all the logic aspect of it down here in this main function now we need to draw everything so it's more tedious and is difficult but we're just gonna first start by checking if not game dot connected now this just means if we have not yet had the other player connect then all we're gonna do is we're just gonna print on the screen waiting for player and we're not going to show anything else so to do that or instead font equals PI game dot font sys font obviously is Comic Sans and then the how big should be let's make it eat okay and then we're gonna say text equals font dot render in here we're gonna say waiting for Claire dot dot dot one color let's do a nice red and let's actually add true here for bold okay okay so we're gonna blit this on the screen so to do this we'll say wind dot Blitz and we're gonna do again that same I know a tedious thing to get in the middle of the screen so we're just gonna say with over to minus text get underscore width and then we're gonna say height over to minus text get underscore height and actually we need to make sure we're dividing both the width and the height by two so let's do that okay that's it for that now else so this means if we actually are connected both players are in now it's time to start drawing the real stuff on the screen so we need to draw that what was it so actually let me pop up client for you guys he can see what it looks like it's running server rotten client client great so if we want to see the client what we do is we need to draw this this this this and then the three buttons okay so we're gonna have to do these four texts and the thing is these texts need to change on like they're gonna be different depending on what player is looking at it right so for example here it's showing us what our move is but notice it just says locked in for opponents it doesn't tell us what our move is and with the other players move is right so we need to do that as well okay so to do that let's start we're gonna make another font a font equals pie game don't font dot sys font Comic Sans size of this font let's make it sixty and then what we're going to do is I say text equals font dot render and we're gonna do your move so we're gonna start by just doing your move and like opponent move because those aren't gonna change they're gonna stay the same no matter what and for that we're gonna do one and the color I had there was going sian I think right so we'll do this to feel free to change the color I know it probably isn't look the best and let's just split this at a static position on the screen so say text and let's go 8,200 okay alright next so actually still in this else statement we're gonna copy this I'm just sorry what am i doing just this text and this wind part and we're gonna put it down here and say you were move we're gonna say opponent move is that you spell that let's change that to opponents and actually let's just get rid of moves me too big opponents and same color except we're just gonna change the x value so that we draw it at what you call it 380 like that okay so that's it for your movement opponents next what we need to do is bit more complicated because now we have to draw what the actual moves are so remember we're obviously we don't want to show the other player what one of the players moves is unless both of them have gone it's like we want to know what our move is but we can't know what the other players move us until we've both made a move so to do this what we're gonna do we're going to start by just getting both player moves bring us a game don't get underscored player I just want more we're gonna get move zero and we'll actually will copy this and just do move two and change this to one so we'll start by getting the moves and then now we're gonna check if we should show those moves if we should show waiting or if we should show locked in okay so to do this we're gonna say if game dot both went okay like that we're gonna say is gonna say x1 equals font render and we're just gonna use the same font as before and what its gonna be is move 1 comma 1 comma and we'll make this black so 0 0 okay and we'll copy this and we'll do the same thing except text 2 is gonna be equal to move to so essentially this is saying if both of the players have gone well we can show their moves cuz they both made them so let's do that and it's just rendering that font and will display the font after you say that works so now otherwise if both players have not gone what we need to do we need to actually let me just check something for a second is we need to determine if we're gonna show locked in meaning the other player actually has gone but we're not gonna show their move or if we're gonna show waiting which means the other player hasn't gone so to do this we're gonna say if game dot p1 went and P equals equals zero so this is saying if we have gone and it's our current like we are the player we're player 1 so if player 1 is gone and we are player 1 what we're gonna do is going to say X 1 equals font dot render move 1 which is the move we've done which is fine if we see that and then we're gonna say 1 and color 0 0 0 ok L if game dot p2 went and is this one it is actually sorry game dot p1 went you guys will see how this works in a second what we're gonna say I'm gonna say text 2 equals the same thing now this might be confusing but essentially what this is doing is it's saying if player 1 is gone and we are player 1 we're gonna say if I spelled render correctly render like that render sorry I got interrupted there okay so if player 1 is gone and we are player 1 then we want to show underneath like you were move what our move is otherwise what we want to show is we want to show that like locked in so we're gonna change this to locked in underneath opponents move because it means player 1 went but it's not us so it's not our move so that means we want to show it under opponents moves you'll see how this works we're gonna say locks in like that okay all right now we're just gonna do else so this actually just stands for if game dot p1 hasn't like if they haven't moved yet we're just going to say text 2 equals waiting so we say waiting dub dub dub I believe that's correct um actually sorry these all need to be text 1 my man okay all right I know this is confusing but we'll go through adapter all right so we're gonna actually copy this and we're just gonna change everything to 2 so this is gonna be p2 this is gonna be 1 this is gonna be - it's gonna be - and it's gonna be 2 and this is gonna be 2 as well and then we just make sure that I did that correctly I believe I did ok sweet and now we are going to actually show these we're gonna let these on the screen we're actually really close to finish guys so to do this we're gonna say if P equals equals 1 so a for player 1 what we'll do is say wind up lit and we'll say text 2 and then we're gonna show it we're gonna show it at a hundred and 350 okay now we'll copy this so ctrl D and we'll blit 1 except instead about 100 we're gonna change this to 400 now we're just gonna put an else so if we're not player 1 clearly we must be player 0 so we're just gonna reverse these player 1 player 2 now the reason we're doing this is because this is gonna be where like player 1 and player two's moves are shown on the screen so we want it to make so that for each of our clients rather than saying like player 1 player 2 and having one of the clients have their move on the right side and one of them Abbott on the left side we want it to be the same for each client you guys will see how this works when we actually run the thing so let's actually just let's add in drawing the buttons so to draw the buttons we could we could draw them in this else statement actually that might be better yeah let's do it inside of this this else okay we're gonna say for BTN in buttons we're just gonna say BTN draw and give it a win and I think that's actually all we need to do and lastly we're gonna update the display so try game dot display update now assuming I didn't make any critical errors this should actually be working so I know this has been a lot of code and a lot of writing but I think I've kept it to just about an hour now actually and that's actually a pretty decent time for creating a game like this so you guys will see how this works out okay so let's try running our server and see if we got any errors first of all okay server waiting for a connection server started good sign so far okay clients let's try running a client so I'm going to client Oh name P is not defined when game P ah okay so what we're gonna do for client this is a really easy fix just change this to player and I might have to change oh yeah up here when I do redraw a game window as well we gotta do win game and player okay so fix that alright client run waiting for player alright good sign it's not another one and what do you look at that okay they both launched in now so you saw that waiting for player showed up but as soon as we are ready now both of them are showing up okay so this should be player 1 this should be player 0 or player player 1 player 2 right okay so let's try this now Rock ran out of input self client I receive 2048 okay so let just have a quick look at why this might be ah so I think I might've fine found the issue I'm actually I don't know if this is the issue exactly but we do need to fix this where I do game dot reset inside of server here it actually must be reset went because that's what I called it inside here reset went so just gotta make sure we do that okay guys so really silly error here actually um the issue was on the server side here I'm calling play right like game dot play and so if I need to get rid of six I was just printing out the exception so I can see what it was but essentially play doesn't actually exist because I misspelled something on game I miss spelt it i misspelled the player should be play so that was the issue I was running into it just it was very difficult to see because it was just accepting it and not like not printing anything out just continuing to run the server so I couldn't find it but essentially if we run the server and run the two clients now we should have everything working I haven't actually tested it so let's pray if I go paper sweet so we goes paper here we're not getting locked in over here so that might be an issue but let's see if we make something here then offense you lost and you won okay so we have a slight issue but it's pretty easy fix let's just go up to client just look through we're just probably messing something up in the drawing code here so oh that would make sense well we're not actually end up drawing yeah so this if P equals equals one this just needs to top back one one indentation level and now we should have everything actually working fine so let's try this now client client and let's go rock ok so that works but it's not doing the locked in for some reason so let's check this this locked in portion I just closed that server and make sure that this is actually working so that needs to be p2 went and well if this one should be working those what's confusing okay so actually so that one just need to be p2 went game p2 went let's try this server and let's go client and let's run it again and scissors locked in sweet so that's actually working and the game is pretty well finished all we got to do is out a menu screen and we're gonna be done so now let's go scissors this is a scissors scissors that's not correct we got to fix that as well okay I thought I had everything working guys I really thought so okay so I actually I did I dunno the issue it was it's pretty straightforward so in main here when we check the let's see here the winners where do we check winners if it equals equals 1 because equals negative 1 ah ok so game don't winner needs brackets of course it does so we need to add that so obviously just some silly Ares guys so server's running right now let's run these clients see if everything is indeed working as as it's supposed to be now okay so let's try this paper blocked in scissors you lost you won yay okay everything's working okay paper paper tie game sweet okay so you guys can all really mess around at the timing you can see how this is working so the only last thing to do now is watch this if I disconnect disconnect both of them so what we're gonna want to do now if that happens is instead of just completely like exiting the game we're gonna want to bring them to a menu screen where they can just click to reconnect and this is a really this actually really easy to do so what we're gonna do is we're going to define another function I'm gonna call this menu underscore screen okay and in here all we're gonna do is have a really basic while loop that just checks if you click something and all it's gonna do there click the run that main function so we're gonna do is just a run equals true let's say well run okay and then in here and say for event in PI game the event dot gets and that obviously we're gonna check if they click exit so if event type because equals PI game of dot quit then we will do is just do PI game don't quit Ron equals false otherwise if they click any key so let's say if event dot type equals equals PI game dot and we'll just say mouse button down so I should just get it they'll click the mouse button then what we'll do is we'll simply say Ron equals false and at the bottom of Ron equals false so what we're going to do is we're just gonna call main so all this is gonna do and we'll call menu underscore screen here so say well true comma menu screen okay I'll go through this in a second or say well true menu screen okay so we're gonna do is in menu screen if they click something we're gonna can call the main function which is simply going to what do you call it do all of this stuff in here and then if they exit out of the main function so if you say like Ron equals false because they disconnected it'll just rerun the menu screen which means that they'll be prompted to reconnect to new game awesome what we'll do in here is what a clock as well so say Clark equals PI game dot time clock give it a tick so clock dot tick sixty will do will just draw something in here we don't need to use the redraw window function we'll just do font equals PI game dot font dot sys font in here we'll go Comic Sans we'll go sixty and then we're just gonna render some text we'll say text equals volunteer and ER in here will simply say click to connect our click to play exclamation point one some nice red text and we can just continually actually we can just window fill so wind up fill and we'll just fill it with whites as your zero or what I say gray actually 128 128 and we should just where is wind do I define it up here somewhere yes I do so that's sweet winds up there so what we can do is just fill the window run into this while loop put some text on the screen we may actually have to fill this every frame let's get rid of one of those brackets I created so let's fill this every frame actually okay so we'll fill it we will blit this font so it's a wind blitz text and you know what for right now I don't want to deal we'll just do it statically I'll just do like 150 so it's night at the top of the screen actually let's go one hundred two hundred okay and go I came don't display don't update like that then if they click something what should happen is that you break this loop they should be brought to the main thing and yeah that should hopefully be working for us so let's try this client click to play okay a little a little sketchy on the click to play but let's see you if we click to play ok waiting for player so this is what actually what I wanted so it says waiting for player we're gonna wait for someone else to connect ok boom connected sweet so now we're ready so let's just run a game let's go rock scissors now let's just see what happens if we click X this one goes to the menu screen where it says click to play and it can be woody called play against someone else right and that's exactly what we wanted we may also want to add like a back button to go back but I'll leave that to you guys so guys I'm gonna leave the tutorial here if you guys have any questions or run into any bugs or anything please let me know this is by no means like a full complete game there's still obviously a lot of things that could be added to this and I might continue a serious later but I think for now that's probably enough I hope that you guys learned how to make an online game I find this stuff really freaking cool and really interesting how you can have like a ton of different clients from connecting together and that being said I'll see you guys in another video

Channel: freeCodeCamp.org

Views: 230,799

Keywords: pygame, python online game tutorial, sockets python tutorial, socket python programming, python client server socket programming, python online multiplayer game, online game tutorial python, how to create online game python, python multiplayer game tutorial, python multiplayer game sockets, python multiplayer game server, python, python tutorial, game development, python game development, python tutorial for beginners, tech with tim, coding tutorial

Id: McoDjOCb2Zo

Length: 141min 20sec (8480 seconds)

Published: Wed Mar 27 2019