How to Create Unlockable Profile Pictures Part 2 | Achievements/Levels | Unreal Engine 5 Tutorial

foreign from the future here I just want to say that the entire project for this tutorial is available on our patreon so this is the final result so you can type in a name like hahaha you can have select regular profile pictures and you can see some profile pictures that have these requirements such as level or achievements some are moderator only you can have select a profile picture and become that you can then upgrade your levels additional requires level 15 so we can do here level 18 and save now we are level 18 this picture become available to us we can also have an achievements so this one requires the festive achievements which is achievement number three if we save and edit we have Taiwan this one is unlocked and then we become a moderator by assigning a moderator ID and if we do that all of the moderator pictures become available to us so guys if you're interested in directly downloading this from our patreon then check out the link in description and enjoy the rest of the video hello guys welcome back to part two of the profile picture tutorial in which I explain how you can populate a panel with profile pictures and have certain profile pictures have requirements attached to them before you can actually unlock them what we're going to talk about in this video is that we're basically going to continue so right now we populated the profile pictures dynamically into this profile picture panel and as you see some of them don't show tooltips or these are default profile pictures I can basically just click them in a little bit and then equip them to my own user profile but some of them have a little tooltip and they display that for example this one special picture 6 requires level 15 to unlock a special picture 8 requires the festive achievement in order to unlock it so what we are going to do in this video is that we are going to take a look at how we can meet these requirements for these pictures and if the player meets the requirements he will be able to select them and save them and equip them in their user profile but if the player does not meet the requirements we're basically going to grade these pictures out Simply only show this tooltip and then basically communicate that way that you do not meet the requirements that you can't use these profile pictures you do not have them unlocked essentially so let's get to that the first thing that we're going to need to do is make sure that we can actually click one of these widgets and display them as our user profiles that's what we're going to do we're going to make a little user profile with a name and a profile picture that this place essentially so what we are going to do for this example is we are instead of going to use some servers like play fob to store our stuff on an online data table we are going to be storing our stuff in a local save file and that's essentially the same it's it's the same type of concept so the first thing that we need to do is that I'm going to create a folder and call it save game games actually save games and then we are going to create our shelves a structure which we want to call user profile so we are going to go to blueprint structure type in as underscore the S stands for structure user profile and inside of the user profile we want to have a couple of variables a couple of different data basically first one that we want is the user name so let's make this a string and the next one that we want is our profile picture so profile pic and this is going to be of the type texture 2D texture 2D just like this uh and then yeah you might want to have a more uh expanded user profile so I don't know what you want to add here maybe a level let's do a level for this example so let's make it an integer type because levels are probably whole numbers and let's call this the user level so we could do this like this but now that I think about it we also want to include achievements right so we want to have the user have a level and we won't have the user have achievements and you could have multiple achievements so the user can be one level the user could for example be level zero or level 15 but the user can have multiple achievements so for the achievements we're going to do the user underscore achievements and then let's do the same here let's call it user underscore level and the achievements we're just gonna make out of the string type and we're going to make it an array so this is essentially your array of achievements and this is going to be your achievement IDs so this will be based on ID so let's say that you have achievement one two and three then in the previous video we learned if we take a look over here we learned that we gave achievements an ID like this so we got achievement one two and three and these are their assigned IDs so we can say that this user has unlocked right now achievement one two and three so that's why we store this as a string array that's a nice way to store this so let's get back to it now we want to basically uh to save our user profile inside of a save game and that's our way to access it and yeah you might want to change that out to something like play fob or Steam remote cloud storage for example so what we are going to do is click on blueprint class and make ourselves a safe game boom and this is going to call BP user profile but let's call it BP SG which stands for save game and square user profile and what we're going to save in this in this safe game is over here a variable off of the type user profile and then this is going to be the user profile type compile and save so right now under user profile we store the user's level we also store the achievements typically in games you see that you have a profile and then maybe you have character stats so instead of saving your level under a profile you could also make yourself a separate extra structure in here that you would just call character stats so you would then save the user's profile and the character stats but I'm for the purpose of this video because you could structure this however you like I'm simply going to keep it like this so these are the default values everything is set to zero let's save this guy and then we are going to go back here and we're going to make ourselves a little widget if we're in the top right corner here or top left that will display that username display that array of achievements that we have and it will also display the level and profile picture so let's do create widgets here use your widget and let's call this our user profile widgets so my designs aren't the most beautiful but that doesn't really matter so I'm going to drag this guy in here and then I'm going to get ourselves a little border let's scale up a little bit inside of the Border we are going to want a horizontal box let's do it like this then let's select the Border let's color it make it something like this gray and then inside of the horizontal box we are going to put a little size box we're going to make this size let's do 60 by 60. so 60 by 60 then what we want is that we want this border to fit to the size of the content so now we can also reset these over here the sizes then we see that with the horizontal box we want to give it some extra panel so something like five now let's do more something like 10 like this inside of this size box we are going to do an image and this is going to be our profile picture profile picture underscore image it needs to be a variable type by default we could say that we set it to 1 that could be the default profile picture for every gamer in that uses this game then we're gonna put some text inside of the horizontal box next to the profile we're going to select this size box of the profile picture and give it some padding to the right so let's do something like 10 padding looks nice this right here is going to be our username and we want to wrap it with let's say vertical box I'm doing all of this here in runtime and just making something that kind of makes sense in my opinion let's make it size 18 the username so we wrapped it with a vertical box now we're gonna put some extra text in here we could say that this we want to wrap it with a horizontal box and then we want to make this size 16. no it's too big size 14 and this we are going to call it my user you know well let's just call it level double points and then this and then we're going to copy paste some more text in here and this is going to say like 15 for example or first let's do level one so we are level one so this text needs to be variable because it's going to display our level so we're gonna say uh user level text negative variable this is the username text so this also we're gonna do a user in the Square username underscore text let's make that a variable too we promoted the picture already to a variable and then we want to display perhaps our achievements so let's try that let's put that to the right of it so next to this one we're gonna duplicate vertical box just like this now we're gonna give this one some padding to the right so let's give it 10 padding and then here we're gonna say achievements and then we are simply going to uh put our achievements here in like a vertical box that's what I think is nice so we're going to find ourselves a vertical box plop it in here and call this self achievements books vertical books variable and let's fill it in just like this all right so that's going to display our achievements and then we need to obviously have a little widget that is going to be that achievement so let's make another one I call it the chief user achievements and this user achievements it's simply going to be some text so drag my text in here make it uh very small because we don't have a lot of space so like eight and this is going to be achievement name it's going to be achievement name treatment achievement name text promote that to variable when this little guy constructs we want to set the text so we're gonna do set text boom boom and this we are going to promote to variable and call this um achievement name actually let's call it it renames right click rename achievement name this we want to expose on spawn just like this all right boom boom and then in here actually instead of doing a vertical box you know what let's let's replace it with a scroll box why not so scroll box boom so this is gonna be filled and this is our achieve and scroll box SP okay so in here I would be our achievements or something like this and then you would have another one like this and another one like this Etc and then let's make sure that we wrap this with a size box perhaps so we're gonna select the Border we are going to right click it wrap it with a size box give it a maximum size of a height here so we're gonna make this one 80 exactly okay and now if we put children in here it will populate the scroll box so we can actually check that if we put in the user achievement here duplicate it duplicate it look then you got your little scroll box so here we can see our achievements okay this is great compile and save so this widget will need to read from a save file and then uh populate itself with the information from the save file so first of all let's select it put it neatly in the corner here give it some padding just like that all right that's great and now we need to make sure that when we hit play that it's added here to the viewport so for that we're going to go back into our Hood class and the first one that we want to actually put on the screen is going to be could I combine these guys could I put these guys in the same widget here I could okay so I'm going to make a wrapper widget all this widget blueprints Hood and the hood is what I want to put on the screen so if you go back to our hit class we did this in video part one instead of making the profile picture panel here we want to show the hood panel so promote this to variable call it which blueprint hits this guy is what we want to add to the screen this guy is what we want to focus our input on and then inside of our widgets we are going to go to the profile panel we're going to replace this canvas panel with this border panel first we're going to wrap this border panel with a size box now we're just going to give it a static width of 418 and a height of 480. now we're gonna say wrap to size boom boom all right and then we're gonna replace the canvas panel with the child so this is now the widget if we then click on desired this is that widget file and save and then we're going to do the same for the user profile widget so this one we're gonna replace it with a child and then we're gonna click on desired to see the actual size of it and then we're gonna go to our widget blueprint Hood to draw in our canvas panel here and then we're gonna draw in the two widgets so widget blueprint user profile we want this guy to size to the content be in the top left corner 50 and 50 padding and then we want our profile picture panel to be sized to the content we want it in the middle of the screen but then a little bit to the left a little bit more let's do a minus 400. okay and then right now if we hit play boom that works and now let's make sure this actually displays the data of the user so for that we are going to make ourselves little function library and put that stuff inside of there so blueprint fiction Library let's call that bfl blueprint function library and let's call it General it's just a general function library and over here we are going to do save user profile and we are going to make a function called load user profile now if you don't know what a function library is I made a whole tutorial on it so go check that out I'll put the link in the description but essentially it's just instead of coding your functions inside of specific classes or inside of specific widgets we just have a libraries that we can use these functions throughout our entire project and the reason I'm doing that is because we want this we want this user profile to independently load the data but then yet again we also want these items when we click them to save the data and we want this profile picture panel here to also load data of the profile pictures that we perhaps own so because we're going to be reusing these functions I I'm not going to code them specifically inside of these widgets but I'm going to be putting that inside of this function Library so that I can call this throughout my entire project essentially so the first thing that we want to do is that from that we want to load this save game data here and we want to load it inside of this user profile widget so we have so many widgets open let's close them all and then only open this guy and then go to defend graph so here all event constructs we basically want to do load user profile and then once this loads we want it to pass in some data and then we wanted to set all of these all of these elements here right so the first thing that we want to do is that we want to set the profile picture so let's get this out of the way for now because we're gonna have to code that functionality so the profile picture we want to set texture from brush just like this and then we want to match it to the size then we want to have our username so we're gonna do set text we want to set the users username then we want to set the user's level so that's this variable we're going to copy the set text and we're gonna plug this one in like that and then we want to populate all of the achievements that the user has so we're gonna get this guy and we're gonna first of all clear him and then once we cleared it we have to add the children so we're going to add child and this will be used in a little bit because the children that we're going to add we're probably going to well we are going to for each Loop and we're going to for each Loop through that array from the save game file that contains all of those achievements that we have and over each achievement that we have we're gonna basically create a widget now the widget that we are going to be creating here so we can already do that is going to be that achievement widget over here and this is going to be added as a child to this achievement here and this can have the owning player doesn't need it but you can do it so it's going to be looking like this and the data that comes out of here is going to go in here we can already do it just like this um but I'll do that in a little bit because that was with the string type and then the string type is going to go in there so now let's make that function so that we can call it so inside of here we are going to do load user profile so the way to do that is we have to do does save game exist now we have to give this a slot name so let's call this the slot name user profile if the user profile exists that's great then we are going to load it so then we're going to do load save load game from slot so if this is true we want to load the game from a slot and the slot is user profile and then what we get out of here is the save game object reference and that's what we are going to cast to our save game so over here we have our save game called bpsg user profile and that bpsg user profile contains this user profile structure that contains the data of our user profile so right now we're going to cast to ppsg user profile and from here we are going to get our user profile structure and that's what we want this function to return so when we currently click this click on outputs go all the way to the end here now first of all we're going to say was it the success success well in this case that we go off of that it exists and that we load it and that the cast doesn't fill then it's a success and then what we want to return on the success is the user profile data and then we can also have the scenario where it's not a success and as for example when this cast fills that means we do not have a successful cast to get the profile picture or when the save file simply doesn't exist in that scenario we also don't have success and now this function called load user profile we can now literally go to this user profile widget here and then we can actually call it so you can type in load user profile and there you go out of here we can then break it and all the data we'll get out of here and this is it has an execution pin in and out but you don't really need that you could make this even more neat because what you could do is that over in the blueprint function Library you could click on the function and even convert this to a pure and now if we go back into the user profile widget we can then do load user profile and just directly get the data out of here that we are looking for so first of all when we construct this widget we are going to check do we have a user profile if we do we want to set up all of these guys to do their job right so the data that we want to use comes out of here so first of all the profile picture is going to go into the profile picture the username is going to go inside of here the usual level is going to go inside of the user level text and then the achievements they go inside of here and for all of the achievements we're gonna add them add a widget over here and show them in the viewport and make sure you clear the achievements box right before you do this and now we're going to say okay this is done so now you could select all of this and you could call compile it to a nice function and call it setup or let's call it update widgets update the widget and what this does is all of this and now if I hit compile save that ever is fixed and there you go so this updates the user widgets ta-da so right now if we're gonna hit play It's Gonna return that we do not have any of this data because we don't have a save file yet now how does a save file work but you can go here to your project folder this is my project folder for this tutorial and then you can go inside of saved and then you can go into side of a folder called save games which currently does not exist because we have not made our first save game yet so let me show you this in a little bit okay so now that we can basically have a function to load the user profile we need a function to save the user profile for when we click on these profile pictures and click save so first of all we're gonna go and create that right now so we have to add some stuff here to the profile picture panel stuff that we need to add here is a button that we can click to save things so we're gonna have this button here in the bottom and we're gonna call this save game button let's put some text on it and call this save profile just like that and we also want to have an input box where we can set the username for this guy so let's get ourselves a little input box they are over here input and then we need a text box so let's put the text box here and then we're gonna put this up a little bit just like that let's wrap it with a size box and let's make it um 50 High or sorry let's make it uh 200 width and 50 high oh not 550 just like this and then if you click on the left here it will be there and this editable text box is going to be our username textbooks um and the font in here doesn't have a font selected apparently so what we're gonna do is click on this wheel click on engine content select Roboto engine font now we're gonna go click on this wheel again disable show engine content again and then we want this phone to be uh visible so let's make it all white just like that and then we want to have some hint text so this is going to be username and if we hit compile and save you see username there very fakely and that's because of this foreground color so maybe we need to make this a different color let's make it black it's not work here this can be black as well a focused color so the focus color is black foreground color is black and then this is the background color it's white so this is our hint text let's make the phones a little bit bigger because it's very tiny right now so like this username okay so now what we're gonna do is that the user can put their username in here they can click on the profile picture and then they can hit save and then we want to save the profile so off of this save profile button here we're gonna go to the on clicked event um and then what we are going to do is that when we click it we want to get the data that is inside of this input box this text box so we're going to select that text box like this so we're going to drag off of this text box and we're gonna do get text and then this one so this is the text that is currently inside of it and that's what we want to save as the username and then we can also select we can also select one of these profile pictures and then we basically want to give that profile picture information to this widget so that we can save the profile picture ID as well so how are we going to go about this well first of all we're gonna have to have this button inside of the individual profile pictures send the data through to that parent widget so what we are going to do is we're going to make a variable in here and call this parent widgets and the parent widget for the profile picture is the widget blueprint profile picture panel so we're gonna type in as a type here profile pic panel this one and this is going to be the object and we want to expose it on spawn and do this so compile and save and then what we do inside of this profile picture panel here is that once we create this profile picture buttons here these children we want to give that parent widget and that's ourself we're going to type self so now basically what we did is that this parent will create all of these buttons here for profile pictures and the profile pictures individually will now know who their parent is so that when we click this button we can have this little widget now communicate with their parent widget and then what we want to do with that parent widget is update basically which profile picture we have currently selected so we want to send this profile picture data to the parent widget so to do that we are going to make an event here inside of the parent widget which we're going to call update profile pic so let's do custom event and we're going to say update selected Pro File picture and then we're gonna make an input and that input is going to be of the type as underscore profile pic just like this and then we're gonna call this selected Peak so here comes our selected picture and here we are going to store this as a variable because this is the picture that the user wants to set as his new profile picture and then over here back inside of the children widget we are going to then call that event so we're going to do update selected profile picture and we want to update it with this data off the profile picture and that's the data that we basically gave to this child when we created the child like this and this came out of this data table so now this is set and then we basically want to save it so here we are going to call then save user profile and now we are going to have to code this function here so let's go back to our function library and encode our save user profile so the first thing that we want to do is we want to create a safe game object and it's going to be of the save game type that we made so blueprint safe game user profile then we want to promote this variable to a local variable and call it save game object and on this object we are going to write our data for the save game so the way that we're going to do that is that we're going to basically drag off of here and we're gonna do set user profile and then we get this variable here and then the way that we want to set this user profile is that this is basically going to go into here because this is the data that we want to save inside of the user profile just like this and then once we did that we are going to call save game to slot and the slot is the same that we're gonna load it from so that's our user profile slot over here so we're gonna go here save that and the save game object is going to be this object that we just created so we can drag it here from the local variables just like this now we're going to check if it was a success or not and then we can have a return so if we click on here we can have an output extract this all the way to the right and then we can basically just plug it in like this and we can say success whether we saved it successfully or not we can basically return it okay so this widget we don't uh so this function we do not want to convert it to Pure function because we want to actually send data through it and we want this to execute like this so what do we do we input some user profile data we then basically set that on a local variable of a safe game object from the type of our save game and then we're gonna save that to this slot and return whether or not it was successfully saved so right now if we go back to our profile picture panel this panel we can now hit the graph see our updated function here and it will say success or not so let's go ahead and let's print whether or not it was success or no we're gonna do print string and then we can put this to 15 seconds and then we're gonna append the string and we're gonna say safe success question mark enter enter and then we're gonna put in the Boolean to see if we successfully saved or not and of course we want to just save this so what are we putting in here well let's break the user profile structure we only want to set in this structure the username so the username is going to come out of here just like this and we want to save our profile picture and we do not want to save the user level or to use your achievements so this is that profile picture data so we can basically break this just like this and then we can plug in the usual profile picture data but we do not want to overwrite our user level or user achievements so the way that we can better do this without overwriting our level or our achievements is that we basically just want to set so if you type in set members and the members that we want to set in here are basically if we go here to the default categories or our username and our profile picture this is the only data that we actually want to set in here so this is asking for structure reference and a strict out so the way that we're going to do this is that we're going to do note user profile and then here we're going to plug our user profile in as the structure reference and now we're gonna say the button in here so this is the user profile name that we want to update this is the picture that we want to update and then out here comes to data that we basically want to save so this is what we're going to make it look like and we're going to compile and save and we are going to hit play so right now I can I can type in the username box I can type hahaha and then I can click on my classes here so I clicked on it and then I can hit save and now it printed save success true so because it is now safe success and true the next time we play this widget over here is going to load that save file that exists and it's going to display that information so if I hit Escape right now the first thing I want to show you is that inside of your project folder if you go now to saved you will see save games and here is that actual save file so this file is dot set file contains your save file only here basically with this structured information in there so all these user profile structured information and then like I said if I click play right now then our user profile widget so this guy is going to attempt to own event constructs to update a widget which will load it and now that we successfully have a save file it can then set our username in our profile picture so right now if we hit play we see that we are the blue picture that I selected and that our name is and our level is still zero and we don't have any achievements but that's fine so we now see that the saving system works so I can select the profile picture like this green one I can set my name to be a PVP boss and I got this green profile picture and I can hit save and it's saved successfully now if you close and hit play again we see that it worked but now of course you want this to update in real time so let's try to do that so so essentially what we want to happen is that if we are inside of this widget blueprint profile picture panel and we hit save we wanted to then update this with your blueprint user profile and we wanted to call this function again so that it will load from the save file again so it is very easy to achieve when we click the save profile button and when it is successfully saved then we are simply going to call something called get all widgets of class and the widgets of class that we want to update because you might have multiple of these widgets doesn't really matter but the widget that we want to update is our the user profile widgets and for each of these so for each of the user profile widgets that we find we are going to say update widget just like this so if you have multiple user profile widgets let's say you have some in your inventory where you show the username and someone your mini map or in the top left corner of your game and you can just call this and I make sure that top level only is ticked off because otherwise it will only update the widgets that are directly in the viewports let's say you have some widgets that are toggled away or invisible then it will skip those so let's turn that off so right now if I hit compile save and play I can select the orange picture and call myself and then hit save and then you'll see it update here in real time okay now that we got this out of the way we can then finally get into giving ourselves a level and some achievements and then we can make what this video is all about that this picture is either grayed out when we do not meet requirement of the level and that this picture is grayed out if we do not meet the requirements of this achievement so let's go and do that so first of all let's get rid of this print string because we do not need it anymore and we can say we only want to update the widget when we successfully saved so let's put a nice branch in here if we successfully saved we want to update all user profile widgets all right compile save let's close all of these panels hit save all real quick okay so well as we see we have a save game and inside of the save game we can simply have a level so what I'm going to do as a quick cheat because obviously we're not going to be leveling up in this game right now so I'm just simply going to hard code a level in here so let's say I'm level 12 and then I'm also going to hard code some achievements that I have so this is a bit of a cheat but obviously you're gonna have to make your own version of being able to become level 15 or something so if we go to data and then inside of data achievements we are going to say that we have achievement one and two so we got fly high and we got 500 meter dash so let's basically go back into the save game now and then add ID number one and ID number two for the achievements that we have and then number one and two that is this ID over here and then we are going to take a quick look again inside of the user profile widget because we want this panel to populate with that data from the achievements so let's see if we properly set that up so right now what it's going to do is it's simply going to get the user achievement so this is going to return number one and two and then it's just gonna show one and two so that's not what we want to do because look if I hit play it's going to say one two but what we wanted to do is display the actual achievement here based on our data table so we want to display the name that's enough for this example if you have an actual overview of a lot of achievements with cool pictures and descriptions and everything attached to it then you can obviously make it look nicer so what we are going to do is these IDs we're going to try to find them inside of that data table of the achievements so we're gonna do get data table row this one and then the data table is our achievements data table and then we're gonna hook this one up to the loop and we're gonna go in here so we wanna find the ID one and the id2 and then out of here will come our achievement information and what we should want to show here is just the name of the achievement and right now after this little piece of code if we hit play then we see that we have the Fly High and the 500 meter dash achievement so what I want to do right now is that as we see this profile picture is required level 15 to display it and this picture requires the festive achievements in order to display it or to unlock it so the way to do that is that first of all let's make ourselves level 15. so back in our save file we're gonna say we are currently level 15 but we do not have the not the ID number three achievement which is our festive achievement so we do not have that one so we are Level 15. so let's make sure that if we are level 15 that this profile picture is unlocked for us but let's make sure that this one is not unlocked because we do not meet that requirement so how are we going to do this we are going to go inside of these items so inside of the actual profile picture item we're going to go to the graph and then when we construct this widget we want this widget to essentially check if we do or do not have this unlocked so you could do this in two ways you could either have this specific widget check whether or not it is unlocked for this user or you could also have the parent panel so this panel which populates this box anyways you could also have this parent panel check whether or not you meet the requirements before it even displays the widgets if that makes sense to you guys so the way that we are going to do it right now is that we are going to have let's see let's have the parent which you do it because otherwise every individual profile picture is gonna have to pull the save file so to prevent that we're gonna code it inside of here and have this guy pull the user profile once so here we already have our little custom function load user profile and then out of here we're gonna break it and we're gonna get that user level and now we're gonna see if we we are going to meet the requirements of these profile pictures so essentially what we're going to do is that for each profile picture that we find we're going to break the information and we're gonna see here that it has a required level so let's see if our level is equal to the required level if it is equal to the required level then we can say that this one is unlocked small little Improvement here guys this is actually wrong if we do is this is win from the future because right now we're going to say on our level is equal to the required level then we unlock it but it's not required that our level is equal because then let's say that you're level 16 you're already past 15 then obviously you should have unlocked this picture so what we're going to have to do is we're going to have to check if our level is equal or higher then the required level and if that is true then we unlock it so it needs to be like this basically so we could just basically when it is true we could display it and if it is false then we can simply not include it in the list at all so you could simply not show it here at all but that's not what we want to do we want to create out and not be able to click it for this example so what we're going to do is go into the profile picture widget so this little guy and we're going to say here is required level of or is unlocked basically so we're going to say yeah is an unlocked question mark and this variable we're going to make it instance editable and we're going to say expose on spawn now we're going to compile save go back to the parent widget so this guy and then we're going to say well uh we're gonna first of all refresh this so that it shows up here and then we're gonna say if our level is equal to that required level then we are going to say okay it's unlocked but first of all we installed something that if the required level is minus one that it is unlocked by default so what we need to do is that first we have to check if this is equal to minus one if that's true it means that there is no required level for this guy and then we're also going to do the same here so here we're also going to do is and then we're gonna see so here we're also gonna do uh this one to the integer and we're gonna see is this integer equal is the string equal to minus one well when it's this one or when it is this one then we are going to say uh that unlocked is true so we're gonna say unlocked is true basically right or we're going to say whatever this returns so this is going to return true and then we're going to say unblocked so that's great um and then we can also say if this one is false we can check if we are the level or not and if this one is false we can also check if we have the achievement or not let's promote these two functions so that we can work with some local variables so let's call this populate profile pictures populate profile pictures and then inside of here we want to basically run our logic right to populate these profile pictures so that's this that's detach that wire that just popped up and then what we're going to promote to local variable is is it unlocked or not so promote a local variable and call is unlocked question mark because that's what we want to set okay so we just promoted this to a variable and then what we're gonna say is in the scenario that required level is -1 and achievements is -1 so this needs to be changed to an end in this scenario we are going to say that unlocked variable equals true so then we have basically unlocked this profile picture and then we can just go straight in and say okay we unlocked the profile picture because it does not have any requirements to it because when we set this to -1 it means that this profile picture does not have any requirements that's how we decided to code this but if that's not true then we're gonna have to check the following okay so then first what we're going to check is is the required level not equal to -1 so we're going to branch and we're going to say is the required level for this profile picture not equal to -1 if that returns true then it means that there is a required level and when there is a required level then we are going to check if our level is equal to the required level and this will then determine whether or not this is unlockable or not so in this scenario that there is a required level then we're going to say okay then we can determine if we have unlocked this by saying if our level is equal if so if our level is equal to the required level that will then do this and then we can go in here as well and then there's one last check if this is uh returns false which means the required level is -1 then we're gonna say then we have a required achievement ID so in this scenario the last scenario we're going to check if we have the required achievement ID if we contain it so the way that we do that is that we're gonna drag off of this array and we're going to type in contains and then what we're going to do is that we are going to check if our achievement list so our user profile achievements if we contain this required achievement ID for this picture and if this is true then we're gonna say okay then we unlocked it but if it is false then we can say then we did not unlock it so in this last scenario for false we can also simply remove the branch and simply put this one here and then hook it up like this and then say okay then this determines it so now at this code here is done you guys can take a quick look at it so it's just like this basically and I'm also going to make this a project available on our patreon so you can check it out there and then you can also have access to it and basically just look at the code directly if something was confusing for you so yeah but that that works right now so let's take one last look at our user profile so we are going to say we have uh one and two and we do not have level 15 let's make ourselves level 12. well in this scenario we're gonna say that we do not meet the requirements for let's get our profile pictures we do not meet the requirements for profile picture uh six because we are not level 15 and we do not meet the requirements for proper picture 8 because we do not have required achievement ID 3. hello guys okay so it's now actually went from the future here because my recording apparently cut out so basically I made some additions to the project in the meantime and it's mostly just design changes and some extra features but we can definitely continue the tutorial here so the panel does look a little bit different and if I press play you're also going to see that there are some additional functionality here but I'll get into that in a little bit but we can actually come just continue right now so what we just coded is to code to basically be able to verify if we do or do not meet these requirements for these profile pictures and then what we need to do right now is that we need to make sure that if we do not meet the requirements that these buttons are locked so basically since I am level 12 and since I do not have any achievements this one over here that requires level 15 and this one that requires a festive achievement they need to be looked so let's get into doing that right now so I'm gonna hit stop and then yeah so we got all of this code in place right now and then what we are going to do is inside of their profile picture widget go ahead and select this overlay and then drag yourself an image into there so just like this an image and then call it something like not unlocked image that's a good name and what we want to do is that this image needs to be on the bottom of the overlay because it needs to Overlay the rest of the button that's in here and that profile picture image that's in here and then go ahead and select your image and make sure that you open up the brush and then set this tint color to be something like a darker color but give it some opacity so an opacity 0.8 makes it so that we can kind of see through it and it's kind of oppressive and then scroll down a little bit to your visibility category and set your visibility which on default is set to visible set it to collapsed by default and what that means is that as soon as this widget appears that one is essentially not there and then our code is going to determine if we do or do not want to show this not unlocked image which will basically feedback us that we do not have this button unlocked so that's why we need to set it to Collapse by default and then we go here into the graph and then here we're going to do some setup so what it looks like for you right now is that you have only event construct you have is unlocked and then when we go off of true then we simply set up that button with the right information uh but if we do not have the profile picture unlocked then what we want to do is that we want to like I said make this not unlocked image visible so the way to do that is to grab your not unlocked image variable right here make sure that you select your image and promote it to a variable and then we are going to drag off of it and type in set visibility and then get this node hook that up to the false and then over here instead of sending it to visible set it to not hit testable itself only which makes it visible but you cannot click it at that point so you cannot click this image because we do want to still be able to click the button it still needs to behave like an actual button but what we want to do is that we just want to ignore the button click is how I set it up right here so set it to not hit testable self only and then plug it back into the sequence that will then set up the whole profile picture with the correct information for us and with that tooltip and then what we're gonna do over here is on the unclicked event of the button so the this button event and then on the unclicked then we are simply also going to copy paste our is unlocks and only when it is unlocked we want to update that parent widget with that information from this profile picture if this is not unlocked we simply want to ignore it so then right now if we go ahead and hit play then we see that this picture is not unlocked because we are level 12 and this one is not unlocked as well because we do not have any achievements and this one which requires level 75 is not unlocked as well because we are level 12 and we are not a moderator which is some extra logic that I added but you can still hover over them and they still display your tools appear and then because we ignore the button click we cannot click these so nothing happens so if I select the orange one as the last one and then select this one after and then hit save then as you see it did not save this one but it saved our last selection which is that orange one so this works and then let's make sure that we can actually unlock them so we have to be become we have to meet these requirements so let's make ourselves be level 15 and let's make ourselves have the festive achievement so the way that you guys are going to do it is that you're going to go over to that save games save game over here and then a quick cheat way to do it if you don't have yourself set up a save file instead over here you can simply set your level so you could say that you're level 17 and then you can also set yourselves the achievement IDs here so you can give yourself achievement ID number three that's the one for the festive achievement if you look inside of the data table but what I did over here in the patreon project is that I set up this little widget over here and what this widget does is that it simply sets these achievements inside of this save profile here it saves them for us if we select them over here so what we're going to do right now is that we are going to make ourselves level 17 so let's do it like this and hit save so now we're level 17 and you see that this picture becomes unlocked then we can also give ourselves some achievements so let's give ourselves achievement one then you still see well we get achievement one but it's still not unlocked now if we also give ourselves achievement three you see that this one suddenly becomes unlocked now I can actually click it hit save and I got that unlook picture and this one requires level 75 so if we make ourselves level 100 hit save this one then becomes unlocked and I can then save it okay and there you go guys that's basically how it's done so that's how you can lock certain profile pictures uh behind either a user level or behind a user achievement if I take off this achievement again hit save they see that it becomes unavailable for me again so yeah that's it guys it's a fairly simple setup but there was some some additional UI work that we had to do that's why this is such a long video in the next video I'm going to cover what some of you asked me on Discord which is how can you make profile pictures that are only available for moderators so basically and moderators what I did for this setup is that they have an ID and they are in an ID data table so over here we have ourselves a little data table for white listed moderators and then in here we can specify a moderator so we can say this is his ID and his name is Freddy and here we have Peter and these are the whitelists the moderators and then what we simply say is that if we have a moderator ID equal to one of those IDs from the data table so let's say this one is Peter then I become a moderator and these become unlocked for me and I want you guys ask is how can you do this exact thing with for example a unique steam ID so how can I make sure that certain steam IDs which are the staff or are your admins only have access to certain pictures well that's what I'm going to cover in the next video but essentially what it is is that you have to make sure that you whitelist their custom steam IDs inside of your whitelisted moderator data table and then you're gonna run some additional logic to check if the user meets that moderator ID or not alright guys I hope you enjoyed this video and I'll see you guys in the next one bye bye happy birthday [Music]

Channel: Kekdot

Views: 2,038

Keywords: Blueprints, Unreal Engine 5, Unreal Engine 4, Steam, Multiplayer, Game, Marketplace, Game development, Unreal Engine, UE, Multiplayer game, Tutorial, Online, Multiplayer Unreal, Replication, MMO, Game Engine, Devlog, Dedicated Server, Game dev, Learning, Vlog, Video games, make games, Unity, Profile, User, Pictures, Achievements, Level, Requirements, Unlock, Lock, Admin, Moderator, Staff, Widgets, UI, Save Game, Structures, Datatables

Id: 43AtdkNuHrE

Length: 56min 9sec (3369 seconds)

Published: Tue Jan 10 2023