UE C++ Tutorial Series: Items, Interaction, Inventory #9: User Interface Work Part 3

all right so at the end of the last video we  got the code in place for some of the widgets   um that some the inventory panel and some other  ones that are yet to be built uh before we keep   going with um building those here I wanted to  show something that I encountered when I went to   build and relaunch if you tried to Launch and you  got a bunch of weird errors is probably because   a lot of these um UI elements in the  C plus code they need to be forward   declared and so like for instance when I was  looking at the I think the item slot here   it's got a border an image and  a text block so if we were to   comment these out these four declares here  when you go to build here I'll close the editor when you go to build the  errors don't really make sense   this is what I'm talking about it says stuff like  hey you know you're missing a semicolon um and   then unexpected token and this and that and then  it's like the generated code the generated files   which are uh what the unreal build tool uses they  have errors too so these are a little misleading   um but really what it is is that it's essentially  treating these classes here is something it   doesn't understand and so all you need to do  is make sure that you forward declare those um so you know just you can either do it so that  I like my four declares up here all in one place   so that I can easily go and see exactly what is  Ford declared but some people like to put class   in front of the thing down here that'll also  work I just think it's more messy that way and   um sometimes you know you can if you don't pay  attention you could like duplicate it all over   the place so I just find it to be a lot cleaner  to have it all centralized in one place right   here so now when I go ahead and launch the errors  should be gone and we'll go back into the editor   all right so yep all the errors were cleared  out uh from the adding in those four declares   so the next thing we're going to do like I  said we're going to start building the missing   inventory uh the missing UI elements so go into  your project uh content folder here and we should   have the user interface folder from earlier in the  course if you've been following along step by step   so in here we created the inventory panel and the  main menu and obviously the interaction widget   but what we don't have right now is we don't we do  not have the inventory tool tip the item slot and   the drag visual for when we go to start using the  drag and drop functionality so let's just create   a couple of those um these are all just going  to be basic you know user widget blueprints so   let me right click and go down here uh and then  it's at the bottom here under user interface   so I already created one yep user widget so what  I'm going to do is I'm going to have wbp inventory tool tip I'm gonna have wbp inventory  item slot and then I'm gonna have a item drag visual now we're going to start with the inventory panel  because it's already in place the basic layout   and also it's the quickest way to show you  the effect of having uh made a c plus class   that have in a blueprint parented to it and what  happens when things don't match up so remember   from earlier we made this and then just recently  made it to where it compatible on the screen but   nothing's working now this is parented here in  the top right you should see that it's parented   to the C plus plus class and if you click it your  IDE should open up right here to inventory panel   now what I'm talking about is the bind widget  meta tag and so as I mentioned in the last video   and probably one before that this will make it to  where the editor now says basically this element   declared here in the C plus code is mandatory to  be in the blueprint or else it will not compile   and so sure enough if we open this up  you'll see there's a compiler error in   the blueprint compiler whatever that  is so let's click that and you'll see   you get it does doubles for some reason I  don't exactly know why but you'll see we   have an inventory panel weight info and capacity  info that are all missing and then it repeats that   so this is what we have to address and this is  the way that you can enforce you know having   it linked up to the C plus code and then once you  do create these which all we have to do is rename   then the C plus code drives the visual part of  it here so our inventory panel is our actual uh   our actual wrap box is the actual inventory panel  might be a better I might want to rename that   because this whole thing is inventory panel  this might be something like I don't know   inventory pane or something it's it's  pretty easy to rename you would rename   it here in the C plus first and then you know  recompile come back in here and then fix it   we'll go ahead and just do it here for  now so you can either rename it here   in your outliner or you can come up here  and so we'll change it to inventory panel   for the weight that one is weight info and  this one is capacity info now let's compile   and everything's good because now it finds those  matching uh you know widgets that it's looking for   so I will save I thought that it was already save  on compile success all right so now open up the   inventory item slot because that's the next  crucial piece all right so now this one is   very basic um first let me re-parent it so go to  file re-parent oh I didn't mean to do that merge   I didn't mean to click merge all right reparent  blueprint and what we're looking for is inventory   item slot now again I've talked about this before  but this is why I named the blueprints with a wbp   prefix so that way you know which one is a  blueprint which one is C plus plus so this   case this one right here is the C plus class so  I'm going to repair it now compile and let's see   did I forget it looks like I forgot to add my  bind widget tag and so that's why it worked so let me go ahead I'll just go over here to my uh  where was it my inventory panel and just copy this   whole thing and then back under inventory item  slot dot h can add that in here on the end it   should be fine or wherever you want so we have  an icon a border we have a quantity text block   and I think that's it the border of the  image and the little quantity number   all right let me go ahead and look and see did  I miss that anywhere else not on the tool tip   now it's here on the item slot what  about the what about the drag visual   drag item visual okay so that  one doesn't have anything   so for the drag item visual we can pretty much  copy exactly what the item slot is going to have   for right now we're going to come back and and  revisit this but basically you want the same stuff   the drag item visual is just kind of like a  smaller version um that way it uh sticks on   the mouse when you drag an item and just shows  you a representation of what you're dragging um this isn't super important but I  don't want it to say inventory slot   okay so I'm gonna go ahead and close the editor  and recompile that stuff and then that way it's   actually linked up in here and you know you  can hit the compile to check and make sure   that everything's good all right so I'm back in  the editor after that and once again I didn't   record it but I forgot to do the four declares  again so in drag item visual make sure you do   that otherwise you'll get those weird errors  again on these three members you declared here   so now when I go back into my inventory item  slot and hit compile now you see it's linked   up since it has the bind widget meta tag and  now we're missing all this stuff [Music] um so   for the so so all this thing needs it's going to  be pretty basic so first what we want is we want a desired on-screen size and we're not going  to use a canvas panel because this thing is   moving around on the screen it's not meant  to be attached anywhere on the screen or   stationary it's going to be moving when you like  um you know it gets added to the inventory panel   so the first thing we want is a size box and then we will have the icon  so that's going to be an image and then the image we want to be able to  show a border so the border is going to   be pretty thin like almost like see when  I highlight this in the little blue line   we almost want that kind of effect but  when we want to be able to change the   color of it maybe a little thicker bit  a little bit thicker lines than that   but what you're after is the Border and so drop  that let's see can accept ah okay so it says it   can accept additional children and the reason why  um well I don't know the detailed reason why but   basically size box you can't keep putting stuff  into it what we actually need is called an overlay   um and if you Mouse over it it should tell  you allows widgets to be stacked on top of   each other so that's what we want so delete your  image put an overlay in the size box and now we're   going to drop everything into the overlays  so put the image then we can put the Border and then we want the text block which  is just called text oh like that okay   first we want to get this let's make this text  a lot smaller obviously this is ridiculous um let me see here appearance where is it font  all right so font we want this to be pretty small   uh and it needs to be aligned to the right  because this my I'm going to put it up here   in the top right give it a test number of like  just a zero for now and then what you want to do   to make sure that it shows up on on backgrounds  is change this outline uh the outline size here   and I think it's in the wrong place okay yeah so  for some reason it's top to bottom is where the   actual top is so this would make the image  on the bottom border and then the text and   that's what we want uh two is way too much  for the outline there that looks a lot better   and then what we want to do is  actually shift this text block   uh let's see take off the padding okay that  looks a little better needs to be up there maybe make it a little smaller okay I think  that looks good so I made it a size of six   let me switch to my nicer font  okay size of six I took off the   padding and then if you do something like  yeah okay I think that looks pretty good testing out to make sure it looks  okay with multiple numbers and stuff you could probably could probably tweak it a  little bit more but for right now I'll leave it   I think I don't know did it look a  little bit better with the Roboto   I really don't like the Roboto font but oops but I feel like it kind of does the slash across  the zero is not great for this so you know what   since this is just the inventory quantity stuff  I think it's fine to leave it with the default   font for this okay so for the Border uh the  image is already by default filling the box   and you know actually let's look at the size  so I think that the size I used in the past   when I was working on this was like an 80  by 80. um so for width and height override not eight eighty no okay 80 is obviously  way too big and maybe more like a 50.   and this will just be something that you  have to tweak you know once you're uh   once you see it go into the inventory and see  how it looks on the screen because it's kind   of hard to visualize 50 pixels right now so  we'll just have to see um we've already sized   the inventory panel to the screen right so now  we need to uh pick up an item the first time see   this pop up and then then it'll be very easy to  know like okay I need to make it bigger so it was   really small before like probably 30 pixels  so that's why the text was looking a little   I don't know something seemed off but this  will be better because a little bit bigger   font will make this look much better yeah  see now the zero the the outline isn't like   just a solid thing in the middle and for  different numbers it's looking good okay   uh image we want it to be fully  expanded so you can click the fill   border we also want it to be fully expanded  and I think if you change brush color all right   so there's a way maybe your border is  always a solid color not uh transparent   in the middle so we might actually want to put  the border on the bottom and then take the image   and add a little bit of padding onto it so like  three pixels that's too much two pixels of padding   okay I guess that's okay let me make it 1.5 pixels  yeah okay and then I don't like the text being   smashed up onto it right there so I'm going to  actually add a little bit of right padding uh so there we go so this is going  to be the inventory item slot   um and this is all it is it's just three  things um that will give us like kind of   the basic representation so what we need to do  first is we need to rename these so item border   item icon item quantity compile and it should  have saved looks good okay now obviously the I   used red there just as the default to be able  to easily see it it's going to be set by our   um by our you know whatever we have set on  the item when you when it gets put into the   inventory it's going to be set to the correct  color okay so there's that one and now let's do   the tool tip so for the tool tip the tool tip is  going to be a little more time consuming I'm not   going to record making the entire thing but just  to start off with the basics so again you want it   to be desired on screen just like we did with the  item slot here you want to start with a size box and then what you want for the tool tip  because it's going to be just a bunch of   different you know a square with a bunch  of different text I used a vertical box   and that way I can take multiple text blocks  here so get text and basically you can hit Ctrl   C when you're in this outliner here and just hit  Ctrl V and it's going to paste a bunch of them   so what we're going to do is like you know  this is going to be like your item name and um   you know item description or actually item  description should probably go down at the   bottom you can click these arrows here to  kind of reorder stuff in the uh vertical box   and so then you know something  in here will be item quantity and so on and so forth so what you should do  is pick a good size I think I'm going to use   something like uh 80 width and like 100 height and  remember these fonts are ridiculous right now so   you can actually shift click on all of these and  as long as you have similar things selected you   can now tweak the text for all of them at once  so I just change the text down to 10. I'm going   to use my custom font which you might have gone  and downloaded your own and uh you know tweak it   until you basically get it to where things are  the size you want and everything fits so maybe   I might need to make the text a little smaller  I'll try doing with an eight and see how that   goes once we get into the editor but um the part  that I'm actually going to kind of skip recording   is where I go through and space all this out and  you know change everything good make sure you put   a background on the uh tool tip here whenever I  get it done I'm going to you know resume recording   and talk about the changes I made and that way  you can easily you know mimic it if you want to   but yeah just go ahead and set something up that  you think looks cool and then we can go from there okay so here's what I have for right now for  my tooltip uh like I said kept it pretty basic   it just gave it like a really dark kind of green  color and uh in the background here in the way so   what I did was so I had the vertical box and then  you can right click on an element and say wrap   with so a border can have a child so I wrapped  it in a border and the border is the dark green   so the border is only being used for a color  here and you know we're not controlling this   in code anywhere so the Border will just be  a background color you know you can't give a   background color to a vertical box since it's just  for organization so you need something back there   an image probably would have worked too since  you can set the color on an image the same way   I also so one thing I did and this can  probably be tweaked to make it a little bit   nicer um I had a Mac stack size number and then a  text and I think that I actually renamed some of   this based from what I showed in the in the video  where I first laid this out because I thought it   was like a little confusing oh yeah I had cell  value in here I took that out because it would   just be a pointless number that we can't really  mess with right now so I took that out and um I   think one of these was named slightly different  uh I think the logic I had when I first designed   this was you have a Mac stack size text piece that  always will say Max stack size and then you have   the actual number that'll change and that way if  it is stackable you get both of them whereas you   know if it's not stackable then both of these are  collapsed but it kind of doesn't really make sense   to have two you could easily set the text to have  the word the words and the number at the same time   so I'm probably going to go back and refine this  feel free to do that on your own if you want but   it's not super necessary essentially what we're  going to have to do here is say okay if it's not   stackable collapse this and collapse this and then  you know it'll just they'll just both be hidden   um rather than having to do it on one single  thing to get it side by side all I did was I   um right clicked on the stack size text and  wrapped in a horizontal box so I'm going to   do the same thing for the weight um because  for the weight uh see I'd have to add it in   all right we're gonna we're gonna fix this uh  I'll come back later and fix this we'll take   out both of these and then we'll make it to where  the weight actually says what it's supposed to say   it's you know sometimes you just gotta tweak  it as you go and we don't even know how good   this is going to look size-wise on the screen so  don't worry about it right now it's totally fine   um I went uh oh but yeah the horizontal boxing  I'm talking about is if you right click wrap   with you can pick things from here and it'll put  it inside for you but anyway I went through and   I took all the names from the C plus class and  made the match over here but I did not re-parent   it so I'm going to go file reparent blueprint  fine tool tip there it is and then we compile   and it's already good just because I already  copy pasted all the names and made them match   so now if we go to inventory item slot  remember it had a bunch of stuff that it   needs to know about like it needs to know  what the tooltip is so go to the graph   and right here you'll see the uh the details  panel for you for an in um a user widget is   here in the graph section and down on the left  and here they are so here's the where it wants   to know what's your tooltip class so make sure  you set it to the wp wbp version when dealing   with the user interface elements we want it to  point to the actual blueprint with the visuals   so there's that um and then the drag on and visual  we can make that one super quick go to let's see   what did I call it item drive so I'm rename  that to where it matches it's drag item visual so dry item visual is literally  inventory item slot but smaller   um so I think what I have here for this  one is a 50 by 50. so I'm just going   to actually copy paste this whole  thing put this in drag item visual all right so I skipped for a second basically  it's set to fill screen you want to put that   back to desired on screen and everything should  snap to where it needs to be um the size box everything should snap right back to where it  needs to be it was all messed up because it still   thought it was trying to fill the whole screen but  you know like I said it's smaller so put it down   to something like a 30 by 30. and change the item  quantity text size to be like a five like a six so that it still looks good you know proportional  uh let's see and then take off the padding okay so I gave it one padding on the top and the  right so that it moved the number in a little bit   and that is our drag visual uh  don't forget to re-parent this one compile everything's good because we copied it  the names are the same we're not going to be   using this quite yet we're going to make sure the  inventory itself works okay first and then we'll   worry about drag and drop stuff all right so we  got a tool tip we have a item slot uh now that we   made the drag item visual come back over here drag  out in a visual class set that to the blueprint all right everything looks good inventory  panel go into the graph and it needs to   know the actual item slot so change that to  inventory item slot and notice because it's   a t sub class of you only get those two  choices so we want the blueprint version   we have that we have everything set here in  the item slot we have the drag on a visual we   have a tool tip and in the inventory item slot we  are setting the tooltip as soon as it's created   so let's load this up and uh and see if we  pick up this bucket if it actually works   and hopefully we won't get any crashes so I've  got my inventory open uh you know again you can   still Mouse around and control things with  it open so I'm going to aim at it press e   man look at that oh wow it is extremely small make  this bigger so yeah so I'm on a 27 inch monitor   and um this is like ridiculously small but as you  can see it's working though that's the important   part for one we have okay so this is not working  something something's disconnected because this is   not supposed to show the weight and the capacity  so we'll look at that but we have a tool tip and   it works and it knows to pop up when it goes when  the mouse crosses the border of that item slot   it shows bucket shows the mundane item type  it says Max stack size and then it says a   plain wooden bucket so that's all actually looking  really good it's just extremely small and the the   icon itself is extremely small so we have finally  gotten to the point to where now we almost have a   nice working inventory the only thing we need is  to fix the visuals here and then make it so that   you can actually drag items out and drop them back  into the world and that's a pretty fully you know   fully basic but fully functional inventory at that  point so um let me go ahead and close this back   out and go back to the editor and I will determine  the call the problem here and walk through that   okay so the the bug was very simple uh  basically here in the inventory panel   when I first when we first initialize it we  call set info text once and that will pull in   the zero you know zero out of whatever  and show the maximum value and stuff   um but then I you need to call that same  function after you add something so inside   the check to make sure we have a valid  inventory and slot after you run the for   Loop to add everything then you set info text  again to make sure that everything is updated   now one thing I noticed that kind of bugs  me I had the buckets weight set to four   and you know that's a float and so when you go  and pick it up so see now we're at zero out of 50.   when you pick it up so now everything looks good  right and then we have the print added a bucket   the thing that I don't like is that it is  truncating my decimals here I want this to   inventory weight is a float capacity and  current weight is a float I want this to   show the decimals I looked a little bit as to how  to figure that out and I couldn't find anything   um I think the problem comes from the fact that  we're generating a single string and at some   point you know this returns a float and uh this  returns a float but I think the conversion process   from putting these into a string and then putting  them into an F text I think is where it's for some   reason like doing some kind of what it considers  friendly thing to make it more human readable   but really it's just frustrating because it's like  if you don't want that now how do you control that   so I haven't figured that out quite yet um it's  not a huge deal but I would prefer that to uh   to to be how it looks uh but again that's  you know something to look at for another   day so now everything is looking pretty good so  let's go in here and tweak the sizes on these   um on these widgets uh yeah and then to test that  out I changed the buckets weight to like 4.5 and   when you pick that up it does say 4.5 it's  just the point zero it's dropping um so yeah   so first we want to change the size of the item  slots and we also want to open up the tooltip   now if you'll notice the tool tip when you hover  it's got a bunch of empty space at the bottom   and I don't want that I want it to fit you know  whatever the content says I want it to fit so   what that shows me is that oops the tool tip  has too much minimum size on the size box here   so it's minimum height uh is 80. so we need  to change that to something even smaller like   like a 50. so that way you know if the if it  only if it won't have all that buffer at the   bottom because now it's going to be able  to get even smaller based on the content   um but let's see but overall this whole thing  needs to just come up in size so maximum Let's   do let's just double it for right now so uh let's  see wait what was it oh geez all right so 240 200   uh this one make it now 160 and then make  this one 100 and then for all the fonts we definitely want that to  come up so I'm going to try 12 this one so this one's just a number yeah  put that up and then this one and this one   and then the inventory item slot also  let's double its size uh let's see   I think I did use 80 before because that's what  I started trying to go with 80 by 80. quantity   like do a 14. all right compile compile  let's look now and see what it looks like okay uh that's like almost too big the tool tip is  looking way better though way better and see   it's still got a little bit of a buffer at the  bottom there so I'm going to make that smaller   um the item icon is feeling too big to me and  also where's my quantity here something's not   something's out of order or something like that so  because I'm supposed to oh you know what no I did   that on purpose I mean it's where it won't show if  it's a one because you don't need to print one on   every non-stackable thing so Max stack size is  definitely I think yeah that's just because um   here in the tooltip code you know I talked about  these two things there's nothing in the actual   um tooltip code itself that is managing that  so those things are just always there so let me go back to the item slot let's re  take this down so let's do like 60. 60 by 60. uh no it's almost like villain too small  all right so tweak it to whatever you like   um to where you you know it feels  good with the scale of everything   else on the screen I'm do I'm feeling  better about the tool tip at this point   um still needs a little bit of tweaks and  also my bucket's name needs to be capitalized   but I mean the the the main point of all this  is that you can see now you know now you have   all the different pieces that you can work  with and customize to your own liking you   can see where we've gotten all of this text  you can see you know where we've gotten this   you know how we're adding stuff to the inventory  we can do let's let's make a couple buckets here um I mean I don't know the hotkey for play so  I got to keep doing this one thing I wanted to   mention the uh you know the characters blocking  the screen I think I've talked about this in   a previous video I'm going to add in like a  little feature to where you can zoom a little so   I know this is kind of annoying the way you have  to pick stuff up right now but uh we will we will   I will show um how to how to fix that  and refine that and make it to where you   can right click to aim and get closer  so let's pick up a couple buckets now so one thing I see right off the bat  is these are slammed up against each   other so I they need to have some uh  space here but other than that I mean   it looks good you know I want to have like  at least like one or two pixels in between but yeah inventory is working 12 and we have three  items that's capacity and we have uh you know 12   weight because we have three and they weigh four  I think that that four is actually the weight the   max stack size text to the the to the right of  that would be the actual stack size and that has   nothing right now because it's not stackable  so I think the four underneath is the weight   and so you know there's a lot of flavor text you  need to add to make this tool tip good like this   should say four pounds or whatever and then you  know uh Capital capitalization mundane item I feel   like that can be taken out that's what the border  is supposed to be a couple little things to tweak   um I'm gonna work on those when I resume recording  I'll you know talk you through the what I found   it's probably something that's not too complicated  probably more to do with the UI than anything   um and then uh the next feature to implement  before we're done with this section is drag   and drop functionality to where we can drag the  bucket out uh you know to here to the main part   of the screen and then it'll pop up at the  player's feet or wherever you want it to all right so I've changed quite a few things  mostly nothing that's major but tweaked several   things since um since the last time I was  recording and I said I was gonna figure some   stuff out and uh you know talk you through  what I changed so first let me show you what   it's looking like now so we come over here we  pick something up and as you can see I kind of   got a good size going for the uh icons for right  now at least uh weight is now showing the decimal   capacity is not because we don't need it  the tool tip is now looking really nice um   I sorted out some of the text I sorted  out the sizing of the actual widget so   that way you know it it can expand or contract  based on the content and I also added in the   the mundane where it says mundane that matches the  color that the border is so now both the border   and the item type are just you know they're going  to be displayed and they're going to show you   um they're going to be color coded based on you  know whatever you decide the colors are for those   quality types um I made the background a little  bit darker here on the inventory just because it   gives some nice contrast it's subtle but it kind  of breaks it up and um yeah it looks good uh so to   do all of that oh yeah and a couple more things  before I leave the editor I also went in here   my user interface and before I  paused last time I talked about how   uh you know it wasn't showing the Border  something was wrong with the item slot   so what I did what I what it was is that a  border if you don't set anything on it it's   literally just a solid color I also found  out well I should have known I just forgot   um in my my bucket icon here is a fully  transparent background so what was happening   was not that the Border wasn't working  really it was that the Border was a full   color because in the background you know it was  just being set to a solid color and the bucket was   transparent so we weren't seeing a border because  everything behind the bucket was the Border   so what I did to solve this was uh if you go  here to your launcher and you don't have to do   this you can obviously I've been as I've said  the whole time customize it the way you want   but what I did was I stole some  assets from another project so   here in my library I have this project  called the action RPG inventory system   it is I believe it's free I'm like 99 sure it's  free but I downloaded it a long time ago you   can see you know it's it's old and it hasn't been  updated but don't you know don't worry about that   it's using like all basic default stuff just a lot  of blueprints to even to implement an inventory   uh the the important thing about it though is that  if you want get this go in and migrate out of it   these textures here they have a an item border  so as you can see it actually is transparent   in the middle so that way you know it won't  fill the whole thing even if the image is   smaller it'll only color this part when it  changes color I also got the there's a slot and as you can see this kind of like lighter  gray is going to be where the Border sits   so now what I did was I changed it to  where the borders on the bottom uh that   I have a plane border on the bottom and this  could be just called like the fill color   so the fill color is just like the dark like a  dark color then I have the border and then the   icon will sit on top of that and as you can  see the icon is now what's highlighted green   so it's going to be slightly you know it's not  going to cover the actual border and then the   quantity sits on top of everything so that's  what all I changed to make that look nicer I   also copied that uh to the drag visual you know  it's just the smaller version of that same thing   which we're going to use here  shortly so again you know   I know that it might be a little frustrating  because this is not something that you can   easily replicate I've tried to keep everything  to where you can just mimic exactly what I have   but in this case the defaults that we're given  through the umg widgets and stuff were just kind   of frustrating to work with mainly what drove what  what was driving it for me was the fact that the   the bucket was transparent on the background  and so I wanted to be able to account for any   icon that's transparent but this also works  just fine for anything that's not transparent   right because the border is always going to  sit on top so even if the icon itself is um   you know fills this entire thing you can see  how where the green is the Border still is   going to be a little bit above that on the little  Corners there and it's just going to nicely align   so it's just a uh you know the defaults  you could make it work if you put a bunch   of different borders of different sizes and  stuff but I've I knew that I had these and   they're you know easily migrated from the  other projects and so that's what I did   um let's see so I changed a decent amount of stuff  here in the tool tip for one if we look at the   header I used to have two text Fields here one  was like stack size text and one was the number   um so I cleaned that up and  the the way I got around that   was I made it to where every time you  Mouse over and the tooltip is created   it's going to set a string that's a combination  of the word and the actual value same for stack   size if we are looking at a stackable item  then we're going to display Max stack size   and then show you know show the number and the  arguments here the functions being used here   the from int well obviously just make a string  version of whatever integer this one sanitize   float what it does is by default it will so you  can see there when we Mouse over it it will strip   trailing zeros and allow you to control the amount  of fractional digits so the reason why I wanted to   use this I mentioned it briefly earlier in the  video is that I was annoyed by not being able to   have any control over my values here so I want it  you know I wanted the float values on the weight   but I didn't want it on the capacity and I wanted  to be able to show that if there's a decimal   so I found that when I was looking through the  different you know functions for the floats really   where this comes into play is here in the item  uh not in the item slot in the inventory panel   so I did the same thing so you remember earlier  we had set info text well set info text was using   ftext from string and then I was passing  in something like a string that was like   this and it was taking in the two different  arguments the weight and the weight capacity   and there may be a way to do it but I was not  able to find it to be able to control the float   format while doing that so I did the same thing  in here I replaced the way it was doing it before   with now a const string that is created every  time set info text is called that is built from   the weight a slash and the weight capacity and  both of those are passed through sanitized float   while the the capacity is put is put through from  int and so um you know creating these strings is   not too computationally intense and it's only  going to be happening you know mousing over   through the inventory and so uh it kind of  bugs me a little bit to have to make strings   every time like that but for the sake of you  know the UI and being able to control it and   keep it formatted the way you want uh you  know I thought it was a good trade-off here   so um let's see what else did I do I  renamed um in the inventory panel itself in the inventory panel itself first off I  increased the size a little bit so now it's   just a square 600 by 600 I also change this to  where now we we're always gonna this will be   you know in my mind for what I'm making here  this would always be constant uh constantly   displayed at the bottom we would always show  wait we would all show capacity so I split these   apart before it was just numbers and now it says  weight and capacity and now these numbers here   are the ones that are being  set in the C plus plus code   I also took the wrap box itself and renamed it  so it's called inventory wrap box now rather than   inventory panel I thought you know it was a little  bit awkward that the widget's called inventory   panel and then you had inventory panel and you  know even in here in the code it was referring to   inventory panel so I just went in here under the  header and I renamed it to inventory wrap box and   just had to change it in one or two spots I don't  know why it's not coloring this piece of text but   so you can see their inventory wrap box so like  I said not anything that's a crazy change it's   all very quick but it was just little tweaks as  I was looking at stuff I started finding things um the colors so the colors when I'm  showing you you know the color and   the borders being set here so uh let  me load it up really quick with the   other color so if I take the bucket and  change it to like um a different quality now you'll see it's got that nice orange border  and then when you Mouse over it it's got orange   coloring on the text so obviously it doesn't  match we're not going to leave it at that but   the thing is is that I had a little bit of a  of a challenge I got kind of frustrated with it   basically before what I was doing was I was  setting values here in these linear colors   that I thought you know were an RGB uh from  zero to 255. but I was I had never realized   this entire time working with these that  these linear colors aren't what's called   um I guess it's referred to as srgb space but  it goes from zero to one so my colors were all   wrong my orange color was not working and I think  I had like a blue one none of those were working   um and the reason was because if you put a value  in greater than one it gets capped at one and what   I had was for orange it was just solid yellow  because red and green were being kept at one   and then blue was at zero and I'm pretty sure you  know when you mix red and green you get yellow   so I had to go and hunt down the proper you know  conversions look at those numbers again for those   colors and convert it and so uh one easy quick way  I saw to do that um there's a website here called   uh online color converter and it's some guys like  it's often some guys GitHub but the thing about it   was you can sit here and choose a color so like  if we do one in Orange and right here is what   I'm talking about srgb from zero to one it puts  the three values in a you know separated by comma   and you can easily go in here and like paste it in  so they have a 0.5 for the green on their orange I   decided to do a little bit darker in the end and  so yeah you know it's uh just one thing that it   even if you go and look at the class it's not very  apparent because these are floats and it doesn't   really tell you anywhere I saw that it's from  zero to one it doesn't explicitly say that now it   does talk all about the different spaces and this  and that but you know I'm not super familiar with   srgb versus HSV versus linear and so on and  so forth and so it was just something I I   just just learned just now and uh wanted to make  sure that I mentioned that so if you are using   set brush color in your UI you  know it's always from zero to one um so the the other changes  I made uh for the tool tip basically the way the tooltip works is it's a  size box right now before I had a Max desired   width and height checked and you can see there it  was set to 200 and 240. I remember that when we   when we did the um interaction widget here it's  attached to a canvas panel right because we always   want it in the same place on the screen and if  you click on the size box here it's got size to   content and that was what we had to use to make  this one grow or Shrink based on what it contains   but for some reason the size box that's just  by itself it doesn't have that um but I think   what's going on is that uh when you don't have  a Max desired height and width it will just grow   on its own based on the widgets that it contains  so in this case the text blocks uh and the other   thing about that is you know when I realized that  was happening the item description right it could   be long it could be a couple lines you know  a couple short sentences um down here there's   a wrapping feature so if you un if I uncheck  this real quick and show you what's happening pick up the bucket and now look at what's  going on well okay it's making a liar out of me   earlier I had that Set uh I had not I did not  have that set and the the item description   was flowing way off the right of the um the  screen maybe it's because of this you know what okay so these two are independent of  each other so if I put this back to zero   it's going to be disabled and now when I pick  it up yeah see so in this case it's actually   um because I don't have those Max values  checked let me do it one more time   so I had it set to the size box with  the max desired width and height and see this is what I'm talking about so  this is what I originally had and I was like   hey you know this is obviously unacceptable  uh and so what I did was found that wrapping   section uncheck your max width and height and  then down here for the item description text   since I knew that I had my previous width value  set at 200 anyway then I told it to go ahead   and auto wrap or do the wrapping at 200. and that  way the widget itself expands to fit that but um but then obviously it wraps at that  and then the widget since there's no   Max width will still expand to fit it nicely  and so I think it's looking pretty good uh I   made the you know capitalize the name of the  bucket gave a little bit of space in between   things increased the fonts on most of them uh  and so yeah you know it's all about you know   like I've said it's just tweaking it to where  it gets gets to where you like the way it looks   so that was the those are all the things that  I did um I talked about yeah I talked about   the important from the other project  if you want to do that otherwise just   tweak it enough with the existing you know widgets  widget features here until you get it to where you   like the way things look and the next thing we're  going to focus on now is we're going to add the   drag and drop functionality where we can once we  have one of these things picked up we will be able   to drag it off the inventory and let go here in  the open space and it will pop back into the world so for that we can go ahead and close the editor  because we're going to need to change a couple   things in C plus plus namely we need a drop item  function on the character right because that's   that doesn't exist so uh it's going to be a public  function because other classes need to call it in   this case it needs to be accessed from our main  menu so if you remember I left a placeholder here   and it basically said you know get the owning  player Pawn so we have a reference now what we   want is when we when it detects a drop on the main  menu which is covering all the you know what we   perceive as empty space on the screen it will then  cast to the correct stuff get the player reference   and then call drop item with that Whatever  item comes in on that drag and drop operation so let's go in here to our public functions  on our character and we're going to add   drop item it takes in a u item base pointer and that is item to  drop it also takes in a quantity quantity to drop give it an implementation and I'm going to move it down underneath toggle menu okay so what do we need to do in drop  item well first we need to see if we can find the matching item  that's coming in uh I'm actually gonna do let me think do we need to safety check against  the inventory could inventory ever be null I would say no only because we are  creating a default sub-object of inventory   on the player every time the player is  constructed this Constructor will run so   it's going to be something is definitely  severely wrong with your game if   that fails and you're still able to get to this  point during play so I would say we are safe   not doing a you know if player inventory  and then putting everything else in that   what we are going to do is we're going to  call find matching item on item to drop so basically now all this is saying is like  this is a safety check just on the item like   okay you're dragging something in and it  detects the draw but now let's just do a   quick check to make sure everything is valid  there what we're going to need now is we're   going to need F actor spawn parameters  and call that spawn param so this is   a struct containing different things you can  set for spawning a new actor into the world so our first we're going to set owner and that's  this because it's coming out of the character we're going to set B no fail to  true and I think what this is I think this is like saying like  if the space the item is trying to   spawn is occupied will it just cancel  and we will say we don't want that so uh not the same okay so this is  it's not the case but basically   we want to set that just because we  want it to continue because I guess   these conditions in here are not  something that we want to stop it and then you want to call there's just there's a  so spawnprems.spawn Collision handling override   this is the one I was really just trying to talk  about it uses an enum and what we're setting is   e-spawn actor Collision handling method and we  want to use adjust if possible but always spawn   so right so like I said this is the one where  like say you're trying to drop something right   next to a wall and the point where the item  would spawn would be inside the wall it will   kind of move it back for you rather than  you know just failing or something like that   so now we need a spawn location  so we're going to make an F vector   call it spawn location and it's  going to be get actor location and then what I did was I decided to make  it drop very slightly forward so it kind   of looks like you know you could add it comes  out slightly forward of the character looking   like he kind of threw it down and this would  be something you would want to do if say you   had an animation that was like you know he  grabbed something out of his pouch and kind   of tosses it this would be something you would  do for that so get after Ford Vector times 50.   and so all this does is it gets the forward  vector and just moves 50 units forward which   is very short it's not a lot at all but it's  just enough to make it kind of like I said   look good with how it spawns rather than  spawning in the inside of your character uh now we're going to make a what's  called an F transform and so this   is like location rotation and um  size all packed into one one struct call it spawn transform and I'm  passing in get actor rotation   and then spawn location and so I think  what's going on with these guys is   you don't have to have all of it you only have to  have I think it will like use the default size if   you don't pass in a size I know that transform  is those three things but in this case we're   only passing in rotation location I think there's  a third Constructor that will let you pass in size yeah see rotation translation and scale that's  what I'm trying to say rotation translation and   scale that is what constitutes a an F transform  all right so now we've got where it's spawning and   how it's spawning you know how its orientation  will be so now we're going to set a few things   specific to our inventory system and stuff so you  want to make an n32 call this removed quantity and what we're going to do is we're  going to call remove amount of item   pass in item to drop and pass in quantity to drop all right so now we've got removed quantity so now  we're actually going to spawn a new pickup actor   so we're going to call it pickup and we've  not done anything in the character class   with a pickup up to this point so I'm  going to tell Rider to add my include   and go up here so this is part of my game  include so I'm going to separate that back   put that back where it needs to be going back  down to drop we're going to call get world   spawn actor this takes in a template and  obviously it's going to be an a pickup   and what we're passing in is the pickup static  class to spawn transform and the spawn params   so I talked about when you make a UI element you  don't use static class we're doing this purely   through C plus plus we're constructing a c plus  object first and then remember when a pickup gets   initialized it sets everything it finds from the  data table it sets the uh you know the asset and   all of its text Data stuff for the interaction  it sets all that all in the C plus class   so calling the static class here is a good  way to do this once the pickup is spawned   immediately what we're going to do is we're going  to call pickup initialize drop because it's a   we've got both remember we've got drop and pick  up but because there's no possible way for the   item data table to be valid on this pickup  that's being created we can't we we set that   through the blueprint there may be there may  be some complicated way to set that right here   but I don't know how and I just found the um you  know using the two different functions to be the   easiest way I know I talked about that when  I was showing how to write the pickup class   so that's something I'll probably look into but  for now that's why we're calling initialize drop   because in this case anything dropped we'll need  to go through that since there's no way there's no   way right now to set the item data table in this  pickup that we're creating right here so what we   do all we do for initialize drop is we pass in the  type of item again and we pass in removed quantity   because that's how many was removed out of  the inventory and you know that could be a uh   it could be rather than dropping the entire  thing it could be part of a stack we drop right   and so that's why you're getting that's why  we want to know a quantity for remove amount   and we want to use that here rather  than just drop the whole thing and that's it that's all we need for drop   um we've already you know since we've got pickup  already we've got inventory already everything's   already here and in place and you just have  to set up those spawn parameters and create it   and then call that so pretty easy um  I did add myself a little log here uh what is it player in a  fine matching item will return   so this is technically this is technically  returning a u item and doing an if check to   see if it's null or not so I'm going  to say item to drop was somehow null   should never happen but just you know just in  case you want to be able to trace that easier   all right so now we can drop something off of  our players so now we actually need to use that   and now I'm going to go back to main menu  and I'm going to go ahead and get rid of this and now we can start doing our uh the  casting and stuff so we're going to create a   first we need to include our um item  drag drop operation so under inventory what did I call it it's under user interface inventory item drag drop operation  so we're going to create one of those called item drag drop and it is equal  to cast to a u item drag drop operation   of oh man I didn't mean to hit  that the incoming operation once that's created then we're just going to  do a check and say if player character and   item drag drop oh okay it looks like did I not ah okay so  something else we got to do I didn't fill any   of this out yet either but thankfully it's very  quick uh and pretty pretty easy so all we're going   to need is uh two Fields uh here in the header  and we don't we don't need to touch the CPP at all   uh one of them is um base of  source item and the other one is a u inventory component Source inventory put my four declares here it  already did one of them for me   so there and that's all we needed now come  back over here to main menu now we can say why is it mad oh well no I have the header now oh  yeah classes are um classes are private by default   if you don't add a specifier so forgot that okay  so now what we need is we need to uh okay so we're   doing an if an if check if player character and  the item drag drop Source item are both valid then we're going to say player character drop item and we're going to pass in item drag  drop Source item and item drag drop Source item quantity oh and I get rid of that that's why  everything was grayed out for me   because it's saying like hey you can't reach  this code you're going to return beforehand um so that is it that's pretty simple  return a true otherwise return a false everything up here still looks good yeah  so that's it Okay so there's that uh the   last thing we need to do is now how do we  actually pick up the item so now we can   drop it from the character we can drop it on the  main menu which is the empty space of the screen   but we don't how do we pick it up that's all  done here in the item slot so the item slot   already knows when the mouse is over it you know  because it's using the tool temp functionality so   that's why we overrode these functions here Mouse  button down and mouse leave and all this stuff so   Mouse leave we're not going to use this one right  now and we're not going to use this one either   um we just implemented all this for  future use these two are really for   uh I added like a I'm gonna I'm gonna show  how to build a little right click submenu   so that's what these guys are for the one that  we care about right now is drag detected because   that's the one that's going to make it to  where you can um go over the item and click   and hold and start moving the mouse and it will  realize what you're doing and then pick it up   uh pick you know closet to spawn the drag Visual  and and attach to the mouse and all that stuff   so right off the bat what we need is we want  to make sure that our drag item visual class   is valid because otherwise once you start going  through this code you're going to get a crash why is it mad oh I need the  include for Dragon and visual   so let's see let me rearrange  some of these a little bit user interface inventory drag item visual so if dragon on visual is  valid we're going to create one you call create widget just like we have before uh it's obviously of type oops drag it on  visual now the first argument is the owner   so it's coming off of this item slot so we  want that and then we're going to use the   drag item visual class as the spawning class  now this part this is where it gets a little   bit you know it's pretty straightforward right  because you know that it needs to be essentially   a minute a miniature version of the item slot icon  um the item slot itself so we're going to set item   uh I think I might have done the same thing  where I didn't yep everything's protected here   these need to be public because they're  going to be set from the other class uh so where was that item slot  so now item icon is equal to oh   it's not equal we're going to  call set brush from texture   and what you're getting for that is your item  reference that the item slot has asset data icon you then are going to set  the border of the drag visual and set simply set the Border set the color  you know whatever our color our current brush   color is on our current border we just use that  with Git brush color so that's really convenient   and then the last thing obviously is the quantity   and call it set text F text as number  and I'm going to use item reference quantity all right so that's it for the visual  portion uh oh yeah it can be made const   since it's only being set here you know  being created and then set some stuff   um now we need the actual drag drop operation uh yep so I need to include for that as well and I'm going to call this one drag item operation this one now is an object because remember this  is not this is the data side of it this is what   you know allows it to once you take this somewhere  and drop it this is what allows it to carry   different you know other data pieces not just  UI elements so we're calling new object because   this is just a new object created in memory so I'm  going to create it's just created just like this   we don't need to call any there's no Constructor  right because remember we just have two fields   in the header so you're just creating a new one  and then we're just going to set those fields so Source item is equal to item  reference for this item slot and Source inventory is equal to item reference   owning inventory right so now it's all making  sense why we created all these fields right the other thing I want to that I like to do  so you can set uh oh yeah obviously you have   to tell the drag item operation what visual it's  using so that one is our drag visual we just made   so I had to stop for a second there and look  at something I think this is a change in the   new versions of Unreal Engine um since they  introduced the the or they use the T object   pointer it's more widespread now see here  it's all angry because it's like saying hey   we don't this T object pointer of a u-widget and  your drag item visual pointer they don't match   so all I had to do to fix that  was come up here and change   this to a t object pointer and give it the uh the  template type and now everything's happy again so   I'm not quite sure why that is um I mean obviously  what you can tell from that is that I wrote this   code originally before I updated to Unreal  Engine uh wooden line like what am I on 5.1   but yeah sometimes you encounter stuff like that  but thankfully it was very quick fix so now that   we've set the visual component the last thing  we're going to set is the pivot and what this is   is this is going to tell it where is it attaching  to the mouse and so what I liked was top left   as you can see there's quite a few different  values here Mouse down is another good one   because that way just wherever you click it'll  just stick right on the pointer top left even if   you kind of start the drag from the bottom right  of the of the icon you will see it snap to the top   left uh you know the top left of it will snap to  the pointer so I liked it because then it makes it   you know it shows that you're carrying it on the  mouse but you still have the mouse pointer itself   free because it's the top left and there's nothing  kind of obscuring it that's what made sense to me   so uh as you can see here drag detected has  an output argument um it's by reference out   operation so all we need to do is we need to set  out operation is equal to our drag item operation   and now this way right out operation now it  knows what that is and then when you're over   here in operation on this native on drop  is that same kind of format and this is   why we can cast it get a successful cast  here and uh you know perform our action   now I said the wrong thing I said we're not  going to use these other functions but we are   this one doesn't handle the actual  Mouse click itself this only handles   when it notices the mouse is dragging we do  need native on Mouse button down in order   to detect that we are left clicking and and  we are dragging okay so first what we need   get rid of this return because now  we're going to return our own things   it returns an F reply okay so create one and  call it reply and this one is equal to Super   basically this so it is this is the default stuff  right so whatever comes in on these two events we   will create that but now what we're going to do  we're going to make modifications to that return   so what we want is we want if our in mouse event  dot get effecting button is equal to e keys left Mouse button we're going to return for  our reply reply dot handled dot detect drag   and for detect drag we're going to pass in  take widget it's a function and then e keys left Mouse button so detect drag uh detect yeah so the first param is detect dragging  in this widget so take widget just returns you   kind of a reference of the underlying  widget so we're selling it detect drag   if you're pressing left left Mouse button but we  only want to do any of this if this mouse event   coming in sees it's the left Mouse button as well  now if we don't detect the left Mouse button down   and we don't you know and a drag because you  can hold click and hold the left Mouse button   and not move it and this won't fire right because  it's it there's some threshold deep down in the   engine that I have no idea how to find for like  either like an acceleration or some kind of like   movement amount to where it will say okay now a  drag is detected but if you don't move it you'll   see you know we'll we'll test it it doesn't  detect but if we click any other Mouse button   then all we want to do is just  return reply Dot unhandled   and so this will make it you know to  where obviously nothing happens um yeah   we're gonna later on when we add in the ability  to right click and create that little Sub   menu I talked about that will be another  section of code in here but for right now   um it's going to be blank so I'll just  you know uh Sub menu on right click here all right so everything should be in place uh now  we have the ability to detect a mouse button down   on the item slot we have the ability to now  perform these actions once it detects a drag   then we will have the item data  and the visual on our Mouse pointer   and we can take it over here to  the main menu and we can drop it   if it as long as the drop casts correctly to our  drag drop which it will then we make sure we can   access our player and our item and we call drop  item and it should remove it from our inventory   and spawn it back into the world so let's go  ahead and build launch the editor and try this out   so I got some uh compiler errors and the main  reason was just because uh you item base it   doesn't know that in the player character so just  go up here I've got to add a forward to clear   and try it again so again I uh again I  got even more compiler errors on that   this time they were Linker errors so if  you're not familiar with what a Linker is   uh that's the thing that actually goes and  tries to build you know when it's building your   executable it needs to pull in the actual code  from things uh and and you know put it into the   what's going to be the executable under the hood  and so it was mad because uh here my inventory   item slot it's like hey you know all this stuff  that you've filled out all these different   um user you know user interface operations  it didn't know how to find the code for that   like so like the detect drag and all this stuff  underneath so what you have to do come to your   project uh down it's it should be like down on the  top level so you have your private public for your   code and you have all these files so there's  some c-sharp files here we want the build.cs   go ahead and open this and you'll find this  list here this is how Unreal Engine includes   different they call it modules but um if you're  familiar with C plus libraries um you know which   is also a common thing referred to in Linux lots  of times like do writing code and Linux this is   like libraries and so what you want to do is go  ahead I don't care about head mounted display   add slate core slate and umg I think slate core  is really the only one we need but this will cover   everything and that way you know any future UI  work you have these available and you won't hit   Linker errors when it tries to use functions and  build your your game from these different modules   so hopefully now it will finally compile  and launch and we can test our stuff all right so everything compiled that time   now let's go ahead and give this a shot  so if it worked correctly first of all you will see that we can click and drag all  right so that looks good and see look it shows   the quantity this time because I didn't make it  the drag item visual doesn't care you know if it's   stackable or not it's showing us the quantity but  I think that's okay because that way you know you   know you've got one we could easily take that  off and put in a a little you know if if check   um for non-stackable I probably will do that  just to make it consistent so now if we drop this   onto the game Space there you go look at that it  worked interaction widgets good on the new pickup   we hit e we get it back now this is the other  big thing watch your math down here this I had   to do lots of debugging and probably still will  catch a few things when we do stackable items but   you want to always make sure that  dropping and picking up things   the math constantly stays correct so we're good  two items eight because they weigh four each and then this is what I was talking  about see when you drop it it drops   right in front of the player a little bit  oh the camera the camera blocks the uh   was blocked by the bucket but you can see that it  drops a little bit in front and then physics since   we have physics enabled on these they fall down  and it just you know the the guy is not moving   obviously because I'm not doing anything with  animations but you could easily see how if you had   a little animation and kind of have his arm going  up or something it looked pretty good you know   it'd look fine it just kind of drops like that so  everything is uh at a really good spot right now   we got the inventory fully working  we got tool tips we got information   we can drag and drop and see when you now when you  drop it onto the player inventory it knows oh okay   okay so there will be some stuff I need to put to  do so basically What's Happening Here is I thought   I was wrong I started to say it'll know you're  dropping on this rather than main menu the reason   why this didn't work and why I could still drop  the item right on the inventory and it detects a   drop is because you have to tell it how to handle  those operations and since this inventory panel   has no code whatsoever for handling and drop  operation the drop operation just falls through   and it goes back in the hierarchy to finding the  first widget that does handle it and that's the   main menu and so you can still drop through your  inventory but what I want to be able to do is   I only want to be able to drop if I drop  on empty space right because if you add in   like an equipment panel or maybe you make it to  where you add in multiple pages so you can click   left and right and go and see like a quest log or  something right I want all of those things to be   counted as valid on the screen if they need to be  and in this case this one does you know because   you don't want to I don't know I guess it doesn't  really hurt anything I just kind of view it as   sloppy like I feel like you wouldn't see this in a  in a in a real game like in AAA game or something   probably not so there's a way I have that I know  that I did this uh you know when I made this all   the first time and so I'll figure that out and um  come back and talk about that in the next video so   we're actually getting kind of close to the end  of all this uh it's been it's been a journey   uh what's left now is to   do a little bit of refinement um make it to  where you know you can I wanted to show how   to make a little aimer when you right click you  kind of zoom in so it's easier to pick stuff up   and uh then just keep expanding so after that you  would want to make a little the sub menu to split   uh you would want to have container functionality  where you can go and open a chest or something   but oh yeah so the next thing we're going  to do the next major thing before all that   stuff actually we're going to do  handle uh handling stackable items   so that'll be a whole video of its  own uh we'll do that next and then   after that we'll just keep expanding  on the uh on the existing stuff we have

Channel: George Pence

Views: 3,408

Keywords:

Id: DJUZZGmDK7Y

Length: 91min 22sec (5482 seconds)

Published: Thu May 04 2023