 Hello, everyone. Thank you for joining yet another live stream of the scalable multiplayer game design Joining me today are Roddy Kiley. Hey folks. Did I get that right this week? Yes. Yes. I remember it and Hey, yeah So today we we've all made we've all we've made a little bit more progress not a lot things have been a little busy crazy here Um, share my screen real quick. Can you all see my screen? Yes, all right. Are you snapping at your dog? Oh, what are you doing over there? No, no, I'm turning on the TV in the background. That's usually where I throw a twitch. Oh nice Here what watching watching you watch yourself? Let's see terminal. I know this is really tiny. I'm gonna make it bigger in a sec I move as many things to config and sets explicit rotation, right? Okay, so if we go to Man so many so many things Change up that's not useful at all Okay, good I'm that game dev SRT game server. That's curious that that's the first thing that's there All right, um, am I still working in a branch? No Let's see Commits density mass. Oh, maybe I didn't Yeah, yeah, I know it does that explicit rotation. Okay So we had some challenges with Rotation that we were playing with last week or last show Where I was trying to use box 2d's like apply rotational force mechanism And and Derek essentially suggested like well, maybe just like do pretend physics and it'll be more fun And I said, oh, well, I guess I guess that's a good idea. Oh, let me make sure that zoom is working right here I think it is Let's see everything looks fine on the screen. Yeah, I I don't know That's I think I usually have to make some kind of change or whatever anyway, so So Derek suggested, you know make physics fun again and I I got very frustrated because I didn't understand how to do that and then I sort of said well, let me Let me do my what I give is my own frequent advice normally, which is that try it and see And so one thing that had been done previously by Jared who didn't join us today was he he made this configuration class That would read stuff out of a yaml and so we had some things that weren't in the config So last episode I had turned the ship into a cigar shape by giving it a length and a width I made those configurable. I gave the the physics body a density Which is how box 2d calculates mass It actually looks at the area of the 2d object and the density of the object And then it calculates mass that way you don't actually set a mass So I made that configurable and then I added some command line flags for that config And then what we didn't have was we had nothing that actually told you What it had done if it pulled files in so I made the logs barf out the actual config settings Log barf. It's my favorite. Yeah, everybody needs log barf So this is just adding stuff to the headers file I Changed a bunch of log message log levels around Because it was acting kind of it was really difficult to like We're going to have constantly be tweaking what logs get spewed at what log level But it was like it was either two verbose or it didn't tell you anything More log messages and so let's go down to the I'm gonna find where I actually did the turny thing Ah, okay, so here's Here's the turny thing So we had played with some of this last episode. We applied force to the center and you know, it did its thing And so here's where I did the new turny thing. And so basically what I said was Derek had done some math back at the envelope a couple episodes ago Um, and I think you had said something like 180 degrees in a few seconds or whatever and so I said, all right Well, let me let me turn that into per second which was 45 degrees per second and then I said well If the server sleep cycle is really slow like Every time we tick through this calculation if we turn the ship 45 degrees like it's it's gonna turn in like Instantly in circles. And so I said, all right. Well, let's let's just kind of hack that down and divide it by the sleep cycle In milliseconds and whatever Um, then I said, well, I don't care how fast or slow the server is going If the tick goes by and you calculated that it should move you more than five degrees, you're not allowed to move more than five degrees then I said, um or I should say, uh We had been using the why direction of the Input from the game client as to whether or not the ship is turning So that's your left and right arrow keys presently in the game client And so why would either have a value of one or negative one? And so if you multiply one or negative one by the number of degrees you either get positive degrees or negative degrees depending on if you're turning left or right Annoyingly, I shouldn't say annoyingly box 2d wants things in radians Uh, and the way to convert degrees to radians is uh, you multiply by pi over 180. I probably should have Created another variable here. That's not called degrees once it's radians. So bad bad on me, but whatever um And then we just transform the position of the object By rotating it to the new number of degrees So we get the current position and we set it as being Still there so the the xy coordinates don't change And then we take the current angle and we just add the new number of radians to it And that turns it This apply force to center is actually still there. It just got moved up higher In the code so essentially we apply the force to the center Uh, and then we um rotate the body I do want to point out. I use your calculator when doing this math I don't want to give a false impression that I know what I'm doing or anything. There was a calculator involved Whatever Um, so let's see if we can actually get this running Uh, I've got so many things to do here. Okay, so let's see Oh gosh So how many buttons Okay, I need to go to srt game server Let me make my font bigger here All right, sudo podman start Artemis So i'm using podman which is um red hats cryo oci runc implementation of a container engine daemon. There's not really a daemon. It's it's uh daemon-less A bit of podman right one giant gaping security design flaw Well, and it's just it it only tries to do one thing. So it's it's super lightweight, right? um sudo podman inspect Artemis grep address all right 1080 5 If I pull up the config file No the config yaml. Oh god. I don't know. You would think I might know what I'm doing. I really don't I mean kind of optional here for this stream. Where did we put it? It was just down below there a few collapsed source. I don't need to make files. Yeah Okay, so that's there So that's good. Uh, I should just be able to Run the server then Maybe all right. It's running. Oh, why is it? What? Oh, that's fine Okay, cool. Yeah, there we go. Yeah, there we go. All right. So file new window Open recent srt boogers Open folder srt web client I think it's just npm serve Yeah npm start And I mean all this code is completely open source too. So if you're crazy enough to try to follow us at home, you could try So here we go. I'm going to press the left arrow once And it turned and I'm going to press it again and it turns It's turning and it's turning fast too, which is good Because it really wasn't doing that before and if I press up to apply thrust it'll start to move I think we may need to adjust Yeah, and it's moving in the direction that the ship is pointed And then if I turn the ship and apply thrust It's moving still in the direction that the ship is pointed and if I Turn it like that it'll eventually go in the right direction. So it actually functions like it does Exactly what it's supposed to do now. This is pretty fast. We might want to might want to tweak that But the other thing is that we're also just kind of trying to get to some basics stuff here So one thing we could do to make the ship faster just for giggles Stop this I'll change. I'll triple the force multiplier to Is that one Hundred thousand a million. So this is nine million newtons Because box2d wants things in newtons So that is the thrust force multiplier for the main engine of the escape pod if you will And so now if I go to local hosts And we get a new ship if I hit the up button We I guess we move three times faster the thing that I find curious is that for some reason we hit like a maximum speed And then it just like stalls out. So this is more box2d stuff that I guess I just we just don't understand Or I don't understand There's no speed limit in space. Well, besides, you know the speed of light Yeah, you would think that if you keep applying thrust that you would just keep going faster and faster and faster, but Maybe but I guess box2d is like well, you you're applying I don't know. Whatever whatever is the problem is the problem If I press it down arrow, we go backwards, which is interesting But whatever I don't know if there's a default friction That's exactly what I was going to ask you I mean ultimately like we're looking down and there's two planes and stack together If you treat the ship as one and the and space as another and the ship is sliding across space Oh, I think well, I think we have friction turned off though Okay So that's going to be in the b2d pod When we initiate initiate initialize initialize So here's where you would have set friction Or previously did set friction, but I'm assuming that default is zero Is there even a way to assume is there a way to check? Why is that not safe to assume man? What is because we have c++ involved and we all know that's unsafe Fixed or deaf. What is the fixed or deaf? What what object are you? You are an a b2d entity a b2d entity Which is its own So is that a pb body? the b2d pod so the pb stuff is all Related to uh, quarter buff Right. Okay. So the the the ab to fixture deaf is of type a b2d entity and then a b2d entity Doesn't have a fixture deaf Thing it just is a thing I'm trying to figure out like where do I look in the in the doc to fixture pointer right there Uh, well the one that has the friction setting in it, right? So it's either the body deaf or the fixture. Well the the fixture deaf Yeah, so it's in the fixture deaf is the friction setting or was the friction setting And so is it going to be a b2 fixture? I guess Uh, b2 fixture deaf when it's looking through the documentation right now I'm I'm asking you In the box 2d documentation, right? Because that's right. So it's the b2 fixture that we're Interested in so there's a fixture and then there's the fixture deaf, right? So the fixture deaf is the definition that creates A fish fixture object an instance of a fixture object. Uh, you have friction set to 0.1 Oh, so there you go, which is in the definition of The a b2d definition Which I don't know when that would get used Yeah, I don't remember either But so we definitely have a friction in play that is not zero Well, let's see what happens if we make a zero play Try it and see tias Well, it built so that's it's a good start A step one make sure it builds. Yeah, all right Refresh All right, here we go the same Same thing So it reaches some top speed and then and then stops doesn't go any faster So this um, this work is this on master at the moment Yes, I think so Let me double check hang on Because I don't recall my rotation working the way your rotation does when I tried it earlier Hang on one second. Um I want to pull up this to make sure okay um Oh, you know what I think this is the pod density mesh branch Yeah, so you're gonna want To check out the pod density mass branch. So do we want to switch to you to show your stuff now or what's the? Uh, well, let me switch over to the pod density mass branch and get things up run in here. Okay Let's see if we can figure out why This force thing doesn't do what we think it should do Did this oh no the server stopped, which is why the ship stopped documentation What is that we don't use that here some day some day, sir Body Using a body position and velocity forces and impulses You can apply forces when you apply a force Making up the body the body classes transformations fixtures That's not particularly useful It's my goal for this stream to try to get as many small prs as I can to these repos during the stream good Yeah, I mean we've got We've got no friction Or I had no friction a restitution Oh, and here's where you're setting density. I don't think this is getting used I don't think this gets used to be honest How do I find out where that would get used if it gets used anywhere? Right click and find usages at least that's where the references see line Yeah, so there's no there's no references. That's not used Yeah, it doesn't appear to be used which is good. That means that my change actually didn't do anything PVT position and your velocity force entity PB body fixture list get fixture lists for Here's where you add a fixture Ah, so you're doing set density Of get density and set friction of get friction Good Which is weird I would assume those numbers come come from one place and get set somewhere else Yeah, but then they get oh, it's like they get overridden later Are we actually even using the serialized thing? The serialized stuff should be being used. That's how it gets in and out of protocol puffers to go on the wire Well, but so why are you So if the serialized is what is used prior to the proto buff, why are you changing? Oh, this is the proto buff fixture. Oh, okay. I understand never mind. So I actually I want to find the initializer Here's the constructor which does nothing for the b2d entity Which is fine Same thing Here believe it or not. I found a stack overflow post that seems to Kind of concern this there is max allowable velocity for objects and The post kind of walks around this but the units in box 2d Aren't meters. They're not metric units. They're kind of like some vague arbitrary unit But they are metric units So what they're saying in stack overflow is that that's a lie Okay In most cases. Yeah, and so what this person's solution was is they figured out a scale to use And applied that to some of the math they were doing so like their ratio was like 48 to 1 To make their game, you know play nicely or whatever And then when they set up like the camera and all the draw Multipliers and like the width and height of the object and everything they use that ratio So it might we might actually have hit the velocity cap And we need to just scale our simulation out so things, you know, our velocity caps much higher and our forces much higher and all that stuff Sure. I'm still not convinced that We're getting the friction that we want True. Yeah We're in space. There's no friction in space. Well, that's the thing. Yeah, so roddy, you'll have to forgive me because I There's not very there's no documentation in the sense of like a clear flow chart and I can't read see worth a crap. So I don't understand. I don't recall which gets created first Yeah in the flow I've been just trying to grab your branch here. Have you pushed your latest changes? To pod density mass. Yeah, I think so. I was looking at them in github And it's pushed to your own clone to your own fork Is that real? I'm looking I'm actually I'm looking at Master on the server So if we go to pull requests and we look at closed pull requests Pod density mass was merged 20 days ago. So why am I not getting that? Moves many things to config and sets explicit rotation scheme b2d pods cpp Yeah rotate the ship by the effective degrees Which is radiance. I lied All right, I think I've got the latest here now But I'm still I'm still struggling with the order of How things get created Too many files not enough Okay ad pod creates a factory And then an instance Roddy, do you happen to know how the linear damping works? Like that's persistently Applied with a clamp rate to the maximum velocity. So for every simulation frame Can we set do we have that set to zero? Let me go look at the code. I have code Look Jason, okay, got it. So Okay, so in a entity ad pod is where we Create the pod and so here's where We set the pod dependencies Which is doing pod dependencies and then here's where we do b2d pod dependencies so b2d pod dependencies is The constructor is this function, which is where we're setting the fixture def So we're probably inheriting some kind of default um friction Create the pod using dependencies. We don't care about the pod because that's not the b2d stuff We set the mass data Push the pod onto the list of pods So what we can do is probably is there a get Friction Yeah, there should be But it's not a body. It's a It's a fixture, which would be in the fixture list Get mass get very good type get data as a wake bullet enable the rotation we set mass data That's that set Well, here let's do this instead Hardcore hack method Friction equals zero run again When hint out hack your way through it. Yeah That's how you do it Where the heck do we set any damping stuff? No, it's the same So I think I think Derek you may be accurate in the sense that Whatever that post was saying about maximums um May actually Apply here. Yeah Um, so we have linear damping and angular damping set at 51 and 50 and those that seems high that seems very high Uh in our box 2d dot proto for p body I feel like those numbers should it wouldn't be in the proto The proto is just how we send messages across the wire. I would assume that it has to be somewhere in the Um creation of either the body object or the Yeah, the the p body object No, no, not the p body. That's the protobuf. So before that so be uh a A things are hours b things are box 2d. Oh, okay. Gotcha b things are the serialized stuff that goes across the wire So you can almost effectively ignore anything in the pbs Because those are like defaults that we're gonna Yeah, we're just stuffing the data in there to go out. Yeah, so the question is where is the setting it though Yeah, well, yes, so I was just about to say like, uh The damping get angular damping. Where do you set? The damping that looks to be on The body itself Set linear damping Yeah, like I don't think we do that at the moment, right? Yeah, should there be no linear damping I also just went through and got all your source code and stuff when I run it up I don't see that I rotate even though I see that the code is accurate Which is strange Rebuild I don't know but yeah, either way we should probably set our damping to 0 Yeah, well, so the roddy for you the challenge that you may be having is either cruft in the build folder or um You're not sending the right stuff from the client because there may have been changes to the client as well Oh, if there's changes to the client, I'm definitely not sending the right stuff from the client Let me see here real quick I've been off on a branch on the course. Yeah, there's a thrust rotation branch On the client. Okay. Well, that would explain it Yeah, which I guess I didn't merge yet Oh Get reset hard head Get check out master get merge origin master Really? No, oh get pull Ah, there we go. Okay Let me go to the web client SRT web client. Did I actually push the changes for that? Pull requests leave button I've I've asked both Jared and Michael to review the leave button and they they have yet to get to do so Let me push my thrust changes. I don't know if I actually pushed them Okay, okay, you can check out any time you like but you can never leave our game All right broker endpoint. I don't care about This is the uh spaceship california game now Yeah, right All right, so let me commit this Um, so you're you're sending the rotation. It's just not displaying it Oh, okay. Let me give you a second here. All right. So I just pushed a thrust rotation branch to this web client Okay, so if you merge your buttony stuff into there That that should do it. Okay, so let's go back to the server and play with the damping So the damping is set on the body Not on the fixture a entity b2d pod dependencies dependencies create pb2 entity Right. Okay. So I think that's where I would want to set the mass data Or the linear damping I really have no idea what I'm doing. So I'm just doing stuff What's super fun here is if I can get this working in a wsl2 Then I can take this my server my laptop and a raspberry pi Turn that into a cluster and then try to scale this up in kubernetes in my house Which is totally going to be a waste of a weekend But you know, I got vaccine number two coming up soon. So what else am I going to do set linear damping 0.0 f Oh, yes, the ship now is sideways, but it wasn't before. That's a good sign. Hey, what do you know pushing up now makes it go forward Magic All right, somehow Oh, the proto's got all worked So I need to rebuild the proto's because of the version of the things and the stuff History grep proto Oh, that's bad. I think it's in the dev container docker file that we run the proto c command We're not There it is So now it starts rotated and pushing forward makes it go to the right But using the left and right arrow keys does not make it rotate Should it be the left from right arrow keys? Yeah Okay I don't know. Let's tell you you're running the same code. I am and it works for me Uh That container supposed to fix this problem That'll work for me. No, I don't but you're I don't think it's the Code that's the problem like something else. I don't know what the problem is honestly cd. Where am I going? I need to go to source proto And then I need to do that And now I need to do that So you can always slow down the server tick and crank up the log level to see What commands are coming in and what is actually going on? Yeah, so my server sleep cycle right now is set for 16 Which would be normal speed right 60 frames a second So will the calculation still work? What was the sleep cycle? You were using when you were sleep cycle shouldn't matter In terms of turning like eventually it should turn if you're holding the button down um So even at a sleep cycle Uh One it should still turn if we have 16 divided by 1000 times 45. That's a small degrees per tick It could take forever. Hang on a second to uh Maybe that's my problem here Let's check that back up. Where is that? Is that an a entity or in b2d pod? Um Sleep so 15 divided by a thousand Is a small number times 45 is still sorry. You said 15 is the cycle or Six one six one six. Yeah one six divided by a thousand times 45 So that's 0.72 But I mean Yeah No, that's not 0.72 degrees per second. That's 0.72 degrees per tick per tick So that should still be reasonable in that case, right So, I mean I was at a quarter second cycle And the quarter second cycle is 250 as the sleep cycle and it was turning So changing my sleep cycle to 1600 Causes me to rotate in a somewhat course type fashion So there's definitely some weirdness somewhere Let me do the way the rotation does work in the code is so 250 divided by a thousand Is 0.25 Times 45 is 11 So I don't I don't see why 16 Would cause problem would cause problem. Let me try 16 on my end for giggles So the other thing that's happening here is that from a c C plus plus point of view We are multiplying three. We're multiplying in integer By a long divided by an integer and assigning it to a float So there could be some conversion type issues going on here Yeah, interesting when I So the linear velocity linear thing was definitely part of it Because look at how fast it's moving now Yep But you're right. The rotation thing is is misbehaving With the server cycle set to 16 Ups that is wrong button Oops There we go I wanted to stop this That's the stop button I wanted. All right, so let's reset that. So you said The challenge was the math I think yeah, I think it could be the fact that we're dealing with the instance that floats, right? And c and c plus plus are kind of particular About your types and it does specific things like if you divide an ink by an ink It gets so we want a float times A float Well sleep cycle is not a float, is it? I can't remember. No, but you can cast it to a float easy, you know Yeah, and just cast it And then how do I do that? Put float in front and then put it in parentheses That's the old school c-style cast. We should be fine like that Yeah, so I guess this should also be a float then, right? Yes Uh Yeah, it works fine now then this should be a float. Yep, that'll fix the problem. I just fixed it locally Oh Do you want to uh Push yours or should I push mine? Go ahead and push yours. I did exactly what you just did All right. Oh, aren't decimal numbers already also already floats? Yes, okay, so I don't need That that can stay And so this should work And then if I go back to launch json Put that to 16 again give this a try What type of game are you designing? Is this what pair programming looks like? to cheeky b So we're trying to design a space game um Where ultimately Yeah, that looks awesome I'm going in circles I feel like this through the stream's benefit. You should unmute the music for a second. It's not copyrighted, right? It's totally free Yeah, this was just that for a second why It's funny. It's been mute. I don't even know why it's not muted. Um Or why it is muted unmute site But uh, there's no sound because my laptop sound is broken No, my laptop sound is broken. So fedora has been doing this thing where like my speakers disappear And and just don't ever reappear And I don't know why So the joke I made last time the only uh working linux device was actually functioning audio is on mars right now Right. Um, all right, so I can stop the server. That's cool Okay, so you said you want me to push mine rod? Yep, go ahead. All right, so get check out dash b Damping and floaty Let's see. We need a entity Right because that's where we set the damping We need b2d pod, which is where we fix the floaty And all the other files are protobuf files. Okay. All right, that's pushed Okay, I'll go ahead it Cool. Oh, so going back to the the game thing. So, uh, we've been trying to build essentially a Battle royale ish space game where you start in an escape pod and as you Fight with other players, um, you pick up the detritus that gets dropped. Uh, and you can sort of Firefly reverse dial strap it on to your ship And eventually you become this big lumbering mass and that pulls you closer to the center of the game universe Where you end up having to inevitably fight all the other people that have big lumbering ships like yours Um, and so we're in the very very early stages of essentially prototyping Client server using a message broker to handle the communication between the client and the server and all these other things Uh Roddy you're up, I guess Yep, I'm just gonna see if I can get your changes here first Stop my share real quick. Yeah, actually, although I can demo my my stuff without your changes in there Fine do it. See if I can just To me a little more go ahead idea. Yes. I don't know why my right my rebase commander is giving me trouble saying invalid upstream I don't know why that is. Maybe I just don't have it name that Yeah, I will um Go ahead and just let me make sure it works and then I'll go ahead and share So essentially what I already said on master Yeah, what I was looking at doing a while ago, we'd raised an issue upstream Um, let me grab the link here and I'll dump it in chat upstream upstream. Yeah, the only place where we exist here Who's upstream? SRT game server, right at game dev. Um, so there's an issue here Actually, it's not even a sir. It's not even game server. It was the client provide a way to both join and Leave the game session So previously you had added in the little green x which allows you to leave the game session and we had a very hard coded way of Joining ie just running the code and you would automatically the client would automatically try to join right? Yes So at some point we need to be able to click the button and some gooey stuff happens And maybe we type a log in and we get a password from like your ruby stuff And eventually then we connect with the client to the server Yeah, well that was that that ruby lobby chat room Was supposed to be the authentication thing and then Ideally you would click The button in from there And that should take you right into the game session Um, you know using some kind of jwt or whatever Right, so in the in the way the things are laid out here in the structure. We have Uh scenes kind of like unity scene Um, but they're phaser scenes and we have like a main menu scene which we kind of yes blew right through Yeah, it doesn't do anything, right? Right. Yeah, I didn't do anything, right? So I just basically stuck some stuff in there. Cool. Stop there click join Then it executes then it transitions to the next scene Got it because part of the question was like hey like before and we did all this face or two stuff Is this was my my understanding? um The from the client side of things We did all this phaser two stuff in the past the people who are writing the client code Like jarred and michael and stuff and like hey, you know adding buttons used to be really easy used to be Straightforward to do and I remember you said, you know, I looked at the documentation Oh phaser three is so much better, but it has made things so complicated Like I couldn't figure out how to draw text on the screen, right phaser three. So so right so I was like, well When I started looking at this again, I was like, oh I can dig into something Like on the server side and kind of scratch my head for a bit or maybe I'll do something quote-unquote easy Because in my case like I wrote my first GUI from scratch using triangles like over 20 years ago now And I've written a number of those not sound easy So so like I've done this a number of times so I'm like, you know, I don't know javascript I'm pretty happy with it, but maybe I can figure does anyone really know javascript I mean I certainly don't certainly not the ex yes six variant which yeah ES linked in my GUI kept complaining because I had left over spaces and places um So not exactly great when you don't know what you're doing and you're kind of messing about right through I spent a little bit of time cleaning up, but either way Let me um Get it up and running here show us some code brother man. Yep. Make sure let's see if it works JavaScript's kind of funny because at the base level it's kind of understandable, right? Everything's an object Simple programming paradigm, right? And then at the high level it's like, okay I understand, you know this set of apis that I can use to do stuff But in between that is the biggest stack of shenanigans you can ever possibly imagine I don't know. I don't even understand it that well, so We've got shenanigans in the code guys Yeah Hang on now. I gotta find my branch again. I've switched around a few times. Matt. Oh, Oh, gosh, new UI get check out main menu you are All right. So in theory if I run this thing up here, let's uh, go ahead and share my screen Yeah, but which one That is always the question which which one of many many monitors. Yep. All right, let's Make this one pretty bikes thing sounds cool Share screen liberty liberty bikes post disabled participants screen sharing looks like there's a to-do for you. Are you kidding? I am not kidding multiple advanced sharing options. Who can share all participants Who can start sharing? Okay, you should be good now. I hope all right So let's just go ahead and share my empty tab It's even fine when that's empty tab and on the right desktop. Hopefully Too many I actually do have two empty tab windows floating around somewhere. I wonder which desktop it is Okay, let's try this again screen share Oh, it was desktop three and not five. Okay All right, five desks Yeah, there's there's a lot of stuff going on here Um, I'm actually finally at a point where I think I might like to have a second monitor It's been it took me it took me forever But now that I'm doing a lot more like coding and I've been I was playing with gado over the weekend and doing stuff there Oh man, you figured out how to write text on the screen. Yeah. Yeah So so there was a really good tutorial I came across and um, I guess I my google searching must just be awful Okay, so it says up down face to select. So in this case like I get the text grade out here because they're not they don't go anywhere yet, right? So so in theory, we should have like a nice little state machine here And we have our first state which is like our Our first date sometimes is like a credits or like an intro Where like the logo comes up in a little bit of flash And then you come to like your main menu state Where like you have a bunch of buttons and like it kind of branches you off And then you might have like your settings which might pop up like a modal Dialogue type thing or maybe it'll transition and then credits might come up over or it might be another state Would like a scrolling type thing happening um But in this case we've only got one and it's connected to the keyboard and not yet to the mouse So if I hit space on join here we go and I got to turn down the music because I can't hear it So I guess the music doesn't go through with the share let me turn it on for a second two times How how loud is it for you? It's very loud for me. I can always is it coming through your headphones? It is coming through my oh, that's why we can't hear it because it's only coming through your headphones. Yeah, it's not going through your mic Uh, right. That's fair. So you'd have to take off your headphone and like put your mic into your cup Yeah, that's not gonna work. Do it All right, so let's see if I can move around as planned um Are you there are such thing as virtual audio cables, right? It's just just throwing that out there just putting that out there So so in my case, I don't have the twisty turning nicer thing. Yeah, you gotta merge my turning into a merger stuck in, right? That's probably gonna be a bad merge Yeah, so um, let's just stop and so What I don't see is the green button here for some reason either. I don't know is that still on a branch Do we need to get all that stuff together? Yeah, I think Yeah, the quit button is on a branch and then my turn rotation thrust branch has the quit button in it Okay. Yeah, so I'm missing it basically in general, right? So Let's just reopen it again Just so we can get back to looking at what it is Right, so you should see now the join settings and credits once again um And what I'll do yeah, I'm gonna abort here And share another screen now. How do I share another screen? Easily, you know, you don't want to just move the code to that screen Would that work that never works for me with google chat? That we that I use all the time like with google meet. I never see Does that work for zoom? I would assume so if you're sharing a whole screen Let me see what happens I'm curious to know inquiring minds want to know Um web storm All right. Yeah, I see it. Oh, wow, that's awesome it worked All right, amazing When technology works the first time All right, so as you're saying button selector. Yeah, so so okay, so I got to give a A nod to um The kenny series of assets so in this tutorial Does this guy I see his assets all over the place when I'm looking for game stuff um kenny.nl and so he has a ui pack space expansion Which sounds very appropriately themed in this case And the tutorial uses this glass panel and the cursor hand, right? so Free game assets. Yeah, and he does a ton of them Um, let's open game art.org And he does a ton of stuff there space kit So basically he has this little um In in the sprite map there's a little hand. So right now. I'm just using the hand and then there's like a box that's translucent with the border um And it's squared and we just stretch it out and use it for a button, right? And then we just change the color to green When we when we're selecting the right one Not okay, so you're using it just his pictures That's right. It's it's right based right, um So in our preload scene like we have this scene that kind of happens before the main scene and the main menu scene happens Where we load up our background and our ship images so Like this one of those things where quick and dirty is just throw an image in there and get to use it In the future what we'd want to be doing is, you know, basically using like texture packer The pack sprite maps and that kind of stuff, but you know, I don't think efficiency is not necessarily our Our main purpose here at the moment So you don't say so I knocked out the the client initialization. So basically we We create a new a and qp client on the broker endpoint Using the game model, but then in this case, we're no longer doing asynchronous initialization Instead not in this. Yeah, not in the preload of this scene, right? So basically then we go to the Menu scene, which is our main menu, right? And then here we create an array for our buttons and we have a button selector, which is going to be an image And then we have a selected button index. So essentially we have an array of three items We're currently on one of those three and as you move your keys up and down it just changes your index And it changes when it gets highlighted green. Yeah And up here is the link for the tutorial Okay, that's cool. So basically like literally I just Lifted the code and put it in the right places And then cleaned it up a little bit to fit our structure a little bit better, right? Yeah So there's like select button and you can see when you select button You say set the print selected button white and then set the newly selected. So then you get the new button Right based on the index is being handed in or selecting and then you set the tint for that to green Which is the code for green right there, right? And then separately then it moves the hand icon up and down So so what's interesting is that that I found about phaser So phaser two I'm assuming based upon the conversations previously Had like this nice like kind of UI thing to get up and running really quickly Maybe it might not have been like production ready to go into your game as a final thing But you know like a button is a pretty basic thing you want to use Like pretty much out of the gate, right? Um for doing stuff visual But like we're back here to like this is kind of the same type of stuff that I was doing You know 20 years ago to build my button class at a triangle, you know what I mean? Like let's draw a square We're going to put the text on it. I'm going to change the color We're going to watch where our keys go. We're going to count our indices Then we're going to flip stuff around and then we're going to redraw it, right? Um So like basically like this tutorial just basically went through those basic steps using phaser three So like we have to select next button And you know, you're iterating through you make sure you don't go past your length of your array All that kind of stuff, you know, you don't want to blow yourself up At least in native land you blow yourself up. You might get away with it in javascript. Maybe And then in the confirmed selection Like if you look in the console log of your browser like it admits a selected event And we log like where we are and what we're doing that kind of thing So we grab the currently selected button We emit the selected event And then we say, well, hey, this is really hacky If zero is the selected button index because I know that join is my first button in in our array Then go ahead and initialize the client and start main scene And then pass through the data objects that we wanted to be keeping track of to utilize in other scenes That are going to be shared Which is our client frame qp and then the game model itself where the data is going to be kept Right So then if you look at like how does all this stuff get created? Like I say, you're not I notice you're not doing the a weight on the net No, so we're not basically asynchronous. So we can't do the a weight Because confirmed selection is not asynchronous. Oh, I got you. Okay And I wasn't sure like if that was going to blow it up or not So because I like it like I literally just got this to work a little while ago So we probably want to do that at some point But for now we have our basic like here's the play button You add an image you set its size The texture is this glass panel that came from Kenny's work We set the size of pixels on the screen So one of the other things here that we that we're completely ignoring from a gooey point of view is that We're talking about pics, right? We're not talking about points. We're not talking about like percentages of your screen So like I'm we're assuming like 1920 by 1080 If somebody was on a mobile device or if they had a smaller screen Like the results are not going to be correct, right? They're correct for me But they're probably not going to be correct for somebody who runs like a 4k display or anything like that, right? Yeah So there's a whole bunch of Calculations between percentages and points and pixels and stuff that goes on to scale your displays and stuff and to make sure all your gooey Parts get put where they're supposed to be So we're ignoring all that stuff. We're just sticking an image up there. We're putting some text on it um So this play button that we created we push it on to the array and then we're saying on play button selected log join message in the console And like I said up above we actually handle on the confirm that we actually Execute and go to the being seen itself, right? so It's actually a surprisingly Lee Lot of like low-level work to do buttons at the moment um That I that I wouldn't have expected I guess because Phaser was in version two and for some reason they decided in version three. It wasn't going to be part of the core offering of the library, right? So, I mean, maybe there's maybe there's a bunch of great awesome community gooey Libraries for phaser now. Maybe that was the idea was to spin off the responsibility Out of the core, right? Like that could that could make sense um So yeah, and then basically after that point in time really once you get to the main scene at this point It's basically exactly like it was, right? So So ideally what you would have you'd either have like a another party third party library open source the plugs innovators 3d and you can just call and say create me a button here, right? And we would do that again in the main scene and we'd have like the lead button up in the corner or maybe when you we Look for the escape key being pressed When the escape key was pressed a little gooey would pop up Like this is our quit menu and then you can either set your settings. It goes on Yeah, it was a single player to go on very sure you want to quit exactly, right? um So yeah, very much like baby steps learning at a crawl Create like the basic wasn't kind of thing and look for better options at this point So I have I have found many uh Many references to in phaser 3 like use a container to hold your um You know to hold your whatever kind of thing but uh No actual example No actual example of doing Yeah, because like in um in godot, right when we were doing the policy thing And I don't know if you you were using godot this weekend to do some work, right? Yeah um Godot has this really nice gooey facility where You can create a certain type of container like there's one called vertical layout And you can set the spacing of your items and just keep throwing things in there And then it automatically spaces them out And then you can group them so that when you move your container Everything nicely moves around with the container as you would expect as a group, right? And so you can build these relatively complex um hierarchies of gooey elements That operate nicely together and move together as you would expect Rather than having to be like well, how many pixels do I need to move to the right if my parent moves? Like I assume under the hood Like there's matrix transformations that go on from parent to child And the transformations get executed down to the matrices and all the transforms get set appropriately, right? But it's really nice to have that facility there Because godot of course has the gooey itself So you can like drag and drop the pieces and you can hook them up to your code and So it's a it's a different environment to develop in whereas in here we were like Hey, let's load an image. Let's turn it green. Let's put some text on it So I guess it all depends on if You know, if you're a really fast typer and you know your library really well You can be more efficient Then then you can be with a gooey sometimes, right? But if you don't know what you're doing like jumping into gado would probably be a little bit easier Oh, look, it's that gooey thing. Let me drag and drop that thing over here It's like, yeah, I really like that draggy dropy thing Like that works easier when you don't know what you're doing, right? Which when I started doing gado, I didn't know what I was doing either. So Everybody starts there at some point Yeah Quick progress updates. So I actually have the server building successfully in wsl2 And I have the client running successfully in wsl2 But the server crashes on connection with the memory error Oh interesting. So yeah connection to the Message broker Um, I don't know. It's giving me a 139 Which is the memory exit error access violation. So something in the c++ code is having a fit Are you running the broker? Yeah Okay Just trying to make sure Because there may be a seg fault if it can't contact the broker at the moment I'm just actually going to shut down my broker and find out I was just about to see something out of my hands I think that's an old bug that's been lying around for a while It might be that I don't have the ports networking set because there's no networking in our docker files right now We didn't like you know do all that and I probably should But it might be that I don't have that network and ports properly opened So it can't talk to the broker even if it's running. Yeah, I would bet a hundred dollars if that's the problem You know, it's probably one of those cases where The happy path is okay, but the unhappy path is very unhappy Yeah, gotta work on that More accessible debugging So what was your um Oh, so are we I'm going to merge damping and floaty into master because too bad Oh, yeah, it uh quickly so sender on your proton error Currently well it currently exits one for me if it can't make a connection Which is not really a great thing to do either you think like Hey back off and retry might be a good strategy rather than like Exploding It's fine. It's shippable. That's the important thing All right, I'm gonna share my screen again and we're gonna try and do some live coding here Share screen Although truly though, I do think that since I've been working at redhat and more more on infrastructure Than games. I think I think in games as a developer my Certainly as an indie developer I think being focused on the happy path when you're trying to prioritize your hours of development Working on the happy path and looking for the fun is very important And the error path and the stuff that goes wrong is less so Because hey, they can always restart it But like, you know the stuff we work on here like you can't always restart it You don't you can't restart your cluster very easily these days if it's in a data center and People may not even be allowed to go into the data center at this point, right? so Like uptime and Sla's and slo's and all that stuff is a lot more important In the enterprise world than you know when you're developing an indie game for mobile uh Rod is your um My gosh Menu stuff. Is that in a branch already? It's in main menu UI branch, but only in my repo So if you've got a remote added for my repo you can put in uh, probably don't You're not even listed as a fork All right, because because it originated in my repo So I didn't have the fork back, right? That's lame So um, because it got imported from my Main menu UI. All right, so let's see code copy Get remote add roddy Remote roddy already exists. Look at that. Look at that. Good. Amazing. Branch You might have done this before. Check out roddy main menu UI Get merge master It didn't blow up Good step now run Dude getting greedy over there Let's see run the server I don't need to run it that fast debug Level one quarter second And what it was building Okay, um Hey, look oh, and I can't use the mouse But that's fine So we're gonna go to this and we're gonna do join of spacebar yeah But it didn't actually Join Did you set the ip once you merged the code? That's a good question Yeah, it's it connected Okay But I didn't get any Join You got the join message And by message, I mean on the console log Yeah, but it didn't actually the server has not Heard from it That's weird So now it now it's working Even though you're you've reloaded it Yeah That is weird Yeah, as it's very freshly baked there could definitely be bugs So let's close this Let's stop the server I'm gonna double check that my Damping is in there. Yeah, okay So we'll restart the server first For giggles All right, now we'll start a client So, yeah The client is joining the game Before you actually hit the join button So something something is amiss with your codes or yes, certainly could be All right, so let's close all these and we'll see if we can fix this real quick So preload scene That's where oh The preload scene still has the client in it in it on my side Oh, that's why Aha, I love an easy fix All right, I gotta stop the server Restart the server Hopefully that's an easy fix a hard refresh Hey, look at that. It did not join yet. And now if we join It does not join doesn't join at all interesting So This client So that should be when we get into the main scene Where did you or where Would you have a knitted it the client? main menu rather than the It used to be in the preload And then the init gets called Open the source again. I'm just looking at something else there. I'm not seeing a client in it anywhere actually At least not in the committed code in the in your remote Maybe that was the last thing I was doing Yeah, yeah, so the client in it never made it into any code anywhere. So I'm assuming so once we get into the main scene In the constructor we need to admit Yeah, so basically in confirm selection There should be an if block around So after button dot emit selected Do you want to just push it? Uh, yeah, I do Well, because uh, it can't just be around confirm selected because it would need to be if they selected the specific button Yeah, confirm selected gets called if I could select it Oh, maybe that's the issue. I have no idea what you just said Yeah, because my stuff Yeah, my stuff is pushed. So maybe in some cases the confirm selected Doesn't get called and in which case just pop yours up. So you're so what I'm saying is the the the client and it Does not appear Anywhere in the code In your branch So oh because it's committed but not pushed right Never mind Only slightly brain dead. It's okay It is Wednesday. It's been a long week Wednesday, my dudes Yeah, let me know what you know. There's a bunch of stuff that pushed Wow Let's press So I need to pull Get pull ready Main menu UI Your local following changes would be overwritten by merge. Please stash get reset hard head Uh, I don't know what I just did but we're gonna do this anyway Conflict and preload scene Okay What did we both change? Uh, I didn't change anything. I reset hard to head This client new this client in it. That's the Current change. I want the incoming change, which is where you There we go Aha, okay, so it's where you create the new client And then I'm assuming in the main scene You maybe actually in it the client In the main in the menu scene When the Button is selected. Ah, okay. Yeah, if they if they click the zero button In it the client and then start the main scene got it. Okay. This looks like it'll work npm Serve because in theory if you don't connect you don't necessarily want to get yourself into the game Start Maybe someday I'll get that right server Still running hasn't exploded always good Join Still nothing Did you rerun your npm start? Yes Yeah, so here's the Here's the code Yeah, maybe Confirm selection doesn't get called or something silly browser you Chrome Okay, I'm in firefox Do this because I don't care about the server at the moment But the interesting thing though is that you do switch to the You do switch to yeah, I mean it says it says it's doing the init And then here the web socket connection failed. So that's fine um, so let me Maybe it was just the server was not actually happy. So let's try again One more time and the broker's because it doesn't connect directly to the server, right? Right So you want to check the broker? It's not or check the console Because like I'm not doing not doing its thing. I mean it it sent the init There's the init, but it says the connection fails. Oh because the ip is different. Damn it. Oh biscuits Biscuits and gravy If only we had some kind of config file that wasn't in source control If only That is something I'm kind of working through now is making this a little more portable So I don't have to pack so much stuff locally A docker-cooker demo files. So The server blew up With an error that the uuid that was sent Was not Yeah So why is that? Here's our uuid And it goes into the model So then where did we use it before? Here's so there's a uuid there There's a constructor. Oh, you're not actually passing it the uid when you build the amqp client I don't know how yours works at all But it passes the model and the uuid is in the model Uh, right, but the amqp client Doesn't use the uuid From the model. Oh, well the right fix is to change it to use it from the model What? If the model is the master For like the model is the game state, right? So the player's game state is in the model. It's a model view controller kind of setup, right? So your data goes in the model. Sure We can Do that. I don't know that that we want to do that. Hold on. I have to look through the code and think about that Because this client's model Is that the whole game or is that just? Because if it already knows about the model, there's no reason Not to ah, so here's here's the here's the difference, right? The model holds the entirety Of the game state including the player's array The model doesn't know who you are Does that make sense what i'm saying? Yeah, I know what you're saying So we have to tell the client who we are Even though we're passing in the model which holds everybody everybody gotcha So we still need That we just needed to actually pass the uid I don't like I I legitimately don't understand how your code works at all for you without exploding Yeah, that's interesting. I'm gonna look take a look here now and see if that's what i'm Doing See if I wiped it up by accident. I mean it's no Literally like the so the code in the preload scene It says this dot client is new aim qp Game client config the broker end point And comma this dot model and like that's code that I haven't touched Like it's been that way As far as i'm aware, I haven't whatever whatever code is in your repo on github Legitimately was missing The uid the uid. Yep So I I don't know how your yours worked when you ran it locally, but wow that That moves really fast Pew pew So it's working now. So that's cool We got in through the menu. We have our quit button and if I click the quit button It quits Hooray and on the server side We see Uh security leave command That the player has quit Hooray, so we've got round trip Progress almost Yeah, the only thing we couldn't figure out is like there there is a um Supposedly there's a way to intercept when the user closes the browser tab Um Couldn't I couldn't figure that one out. I couldn't make it work because ideally if they close the browser tab They should also quit the game Uh, and I couldn't figure out how to make that do the right thing But anyway So your code is working Um Oh, I'm in a detached head state Get check out dash b Uh main what'd you call it main menu ui main menu ui. Yeah camel case All right, I don't need the console login it And in the main in the menu scene javascript One of the things that add that got added in from the tutorial Was um a line that says this dot events dot once Phaser scenes events shut down Then it has like a lambda function So I wonder Yeah, I'm not sure what you were talking about All right, so here's red hat game dove SRT I'm just going to create a pr to merge it into master Because Sounds fine to me And I've got my little fix for the ui d Squash and merge Off we go All right done Look at that progress Space rings thing Apparently I have I haven't made the typo Um I could check get blame on that one. Uh, let's see so Next I really want to get some text So, uh, where was that thing? Game objects text, so we're just going to screw things up right here for now um Let's see what happens when I add this to The main scene Main scene Okay, here's where we add the star field where we add the sprite player group physics and group Keyword, what is the player group? player physics groups And the player group is a null client model tile sprite quit button music player group Where we add a group We add a physics group to the player group got it Main game loop when we get a player That's not a container. Okay So i'm just going to try stupid stuff right now to figure things out. So we're going to add text for giggles I should probably check out master get whole origin master Get check out the player text Okay, so I've added text npm start Son of a biscuit What happens and of course it's in the wrong browser window. All right join Hello world look there it is So I figured out how to add text So Next what we want to do is That's at zero zero Oh, there was it talked about doing it in the center of the screen It was like divide by two or something And Well, I don't actually care because it's in the right place. So the the Documentation that I had found said Here's the page Use a container and then add the text to the container So we need the player and the text to be in a container new container The scene to which it belongs Children an array of game objects that add to the container. Okay, that's cool How do we add objects after the fact? To the container Oh, but it's just going to be an array all right Mild interruption. I got it working on windows running a W cell too Do you want to show that off? I don't have a ship, but I have connection to the Menu scene. I got connection to the broker all that other stuff and I do have a docker compose file. So cool I can show up PR Do you want I mean you can share your screen and show it? Yeah. Yeah, uh Let me move all of this over to them on it or that you'll be able to see it on That's the secret So you said you've only moved the two monitors recently No, I haven't even I haven't finally at a point where I think I would like a second monitor I don't know how you've gotten by I don't code like how big how big is your monitor? Is it like one of these 43 inch ones and you put it on? No, it's a 27 Okay, not it's not that super monstrous Is it is it just a coder thing that people need? Yeah, I'm starting to code more heavily and it would be nice to have like Godot editor on one page and vs code somewhere else and like I've been slowly incrementally growing right like over over the course of years Like I started out like it's like a 19 inch monitor and then I moved to like a 24 Then I moved to another 24 Then I moved to another 24 And just like within the last two years. I added a fourth And then my perfect screen, right? Yeah, my perfect setup is uh, I have an ultrawide Which is usually for documentation or whatever it is I'm working on be able to move stuff around where I want to And then I have a vertical 24 inch code monitor, which is an IPS screen And that's where all my code goes and then I have the laptop screen or sometimes I'll use it like a cell phone or a tablet or something But that's for slack or messaging or whatever just so I can reach out with people without interrupting what I'm doing But so what I've got here on my screen if you can if you can see this is I actually have a running local host Uh inside wsl2 and you can see here in the the debug console. It's actually it's got the keys. It's got the identity It's connected and everything And so what I had to do there is it's pointed to Local host 5672 and I had to go in and manually add a windows firewall entry for wsl2 for it Yep Yeah, some fun power shell scripting there to just open that port because for whatever reason wsl2 like as an app Doesn't have any of the windows firewall api built in like microsoft Just and there's a giant set of issues on it on github for wsl2 Microsoft just doesn't include the firewall prompt for any ports you try to open in wsl2 And I don't know what the blocker is to doing it I'm assuming it's because the network translation layer is so low level They have to probably write a ton of code to get that stuff to play nicely Um, but yeah, I mean here it is it's working. It's connected. I don't have the ship You know appearing or moving around yet, but you know everything else all the assets load and everything and uh, let me actually Drag over the windows terminal here so you can kind of see what this looks like um So I actually have the Artemis cloud Uh item broker running and then the game server here and this is in wsl2 and then same thing with The client running from wsl2 And so both of those are getting served from linux, uh, but are you know running the client is running in a web browser in a windows environment Perfect cross platform already Yeah, and in order to get that all running it was just a a bit of a simple docker compose set up here um Then a couple of minor tweaks to the docker file, but I'm just using the uh docker networking Automated links system so I can give Artemis cloud the you know dns entry Artemis cloud and docker networking takes care of all the rest of it So I don't have to worry about copying ip addresses around or building my own network or anything like that. It just It all just works It's nice when that actually happens It's very rare as well So many places where a little hole can catch your toe and you can trip Yeah, so let me get all these changes staged and make sure I'm not breaking any of y'all stuff and then I'll get a pull request up cool So trying to figure out text Where do I draw? Players right So Derek do you find it easier to use linux through windows or use windows through linux? Oh my god, what a terrible terrible awful question With the disclaimer that windows drives me up a wall for a lot of different reasons Mostly around the lines of it's not open source. So I can't fix stuff when it breaks Um, and then you know, there's there's a lot of legacy business decisions So in linux, there's a lot of stupid legacy decisions But you have the source code to go figure out why and windows Like you get to the end of the google pile and it's some developer commenting from 1998 This is the way we've always done it since windows, you know 95 3.1 or something and it's like it's 2021. What do you mean? This is how we've always done it And that croft has been sitting there for like 25 years or something Yeah, and nothing against microsoft like they've done incredible amazing things on top of like having to support literally three decades of enterprise Customers that like if you change a single thing they have a conniption fit Um, but yeah, it's just a complexity for sure Yeah, and you don't want to run that croft like on top of linux like linux You know it has its issues But in most cases like it's pretty clean and in the cases where it's not you kind of can research why and Doing it the other way around where most of the primary pastor windows are still incredibly optimized even though it's there's all this croft in there Running linux is kind of that simple layer on top of that is is much much easier that being said If nvidia and amd Are able to put more resources towards the linux drivers and the open source drivers and get that to a point where it's pretty easy to Clean out most of those edge cases and get graphics graphical applications like games running In a linux environment without any troubleshooting. I will drop windows in a heartbeat And that's just because it is Right, there's a lot going on and troubleshooting and debugging it is a nightmare versus, you know Linux at the end of the day if I get frustrated enough I go grab a box I build everything from source and you know, you run into problems right like I just bug it Yeah Yeah, I think you know sometimes that means the upstream contributions are happening But honestly like that's the way it should be, you know, we should be removing all of this developer friction If you have something break You should be able to if you're an engineer right if you're a programmer you should be able to fix it. That's right Yeah, I've been very happy to see all the strides amd has been moving Toward with their gpu open stuff, right? Um, oh, yeah. Yeah in the last couple of years. They've open sourced a ton of stuff Um, I don't know that they're there on all fronts, but certainly I think their approach You know, it is correct at least Absolutely, and we're kind of as time goes on we're kind of seeing, you know Red Hat's whole value proposition of we swear open sources, you know, it's the better way to do business, right? It's eclipsed proprietary software in terms of velocity even with the difficulties in communication And maintenance ship and all of the you know issues that are endemic to an open source community At the end of the day, you still have the source code And so at the end of the day, you can still get what you need to do Done and you're not, you know blocked by anyone, but your own type of energy and effort So trying to figure out text Where's where's text is actually text is more tricky than you might think from a rendering point of view Well, it's not so the the challenge isn't the rendering the challenge is the Relationships between objects. Yeah Yeah, and so it's like you can't add a child To something anymore You you have to add like a um um You have to put stuff in a container basically and so I'm trying to figure out How to construct a container that holds The physics object and the thing but to do it in a way That works With it's like a major overhaul sadly to change to Have a container of physics groups And not the physics groups So I'm just like do it or not yesterday when I was teaching a programming to a friend Um, I was actually going over like what is the scene graph and you know Why would you want to build that and why do you have different nodes? And why do you have a node with a transformation? That's just 2d for the screen for your HUD versus a node. That's the 3d You know reprojection that is your game world and how that scales out and relates and like Here's the math that goes on behind the scenes to do both of those transformations and then render them in the right order It's not easy stuff like the presentation that I was going to show him like I read through it and I was like I struggle understanding this and I know what it's saying It's like a white paper sort of thing and it's like the concept isn't actually that difficult but the language That's right. The language is especially if you don't deal with that language every day, right? You go back it's obscene. Yeah It's challenging if I'm not honestly like I'm not a very mathy type person But like if I'm not using it every single day and I'm sitting here looking at literally slides and slides of equations It takes me like 10 minutes to look at each one to go right. That's what's happening like a light to go on Yeah And like granted if I am working in this stuff every single day like when I was writing a renderer You know like seven eight years ago. It was way easier like I would look at it and be like, oh, I know what this equation's doing I know what it's saying. It's super easy, but it's man. It's not like riding a bike Long-term information retrieval, right? Yeah, in cold storage It's not even a hard drive man. It's like tape up there or something like that Not near line at all So yeah, they kind of come around to what you were talking about with like text and rendering systems and stuff like I was looking into Uh, what is out there like what's standard in the industry right now because scale forms deprecated Like using flash for Any sort of ui drawing like you would have seen, you know back in the day in crisis or something like that or 99% of all the other games Is it's not supported like that product is gone And so I was looking around there like what are the competing products that everyone's just like? Oh, we just use the built-in unity or unreal stuff I'm like that's not Downgrading comparison, right like the scale form stuff was a pain, but it was really powerful Yeah, so it turns out there actually is a company out there that is solving the problem besides me Epic shout-out to my tiny one-man project for you know writing game GUIs or whatever But uh, yeah, there's there's really not too many other people In that space that are kind of doing those sorts of things So do you have an open source project started or are you just trying to solve it for? Like a game of directly So The open source project that I have is just literally like An example project of hey grab these like seven things and stick them together and it works And all it is is basically a Renderer for web kit that renders to the gpu, right? It's the same thing that ea uses internally Except I think they do all of their rendering on the cpu And that's expensive so translating those most as many calls as possible To the gpu is better and in fact monzilla has an experimental firefox renderer That does everything with rust on the gpu and it's very good But it also is like I did like a week's worth of work to see if I could get it running in a game engine And there's there's probably six months worth of work there. Yeah, you know her single programmer. Yeah Yeah, now would it be worth it to do that? Absolutely. Hi, if somebody wants to pay me to do that, but But you know right now. Yeah, it's one of those things where yeah, it's it needs, you know a bulk of Rendering engineers to jump in on the problem to solve it quickly and add us right to a container So working on text over here Just add that a physics group the physics group So i'm looking through. Uh, I guess i'll share my screen again Actually, we're getting close to time here. Let's see share my screen this screen All right, so Here's an example in the phaser documentation for adding sprites to a container And so they create a container they create some sprites and then they container add sprites to it Okay, so Let's try To do that. Actually, you know what i'm going to do this on the main On the menu scene because then I don't have to keep going into the Other scene. All right. Oh, I don't need working tree menu scene Where's the beginning and here's the net I guess I want a net No, I won't create Yeah, I think yeah, okay, so we have a container and then we're gonna Try to do a physics group physics add group which is where we then add A create of the sprite in that physics group You know, I honestly don't even know if we need physics groups because we're not using Oh, but we may need them for angles and stuff like for set rotation and so anyway, so Player group is a physics group create. Okay, so we're going to have a physics group And then we're going to create a sprite in it. So we have far his group equals this and physics No, this physics add group this physics add group think This physics add group this physics add group. Oh, cloud world bounds true Actually, I don't think we want to collide with the world bounds So we'll just try that for now, and I'm sure this lending error is yeah, it's my thought trailing space is not loud Okay, then we want to create the sprite like we did before a sprite equals This his group This is just proof of concept to try and get something to show up on the screen for our sprite equals this visit create ship. Okay, so I think Oh, and then I have to add the physics group to the container container add fizz group Maybe Container add now it has to be an array Of one which is fine Oh lord Why are why is the bracket key like the hardest key? Fizz group is not in camel case. I I don't care Why does it need to be in camel case? Do they all need to be in camel case? All right, so let's see. Yeah, seriously, right? Okay cannot read property creative undefined lovely menu scene j s 154 154 This stuff. Oh, it's because it's not this that this group. It's just this group x is not defined because it's not You don't say really now Child will render is not a function That is pretty awful. We may we may have hit the wall here Um Well, let's see if we can not add the physics group to the container and see what happens Okay, interesting So we have our ship On the screen, which is good but we can't Add the ship to the container Maybe containers can't hold physics groups This adds sprite Did we add a sprite or did we create a I mean, I prefer seven up, but you know Yeah, well, I can't always get what we want. Can't always get what you want, but if you try sometimes I can see roddy singing along in his head We go through an equal amount of seven up and spray here. We don't discriminate We're a multiple sugary fizzy beverage group. Yes. All right. Well, let's Try a different tactic here and instead of Doing a physics group Let's just do the example that they have in the examples and see if we can work backwards from there. So far What does that get us if anything? All right, so that gets us our sprite Which is weird that it displays it before it's in the container, but I guess Okay, interesting. So it worked. It's now for some reason in a in a different place So let's do All right, that's cool Still in a different place. So now we want to do Texts that text up somewhere Where was text text that doesn't look like a font press start to pee I guess it could be a font the font name must be quoted. Do I need A font name I would assume you'd have at the fault or we're about to find out Yeah, they've written the library. I mean for a web browser There's no way there's not a fault Yeah, because in some of the other sections Where the text is used the font does not specify All right, so here's the hello world text So now if I add Some texts to the container They should be a on top of one another. There you go All right, so now the question is How do I Add the physics group sprite To the container because it totally was pissed off and didn't like that at all So basically we're we're using A physics group and we're creating Air quotes a sprite in the physics group And then we manipulate the bot which gives you a body basically right, so We create the physics group body thing And we put it into an array of all the player physics groups Then we set the rotation on the body, then we set the angle on the body. Hey, that that's great, right? so If we look at Physics arcade group It's a way to collect objects But if we look at container A container says it can contains other objects. So I don't It'll be removed from the display list and added to the container's own internal list. That's fine Position of the game object becomes relative to the position of the container That's fine So I don't understand why when we had the Physics group why we couldn't add a physics group to a container. Let's see Phaser physics group container add a physics group current in your container by look at that there you go Can't do it phaser groups doesn't have body But you can use set all to set properties to all spice Yeah, that was my fear So what I think we're actually going to have to do is draw the text in the same place And then update the text for For the update the position of the text Unfortunately, yeah, and I mean it's a HUD item, right? So that's not unheard of in game development where you have to You know translate a point in 3d space or in this case, right? It's 2d space from one World view to another That's a simple matrix transformation, right? It's just down to the You know the library or using how simple that makes it Quit button player physics groups. So that's an array of all of the player physics groups So I think We're going to need like a HUD array to hold all of the We're going to try it Whether or not we need it Okay, so Now when we're creating That let's try this this player. No HUD array player UID Equals this add text Oh god x y Hello world No Player UID which is text Oh god, here we go. Oh, but I need a player at that point. Damn it, which means I need a server Oh Man this just gets more and more complicated all the time. See we really need a debug mode where we don't need the server To have a player, you know what I mean? Yep. Yeah All right, we'll try to refresh this again join Ah Look at that a thing beautiful Oh Amazing what happens when I oh look at this. Okay, but it's going to stay in the same place Right position doesn't get updated Right. Okay. So now I have to figure out how to update the position Of the text, which I'm sure is just like a set whatever What are you you're a game object? Do you not have like a set something set position New texts How do I just set your Members active alpha bottom left bottom right top left top right angle Auto round blend mode body filter canvas context data geez come on depth Dirty display height. Oh no server crashed display origin The Nope with flip X flip Y frame height And Chuck is so many things I want to like put you in a place scale Scroll Oh lord Texture type X and Y The Y position are you setable or are you just accessible? methods oh You would think all right set Set set set set set flip set font set line set origin scale What do I do with the Position I just set the position Uh set X and set Y. Okay Set dub set X and set Y. Hooray. Okay. Here we go So in the update loop We will Player sprite so this is going to be constant player hud equals this hud array Player uuid so that grabs the player hud sprite thing And server X server Y Lerp X Lerp Y So you know what we're going to do something dumb And we're going to go player hud set X Lerp X because why the hell not player hud set Y Lerp Y And we're going to wait for the magic to happen. You ready for the magic? Oh, yeah It's nothing like the pressure of doing it live. By the way, if anybody is paying attention to the chat, it's not me It's just Roddy paying attention to the chat. Okay So let's refresh you Uh server Join Hey Yay, I'm being followed Okay, so now what I want to do Is I want to grab just the last five characters of the uuid So how do I substring The last five of a string in javascript? Sub-string method. Thanks w3c schools One to four I usually add mdn to my searches because w3 schools are sometimes absolutely crazy, but in this case, it's right. All right So we want oh, oh boy computer meltdown. No yes Computer meltdown. All right. I need to stop you um, so we want javascript string length So I would I would just use slice and then what does you want the last what five, right? Uh, yeah Yeah But I need to know what the length is Uh, so you do So it would be string dot slice In parentheses. Yeah string dot length minus five. Yeah. Yeah So this is gonna be um, where's the text? How do I this add text by our uid? So we're gonna do const short Short oh boy short player uuid equals Player uuid slice Yep Or is it stir? Yeah, okay one thing to note. Um substring is kind of terrible support-wise But latest chrome it will always be the fastest I don't think we should use it right now because it's still I don't think best practice But five years from now Substring will be better and more standard Maybe you know, you know, you don't need a second argument Oh That makes sense There you go I don't know why the server keeps crashing segmentation fault All right. I'm gonna need you to fix that Yeah, I thought we fixed home with the heartbeat issue in the very beginning right I think I thought that problem went away It's like a different problem It runs here, but I'm right. I'm running the bug mode. So maybe there's Hey Hey, there you go. See if two any 633 Cool. All right. Now. I know how to have text. Okay. So um, I'm gonna That's fine. I don't mind stopping chair because we need to end the stream. I'm going to Push this as a branch As a like kind of a work in progress um And so we should also add like the velocity and some of the other information um Yeah, and I think um, I just found that I am gooey has a javascript implementation uh, am gooey is like a really awesome uh native c library like a really Immediate mode really easy to use for like building quick and dirty gooey's for doing debugging stuff. Okay So it'd be really cool to connect this to our configuration So then we can have our values listed and then you could go in and like grab a slider and like modify it on the fly Right. So when you're trying to like Test does this feel good? Does it not feel good? Like that'd be a really great way to do it wouldn't even have to restart the server To do the settings anything of that nature, right? We just do it all like right there on the screen We get like a little Input mechanism where we tap a key and brings up our little debug menu and then we got our little sliders and our input values Yeah Right, and then we can you know more quickly tweak things um And then like I said once you can see them on the ship you can tweak them with a little debug window And then obviously like you can do that whole round trip of does this feel good? Does it not feel good? Does it play well a whole lot quicker? Yeah, so basically changing the settings from within the dui kind of thing Yeah, that'd be cool It's still be nice to not need the server and to just have some debug mode for the client that that's it Just do things but that that might take some more engineering Yes Cool, we made good live coding progress today Yeah, I think we saw Surprisingly, ah come on you gotta have more faith in that somehow somehow I didn't get frustrated and angry at one of you Today, which is the first probably And speaking from personally experience, I didn't think those were prepared so That's cool All right. Well, thanks for joining everybody who who suffered through this whole thing. Uh, this was a fun one So, um, we will catch you next time next month Cheers. Bye. Have a great time Outro