Godot Networked Multiplayer Shooter Tutorial #3 - Server Browser UI

so the first thing we're going to do is we're going to add a new scene we're going to add a user interface rename the control node to server browser add a new node add a panel node we're going to rename this the background panel then for the layout we're going to set this as full rectangle and then i'm just going to make some adjustments i already have the values of the adjustments here but you can manually adjust it however you would like i'm just going to use what i manually set up so i did 96 on the x 162 on the y and then for the size i did 1728 and for the y on the size i did 864. next we're going to add another node it's going to add a button we're going to rename this button to manual setup and we're going to set this buttons layout to the bottom right i'm going to set the text on the button to manual setup and then i'm also going to go to custom fonts and i'm going to drag in our base font going back in the rectangle properties i'm going to set the position of 1255 the position on the y to 689 and then the size i'm going to have 443 on the x 145 on the y that's our manual setup button we can duplicate this now so we're gonna add another button we're gonna rename this to go back and we're gonna set the text to go back and on the rectangle we're actually gonna change the layout and we're gonna set this to bottom left and then on the position on the x we're going to change it to 30 and the position on the y we're going to change it to 6.94 okay and that's our two buttons next we're going to add a line edit we're going to rename this line edit to server ip text edit and we're going to set the anchor to the center now we're going to go down to rectangle and we're going to start our position on the x to 461 position on our y to 189 and our size on the x to 806 and the size on the y to 105. now in this text edit we're going to want to make sure we use the custom fonts using the base font and we're going to want to make sure we set our alignment to center now under this server iptextedit we want to add a label i'm going to rename this label to type in server ip i'm going to set the text to this label to type in server ip we're going to want to set our custom font so drag in the base font and then we're going to set our alignment to center and center and then we're going to be setting our layout to top wide and then under rectangle we're going to set our position on the y to negative 105 and our size on the y to 105. next thing we're going to do is we're going to duplicate one of these buttons right here i'm just going to drag it under the server iptx edit you want to make sure that's under that and then we're going to rename this button to join server again you want to make sure everything in your scene tree is under the correct uh node now in this join server button we're going to go layout we're going to set it to center and this is going to center on top of the uh text edit so we're actually going to move it down so i'm going to go to rectangle and i'm just going to set the position on the y to 147 we're gonna set the text on our button to join server so right click the background panel add the child node add the v box container node then we're gonna go to layout and we're gonna hit full rectangle so on the x i'm gonna set the 70 and on the y i'm gonna set it to 40. then on the size i'm going to set the 1588 and on the size on the y i'm going to set the 649. next thing we're going to do is we're going to add a label under the vbox container we're going to rename this label to searching for servers and set the text to searching for servers and we'll just set the alignment to center on both the align and the vertical line then we're going to set up our custom font use base font we're going to go into our rectangle i'm going to set the minimum size on the y to 70. this will make sure when we drop stuff in the v box container that it at least has the height of 70. now i'm going to add an animation player under the searching for servers and in this animation player we're just going to add a new animation we're just going to call it searching you can call whatever you want but that's what i'm going to call it now on the first frame we're going to keyframe our text property in this label set the keyframe option and then press create now go to 0.2 we're going to add a dot to the end of the text and then we're going to keyframe it and we're going to repeat that for 0.4 add another dot keyframe then you're going to want to go into 0.6 add another dot and hit keyframe and then we're going to set the animation time to 0.8 and we're going to tell it to loop and we're going to tell it to auto play so make sure this auto play is enabled or else it won't play and it's looping or else it'll just play once so now when you play it it has a little animation telling you that searching for servers and you can space out the keyframes even more to make it slower but what i'm going to do is i'm actually going to set the speed to 0.5 and when you see this screen it actually you won't see this server ip text edit all the servers will populate in here and then you'll hit manual setup and then this will show and this vbox container will hide so if the server does not show up because sometimes like my phone for instance will block udp packets which is what we're going to be using so in that case you'd hit manual setup and then you just type in the server ip okay one final thing under the background panel we're gonna add another child node we're gonna add a label and we're gonna rename this label to server browser label and we're just gonna set the layout to top wide i'm going to set the text to server browser i'm going to set the alignment to center and the v align and to center again i'm just going to drag in my custom font i'm going to set the position on the y to negative 176 and there you go it will tell you server browser and they'll have the searching for servers automatically this won't be shown when you start it now you could save the scene and we're just going to call it server browser.tsgn and now that's all the ui we need i will be going over all of the code and everything in the next tutorial

Channel: PlugWorld

Views: 4,836

Keywords: gamedev, godot, game, development, design, multiplayer, network, networking, shooter, topdown, io

Id: c6RtXZaK_LY

Length: 5min 48sec (348 seconds)

Published: Mon Feb 15 2021