2D Sprite Sockets in Unreal Engine 5 - Paper 2D Basics

when working with Sprites and flip hooks in Unreal Engine there are many situations where you want to specify a certain position on your Sprite through a socket sockets can be used for a variety of purposes such as attaching clothing attaching weapons or specifying a position for a particle effect to be played I think you'll get a lot out of just watching this video but if you want to follow along you'll need a character that can at least be possessed and move around if you don't have that then you can first go through one of the previous videos in the series where we set that up the official documentation shows how you can attach a hat using a socket so I think that's a great place to start first we can locate a Sprite of our idle animation and open it up on the right side you can see the socket's area just click the plus icon to add one a socket basically just has a location rotation scale and a name since we want to use this for the Hat we can call it hat socket we can then also change the position a bit to make the socket centered however by doing this we only added the socket to one of our idle frames we need to add it to all of them simply select the first Sprite hold shift and click the last one right click to go to asset actions and bulk edit via property Matrix select all the Sprites by pressing control+ a and delete the socket we created while everything is selected press the plus icon to create a new socket set the name to hat socket the location was at about minus 1.2 on the x-axis and two on the z-axis however this menu can be a bit buggy sometimes as you can see if you go back now you can see that all of our Idol Sprites have a hat socket location the next step is to important image which we can use as the Hat I'll be using this pixel hats pack by gisha in the character blueprint we can then select the Sprite and add another Sprite on top of it here we can select the Sprite for the hat which we created under parent socket we can select the Hat socket which we created on our idle animation you can see that there are a few issues remaining here the hat is a bit too small so we can change the scale to two for a real project you'd probably want to instead just a pixel per units though but since the pixel size is for the hat and character don't match in this case anyway we don't need to worry about that you can also see that the Hat jumps in the socket because the update via property Matrix bugged out only the first frame got the correct location we also want to adjust the Y location a bit though to prevent both of the Sprites from overlapping and causing graphical glitches let's adjust this on the first frame by setting the yvalue to 0.1 to move the socket slightly into the foreground then just copy the location value from this first frame by right clicking here and we can then paste this into all the other idle frames you can see that the Hat now has a stable socket location which we can use as the base we now want to adjust this on a frame by frame basis to adjust the head bobbing of the character on frame three four and five we want to move the Hat downward slightly to match the Hat movement of the character to make things more natural we can also move on the x-axis slightly and also add a little bit of rotation on the y- AIS now the Hat movement looks a lot more natural we can also make the Hat even bigger to look better and of course you can put a lot more time into this to really polish it up and make it look good you then also have to repeat the steps for the Run animation or any other animation in which you want the hat to be properly displayed since you now know how to to attach clothing let's make the Hat invisible for now and move on to the next example using sockets for the location of a particle effect this is something I've actually been using in my beatm up and I even made a devlog where I only ranted about sockets for about 5 minutes if you're using paper ZD there are a few bucks related to sockets which the dev team is currently working on so you may want to check out the devlog to see what I'm talking about let's create a new Niagara system choose new system from selected emitters then pick directional burst press the plus icon and click on finish in the character blueprint select the Sprite and then press plus add a Niagara particle system here and select the paor burst template which we created this will now fire off instantly however we want to set auto activate to off to prevent this in one of the last videos we set up an attack to activate a hitbox on certain frames of the attack animation we can use this to play the particle effect add a sequence note after the branch so we can activate the hitbox check first and then set the Niagara particle effect to active after that also make sure to take reset we only want the particle effect to play one stone and not in every frame of the attack like the hitbox check so we can use a do on Note here and reset it whenever we're on a different frame now the particle effect is playing properly however we still need to make a socket to put it in the correct location go to the Sprites for the attack animation and find the impact frames since we only trigger the effect on these frames there's no need to put a socket on every single frame create a new socket and call it particle pause move it to the tip of the sword now do the same thing for the other impact frame back in the character blueprint we then want to attach the Niagara effect to the particle PA socket but it's only showing the Hat socket here the reason for that is that the Sprite is playing the idle animation right now which doesn't have the particle boss socket there is a simple workaround for this open up the first Sprite of your idle animation and add a new socket called particle pause you don't have to worry about the position or anything here now the particle P socket is showing up for us to select and if you play the game now you can see that the particle effect is being emitted from the position of the socket there are also many other ways in which you could use the socket location such as spawning projectiles from a certain position on your Sprite we can add this functionality here where we activate the particle effect when you get a reference to the Sprite and drag off from it you can look for get socket and you see the socket related functions you can use the location rotation or transform and apply them to whatever you need needs are we can use get socket transform to get the transform we can use to spawn a bullet I won't show you the details of how to make a projector on this video but just show you this as an example of what you could do with this don't forget to set the socket name then we can use the transform on spawn actor from class to avoid Collision issues we can just select always spawn ignore Collision the bullet is spawning for a second however it disappears again this is because our hitbox is overlapping with it and destroying it because of how we set up our attack function for now I'll just set the bullet to no Collision to show you this example but of course you'd want the bullet to collide in the real scenario so you'd have to set up a different Collision Channel making a proper shooter tutorial with paper 2D and paper ZD is of course also my to-do this so more about that in another video as always thanks to my patrons for making this series [Music] possible

Channel: Cobra Code

Views: 6,208

Keywords: game development, unreal engine, gamedev, ue4, ue5, game dev, unreal engine 5, paper 2d, paperZD, unreal engine paper 2d, unreal engine 5 paper 2d, unreal engine 5 paperzd, unreal engine 2d game, sprite sockets, unreal engine sockets, unreal engine sprite sockets, paper 2d socket, unreal engine 2d socket, unreal engine paper 2d socket, paper 2d sprite socket

Id: FIRR6zGcvjk

Length: 8min 47sec (527 seconds)

Published: Wed Nov 22 2023