How To Make a 3D Interaction Icon System in Unreal Engine 5

welcome back game developers today we will be making an interaction icon to go with our item BP many games actually use this trick like Resident Evil for example um and many other like horror games they use this trick to show players where items are and it makes the game a lot more user friendly so let's get started first we're going to want to create an icons folder anywhere in your project but I'll create mine in my first person and we'll create an icons folder and inside of that we're actually going to use two different icons one for close interaction and one for far interaction so I have two icons prepared but uh I will make them um I'll make a link for them in the description so you can also use them so here is one of them we're going to be making we're going to want to double click on it and make sure the compression setting is under user interface 2D and then the texture group is UI and we're going to want to do the exact same thing for the other one let's make the compression setting user 2D and the texture group UI once we do this we can close both of these and we're done with those uis or with those icons so now let's make sure that we go into our first person character into the or uh our first person blueprints folder and let's create a blueprint class that's type actor and let's name uh name it bpor item or whatever you want to call it and open that up once we do so let's actually get a static mesh because every um item has a static mesh and let's add let's import a cube just for example and as you can see it's pretty big so let's make it a little bit smaller like 0.05 that's pretty good and once we do this we want to make sure we have two different collisions because there will be two different interaction um proximities so let's make one collision and it will be a sphere collision and then let's call this one inner sphere collision and let's make another sphere collision and let's call this one outer sphere Collision now both of these collisions we will be able to edit actually so what we can do now is make it a little bit bigger just so it's not overlapping and we will be able to edit them actually once we place uh per blueprint because not every item has the same proximity that you want towards the character so maybe you want to make one bigger than the other anyways let's go into both of these and we want to create another child which will be a billboard let's use a billboard and a billboard is a way that we can represent a Sprite um in game or however we want to do it and maybe just for us in the editor to see but we can uh we can import a Sprite right here and let's do inner interact icon and outer interact icon and let's actually set our Sprites so we can do our outer our outer interact Sprite to to be right um here and we'll use the floating Circle as our outer interact so let's do this like so and then change the size let's make it 0.1 on every axis and let's make it a little bit higher um like right there or so and then let's change the height to be corresponding let's make it 20 and then let's make this5 and then let's set this to be the other interact icon like so and as you can see right now they are um both active and we don't want that so we want to make sure we change a couple settings for both of them let's make them both um not visible and not hidden in game because we will be setting their visibility um dynamically dependent on the character's position so now let's go into our event graph and let's start adding the logic so let's delete all these nodes and go and add some events so let's add a begin overlap and an end overlap for the inner and and for the outer great so let's start working on the outer first so for the outer um overlaps we're going to want to just make sure we get the outer ring to appear so what we can do is we can do two things and I'll show you the first method first so if you cast to bpor firstperson character or whatever character you have um this will cast the character and the reason why we're doing this is because we want to see if the character is over Laing with these sphere collisions um because if for example you have ai in your game like maybe zombies or animals you don't want them to be able to trigger um the visibility of the icons so if the bpor uh firsters character is overlapping then we're going to want to make an if and say is overlapping and remember this is just one method I'm going to show you another method that is a lot more um it's a lot better for your game and we're going to want to make this go to here and go to true and just set visibility of the um for this case it's the outer icon so you can add it and then just change this to the outer icon and if you begin the overlap you want to show the visibility and the converse is true if you end the overlap you want to get rid of the visibility and we'll make this compile and save and I want show you guys one thing so let's actually add the BP first person or the BP item into the world like so and let's make the Spheres obviously a lot bigger let's make the um sphere radius this is the outer let's make it like 200 and let's make the inner 100 compile and save and as you can see that's a pretty good size for interaction so let's um play from here and let's make this a little bigger and if you walk over here you can see that it shows like so all right I found it so we're actually supposed to put a knot right here but remember this is not the method we're actually going to use but as you can see now if we go into the level and if we go over here once we go into this inner or this outer ring it shows and once we go out it doesn't so it's that simple right that's we're going to that's what we're going to want to do but if we go into the actual memory of this BP so if we go to size map and then if we look at the memory size 111 mbes is a lot of memory for just a simple BP especially with it not having that much logic so the reason for this actually is because of the bpor first person character which means that it's mostly getting all that memory from these two casts and that's literally it so let's change the cast logic to make it a lot more um better for all of us so let's instead do and equal equal and see if it's equal to the first or the uh get player character get player character and if it is equal to the G player character on both sides then we're going to want to be doing the logic this makes it so we don't have to cast to the player and it's a lot simpler so as of right now we can just do this and let's make this go down a little bit and we can just do this and if it's true for both then we can go over here and it will start and it will end and this makes it a lot better for the game's performance and for your memory of your users so if we go and look now and if we go to size map as you can see it was before was 111 megabytes now if we go to memory size it's 816 kiloby which is a lot better so yeah let's close it and let's perform that on the other inner so now the inner is a little different it's kind of the same but it's a little different oh we have to do that like so and then the inner is a little different so the inner will be basically the same concept we're going to want to Let's actually drag it up so we have a little bit more space and we're going to want to do the same thing let's make it equal equal let's drag this down and let's do get player character like so equal equal same thing and then we're going to want to be doing the same type of logic so we can kind of do this right here but we're going to want to change the values let's move this down even more let's change the values a little bit so once we think about it we it comes uh it becomes kind of apparent but we're going to want to once we go into the Inner Circle we're going to want to set the Inner Circle to true so let's change this to the Inner Circle same thing right here and let's then make it so since the inner circle is true we're going to want to make sure the Outer Circle is false so as you can see once we go or if you look right here once we go into the Inner Circle the Outer Circle will also be true so it'll overlap and show both but we don't want it to show both so we want to make sure the other one is false so let's copy this node do this and set the visibility of the Outer Circle to be false and then if we go back and exit the Inner Circle that means we're entering the Outer Circle so make the Outer Circle true on that occasion and make sure when you're doing this you don't have it how I have it which is the inner sphere Collision so right here it should instead say inner sphere interact icon like so you can compile and save and last but not least Let's do an important thing to make your BP uncore item more robust so let's go into our construction script and let's set sphere radius of the inner sphere and then also um the outer sphere sphere set sphere radius of the outer sphere as well and let's promote these both these uh float variables to or float values to variables let's name this inner sphere radius and then let's name this one outer uh sphere radius and the purpose of this is so we can act actually make them instance editable and change them ourselves uh whenever we'd like to so let's go on here and let's rename them public and let's make it instance editable and then let's do this as well and make it instance editable and make it public and now don't forget that you need to set your inner sphere radius to whatever value you want but I'm going to set it to 100 and then the outer sphere radius I'm going to set to 200 just for defaults and then now you can see that both of these different ones have two different radius um values for the inner and outer sphere but if we change this one to the outer sphere to be bigger it will change and it will not change on this one that one will still keep the same value so as you can see if I save and then go into the game if we run over this that will start appearing and then as we get closer it get bigger and then this will appear and vice versa if we run away it'll go away and then if we go into this one it'll appear with the Outer Circle ir and then the Inner Circle so yeah so um I hope you guys enjoyed this tutorial and I hope you guys learned something next tutorial we will be adding actual functionality and interaction to these uh blueprints um the the item interactions so stick around for that and subscribe if you guys are new and thank you for watching

Channel: Code Things

Views: 2,949

Keywords: true first person character, blueprints, character movement, first-person perspective, video game, game programming, Interaction System, Interact Icon Unreal Engine, unreal engine interact, interact system ue5, resident evil interaction system, horror games

Id: LTZhNb0eKa8

Length: 11min 47sec (707 seconds)

Published: Mon Feb 12 2024