Hi Looks like we're live. So welcome to another episode of our multiplayer scalable multiplayer game Can't forget that scalable multiplayer game design stream. My name is Eric Jacobs. I am joined today by Jared Sprig and Roddy Kiley yes Usually pronunciation for the win So yeah, what has been going on since the last time we were here So we have done a little bit or by we I mean Roddy Roddy's done a little bit of work on the game server for those of you who might be new to this particular show we have Sort of a game server game client design that uses active mq for messaging between the client and the server And the ultimate goal is to make all this stuff run on kubernetes specifically open shift and be super super super scalable And so from a game design Concept and if either of you guys can put links in the twitch chat I guess I could dig them up while we're doing this from a game design concept The game is called space ring things and so there are these sort of Concentric rings and you are a little tiny spaceship to start and as you defeat other players you pick up stuff which makes you heavier which pulls you towards the center and so it's kind of battle royale-ish rogue like space invaders Star control all these kinds of games mashed together. So clearly nothing new or inventive just, you know old tropes put together in a different way Hmm So all that being said Mr. Roddy You have been a busy beaver with respect to the game server and some changes there I think you added some bullet shooting stuff and some other things So maybe you want to share some screen and do some code Just give me a quick sec here. I find the right window to share To share it so many windows so many windows. So yeah, so I had missed the the last session And so when I got back to doing it this time Um, as Eric mentioned, I looked at the bullet code So looking back to how the server was originally set up It was originally set to be a what was called a dual stick shooter Meaning your left stick moves you around and your right stick shoots stuff like bullets or missiles or whatever Um, but the end goal of course is to have a more pointy click interface where it's kind of like start control ish And your ships kind of have Some size and some mass and they take a little bit of time to move and they shoot some missiles off And that kind of thing So getting back to how it's originally shut up As you might recall We have a back end server written in c++ We switched it over from the legacy um cms client Which was based on the open wire Uh wire level format, but with the jms specification from javelin To a more modern messaging protocol called amqp And which is advanced messaging protocol And it uh also is an iso standard so When we switched over there, um, we still kept the same data format Simply being sent across So inside of our messages we have like, you know, basically a payload in in each packet And so the payload is in proto buff format And so we have this dot proto file if you're familiar with protocol buffers Which was originally created by and still maintained by google Which is great format That basically takes like an x and y for one stick and x and y for another both are sets of floats So previously you might have seen where we you know, we brought up the server. We brought up the client And you can see a little ship move across the screen And we eric had put in some rotation codes. So instead of, you know, strictly moving up down life, right? We kind of could rotate at the ship and we had a thrust on the rear and that kind of stuff So that you know when it comes to the point when we get the point and click interface these stuff implemented When you click basically there'll be a calculation like hey, how do I get from point data point b? What's the appropriate rotation and thrust and all that kind of stuff? So what we really want is bullets to go flying And I started down that road And so looking on the client here, I'm just going to find My zoom which has disappeared once again, and I'm going to share my screen for Web storm, which is the one that I'm using actually to edit the client side work It's a jet brains client based on their I guess originally on their intelligent interface All right, so in a second we should see some Package.json lots to the web storm a few other things And I'm just going to do a quick shoot look for um It would help if I push the f for find send move and shoot So originally we had something very simple called Oh, you can't see my find window. Can you? No, we still see package.json. Okay, just give me a second. I'll go to the right place Man, you guys and your fancy multiple screens and just like I I work on one screen And I share my whole desktop and I never had Where would you ever get a break to fix problems? All right, so So like we said, we basically have um, so if you scroll up here, I think it's very similar above. We had something really simple We have keyboard input It's of type two and that's the packet type. It takes a raw input command buffer And basically that has a command type one We're sending along the uuid for the player because of course We want the input coming from a certain client to be associated With a certain ship, which is a certain player And part of that uuid now eric has displaying in the web client So that we kind of identify one from the other And so the real thing here is at the end of the day We have these data structures, which are essentially Vectors of floats And so pb in this case means protocol buffer v2 for vector One set of x and y is removed one set of x and y is for chute So up until just recently we simply were putting in 00 for chute so Really it's not much of an extension We have x1 and y1 for chute and x0 and y0 for move And then the question is well then okay, how do we get some input and some values into those And so then if we do a quick search for one second here, so worry about this once again I believe it's in the main scene here And I think we scroll up and um so looking at Our updates each tick we do an update basically every frame And we have some stuff here to check for destruction. We have some stuff here to make sure the body exists And if so then to do the rotation stuff that we just discussed to set the angle in the rotation And then as well we have some stuff down here to actually um Get the set the position of the player sprite and we're mineral interpolating so that it doesn't jump because we're using tcp packets And then there might be some latency and then maybe going from like Here to here, but we want it to be smooth over the course of time from when updates are coming in from the server And so really the only extra bit of magic here Is that We have x0 and x1 instead of just x and y So in the beginning we use the cursors, which is like your little arrow keys on the keyboard um Check the keyboard is the left down is the right down is the up down is Is the down down and associate your appropriate one to minus one or um I guess in each direction, right? So one of the things actually myself and jarb we're talking about before The uh session began was that like we're doing like an absolute value thing here like One is true or minus one is also true and zero is false, right? Either it's up or down. There's nothing in between So even though this is the case The setup of the message format in the prototype is actually floats so that basically if you had two sticks You know, you're not always necessarily thumb off or like maximum this way Sometimes you're in between sometimes you're kind of up to the corner And so the format that's in place to go from the client to the server Can handle all that even though we're not using it quite yet And it's something that jarb was talking about earlier Putting the point and click in place and making this a bit of a more smooth type of control mechanism So getting back to what we added in this case um We simply added ws and d keyboard control for shooting and basically it's exactly the same We just did one minus one in the x and y direction And then of course we're throttling it because we basically aren't really going to be Sending all the updates that come from your keyboard because You know, your client might be reading keyboard inputs at 100 times a second say if it's 100 hertz if you had a really fast machine a really fast browser good keyboard all that kind of stuff that's wired um But in actual fact, we may only be sending this to the server And getting responses back We may be simulating at say 60 frames per second or 60 times a second so Sending it 100 times is a bit extra So we throttle it at this point in time So really from the client side, there really wasn't many much update required to get the Input side to go to the server so like I was saying Earlier to eric. I think it was that In the switch from our original dual stick control scheme to the scheme where we have rotation and we have thrust We've changed some of the way that the bodies are moved To be not always physically simulated So at the moment when we actually run this code The packet is built correctly. It goes over to the server. It gets processed correctly We can watch the data structures. We can see a bullet data structure being created We can see a physics Like a collision Structure being created in the physics simulation Because the original concept of the way this was done was that Everything was going to be physically simulated So if you fired a missile from your ship, there'd be a little bit of pushback On your ship and that that would be simulated So at the moment what happens in the client here, I don't know how quickly I can bring this up here When a bullet is shot weird things happen So the ships don't quite move as you might expect. So I'm just going to see What I currently have running because I was doing some debugging earlier And I don't know if my server and client are all running together And the answer is I don't have my server running So what I'll do for the moment, I'll hand over the jar to To pick up there. Are you okay with picking up? Uh, yeah I mean we can watch you get your server running I don't have a server running It'll only take me a minute to get it up running here. Yeah I'm gonna need to do that too. Let's play the window juggle And see where the right window is All right, so That one this one Oh, I'm not this one Too many windows Apology So the game server is indeed up And the culprit was the client was up So So you're just changing some stuff with branches and stuff just before the session And I was testing Sort of back up another little bit to what we were doing here with the server I'm just going to share my screen once again a different screen this time around As soon as I can find my zoom window to do so Share screen this one So one of the things obviously that's a goal here is to Make sure all this stuff runs on open shift, right? So we'd containerize the server and I think we may have had it roughly running on open shift a while ago Um so Just recently I I started running code ready containers on a A more beefy workstation class machine um, I don't know for anybody who's not familiar with code ready containers. It's like A an open shift developer sandbox not not our sandbox from a red app one of you But with regards to a local development environment, you should be able to run on your own hardware to relatively quickly Build stuff for kubernetes and open shift, you know build a container image push it into its registry create a project Deploy it that kind of stuff Sometimes that can be a bit of a lengthy process if you're in a bigger organization and Your open shift cluster might be located far from where you're actually working And sometimes that's a bit slow Code ready containers can make that a lot quicker My previous experience in running it on my local laptop Which was a I wouldn't say it was a low-end machine, but it wasn't a workstation class machine Wasn't really great because the whole machine had 16 gigs of ram And six cores and now it's on a workstation with 256 gigs of ram And 16 cores of which I could easily dedicate You know eight cores and 64 gigs to just the code ready containers And in that type of scenario The development this experience has been really really good um It's been really quick very responsive and as we can see here from From the screenshot myself and Eric a couple of days ago went through To get my development environment up and running on this new machine So we've got you know, we've got the amq broker operator up and running That's obviously close to my heart because I work on it relatively all the time We have a an instance of the broker itself Which is the messaging component that basically Has like a two-way channel where it talks to the server and it takes ownership of the messages as they come in Make sure they're persistent disk if acquired And then it has a separate relationship with the client Where it makes sure that the client then receives the message, right? Because that's what it is to kind of be a broker. It's kind of a bit of a middleman Then we have click cloak, which I haven't integrated with my setup yet But has been integrated and for example in with the lobby And then we have the SSO operator and now of course we have the SRT game server, right? So let's just pop it open here in another tab I sure hope you can see the secondary tab without me even sharing What's the results? Survey says I think it came up I'm seeing your console for CRC Okay, I think in the live twitch window We should be able to see it I believe is the case, right? Yeah, it'll get there It takes a little while so what we can see here is that the SRT game server has been deployed an open shift via a deployment channel And basically we point The uri to the broker that's deployed here and the port directly using the service As defined and backed by the dns with an open shift So all of this stuff should be up fronting. Okay And then the client that I'm running will actually be running externally and accessing the Game server running on open ship through what is now called open shift ingress Which still runs what they call the open shift router, which internally Is a h a proxy process? Which is most comfortable dealing with HTTP But as the client runs in the browser, it can talk web socket essentially natively Which is an upgrade quote-unquote from HTTP So we should be able to take a look and ensure that our route is okay When we look here and we have a route called SRT broker and qp and it exposes itself as SRT broker and qp zero service route apps.crc.testing which is the default Essentially cluster domain that your code ready containers will deploy with So let's just see what happens here um It's quite possible that in my changes with the branch That I reverted the configuration to point to a different location. So I'll just quickly give that a check And I am currently pointing at amazon. I guess that's not going to get me very far Or in actual fact, it's going to get me much further than my local Cluster, but it's not going to work very well So just give me a second to update the endpoint that's in use I just have to quickly edit the What is now within the SRT web client the public slash javascript slash config.js file All right, just one more second here And I'm going to enable the debug mode which in this case means do not use SSO So I'm not utilizing the SSO integration All right, so let's restart our server Our SRT web client server that is to be specific And so we see our server eventually come up here We have our nice little gooey which we had previously implemented And I'm going to hit the space on join and here we go. Basically, we have our little ship And I use the keys And I'm going to slow down to almost the stop here And we can just pop back to the broker and We should be able to up to go into the management console and check the connections And so if we see here, there's three connections to the broker The game server actually utilizes Two of those and then the third one here is actually Coming in basically from From the router So I think the first two here is the game server pod ip And then this one zero dot one Represents I guess its entry point into the local network And so we look on the aimqp acceptor actually let's let's look at the addresses And so we have a command dot out That is an anycast which means that's a point to point connection between the game server and the client Using a uniquely generated reply id so that we can speak specifically to that client In the beginning in the case of the security process when you're joining game And then as well here, we can look in the What is a multicast queue and that means that's a one to many So basically we have one update. That's a game simulation update We want to send it out to all the clients And so we look in here And let's see if we can find out some attributes Here at the moment Persistent size is large and trying to find out the number of messages here Acknowledgement attempts 135 Messages acknowledged 4135 back on the tv id which represents the game event out so essentially You know what we're witnessing Here with regards to This little ship moving around the screen a little bit Is indeed You know basically because it's the client is sending the input to the broker Broker is connecting it to the server the server's doing the simulation And then the reverse is true and that the simulation updates go out to the broker Get multicast out to all the clients in this case. That's just one But there could be more than one. So we'll just localhost 8000 We'll connect in another client here Very quickly Oh and our other client had timed out and dot Let's connect two more quickly than that. We shouldn't only see one It's not to say we haven't introduced the bug somewhere Because that does happen. Oh, there we go. Never. So so I guess he I guess I guess the original guy sees three but the new guys don't see the first doesn't see the first one Because I saw three at some point Yeah, so this guy is Right, so this guy's having some problems here. So I just shot without Actually moving the guy on the bottom But i'm going to move the guy on the bottom now And then i'm going to move guy on the top Right and These guys can rotate and they can thrust toward each other and there can be some collisions if we can manage to get them to Get each other Right. Oh, he missed. Oh, yeah, so there's a collision and so We can let those guys go do their thing for a minute And I'll just come up and I'll just try the shooting with a with another another client here Yeah, my guess is if you're shooting and then the client right like the ship is randomly moving Something weird Some physicsy weird thing is happening Okay, so I'm just going to write this guy pointing up and then I'm going to use w to shoot Like I said on the client side We don't actually have any visual display of the information At this point in time, even though Like there's that object is being created on the server and it's being simulated So all I did at that point was push w once and we can see that I started moving to the right but then I was put back in a fixed position. So I'm not really sure what's going on Definitely something that shouldn't be going on there. I don't think I think some of this stuff will be fixed when we changed the The control scheme. Yes From keyboard to the pointer So I'll just go ahead and close the document down here And so what we should do is see is I close each of these guys down here Um, so this is where this is where having some debug information would be helpful. Yes, absolutely So maybe jarid. This is where you can yeah, um, we can do so The easiest way the easiest way to debug stuff is just look at the console log um And we have a we the client does have uh, library Which give us debug levels for outputting stuff. I was thinking of showing showing the information on the screen because it's hard to see the console log while the While the ship moved to know that the ship moved to look at the console log And so we're already showing the player name Right, and we have all the access to all the details about the physics because they're coming in the protobuf So I was thinking that we would just show on the player When we're in this debug mode in the server. Well the client And when I say client, it's a it's a no j s application running in express, right? um We have all the protobuf info which has all the velocities and speeds and all the other things So when I just display it next to the player's name well Texas, yeah, so I guess we we could do that um You sound like there's a reason not to do that. Well doing doing like text and UI kind of stuff is in phasers It's one of the one of the things that's kind of harder and phaser to do Is it's pretty awful. That's for sure. I have a suggestion to avoid the awfulness. Yeah, um, so I'm just going to drop in chat here I'll drop it in chat when twitch when I can get when I figure how to get to the right window You could also not do it in phaser We could do it. It's just a javascript canvas. Yeah. Yeah, just like slap a div over In the bottom right hand corner or something like that As a quick start that'll be good. Yeah I mean the console would be the first step, right? Like who cares because you got to do it in The console would be the first step. Yeah, exactly. That's what I would say like the the get after it, buddy Well, we need yeah, so you're for moral support So if the big thing that I'm missing right now is a functioning server locally, okay, I don't have the setup Share your screen and let's get it rolling So while you're doing that in the longer term, I think integrating something like I am gooey or dearer. I am gooey I forget how they pronounce in the beginning. Apparently there's a javascript port. I just took a quick look and I am gooey is Like it's one of these things that it's a very immediate mode easy to draw gooey components and stuff At least it is in the other languages where I've used it And it's integrated for example in the Linux foundations new open 3d engine. They use I am gooey on the c++ side as they're like Hey, this is the easy quick and dirty way to like whip up with the bug interface where you can like connect your Variable value to like a slider. Oh, yeah, I know what you're talking about Yeah, I've used that That's definitely useful for tweaking stuff I'm not sure how I've never used it as like a logging tool Oh, that's a fair question. Yeah um But yeah for like sliding variables like back and forth in real time and seeing how it affects the client that's it's definitely Yeah, it's great for that absolutely And yeah, and like 3js uses that a lot And a lot of a lot of JavaScript libraries use that a lot Um in their examples so that you can tweak stuff in real time and see how it looks Um, we could we could do that. I don't know what variables we have that we would want to change in real time on the client Um, but but yeah, um So I had a before we move on to the Before we move on to like just diving into client debugging stuff Can we can I add a couple questions about the chute? Stuff that you put in um It looks like you're Using a mouse input like when you do click it will fire Is that no keyboard? Basically, it's just up and down left and right for well up and down left and right using ws and d Oh, I see I see I see okay, and then just assigning that just like we're doing with the cursors for the rp Got it. Do you guys mind if we spend like Five minutes just talking about design like take like set back from the technical details and talk about the design of how we want shooting and movement to work um So that the answer to that question depends on Where we want to end up so anything you build right now doesn't change anything having to do with shooting or Or or moving if you will I think in general what we want from a shooting perspective the simplest answer is One like non directional shooting for now in the sense that Whatever way the ship is pointing is where the the the pu pu goes Yes, and then eventually when we get mouse control we could potentially implement like You know you you're shooting where the cursor is kind of thing or finger controls, but we're that's kind of far field from where we are right now Yeah, that was my main my main point is The shooting should just there should be a fire button somewhere It could be the mouse or a button or something if you're on mobile That will shoot just straight ahead. Whatever direction the yep The the ship is pointing at the time Yep cool um All right, then all right cool. So let's uh Let me share my screen and we'll see if I can get a local server running I got the client started, but I can't connect because obviously I don't have a server So share my screen here all right, so Maybe ronnie you can tell me what's going on. I I use the uh command that you put um in chat before this Okay, so where is your server window by the way if you're it looks like you're running it like 4k Yeah, I'm gonna Yeah, that's perfect. Yeah. All right, so going back to um my server and I'll make this bigger I'll make it bigger Yeah, so it sounds like it can't connect to the broker at 192.168.0 that 148 So this is so I this was the command here. I was clear so you can see so it looks like a server rang correctly So this is right, but is your broker actually there? Uh, I probably not what what am I so I'm so So pseudo podman ps will show you the broker Yeah, I don't think I have the broker running. Well, then of course it can't connect. Yeah. All right, so let me What do I need to do to start uh The server in the instruction in the repo for Server the client where do we where do we tell you how to run? I don't have any Yeah, but which which read me there's there's like five repos I know there's one in here Okay, so it's not in the web client read me if I look at the srt There is in the read me in srt game server. It talks about running the broker Yeah, I'll just quickly copy and paste it Starts the server so Yeah, so you want to run the our temis broker podman command from the game server read me Yes, that one right there exactly this one, uh, although if you're using podman, it should be sudo podman run That's right. Instead of just final Instead of instead of docker. Yeah. Yeah. Yeah, so the the reason for sudo for folks playing along on tv um If you run podman as a regular user You are running quote unquote rootless podman and it does all kinds of weird name spacey things with very very very reduced privileges That makes the our temis container extraordinarily unhappy And also when you run things as a regular user with podman They run in this funky local network space that doesn't actually have any ip addresses And so that's part of the reason why the our temis container gets angry because it can't tell what its ip address is When you run it with sudo you're running As the root user on or with root privileges And so that changes the behavior of podman podman run as root does a real network name space with real ip's And so that's why you've got a sudo podman run our temis perfect So at this point, I think there's a command for like inspecting Our temis once it's running Okay, cool. So your broker's up see that ip address 10 8803. Yep. Yep. Yeah, so if you go to your other Window That's definitely you don't want the whole thing for sure. Okay, but just the ip itself That's for the browser. That's the actual web console. Yeah, so wherever it was that you were trying to run the server You go to that window. Yep. I'll go to that. So it's over here Oh, so the next command is going to be yeah, you don't need it because you're not going to do the The x40 funky thing. All right, so this is the game server directory that yeah, so go back to whatever your server game server run command was Yeah, okay. It was Was in shape probably in your history. Yeah Is in here Yeah, yeah, yeah, yeah, this is the one So this change the broker your eye to 10 8803 broker ip is the one that is running right now. Yeah 10 8803 this one Uh, is the port 8161 just just put in the ID Okay, the port is 5672. Yeah, okay Which is the standard a mqp port? non-secure All right, there you go. Okay. So it's not exploded It's not exploded. So it's connected to the so now in your game client You will need to edit the config file. Yep and change the ip address to 10 8803 So this is currently going to amazon. It's a web socket Um, that was the just happened to be the last place that I yeah So this should be an 8803 10 8803. So the same Yep, just like that. And so now you should be able to npm start. Yep, and I had it already started. I'm just gonna Find where I've just Sorry, I've gotten so my coffee coughing fit Here's the all right. Here we go spacebar Web socket failed Oh, you need the 5672 port. Yeah, I know you need the port right. That's my fault. I apologize. No problem So the reason we need the port here When we when I had first committed those code changes I was doing it inside an open shift cluster running on amazon and the easiest way In that cluster just to get a functional Route for whatever reason was to just export the service or make a load balancer type service in kubernetes Which gave me an amazon elb and so that didn't need a port because it was just forwarding to the pod Internally, so now we need the port because we're talking directly to the broker with no intermediary All right, so I have I updated the config to put the uh Port in yeah, yeah, baby all right All right console log all the things so All right, we're already console logging some stuff Yeah, so we may want to see Change some of those things we can add some things so this so it looks like it's logging some Some messages back and forth with the client.  Yeah, exactly. Yeah Okay, so Oh, I see what you're saying now. Okay, so if I go up arrow, it's gonna that will apply thrust Yeah, okay. I see it working. All right, so let's log some some stuff. So what do we want to see? Like what is what are some of the things that you would you're like if you open the protobuf file? Okay Looking bad Sorry, I just did something terrible on the back. Oh I like What's bad? All right. So the protobuf file The protobuf js or Uh, which one roddy tell him so for the For the move and shoot x and y it's going to be the dual stick raw input command buffer dot protobuf Okay in This one dual. Yeah, so this is the Yeah, so that was essentially the code I was looking at earlier, which basically is two floats There's an x and y for the move and there's an x and y for the shoot, right? Yeah, let me let me increase the text size on here real quick editor font Make it like And so some of the interesting information about the ship statistics, for example, what might be useful Are in the entity game of n buffer dot proto And so if you look in there, um Down on the bottom Is the optional box 2d dot pb body? uh struct And so that basically is a proto buffer Uh version Of the box 2d body within the simulation So that will give you a statistics on like How the simulation thinks it's rotated where it thinks it is What its velocity is forces that are applied to that kind of thing So it's initialized to just an integer but no no no so you're um the entity game event buffer type is an integer The box 2d pb body Is the fourth field Oh, I see that. Yeah of the proto buff. So it is it is a box 2d pb body Called body. Yeah, so let me pull up the client again because in the client is some code So in the client it seems like the right place to log this because that's gonna be where but I just got to tell you where It's already processing those messages. Yeah, so we got So game event in a mq game client.js mqp game client.js in the javascript folder Yep, I'm looking at it. You will see the process entity game event Yep, I see that and then we are storing The player's body data in The player's array Yep. Yep, I see that So in your browser You so and this is this is the part where like I get lost debugging javascript stuff Because I don't know how you can get access to stuff that's buried inside the amqp game client in this weird Whenever you had like changed all the code around to not be in a single file Yeah, and started using this is yeah, and as soon as that happened I I lost all ability to debug in the way that I would you can debug by just setting I could show you that you can set break points and step into stuff. Yeah. Yeah. Yeah. No, I know But that's that I hate break points I'd much rather be able to just like in the console be like what's the value of this spit it out and not Do that so well then if you want to yeah, all right Well, then you just want to add some debug statements so you can just see it right Yeah, but then those like fly by because there's a thousand of them and this isn't a loop And so it's like the in between is I would love to just be able to be like food body and get the answer and like yeah so If you want to do that at any time that like the only way you can do that is if it's in the window scope of the browser like um So if there is like a yeah, so if there's like a An object or like a global variable that you really want to just be able to At any time in the console open it up and type something You just need to set you just need to copy it into the global scope You can just put it in you can just say window dot whatever like and then And I wonder like actually let me See what we have already because I don't know if I've done this for anything yet, but like um I don't think we have the model or anything um Yeah, so like we could take The model And put that in the window. I don't I'm gonna try doesn't matter. I mean feel free to add debug statements But you may need so you're saying yeah, okay before we get off track. So you want to you would like to be able to inspect this body So no because that's not us That's every single player that comes in every time we get an update. So Somewhere there is the draw ourselves Thing or like who we are and so we just need to only spit it out if the player we're being told about is us And I don't remember enough in the code about where that actually is. Yeah, that's uh, Yeah, let's figure that out. Oh wait, so it's it's based on uuid And we know who out we know what our uuid is because we said it somewhere And there's I think that there's in the constructor of the amqp game client is where we set Our uuid which is actually set in the game Yeah, I think earlier. Nope. It's not Yeah, I think it is in the preload where you generate the uuid. Yeah, and the client Uh, we generate our player identity in the preload scene right here. It's actually in the Um, where this this uuid is There it is. It's in the preload. Yeah. Yeah. Yeah, it's in the preload scene. Right. So if the uuid of The message Is the uuid of the game client? Then then log it out. Yeah. Yeah, I mean it would be cool to spit out the other player's information Like by trunking the uuid and showing like this player is this this player is that but that's going to get really chatty Yeah, because the server sending messages like constantly. So you might want to Throttle those to be like Once a second once every other second. I don't know try something. Yeah Yeah, we can we can do this. So All right. I'm just taking a quick look here because there's a player Oh, that's for every single player. Okay Yeah, so that's that's the phaser stuff where we're actually displaying Updating the player's sprites. Yep. Yep. Yep. I know that part. I cool Uh, so, um I'm going to Seems like the best place to put this is probably in the update, but we probably don't need to put it in every single Every single tick we might want to do it like every like yeah, once a second maybe once a second or something like that And we can do that with the same throttling method that we do with the move So let's go ahead and do that. All right. So in here, I'm gonna um This is updating the position. This is Creating this is when it's getting created for the first time. I think Um Yeah, this is creating this is updating. So let's put it in the update. Why did you put that message in the go lang channel? Oh I guess that was oh because So on the linux box, it's through the gmail interface and not through the chat interface And so the windows are popping up all the time with the updates Definitely not the right place to put that one I was I was looking on my phone at my uh work chat and I had been talking about weird go lang things because i'm running an operator for blender and separately and uh Roddy pasted a response to a go lang question. That was like how to run the broker and I'm like, what? All right, so the client the client itself has a uuid and we have a reference to the client here So I can actually Use that to know when it's a player. So i'm just gonna When it's us, you mean? Yeah, when it's us when it's the active player the current player Equals let's see and now we should have a uuid Oh, yeah, this play because we're iterating over the plate each player's uuid. So correct because we're iterating Above somewhere right here. So if the player has a body Then We iterate over the player's body information So it should just be player dot uuid. Yeah player dot uuid And this is gonna tell us um And I guess you could just add a log foo kind of thing just to see if it works. Yeah, totally And we actually have uh, we have a logging library. Let me use that instead. Where Is that um instead of just to well, I'll just do I'll just I'll just do a straight console to start with um I'll just put their uuid there And how about an ES led to error when they fixed it? All right, so let's uh, just refresh the client then You got a reserve here. Is that gonna add another? Oh, should I restart the server? No, no, no, no, you don't you're right It should be fine because it's the javascript. It's being loaded It looks like you blew something up Something happened You you join the server, but now you in your javascript. It's not actually Doing anything. Yeah, let me Okay, let me uh Check this make sure the servers. Oh the server crashed. Okay. That's why there you go So why yeah, so what happens is um, if the server is running for too long Without a client connected It it gets angry and dies. Okay. Yeah, we have to fix that.  Yeah. All right, so restart the server Yep, so that was why Yep. All right, so let's refresh the client. You're already uh, I can probably just Join again. Well, you're gonna end up with two players. I think yeah. Yeah, so what happened was is you you still there were still messages in the broker So this is actually a benefit to using Active mq and and messaging in the client server communication Because what really happened under the covers is now we have a bad player experience It didn't tell us that we couldn't connect to the server But under the covers what happened was A message got sent by the client Hey, i'm joining the game And nobody grabbed the message. So it just sat there and waited And then jared refreshed his game client which sent another unique message. Hi. I'm another new player I'd like to join the game when the server came up. It popped both messages off the queue Yeah, and created two players But the old message when when brought uh, when jared just restarted the client like never got rescinded in any way So this is both good and bad in the sense that it's cool because like a temporary glitch in the server doesn't completely hose everything And the server can potentially play catch up The bad news is that we don't have any logic to understand that like This player is an orphan And nobody's there to control it. So like you should nuke it pretty quickly. There are still things that you should take care of Yeah, yeah, but I do see that it's sending the player update messages Yeah, so we're uh, let's see. How can we what's the what's the right steps to get down back down to one player? um Restart your server and so so terminate your client or close the window. Yep. So it doesn't so it's not adding Yeah, and then restart the server and now rejoin the game Got it. So the only thing is I don't know if the if we time the players out So the data may still be in the broker when the server comes along Mmm The server no longer knows about existing right the server doesn't even know the data is still Right. So unless there's unpopped join messages, right regular player data just doesn't cool So we're backed out yet that makes sense So we're down to one player it seems like it's moving around and it's uh, the little uuid hash here matches What's being locked? Yep. So as it as it should so yeah, so that worked. Um, it's so I would say putting like every single frame We definitely right so we want to battle that. Yeah Is there a way to know in phaser? What the current frame is does it keep? Uh, any kind of ticker of how many frames it's displayed? Oh, I can just no I can just use the throttle like that's easy to throttle it um and it's just uh Like it's what I do with this one. You basically there's a low dash command called throttle Okay, so we'll set up we'll create a new function that will only run Certain number of frames like this one's running every 25 No, this one's actually running every 25 milliseconds. I'm pretty sure um, I think this is uh I think this is milliseconds as an argument um But where's the where's throttle defined? Let me find it's in the low dash documentation I can't remember if that the second argument is um Is frames or uh timing but I'm pretty sure it's timing so let me find uh There it is throttle Um weight is a number of milliseconds. Okay, cool. All right. So let's go ahead and so 500 milliseconds is half a second, right? Yeah, so I would say we want to throttle a thousand on the console log Yeah, so let's go ahead and make a And you might just want to add the body Into that message We can do that. Yeah, and let me just that's what we're looking for. I think temporarily create this Um, oh, that's great here. Uh, and so the one other thing that I would say and this may not be possible so It would be cool if the game Knew that the server or the client Was in debug mode Like we should only be sending these crazy debug messages. Yeah the game clients in debug mode But remember that the game client is loaded by the um By express So I don't I don't know enough javascripty stuff to know How to make that passed through Um Okay Well, let's let's take a look at that. Um, um, well, let's get this in and then we'll yeah, we'll see Adding the debug flag to only display this if if debug is true Yeah, okay. So all the console logging should don't yeah, so what we're gonna do is Actually, we're gonna Change this to be uh, and we're gonna put this function Just to start we can we can pass stuff into it. We need to but put this Here so now this should run only every 500 milliseconds Um, that's still fast We can make it every one second. Let's do that. Yeah, I think a thousand's probably okay So that actually Am I gonna have two players if I just refresh the client Oh the server probably crashed. Yeah Which is good because now you're only gonna get one player Yeah, unless I had stuff queued up in the browser tab wouldn't yeah, I wouldn't have mattered. Okay Okay, see now that but now you're gonna get two players. So restart your server again Okay Now there should be nothing connecting to it at all. Yeah, so now you should get And we open up my debug console there goes one two three It seems it seems a little bit faster than every second Oh, no, you're getting other messages other messages coming in, but yeah, it's definitely Throttled back a lot. Yeah Um, cool. So now you want to display the body some body info about the player Yeah, so you should just be able to Um add Player dot body Okay, so this is um, we're gonna have to pass it in uh, so maybe uh modify the Log player throttled to take the message that you want to display instead of having log player throttled Generate the message Or pass in the body as an argument and then process the body in yeah, it probably it might be in Hmm. Yeah, I think We probably want to do that in the throttle because then it doesn't have to be Doing You know any any running any code unless it has to Um So let's do, um Actually what I could do is Let me think first like oh, I know what I could do we could just we we don't have to save this as a Function we could just do it all in line like That way it's easier to Put in the data that we want Oh geez Hold on a second. I want to put this down here And get rid of this and what we'll just do this but we'll just call it as a function at the end Um All right, so now we can now we can put whatever we want to in here. So uh The player so we get player About body We could just we could output the whole player dot body. It's just an array. So it'll yeah JavaScript is actually nice in the way that yeah, it should should Definitely put like a little expand icon. I think um Let's just do this uh Because this is really this is just we have we have reference to that right, you know player Player dot body. Let's see what happens. We do that I'm actually gonna make it a little bit slower. Yeah, because if you look up You've got player body position player body this player like that. Yep So let's see how that works Oh, my server crashed again. So start it and I'll just refresh the client and Oh, I have a syntax error. What did I break? Probably up here right there. Okay. There we go. So it's running this every um 1.5 seconds we have all the body data Is that is that good? Yeah, still fast, but it's it's good. We can make it into now if you so you might want to Look at that object and grab some specific data. So probably like The linear velocity so right now if you move your if you add If you hit the up arrow in the client to like start moving your player Yeah, let's do that. So it's moving now And then I'll and then look at the latest here latest. Yeah We can make it slower This is why I didn't want to do it in the console this because you get Well Yeah, it's So you still I have no velocity. Yeah I just had to expand the current one. Yeah, got it. So yeah, we could build a ui for this. It's just going to be Maybe we can put all of these as a variable in that uh In that tool that roddy mentioned the uh the GUI tool Um, we could try that but So is but but this is this is good though like We're getting some some debug info. So that's working Um, all right, so should we take a look at that Should we take a look at that little GUI that JavaScript GUI thing we could try let's try Getting and it's going to be read only because we obviously I don't think we can change it because it's not going to be sending It's not going to be going through phaser sending commands to the server like if we added Some of these things like linear velocity for example Like you're only receiving that essentially, right? Yeah, just it would just be read only but we could see it in the UI changing Real time if you want to try that Is that what it would be good? Oh, I mean I guess right now I think Not sure if the linear velocity is used let's say that it won't be especially if we're having Pointing click and we want to see what the rotation is supposed to be and all that kind of stuff, right? um Certainly the position And the collision wrecks would be handy right it would be handy to know Like we know right now when the two ships come together, for example The collision wrecked is not such that it's correct, right? Yeah, what ends up happening is like I did some really ugly math And no physics with with box 2d and the client to make the push the ship rotate Because when we tried to apply rotational thrusts and inertia like it was lots of math and we just weren't doing it even remotely, right? And um derrick was like yeah, we'll just find the fun like it'd be easier if you just turn the ship And so I was like oh cool I'll just turn the f and ship the challenge is that when two bodies collide because they're cigar shaped in box 2d Box 2d is like oh, I have this weird collision of two cigar shaped objects, which is going to input rotational inertia But since turning the ship doesn't actually Uh apply rotational inertia, right when two bodies collide They start rotating and they never stop because there's no gravity and no friction. Yeah, so we have to fix That which we could do by just um constantly Setting rotational inertia to zero Well, you can also like the each of the bodies have a definition where you can set rotational damping and friction Yeah, like we can start The hack job would just be to always set it to zero and then you know deal with it later the right thing to do is yeah to to sort of Determine what physics we want Or make our own physics and then just ignore box 2d's stuff But then update it when we've Done some of our own things so they can start where we in the where we left off. Yeah, right Because what we do and it does has to be in sync so yeah So you're saying that getting some more debugging information would help with collision Uh, I mean so the challenge right now is that we're we're putting debug information into the console So it's really hard to follow. Yeah, so updating random text in the DOM about ourselves Would probably make it easier to follow because then you can just javascript change Yeah values of yeah, let's use that. Let's use that tool that roddy was mentioning. Oh, I think it's called Little give up dot com slash fly over Slash that's Okay Yeah, I think if you do a search for I'm fly over slash. I am g ui dash j s. Yeah, it's a javascript implementation of therian goo Oh, no Just I am gooey, right? I am gooey. I am g ui dash j s. Oh dash j s. That's what yeah It's the javascript. There we go All right, cool So let's take a look let's take a look at how this works basically And there's an example All right, I've I've used tools like this before Um And I wish Michael was here because he would know right away like for example if you go to the three j s any a lot of their examples have This this ui thing in the top Um Yeah, here we go The this thing right here where you can like change slider values. These are just all variables that get changed um Is it I don't think this is doesn't look the same but this is the one that I see people using the most Is this plug in here? I mean if if you have familiarity with this thing and can use it faster than trying to figure out I am g ui then by all means they're they seem like the same They maybe one uses the other under the covers who knows um, let me see if I can Yeah, what is this tool called? Let me uh, let me see here. This is What is this tool? Well, okay, I mean I can't remember the name of it, but it's basically the exact same thing and this one looks like All right, let's get the example so pop-ups filtering inputs navigation all right so So we can import it. Okay Into a module. Okay Hey, did you know that Jared merged something into master? I merged that I merged that my email Yeah, I merged there was a pull request. I noticed for from uh, derrick To add a mpm version command Do you make your text bigger? Yeah, sure. Yeah, I'm just I'm just familiarizing myself really quick with how this works. So Well, this is this is not JavaScript. This is Wait, what is it ever? Oh, wow. I've never done Anything like that Is this type script? I think this is type script Yeah, this is type script. It does look like type script even though the uh, the title is dash j s Yeah, that's like piles of java script So that's not as useful in my case. Then yeah java script implementation if one exists You can get this. Okay. Well, this is c++ code here. Yeah, that's where it originated right right Um, just I'm I'm sending a message to michael really quick Um, yeah javascript bindings using mscripten and type script And here's one that mentions npm the very first sentence if it's n npm it should be javascript, right? Not necessarily no other stuff. I think lives in npm Javascript plus web gl example. Oh, that's the running I should be able to figure this out. Um, let's see This was published a month ago We need logo flexible state handling and data only shape output We have a nice little example built. Um, if you look at their Code pen It doesn't look like it's type script. It's just regular javascript Ah interesting. Okay, so they're like writing type script inside Javascript as like text strings. It's it's really bizarro I'm getting uh I'm This is the one so this one on the 3js examples. This is like the one I'd want to use Like because it's just basic javascript Um, like I said if if this one works better for you go for it I just need to find the name of the dang library because I can't remember it just pink michael um, I mean isn't that So 3js is not the library itself. No, no, this is a this is a generic parameter changing Widget that gets can be added to any dom and It's used in a lot of places. Um, 3js.org I don't I don't understand The this widget right here is used and is is generic as it's not specific to 3js um So let me actually have an idea um If I can open up the 3js source code I should be able to find this pretty quickly in the examples All right, so let's just look at textures. Okay dat.gui.module that sounds like it that sounds like it That gui Dat.gui I think you're right. That's what it is. Oh, yeah, so it's um github.com slash. Yes Data rts. Yeah, and it has 5000 stars. Yeah, I think this is the one a lightweight graphical user interface for changing variables and javascript Yeah, that's it. Thank you Eric Well, you said view the source and so I was looking at the 3js example and towards the bottom of the page it's like View your source code animation cloth on github and I was like, oh, okay Let me do that and then I dug in there and then I was like, oh look at the Javascript tickets loaded. Yep. Thank you for doing that. That's what I was Assuming to do but being on the spot like and makes me sometimes sometimes you can't see Yeah, the forest for the trees But I knew it was something. Yeah, so all right. So now looking at how this works. So install so basically just we need to add a dependency uh, well do we because Remember we're not a dev dependency not a prod dependency So we can add this to our dev dependencies Um Yeah, let's do that. Uh, I think it's save dev but we're not using ES6 or common js because we're not Running anything inside node Right. The only thing that node is doing is running express to handle the key cloak authentication And after that it's just plain old javascript in the browser yeah It should still work like We can use either We can use common js or or ES6. They both they both should work Uh, I don't know what's going to happen in the browser if you try to do a require It the the build the build um trans transpiles it Anything ES6 related gets transpiled by babel in the client Oh, okay That's how we're already using if you look at a lot of the uh Some of these things like this export all of like and in the scenes and stuff I think there may be some places where we do imports already I think Yeah, here we go. This is in in game.js. We're already doing imports in In the ES6 way And so this should work just exactly the same cool Yeah So, um, cool. All right. I just need to get the thing installed to start with Um, let's just save it I'm on the game client Why is it not finding it? That gooey Am I MPM is not finding it when I was trying to install it MPM install save dat gooey. All right. So I'm first step install the MPM dependency And when I do this, okay, I must have spelled something wrong because that worked. Oh, I said I said data dot gooey. Okay. All right. So it did install it cool and should be in our package.json Um, it's currently in the Yep, oh seven dependencies. Okay. We'll we'll want to move that to the dependencies. Yep And like squinting here. Yeah, so we'll want to save that to dev dependencies eventually But now that we have it, um installed Let's look at the next Yeah, um, let's try importing it and Let's see. We need an example Uh, if you scroll up Click api documentation Okay And then there's some examples in there. All right, cool Scroll down further. Yeah, so we got prams Ah, here we go creating a new gooey. All right. Let's try. Let's just try a simple example then Add folder flow field. Okay Let's just try this. We're going to import it And we'll just we'll see if it just automatically loads it to the Probably an index That change. Yeah, it could be an index. We could let's let's try it there And the import is Um on the previous page previous page is uh Import star as dat from that gooey. Okay From it. I just I find it amusing that you you highlighted it copied it and then now we're typing it It didn't work. Yeah, my copy didn't work for some reason. Oh really? Yeah as that from That gooey and I think should be in quotes and lowercase Don't forget your semi colon And now it's It's just not used yet. So let's go ahead and use it Um and the example is I don't know that you can put it in the listener though Uh, this is a good I mean it should let's see wherever wherever the like canvas is created We should be able to put it anywhere like as long as it so this is oh, this is the listener. Yeah We don't want to put it in there. This is but this is a listener for on On page load and so then it's once the page is loaded Yeah, actually that might be okay. Let's look at game game is gonna Now you're in phaser guts. Yeah. Yep. I'm in the game creator creation We'll find out the right place to put it but I'll put it on the on load. That's fine. So the example is uh Just gonna create a new gooey and with a name my gooey See my copy and paste actually works this time. Okay Now we don't want to use let's I build bars. We don't want to use bars All right. Well, let's see what happens Yeah Yeah, once I restart my server Well, I shouldn't even need the server because it's it's just yeah, it'll just be right exactly Yeah, so whatever the problem is that the server it's not exactly the same as it was before It actually dies inside stepping the simulation And it's cloning some data But it happens after 60 seconds after you join So it's it's not the fact that there's no heartbeat. It's that There's something that occurs that shouldn't some sort of memory problem. So I'm looking into it here now failed to resolve modules Okay Go back to your um, yeah import Yeah, let's look at the import so I think because there's a dot in it No, well look at look at import game, right? So import game is dot slash game. Oh, yeah, but where is that dot gooey? It doesn't live anywhere relative to This because it's a node module that you installed and we're not running inside no j s So you need to modify npm run go back to the package.json Okay, so we had done some hacky stuff in package.json so if you look at Post install There's a bash copywrex sh Scroll down this one. Yeah. Yeah, so open copywrex.sh Okay So we're actually the Required modules got it to the public javascript. So we need to copy node modules dat Whatever interesting. Okay. Yeah, so this is super hack job because again, we're not We're not actually running the game in node j s the game runs in the browser We're only using node j s for express to process authentication. Yeah So basically like should I hand you the game client browser code? Yes or no, that's the only thing we're using express for here um, so in order to get The required We're we're using npm and package For like dependency management But we still have to put the dependencies where they need to go Yeah Yeah, so let me find the if there's a minified version of there. So there it is right under deep. Yeah, um, and we have So it'll be under probably Or under build me. Yeah, this is the one we want. We could probably just oh Maybe we want the module actually Because the module is what will be importing I'm going to try that one first and see so it's going to be um I don't know if I have a way to copy path. Yeah Source root there we go All right, I created a new line for this so That this is actually going to be node modules Slash Slash build That gooey module Okay, let's see. So now we need to run this script so now you need to Run them install. We need to do the post install, right, which will run right post install happens after Something so go back to package json My assumption is that post install happens after install Yeah, I'm running the in three install won't do anything. I just want to run. Are you sure? Because it's called post install. Yeah, I'm sure. I'm sure like if you run install Yeah, okay If you run it sure Um Because otherwise it would never work Based on what you're saying. No. Yeah, it won't it install won't run that. I don't think bash copy rex.sh is right there Okay, cool I was pretty confident that we did this the right way the first time. Okay, uh, so if you look in that folder In your editor Uh public javascript Let's go to Okay And it's going to be in this javascript. This is a module.js. You are looking at the wrong place Oh, it puts it in the it just puts it in the The root other under javascripts. Yep All right, so let's see if that actually so this This module this should have like a bad.gooey export at the end of it probably We'll just try it and see if it if it works I guess I don't really need to restart this over wouldn't the You uh, yeah, you're still missing the yeah. Yeah, I you I don't think you can use I still need to put the uh Right, but I don't think you can use the module because it's looking for A file, but I mean it's worth a try Yeah, I guess we could try it just importing it just directly as the uh file This is strange all right, so Yeah, that's what I thought so they could try the uh the file Uh, the gooey's in the upper right hand corner Okay, cool. So Looks like it worked like I added a added a thing there like I wonder If we join the game that it's just going to be yeah, so there's nothing in it yet, but it's there All right, so looking at the documentation We need so we can add we can add parameters. We can add folders Exactly. Um, so we can add variable values values into that the ones that we want out of the player Yeah, I would say we want our our position and velocity At least at first Yeah Okay, let's start with just player position as a first step So we got the api docs up here. Okay um It's not a folder called player And this has to be so this gooey actually has to be Have be visible uh to the rest of the game So we might have to pass this around inside phaser And I think it should be I think it should work If I let's try just putting it into the preload scene And then See if we can pass it to the around the other scenes so that we can sure inject values into it wherever we want in the game So in the preload Let's create it here So this is looks super easy All right, so I'm going to need to move the import Uh, wherever I was importing it in the game. I think It was an index it was an index So let's Oh, oh, it looks like phaser or it looks like web storm did it for me automatically cool Uh, interesting. All right, so adds a new controller to the GUI the type of controller created is inferred from the initial value of object property Color properties see add color The object to be manipulated the property to be manipulated. Okay. This is super easy. Yeah So, um, yeah, once you get it Available in the game. Yep. That's what I'm working on right now. So Let's see. I'm gonna get to This refresh this Let's see. Okay. I need to actually so it's just gonna be loaded from This is in I need to get the right path here. So this is gonna be up one Maybe I need to put the The dot j s on it Or I could just do it like this Like a that should actually work too. Let's try refreshing Okay, cool. All right. So now if I join it's there cool. So now we can start now It's okay. So in that place where you were doing the console logging for the player's body Yeah I'm going to I need to pass it to the next scene. Oh, sorry. You're not there yet Yeah, I need to pass it. So we'll just say uh and now and that's going to go to the menu scene And then in the menu scene, we'll have to pass it to the next scene And where does the Data, all right, so let me find the uh, where it's coming from Create oh, there's the data. Okay All right, so to All right, so just the same places where we're passing global variables around in between scenes. I got to do the same thing So in the menu scene it must have another section where it will start to the next scene Oh here it is start. So it passes it here Now that will go now it'll be in the main scene In the main scene, I need to do the same thing again add a Players folder to it too um I guess I could just put it in here so In the create Are you ready to put data into it yet? Yeah, I just need to get I just need to add fields Yeah, I'm ready to start adding fields. Okay, so go go to the place where you are sending the message For our own player. Yeah Okay, so instead of console log What you're going to do is um GUI dot add Okay for N All right And then I don't want to be I mean Is this going to create a field and then we update it because we probably want to add it I don't I don't see anything about updating it. The challenge is we we have to um Sorry I don't see anything about updating And so you'll have to find where the player's own Body object gets instantiated And then I guess that would be where you would add it and the various properties sounds like it will just Keep so it won't even go here at all. Actually, right? It'll be able to update it It'll yeah, so you can you can nuke this whole block of this current player. So I'll just yeah, I'll comment it out for now um So in it's actually that the what you're looking for I believe is going to be in the amqp game client Not in main scene Okay um That's where the player's body object gets initiated Okay, but it also it also gets created. No I mean, there's the The actual phaser object gets created in the main scene The Object for the sprite Yeah, if the body's already No But that's not where we create the body But the body will be here like it'll yeah, but look at look at the code that you're in If player body not equal null Which happens very often Wait, where player body not equal though like yeah, scroll up. Um Up up stop down. Yeah right there So this is the initial this is the initialization inside phaser Of the phaser sprite group It is not the initialization of the player's body object So when I say body object, I mean the literal javascript object That is body Right and this code loop happens for every single player every time and we only care about a GUI for our own player So You could in here if you really wanted to This is saying if there's no physics group sprite object for the player create one So you could at this point check Does player uuid equal? yep, um Our uuid and if so then create the GUI object. Yeah, exactly. That's what I was saying got it That's what I was saying and I would like to do it in the main scene rather than the client because I'd like to keep the client Concerned with just Unadulterated communicating with the server and nothing. Yeah, that's fine. So as the last line in this section I would Actually, you could probably just grab that code that you commented out Right since it's already Um, so yeah, I can do this and then put it at the end here. Yeah, um, but there's no Body this anymore. Oh, no, there is a body player body is not no. Yeah. Yeah, it's not no It'll be though. This is where we want to track the various properties of yeah The body add so it's add and then so play it up body Okay Doesn't it needs a name though, right? comma And so then it's the the field of the object that you want But the challenge here is that it's a heavily nested object Right, so we can but we we have we can we have it open where we're inspecting What was there, right? So yeah, but how do you how do you name the property when the property is a nested property? Just with dots probably like well, but it wants a string Let's look at the uh We can we can extract it out into into a variable. I guess and then That seems ugly All right. Well, let me let me look at the docs then so Yeah, the docs aren't super helpful. Yeah Just says it's a name of the property to be manipulated Object is an object to be manipulated So you may actually need to add the specific object Which is the nested object so instead of adding body you might have to do body dot Whatever And then yeah, and then name that yeah Yeah, so let me look at the game. No main scene main scene So so you want body dot position all right And player dot body dot position And then x X for the property that's it. Yep, and then just the same thing again, and then why yeah, and let's try this and see if it works Okay Let's try you will want to restart your server before you yeah interesting Go back to your browser Okay, it's it's already you know, you just broke it Now you're gonna have to play. Oh, yeah, that that did work. Yeah, okay, so put some thrust in Yeah And we should see those numbers change I think it might oh wait there we go It doesn't seem to be updating seems like it added it At that time But it doesn't seem like it's updating it in real time. It is not updating it Yeah But it did add it So why is it not updating? Um, and is there a Probably because that object isn't permanent That'd be my guess Like the reference is just making a copy of it and not not well if you look at the if you look in the code Um That player is part of a for each Loop. Yeah, that's true it is actually but So my guess is that because it's part of a for each loop That particular instance only exists in that one moment And then the next in the future it's gone So this is why I was saying probably do it in the client Oh, no, we don't have to do it in the client. We could we could make a reference for in the main scene for the player Um, right, but you'd have to do that When it's created we could make a which is in the client No The create function in the main scene So we could make a reference here for like this uh, uh, current player And then When it gets created in the in phaser Here Um We save it we use this as that as this Uh, it's worth a try. Yeah Let's try And it could be that the uh Oh probably need to Let me restart server It's dead Okay, don't refresh your browser. Okay. There you go back. So all right. So let's try to get some thrust see if that It's still not updating So it's adding it uh, and it might just be It it's possible that this is just that copying Yeah, this object isn't getting updated either. So you're setting this dot current player equal to player But player is an ephemeral object that never exists again in the future Once once you have a reference to it though it it stays Right, but that that particular instance of player Is a pointer So think think way low level like assembly level, right? So that instance of player is a pointer to some memory somewhere And it's never touched again because the next time you go through the loop You're Trying to react. So this is the the other challenge with doing it here in the main scene is you're running this dot ad every time through And I don't like I don't think this is the way gooey is designed to work so the right so the the the Array of players in the model That is not ephemeral like that's going to stay All the time right and this is an element of that array It's just pointing to an element in this array. Okay and we're Basically taking that and also assigning that to the point team to that that same element So that should still stay like All I mean that should always stay like even if we put Um, like just to prove this out. Let's just say let's see if this if this works if we took this same field and and console.logged it out Like the way we were doing it before In the update if it's the current player and um, I wonder if we need to tell the controller to do something And let's see if that actually so just to see if this oh, okay We're not actually we never set the controller to listen to changes in the underlying object Okay, that makes sense. But I I still want to prove this Yeah, what Because what you're saying is that's not going to stay but I think it right but that so the fact that it's controller related I think is the challenge All right, uh, so how do we do that then? looking for examples Copeters are changed. There's no center Listen to changes outside of the goy Add so in the ad statements Just append a dot listen empty paren So where you're doing the ad of Yeah, so at the very end right before the semi colon just dot listen empty paren Okay, I still think this is bad because we're doing it multiple times Yeah, I mean it'd be great if it could just uh dynamically Show us all the fields of position. No, no, no. I'm saying, uh, we're doing this dot gooey dot ad Every time we loop over the player Only when it's created initially Oh, yeah, no, you're right. You're right. You're right. I forgot about that. All right, so All right, this I do need to refresh I think because I mean client changes Well, there's no server anymore Oh, no, okay. All right, so let's see if that helps Moving okay, so so the the gooey is not changing but that that uh That reference to the current player is changing So it's staying like a sticky like it's It's keeping the correct reference and it's and it's updating as it should like you can see it's Oh, you know why it's not changing look at the numbers It finally just hit like three something. Did it not update? No three something Oh, I clicked in there and it wait, what happened? I clicked in there and it changed Okay, so then this is probably user error so It's it's changing so the yeah, it's not getting updates for some reason so like The current player position Uh body position x that's that that is dynamically changing every single update but When we do the add and this listen It's still just getting the initial value and not updating So that is the question that we We need to solve here Refresh is the visual display of a controller to keep In sync with the object's current value. Yeah, that seems like exactly what we did what we want Um, so no, but hold on update display. We're not actually calling update display So listen tells it to listen, but we never told it to update So where's where do we hold on looking for an example? Update display. That's what we want Uh manually updating display So you want to call Oh, hold on Follow details update display manually Still does not work That server has an error Refresh that GUI with new values You have to set the controllers to listen Oh, it just says The first time I love the model I have a folder when I love any of my name changes Does ad return a Controller to that field. I wonder listen does not work anymore Oh ad does return a controller setting the control I think I have an idea. Let me just try something um Returns a controller listen, and I'll make and I'll try running its own update display in each frame So now I have a reference to the controller that was added for the x position and then Yes, and Here I'll just do Try this Well, that didn't seem to work. I added I added an update display call on the controller um in the update tick, but It's still not updating. It's definitely not getting changes to that object Show me the code again Yeah So what I what I tried was so ad will we will return the controller that you're Yeah, I see what you're doing. Yep, and then later on in the like If if the player is the current player I just call update display on the controller Yeah, I understand. Yeah, so that's that's what I did, but that doesn't seem to work Update display is modified get value set value. Maybe set value is what we want No, it should it should just be working. Yeah So this brings us back to Is the right object the thing getting updated or is is that gooey? I mean the same object checking the object or is the gooey that we're Touching when we're buried in main scene Actually the gooey that's displaying well, it's gotta be because it gets the initial values. Yeah And this object is This object is getting updated Because we're outputting it right there so It has the right reference if it's using this It just seems like it's not When you declare this You have declared parameters beforehand Now you can listen to key events or the appropriate event and change the values in the gooey Listen has a bug associated with it. If you use drop-down menus, you have to update your controller with Try running update display on the gooey not on the controller Okay on the gooey object. Yep. The the main the top level the same one that has the dyad. Yeah Yeah, I'm gonna try that. I'll put that back into Still not working sounds like a stack overflow question time Yeah, yeah So close like it seems like it should be working. We're just missing something to recreate the controller For the list of planets, that's not it Yep, I don't know. Let's tell you we're just gonna Try the same thing expecting different results Yeah, I will figure this out though This is let me see I'm gonna try calling git value just to see what's there On the controller So calling git value. It's just the value is there. It's just it's just the same as always So I'm just gonna try just just to see what would happen if I did Um This is there a set value. Yeah, there's a set value. That's what I was gonna try just setting the value like it'd be nice if it um Was dynamic and just listen for changes in the object like the documentation says it does But let's just see if set value if we just force it to update like Yeah, it takes an object Yeah, it's basically the value of that thing because I did get no it takes an object not a value Yeah, I know but the when I call git value it's just returning the the number I understand but that's what git value does Yeah, so there's only one parameter it can take I guess I could just give it the object position And then it would let's try that Because now now it's an object Can the server still running? It's saying it's when I was trying to set value so now it's not a number which Is not okay. That's weird. It says it wants an object. So I guess you got to set it as uh Let's try just doing this and see what happens. Yeah That's annoying that the documentation says it should be an object Yeah, yeah, it is annoying. Oh geez. Then I got three All right. Well, it uh, it's not is working now It's actually changing it cool So that I would that's sounds like a bug It definitely seems to go against what the docs say where it's like you can listen to changes in the object that you added but It was not doing that because the object was different than what's actually getting out there. Like I said seems like a bug Yeah, or yeah, definitely But we're about a time. So this is like perfect timing. Yeah, we got it working in the last second So what we can do like to wrap it that up is we we can put all of the fields of the body At least the important ones. Yeah, like position linear velocity force angle The ones that were you know, maybe even uuid If we want and then just have them Then we can just see them changing for the current player up above And this can be expanded or a good verification that what we see on the screen actually matches the data Yeah, right Yep Yeah, so I started looking into the server side problem and I dumped all the frame data for the connection for the amqp communication going back and forth And it looks like extremely the same Like it looks very good right up until the state where it says There's a connection framing or connection aborted And then there's a problem Because something gets corrupted. So I suspect that it's not a messaging problem per se and more so A server memory corruption problem Where something is getting stopped Because the the actual call stack indicates that the problem is in The box 2d simulation step. So we just ticket those the simulation But right up until that point the communications are back and forth between the client and the server No problem then all of a sudden The server says hey there's framing here Which you can't tell by looking at the frames of the data On the network and then and then the call stack comes up. So It's probably like there's a couple of threads in play there So one of the threads may be doing something bad memory wise So I have to take a little bit further Don't forget to turn Yeah, I'm gonna get some Get some why change. Yeah, it's doing it. Yeah. Yep Cool Cool. So we can we can just load that out with whatever kind of State the variables we want to show Sweet. All right. Well pull request Yeah Cool. Cool. All right. Well, that's it for today. Thanks everyone for hanging out and for watching us hack around with javascript I think we're off next month and then maybe we'll be back in november Maybe we'll see All right. So with that Signing off have a great evening morning. Whatever time it is for you and we will see you again next time. Cheers. See you