[DEVSTREAM] PRO GAME DEV doing GODOT UI LAYOUT

what up people i'm jason from winterpixel and today i'm going to implement this user interface in the godot game engine so i haven't really looked at this before i've looked at it but i haven't really started implementing it so i don't really have a plan so it's going to be pretty improvised but i have a pretty powerful toolkit of ui tools that i've made to help develop this kind of stuff so generally i think the plan is to make one of these nodes first with you know plus and minus buttons and make the dialogue around it with no implementation and then work on adding this will go all the way to adding the loadout the code to store the data for the loadout so basically this user interface is a bunch of weapons and perks and you can click plus to add to buy a weapon uh in exchange for coins and you store the resulting loadout down here and then we hit play we've gotta send that to a game server and put it into the game so let's get started hopefully everybody can hear me and all that stuff okay so i'm going to start by making a new inherited scene of a dialog which i believe is in ui nodes ui dialog i'm going to rename the root node to ui loadout dialog and save the scene ui notes folder is okay i'm gonna put this on screen obs mode so that i can swap between and go dots um so now i'm gonna actually grab the purple color from the background actually we might have a we have a purple put that in there so i'm going to add a new swatched modulate which is one of the it's kind of a color controlling custom node that i've added that controls the color of its parent and i'm going to add the ui swatch tanking's ui swatch resource to the swatch field in that custom component and type grape select the grape color name which is in this named colorless i actually don't like that color as much as this color so i'm gonna sample the rights one i need to not hide doc's dropper on this copy the html into godot make a new actually eggplant maybe just better let's try that is that it actually i think that's it okay i just had the wrong color name so yes save this and this ui dialog inherited scene has code to kind of like tween itself in and out of the scene which is why we're using that and then there's this scrolling tile background and we kind of build our ui dialog in this dialog root node so for this user interface you'll have gear up on the top some subtext here the coins node there play button at the bottom so i'm gonna yeah i'm gonna i'm gonna make i'm gonna make one of these nodes first actually no i'll do the easy stuff first i'll do the the labels and the button let's start with the button i'm going to go add nodes and i have a button scene which i called good button and then i have this good anchor point which is something i want to move towards getting merged into godot because i think it's so much better than their user interface for laying out uh their user interface notes their editor interface with rect and margin and anchor is really complicated and has a lot of issues compared to this simple three fields offset anchor to parent and pivot which took me you know a few days to come up with this design to solve the problems but i'm really happy with it works very well so anyways put to use that on this button i want to put it its center aligns to the bottom center of this node so that's my center actually i got this wrong pivot pivot 0.5 that's my center so my vertical and horizontal center anchored to the bottom uh vertical bottom so y is one horizontal center of this note and uh why one meaning the bottom is like always bothers me in godots it's it's like so much more intuitive if up is positive y in my opinion maybe there's a way to switch that i'm sure there is anyway so this good button needs to be play in all caps it needs to be the white button not the needs to be our custom button that has the nice shadow which we don't have a good uh we don't have a node we don't have a shader to change that shadow color the way we want to so i think we that white button that was button new white too that's probably it where have i put that before hit play and see if i can see the white button anywhere i don't think we use that it's got to be in the game one of these dialogues oh um pretty sure if i just make this local change this to button new white to oh where's the texture for this button now i'm confused you know what screw the shadow on that let's just leave it i'll have to change that gray shadow to blue later so now the title on the top so this gear up and the subtext so for the gear up i'm going to actually go to the leaderboard which might be called panel yeah go to this label i'm actually just going to copy this font or see which fonts it is panel heading i'm just going to copy it which in godot just copies it by reference which is kind of controversial but if you know it's doing that it works pretty well so i'm going to add good label which is again my custom label which just has that anchor point and some scaling stuff added to it i'm going to paste this font to custom fonts and type gear up so this is the same as the leaderboard in terms of size it looks a lot smaller than the mock-up but maybe that's okay i think the line height on this is different than it is here oh it's just 45 pixels down oh maybe more so i think the line heights if i negative this how that affects totally does i'm going to undo that that's back to normal and i'm actually just going to duplicate make unique the skewer up font what's up ty can you hear me yeah so i think the line spacing for this font is incorrect which is always annoying i'm gonna fix it there and inner shadow you know it's not going to be that hard to do i'm actually just thinking about how to how to implement that it's gonna trace through go dot c plus plus probably which won't be easy but once we figure it out we can add that but that's something that we always struggle with to add or it looks a lot better in the designs than what we can achieve inside of the default go.text but i'll get this i think i'll just do it simply like this for now yeah i think that's good enough nice yeah totally i knew it was there and then i looked in the i looked in the wrong place for it actually why how is this different i don't know is this a different scene it's a different style but the texture like this brown is not or this like yeah it's blue instead of gray and i'm like confused about how it's actually different i'm just gonna if i copy it into the loadout see if it yeah it totally works okay i don't know is this a different file it's the same file the theme probably yeah thanking theme white button and that's annoying that's so annoying well no i did it this way like you you had the white button and you uploaded the white button and i remember i think did i just isolate the button like i deleted everything except for button and honestly these themes work really well if we we got yeah okay that's why i couldn't find it i was looking for another scene you know probably probably the way to do that is like save another button instead of good button it's called like white button that's probably the way to do a lot of our these like theming issues and fonts size issues there's definitely a way to do our specifically our file system design way better so that we can find all these things but i'm not going to kind of save that for project two so yeah this play button if i drag the theme onto it it'll become the style we want let's drag that onto the label there we go is that the right font let's gear up that's like we have like slightly different placements on this and the leaderboards yeah we'll come back to it i'll let you uh you can pick a font or whatever you want if you want to mess around in with this stuff after gear up before the match starts using the coins you've collected in the game what if you can open this page up and buy weapons in the game the price goes up and you can like buy a revival even go that far crazy talk so i'm good at okay i think this is menu fonts so i got what'd you say don't say that on stream this font color like a dark purple pretty sure if i went like black that's bad i'll just sample it so my left to my parents left and my top to my parents top and then offset it down 100 100. not bad i like the tear mark it's now probably all the coins no yeah let's put that in there so that's in the profile ui player points you know in player corner i have this thing that has both the points and the coins i should probably split that up points and rank and coins these two i'm just gonna grab it for now and put it in there without functionality and then i can come back to it one thing that's bad about these tools is that it doesn't integrate with the mouse dragging which i actually tried to do in code at one point and triggered like an infinite loop or something so i gave up but i should definitely make an editor plug-in that would uh allow you to move the note around a little better so you know i'm just going to take the anchor point off and just like move it like this the exit button i guess we don't want that there close button invisible click outside we probably don't want to close the dialog so i'll disable enable background button okay so these two should be fairly lined up all right it's not gonna start on one of these notes one of these weapon nodes maybe the fat boy so it's like a box the black border two tone on the inside these fonts will be the same i believe i think these are all the default fonts menu font here plus and minus i think i uploaded these to the repo do you remember file name up button up there we go button up focus okay so all right actually gonna start i'm gonna do this in a new control new scene and i'm gonna change the top level to panel so i can put style boxes on it and then i'm going to rename it to inventory or no loadout loadout button ui loadout button uh style new style box flat the whole thing a button i don't think so and in ui style box flat go like corner radius as far as how big this thing is you kind of need to put some fonts in it before you can even think about that so i'll add uh a label if you add two labels or i'll do it with i'll do with vertical layout group two labels in a v box add our theme to the top level tank kings theme now our two labels top label and bottom label and let's center this v box with good anchor points so horizontal center of my parents and myself then i think i'm going to design it around the size of the top label so this ui loadout button is going to be way smaller than that uh the labels are not center aligned this one's going to be like fat boy this one's going to be like weapon do you know let's just call the missile nuke weapon zero three seven this is the dark purple the bottom sweet okay so now to do the two tone actually i'm gonna do the background uh dark purple and i'm gonna do another node that's the light purple actually background black or should that be border yeah let's do let's do the background and the purple and with a small thin border actually no i don't want to do that i don't want to have like aliasing problems at the corners so let's do background black no outline background black and then another two panels of these panels could be v layout group as well i'm going to do full rect on both margins yeah the eighth let's just start with one panel so let's be like the outline size negative eight and i'm going to copy the style box into the lower panel just to get the rounded corners i'm going to make unique to make sure it's not copy by reference and change it to that purple which might be on my clipboard it is okay this is the same rounding but i think it actually has to be less rounding just like this is where the uh i guess in photoshop you would you would probably uh you know have to do something like that too hey you just eyeball it this one's rounding is now 32 i don't know 28 looks pretty good but actually the dark purple at the top can have zero and yeah that's that's the way to do that and then margin top this thing 30 60 100 probably something like that and go to panel 2 and let's paste style and make unique make it visible um margin margin bottom 100 or something i gotta change the color so this will be the pink now margin bottom negative 100 yeah let's let's actually anchor this to the top actually let's let's vertical vertical layout group now let's not do that let's just see whenever it doesn't work i just resort to good anchor points on both of them i can see why i wouldn't want to do that here so they would automatically resize and i think i just screwed up my margin so i'm just gonna put it back yeah don't really know what the best way is for this but ultimately doesn't matter as long as it works which it will i'm going to restart this purple margin i know there's like margin container but it doesn't like help at all really he's eight eighths up actually 100 panel to anchor to the center top row direction bottom which is thing that always annoys me about godot size should be just a hundred make this pink yeah that's a reference style box which i was mentioning earlier so make unique and the corner radius it'll be 0 at the bottom and 28 at the top its margins need those eight in there zero center top oh needs horizontal b horizontal both because it's vertically centered right zero uh okay wait center stretch that thing top wide eight eight eight and now i instantly wish i had done it with vertical layout box i think these negative eight yeah at least at least it works that is not the right color is that the same color oh i like i like this color more maybe i'm just uh you want okay i'll uh send me the newer send something the newer concept you have on what was that use this one use the existing one all right okay i'm uh i'm gonna redo this completely again by putting it into this vertical layout box which i should have done this from the start but this is how you get good software you like keep you make you make a mistake or you realize something you should have done differently you just keep doing it it always comes look good on the other side especially if you kind of know what you're doing which thankfully i do pink guy on the top this b box just needs to be all wrecked and the bottom needs to be expand vertical and the top can just be its min size b box separation zero so now that's exactly the same size of the outer stuff and then i guess i'll do margin container which is what the godot people like to use but i've always really disliked it and yeah it doesn't expand so this size flags need to be like that no okay i don't know what margin container is all about full react labels are in weird places so to margin this i guess just here eight eight the heck this thing's like being controlled or something eight eight oh man go down sometimes this is bizarre because of min size on this yeah so when i resized this oh it's the anchor point that's totally why i was uh hoisted by my own tool some phrase i can't remember what it is there we go finally how close is that pretty close that outline was one thing i think maybe i can do it actually with with no margin but then expand margin on the outer node that's actually going to be a little bit better a little bit easier to use now the top label isn't vertically aligned it's better probably close enough i think the bottom one needs to be top it is could be higher i think it's like the line spacing needs to be tight okay this icon and the two buttons and the coin start the coin amount the left align this stuff so my pivot speed zero and then actually i do that to the weapon as well so i'm going to use a good label instead of label so i can have acre anchor point i think i did that to the wrong label anchor zero call it weapon type weapon loud motorcycle yeah stolen exhaust pipe or whatever that's brutal okay so this thing will wrecked can't be full wrecked just needs to be the same size as parents vertically so size flags vertical expand might not do it because of the good label script so let's try just regular label it was the same as before size flags vertical expand still doesn't do it okay anchors yeah this stuff sometimes just go without stuff never seems to come naturally or intuitively this ui in particular it's the mint i don't i don't know why it's yeah in unity i like know how to do this stuff to get everything like sized the way i want it to but i can never seem to master this wrecked controls even though i've been using it for uh you know a couple years but i kind of have my own way to do stuff but sometimes it doesn't cover the bases you want so you got to use their stuff and probably makes me worse using their stuff my top is zero and my left go yeah 0.5 and then negative 100 i think there we go finally okay weapon icon i think i can kind of get that off of powerups panel ui powerups these are saved in ui powerup icon sweet to benefit from the previous modular work the ui loadout button needs a ui power up icon in this panel okay it looks pretty good already actually needs to be not in the vertical layout group and then put the anchor point on it my left goes to my parents left my top goes to the parents top oops keep putting in the wrong fields right top is that it's supposed to be like halfway up yeah or a little bit down 32 by uh no eight in like eight in sixteen okay the sizing of the of this thing's in the wrong not quite right oh sure yeah i think i have eight like yeah four on each side right there we go and then this this guy from the corner 20 pixels yeah yeah 15 and 15. the height of the purple bar yeah it totally helps 67 and how tall is the whole thing yeah or like you can go excluding the black okay i already had that i guess we must have already talked about that and how far in should the fonts be from the left side and then the color of this font is the same as the panel above it i'll check in one sec 85 it's not this this icon is not the outer layer yeah the outer layer is quite scaled down do you want it bigger the whole the whole thing yeah that's like not scaled does this thing have a min size probably has like a weird implicit min size how big should this be down to oh into the 152 i think that's i think that's got it and from the left what's that that doesn't the whole thing i guess still looks off i think this line height is really gonna screw in things up your weapon needs to be anchored to the top of this top is one top is zero that needs to be not on the coins yeah yeah sounds good i think is this the default font yeah it is the line height it's not quite right but if i change it it's going to relay out everything so i think i've just gotta slightly move stuff yeah now for these up and down buttons pretty much have to do it in a theme to override the previous button the default style so i'll call this uh loadout loadout button theme i guess little button theme up yeah different one for up and down now i gotta do add class items for button styles i think it's probably going to be easiest to do this in a a new scene i'm going to go save branches scene ui nodes and i'll call it uh ui loadout button up and then i gotta rename it here and uh so the theme on this thing i'm going to it's ultimately going to be like nested within the default theme so you can override stuff but i'm going to actually start from scratch and then ignore the label i guess on the label i could put the default theme there's only going to be plus actually there's going to be no label so plus and minus do you want me to do plus and minus with the font higher do you think you sent plus minus nice do you remember what the file name of the up and down button up there it is yeah you can't highlight you can't uh inspect this style box from a node it's like a bug in godot i have to like go to the theme so this is we got to record that in our list of problems so i gotta go load out theme and then i can inspect this and now it's called button up if i go to i think i need to do this the size of it there has to be like constant it doesn't scale the way i wanted to i think i think i don't do this with a theme actually at all do i want to no i'll try it without the theme so then i'm going to do i'm going to change the type of the root remove the script first of all change the type of the root to flat button or tool button tool button which has no styling and then i'm going to add a texture rex full rect and put the texture in here with keep aspect centered put it behind the plus and now when you scale the outer layer it has a minimum size probably because of something bizarre with this line height which is super annoying it's like is there like a base i don't even think you can't send your base button pretty sure this uh this aspect of godot is really annoying i can't let go smaller than this size smaller than okay is that just just because of this min size there we go okay again yeah so this this will scale scale itself up and down and maintain its aspect ratio which works pretty well now ty just sent me a color this the swatch hover tint yeah this we can put the blue button style to it just by dragging this swatch onto it and then it'll look like this hold on this isn't working the target of it apply it to tint children i think uh then it's going to tint the icon tint children i need to like exclude i know we can like write a shader that doesn't get tinted but that's obviously i think that's like mega overkill to do so this thing almost needs like apply to a different target actually i think it supports that okay that'll actually be perfect put this back that's like a library i wrote that color library i wrote probably like a year and a half ago or longer but uh yeah that's this target node property so instead of applying to its parents i can make it apply to this and then when i type normal here yeah that'll have the same colors as the other blue buttons which is probably good hey ty sweet is there any other no i don't need anything else so the the plus is the size right like between the plus and the and do you know what size the vertical or what size horizontally 187 by 138. i'll just do that one yeah i just want the size native size of the node maybe i don't want the expand setting okay now sweet you you kind of looks like they're like squeezed together vertically like versus the yeah i think if i make these two smaller that'll have that effect no it won't so check out i have a i have a hack that'll fix it but what are we saying okay yeah i know what you mean so so this thing essentially needs to have the same like it needs to be centered around where you want the them to align you know like centered around the plus and minus i think if it if we pad the texture rect you can actually achieve that so that they did a line like i think the bottom actually if i increase this like 180 this thing needs to be locked to the center which it is that's the middle oh it needs to be locked to the center okay and you see a child of that but then that's going to tint it then if this is not tint children i think i gotta reset that and yeah then do that okay so that's always centered on the image and the height of this guys i'm going to stick with texture rect i think there's a alternative but get these to align together i think it's going to be kind of awkward i'll see what this does that there i'm gonna i'm gonna do this just by positioning it more manually yeah call nice yep i think we're pretty pretty good getting closer i see you ty yep so i'm gonna take this out of the hbox and replace it with just a control in order to be able to then position this stuff more manually i'm going to move this one up let's say 16. no so that's negative 16 which always drives me nuts and move this one down 16. but then the plus and the minus need to be lined up you know what man maybe maybe i'm just not going to get those perfectly lined up maybe i need to crop them more like this because if i want to need to know to do it properly just what i just decided to not do i need the asset to have as much padding here as it has here so that they can be aligned that way you know what screw it i'm just going to put back to a vertical or horizontal layout group and leave it like that and move on the x1 looks kind of wrong but it's close enough i need the one in the middle um i think i need to make a new box for this as well it's not going to be a button it's just going to be a panel and custom styles cybox flat in size it's 138 tall could be like 138 wide way too big 100 by a hundred with needs to be in the middle so that size flag thing thinks so 100 100. and i mean this is my issue with godot there's so many ways to achieve center like there's like size flags shrink center grow direction both that's both for x and y dimensions and then there's like x and y in the margin in anchor so it's just the the inspector's not optimized for workflow it's like a powerful set of controls but it's not it's designed from like a programmer's perspective like it's designed how the canvas server works or something it's not designed to like be mouse navigateable and things like that like there's this which you can like i know a lot of people get by with exact coordinate positioning but that's something i'm trying not to do and something that's like almost always advisable to not do and when you resort to using that like exact this is positioned here and it grows in an unspecified way and isn't constrained when you go like localize your game your layout is completely destroyed so you have to you know to get around that it's really tough so these like good labels like all these good labels here for example weapon if we translate it to uh like brazilian portuguese it's super long this is actually going to eventually scale down there we go so i have to add these margins like right margin needs to be however far it is off to the left some some number anyways there's i have a scaling label to solve that problem the values aren't set up properly but uh it's a hard thing to do if you don't lay your layout out really like with h boxes v boxes min size size flags so that's just one of my one of my things that i hope to improve and go dot is this this inspector like this process for laying out controls okay so back to what i was doing which is designing this uh icon here that'll have how much inventory you have of this weapon so it'll be like a box this on screen it is this is white box black outline black font that's going to be the menu theme menu font uh so i'm going to put menu i'm going to add a label with a one in it like we could do a good label so it would scale down if you know you had 20 000 of this item you know we better do that we better go straight to the heavy hitter the good label and then scales implicitly down in the side of the container which is good and you can add margin so it can be like margin four four on left and right and then it'll leave a four pixel margin and you can see it would be right if the character spacing was perfect but it's not and the line height's way too big but i digress so bg color white outline border border color black border width like a small number maybe do corner detail 20 i wish i could put that on infinity uh corner radius four four four four maybe that's probably way too small let's try 12 12. whoa uh more border let's try eight too much just gonna match this guy next to it it's pretty close menu font on this label this menu font have a shadow now i did not think it had shadow just have to be mini theme i mean your theme doesn't have a shadow like ultimately i think in godot you have to base your ui components like your fonts your buttons or everything around the theme like you want your button style in a theme you want your fonts in a theme you don't want to do custom fonts you don't want to do custom style you want to do everything through theme because then it has this cascading override but the really annoying thing is there's no filtering and soldering through themes besides the file name so in order to like organize your themes you would need to do it with like folder structure and file name structure at least with like the styles there's a type so you know you can kind of filter for type on certain searches the theme inspector i think could be if if you fully redesign the ui for godot and you made the theme editor way better and the ui editor way better you would have a really powerful very powerful engine very powerful ui engine with animations and tweening and all that good stuff which is not perfect in godot but at least it has something which unity has like nothing there's just deep uh due tween every time i install dewtween i'm like unity is missing a huge piece but uh do tweenplus shapes by ace gigmo whatever whatever still what's her name developer sheeps homer stella homer that's coming to my head uh freya no no i don't know her name anyways the shapes library for unity is really good and i'm kind of jealous of not having it in godot okay we're getting pretty close on this node i could probably go pretty quick to scripting it soon so i got to make an api for it and the api is going to have like what type it is how many there are and then based on the type which will be an enum the name the type and the coin cost will all be dynamically updated so you can like make make a note set its type to fatboy and it'll apply all this other stuff so i think once i have that and i guess it'll need max counts now i can just count to infinity yeah well it'll be a cost okay so let's start let's just eventually yeah i'm trying to imagine basically imagining what the gear up script like the whole node script is going to look like but starting here i think we're pretty close to having this i just need a simple api to match type to the data i'm going to do that through uh like const dictionaries written into gd script not with any dynamic data but by doing it that's way it's super simple and then we can go straight to like networking it or like cloud integrating it to make it uh you know go the full way when we get there but right now ui loadout button just needs a simple api on it so i'm going to go to my ui scripts folder new script call it the same thing ui loadout button find it in the file system it's got to be a better workflow to just adding a script to a node drag it onto there last name ui loadout capital o button uh it's going to have an export so yeah the power up type so in ui power ups or the power yeah ui power up icon yep okay you can export enums from a different class that is really good export poweruptype.powerup and actually we have like in this this power up class i have power up image map you know what we might as well put all the maps in the same folder so we're gonna have power up type map weapon or perk should i put that into this array where is that array power up type hmm this this shouldn't be here i've definitely decided that this is an icon script but in power up type with power up types with ammo power types with elixir well everything's going to have ammo right now so it's always going to be weapon there's actually going to be no perks so i don't even need to let's not even script that but the cost of things should it all be uh where to put the cost of stuff you know what let's make it all the same costs right now um should i do that yeah everything the same cost i want to i want to design it so that the next stage is easy put all the code into the next piece eventually this data is going to be pulled from like our cloud back end so there's going to be a query that happens and it's going to have it's going to give us the data for all of them then we want to apply the data to each of them so this each of these is gonna can be created with like a json dictionary i mean all you need is the cost this is the only cloud thing you know what let's do them all the same for no no costs no implementation of cost until we have that query or even design the cloud data first so let's imagine everything's the same cost so as far as the parent script goes yeah should it just apply that stuff i mean i did the other i did the other ui like this with a tool script that applied it in the editor i mean i only need these top four right now maybe i don't even write a script for this node i just do the on readys sometimes when i when i don't want to really script this node but i want to like encapsulate it i'll uh just write a script that just grabs children so that a parent script can then like operate on them i'm just gonna kind of rename stuff bottom panel this thing's gonna be like weapon name this one's gonna be coins label this one's gonna be weapon type yep let's just call this name actually no weapon name is is better like they're not weapons you know they could be weapons or perks so on ready var i'm just going to call it weapon name label i like to put the type at the end every variable name and this is just encapsulates those node paths uh coins name coins label i don't know why i have name in the scene tree there i don't i just misread something my eyes played tricks on me on ready var the icon definitely needs to be encapsulated power up icon is that plus button in the minus button now this thing should control its quantity or should it should control its animations of the buttons which they have they have slide animations and quantity i guess it could have max and min amounts that's going to change based on how much you've already spent so i'm going to put all of the scripting into the parents it's all like each button is really connected to the the rest of every other button and how much like each quantity is connected to all other quantities so i can't really script this individual node that deeply i'm going to have to tie them all together in the parents this is going to be a quantity label and i'm going to copy that node path which is a nice tool put it into there again if there's a tool that could like you could copy node path and or you could like drag and drop it to make this this more complicated like the ultimate way to write this stuff like this these hard coded node paths are not that great but if you did export node path var and then i like to do this this convention where i underscore the real variables names like make a shadow variable for this weapon name label and then you drag and drop that path here to uh weapon name this is the ultimate interface for your your modular scripts in godots because then when you rename if i rename this thing weapon name rename it to weapon name two it's still mapped it remaps it but in here this reference is now broken but it's really annoying to write these export note paths for coins label powerpike on plus button minus button quantity label and then go drag and drop and apply them all it's really annoying to do that uh so i don't do it a lot of the time and like these hardcoded node paths these dollar sign node paths every single time you see them in any project they are something that could break something that could at runtime not be mapped to anything based on scene tree somebody changes the name of something which is a an achilles heel ultimately but it's fast to do so if you optimize the better workflow you could have more resilient software even here like icon power up icon this is actually a broken note path just noticed which would have sucked hit play and that happened seems weird it's at the top level but it is where it's supposed to be and this one i can actually map to a type these ones are buttons advantage of uh putting the type in everywhere so you can not forget what it is okay so now that this is exposed like that i can do all the signal connecting and everything from the parents and i can even set the power up icon now back in the loadout dialog which is what we're working towards i can instantiate all the children but i didn't map the type okay ui power up icon oh sorry ui loadout button this thing has power up type here and if i do it with tool script it is going to be probably the best okay so here's where the const maps come in so i think weapon name is not uh the power ups don't have names in the system anywhere i don't think except for the enum name yeah i think i'm gonna i think i'm gonna put the names all the data just in this enum class it's like really simple static class so i'll do power up names and then i'll map each one of these let me make sure i didn't do that already in ui powerapps which has this that's in ui power of icon opening the scene not the script i think this could probably be in the same static class it's like all the power up data is in this single gd script but i don't want to refactor that right now power up dots boy is nuke and things should be all caps like this will all have to be torn out at least for localization if not cloud integration but at least this single file can kind of be a centralized place for data you don't even have a jetpack in the game but good reminder that we should implement that weapon i actually did have a jet pack actually when i i first started working on this game jordan had implemented a jet pack and no jump or there was a jump i think but uh i definitely focused on the jump i think i took out the jet pack as well did we call that the triple shot yep maybe a cooler name than triple shot exists builder and water all right i'll i'll uh complete the map even though i don't know if that stuff's gonna be used like water's only in there for the kill feed let's power up names type we don't have any buffs yet or perks the cost yeah okay i'll do i guess i'll do cost hmm all this stuff's going to be buyable you know what no cost no cost too much work to do to do everything at once so loadout button ui loadout button this is going to be a tool and it's going to apply the name and the icon based on the power up type with a setter this can be tool this is going to be set get set powerup type and this is going to connect even the editor the inspector to this function when you change powerup type which is an int it's going to call this and we'll do self. we'll actually apply it equals p and we'll use that map so we'll go to the weapon name label dot text equals power up type which is where i put all the hard-coded data for this the power-up names like get p yeah and default value empty string actually let's put power up type in there instead of p so it's a little clearer and power up icon this has a power up type setter as well so now if this is equal to power up type uh that'll like cascade down to the icon and so it's going to change the name and the icon now in these setters this one thing that's really kind of annoying is there's two problems with them with these tool scripts i think that has to be at the very top uh and that's this can get get called during initialization so when it deserializes this node from like a saved scene it'll be not inside the tree and it'll try to access weapon name label and power by gone but they won't be there because they're part of this on ready like the tool doesn't connect to on ready node paths that well and the on ready uh statement or declaration uh it doesn't apply so sometimes this setter will get called and this will null this will be null and it'll it'll render a null error in the output which is really annoying and to have my output is like super leggy right now which is interesting but so if you wrap your setters with if is inside tree then you can avoid that from happening if you want to make them really resilient to like the script uh you know compilation breaking or being added and removed you have to add this funk init and re-apply these variables weapon names label coins label all the on ready node paths you want to get them again in a knit and that's how you make your tool script really resilient but i'm not going to do that so but i'm pretty sure what that means will happen is when i go back to loadout dialog i don't have a single one in here yet so this actually won't happen but if i had already had a ui loadout button here and changing the power missile wouldn't work see it actually still doesn't work that's supposed to apply to the children and the size is like zero so i think for the size i have to go to load up button and add a min size to be exactly the same size it's like i feel like go to default having one size and you should opt in to having two sizes but i digress so ui loadout dialog shouldn't should have a not so borked up node and invalid set index null so this might be that that problem that's actually happening all the time so i'm actually going to close all the scenes and reopen the dialog yeah okay it's still happening close that scene again ammo slash ammo label as part of the ui power-up icon so you know how i said that thing was going to cascade it seems like i deleted the ammo labels off this that's right and that's because i don't want to render ammo label do i not want the ammo label let me see here it's for this node i kind of do want it so in the game we have this ammo label but in the mock-up we have this one like a little top right thing and i think the one in the mock-ups better so i'm actually just gonna i'm just gonna change the ammo label which that tool script turns on and off so this is going to have no panel my headset just made a really horrible noise and turned off i guess because i haven't talked and it's because i because i'm not listening to anything i'm gonna just duplicate the fonts the main fonts and size it down for this balu three that's better value 32 like yeah we definitely need like organization of our fonts like ballot 32 balloon 16 value 8 probably not that small but you know font name plus size and i you know then you wonder like well should it be semantic like menu font large font stuff like that i think just for the fonts just file names and use the themes for that decentralization or that like uh you know the semantics of what the what the note is so that ammo label path is definitely hard coded in here and the ammo parents it's kind of not going to be used anymore so look i did that init look at that that's exactly what i was just talking about annoying thing you must do to reload on ready variables in tool scripts and even uses the is inside tree and it looks like i mapped it with or filtered it for editor hint as well and the ready so this is an older tool script where i think i went a little more hardcore but it does work very well now there's this like self.ammo yeah this thing turning it making it invisible used to be that this needs to be the same thing there might still be okay now i think i got rid of all the null references that'll be in there so now on the dialog loadout dialog i should be able to change the type and it definitely still doesn't work so output ui power up icon line 48 ammo label does not exist looks pretty simple to me that because it's a tool script i'm gonna i'm gonna reload godot because sometimes those references get broken especially if the game is having it like being recompiled still not doing anything so something else wrong must use powerup type and so i did a recursive setter yeah and set powerup type in order to have it apply to the serialized variable you have to you have to actually hit write you know power up type equals p but if you put self here it calls the setter again and recurses and that's what this that's what this did that's compilation failed which i actually think is breaking that tool script process so that's why reloading the whole project should fix that if that's what the problem was so in loadout dialogue okay still still something wrong do not find ammo label on power up icon i think i am using a custom version of it here that i deleted yeah i totally just deleted ammo label off of it i just add it back from the original wait what is going on here yeah this works now i believe it does not emit this one delete that there we go i changed this okay that works it's turning the ammo label on and off and now when i do this should do the same thing but i think i gotta reload that this is why you do the init you know because if you do that in it i wouldn't have to do this do i load up button oh it looks like it's working except not to the icon now oh the ui power of icon is the wrong path and that won't it won't fetch it won't refetch it so ui loadout button reload it again and now it's all working okay so on the dialog we're going to this thing should work doesn't oh maybe it does does work now i can go ahead with the uh line share of the layout which is going to be one horizontal layout box four of these in it first one's gonna be triple shot second one is the nuke third one is the mine and fourth is the shields and the separation's gonna be a lot bigger than that probably want this thing to center aligned and then expand horizontally which we're just going to do center wide i think there we go i kind of want all these things to expand like fill like evenly fill the area which okay that actually does do that actually that's i don't want them to expand i want the spacing to expand which i can't easily do so i'm just going to not uh basically not do that center wide there is going to be two of these but there isn't two rows yet it always looks so much worse in the implementation than the mock-up it takes a lot of work to get it as good as the mock-up the heck why is this thing size really small ah i just want this thing to grow infinitely not have a max size at all okay why is that thing not in the right place the i'm actually just going to add a new label i think seems wrong with that one actually if this thing was this the default control size is 40 40. and uh it has mouse on block here which is so when i like add a control to just be like a folder like a node holder um that 40 enters into the scene tree and if it was zero which i think should be the default this good labels fit inside parents wouldn't apply at all because it would be like you can't scale this to be a size zero so would have ignored it but because is this actually working now i think it is yeah i don't know what was wrong with those previous labels but uh i know i do know if the control was at size zero and created with side zero wouldn't have had that problem which is another thing on my godot fix list your starting loadout but a space kind of always triggers me if there's like a space in the label at the end i'm not going to do that then i'm going to move the label over manually space it out okay we're pretty close to the mock-up there's a lot of implementation to do i hit the play on the scene button here all of my my focus states is going to need to be done in the theme uh and those power chart has zero visibility i think that's because that ui power up icon is coded to run a game play so it's actually like looking for the local player having ammo and then it's setting itself to invisible if the local players on the game so the whole scripts this is this annoying this is the i've got to split the script into two pieces now that the part that controls the icon in the part that like controls the gameplay logic of like whether it's turned on and off or displaying how much ammo is left or if it's available it's gonna split those two pieces out and the easier way to do that right now is definitely go to this ui loadout button and like duplicate the ui power up icon it's going to be like make local actually i need to do it no matter what no matter what i do i need to split change the script there's no duplication i can do i could completely code clone the script i think probably the better way and yeah i hid that tank game dependency by doing get viewport find node just kind of anti-pattern because of this problems like this um if there's no tank game maybe just don't set yourself to invisible where is it where is it sending itself to oh itself to invisible off the start you know what we're only going to do that if there is a tank game literally one line of code fixes that whole architectural problem and then you know adds the adds to the problem well debatable it's available whether that's a good decision or not really depends on success of the project that's really how you judge every decision right so now when i hit play those things shouldn't disappear yeah they still do ui power up icon invalid set index something with the tool script so this thing can't find a game it shouldn't say itself to invisible there and it shouldn't set itself to invisible there the missile it would these all on missile they're definitely not they all look like they're on missile in elixir you know i think that this is it's just not getting to self. it's not setting itself to true actually this this whole thing needs to be if you have access to the game okay they're all they're all missile you know what i'm just gonna set it in ready like if i don't have this if is inside tree you know what oh is that what that editor hint let's try this you can tell i'm a really good programmer based on myself being used by my own code my own system yeah so this is the thing that like is inside tree avoids but now when i hit play does it line up properly it definitely does not and there's no call stack to this exception which i think means it's on instantiation so i'm going to keep that there and i'm going to duplicate this these two lines of code in ready dual scripts are so buggy um hitting the wrong play ah this power of icon didn't apply it's because the reddies apply in reverse order like the child applies first there's no setter on this all right finally yeah that was a lot of working around annoying problems in tool scripts which yeah like i said before i kind of like have the solutions on hand but they're always you always have to you like kind of choose like do i implement this init right now this annoying code clone or do i not do it because when you get once you get all this stuff set up in the scene tree ultimately it's serialized and saved it's like okay that works it's the process of building it where stuff breaks in those tool scripts and that that looks like okay this is not the same position that i wanted it to be in believe it was 15 units that looks pretty good and i think it needs to be bigger which is probably why i made it local in the first place maybe it should just be bigger across the whole game in fact it probably should these nodes be really tiny i can't remember what the size was that we picked but let's go with like 150. that looks not bad i think the icons just might need to be bigger it looks like oh it is transparent oh that's the game code again i think i need to remove that i need to that thing earlier i was like yeah you can just hack this script up a little bit further bad decision well it's all part of the journey but now i've got to undo that and add a new script which looks like this one's uipower by gone like in the game and i need like a dumber version that doesn't do the button toggling stuff that the cat it does like gameplay which that's like normal hover pressed and this thing doesn't have toggle mode it does okay i gotta go to the i'm gonna use the bathroom but this thing's getting close it's 501 maybe it's a good time to call it this thing is close to working and yes when i looked at this ui i knew it was gonna be a lot of work i'm happy with the progress that i made definitely took a long time as these things do uh kind of working through problems through it and the last 90 of this is definitely going to make it look a lot better and i've got all the scripting to do uh mapping all the data all that stuff so i think i'll stream the scripting as well i guess people are interested uh this is my first real long term long dev stream so hopefully it wasn't too too bad but uh talking and coding at the same time is definitely hard so thanks for stopping in see you guys later

Channel: Winterpixel Games

Views: 24,605

Keywords:

Id: xGNd_VjjIyo

Length: 117min 38sec (7058 seconds)

Published: Fri Aug 06 2021