Mouse 2D Aim using IK - Unity & Playmaker

[Music] hi welcome to another exciting unity tutorial with me romi fawzi in this video i'm going to show you how to create a 2d aiming mechanic using the unity 2d rigging and also playmaker and this is what are we going to create here so here as you can see we can aim the rifle using mouse and we can go to the other direction here we can aim to the other direction and it will flip the character automatically and we can also move the character if i move you see that it has a walking motion but if i move backward whenever we are facing to a certain direction it will play the backward walking animation so this will also work to the other side as you can see here and this is what are we going to create in this video but before we jump into the tutorials if you want to learn how to create a game from scratch to a complete game check out my online unity courses i've published a couple of courses covering best practices in game development with topics ranging from programming to visual tuning desktop to a mobile platform object-oriented programming and many other useful tips with the price of the takeaway you'll get lifetime access to the course link in the description below okay so now here i've already have a character rig set setup and if you want to know how to create this 2d character rig you can check the video and i'll put the link in the description i've already covered a tutorial on how to create this kind of rig and also create the ik here if we expand the soldier game object you see that we have all of the ik for the right foot the left foot the right hand and the left hand and i also already created an animation the idle and wall and i'm going to create a controller so let's just create an animator controller and let's just call this soldier and i'm going to go to the soldier game object here and let's add an animator component and let's direct the soldier animator controller that we have created to the controller slot here and let's go to the animator here and here we are going to create a blend 3 movement but i'm going to do this later for now i'm going just to drag the idle clip and the wall click and i'm going to show you this animation here so if i go to the scene view here and select the soldier game object let's just minimize the sprite kin here so we don't see the bones and if i go to the animation window here you see that i have this idle animation and the idle animations basically just move the pelvis and lock the foot ik position and for the wall animation it's basically moving the foot ik in a cycle motion like so okay and i don't do animations on the hand at all because for the hand we want to hold the weapon and we want to create aiming mechanism okay so now we need to create the weapon first before creating the weapon we need to create an empty game object here and i'm going to call this weapon transform and let's just put this weapon transform here in the middle in the tummy area and let's add the gun art here i've already have a rifle and i will share this project in the description so let's just drag this rifle sprite here and i'm going to put this as a child of the weapon transform and here i'm going to put the weapon around this position okay so now we have this weapon here we can drag the right hand ik to be around this position here and we can rotate this and as you can see here the weapon is drawn in front of the hand so we need to fix this but i'm going to show you how to fix this in a moment let's just adjust the left hand ik and i'm going to put the left hand ik around this position here and then i'm going to set both of these right hand and left hand ik to be the child of the rifle so let's just drag both of this game object here and i'm going to direct this as a child of the rifle so now if we rotate the weapon transform you see the hand will follow the rifle position like so and if it's too narrow to the body here as you can see the rifle we can adjust the rifle position by moving the rifle here and we can just put it around this position for example and now if we rotate the weapon transform here we will have a much better motion aiming motion or we can just move the rifle to be on the same y axis with the parent which is the weapon transform here and then move the weapon transform slightly above here like so so we can now rotate this and it will have a better aiming and basically with this parent game object this empty game object we want to rotate this depending on the mouse position so this transform will follow the or will calculate the degrees pointing to the mouse position so we have this aim mechanism working so let's just reset the rotation value here and now we need to cover this art here so in order to do that i've already create a circle sprites and a square sprite and you can just create a sprite using the create menu under sprite and we can create basic shape like square and circle so we need circle and square here and now i'm going to expand the pelvis here and let's expand the right arm so first we need to create a square on the right arm here and let's just move this to be this position here and now let's set the order in layer under the sprite vendor to be bigger than zero make it one here and now we need to adjust the sprite size so let's just adjust the sprite size here and make it like so i'm going to make sure that it covers the hand here and i'm going to add a circle to be the child of this square and i'm going to set the sprite layer or order in layer also 2 1 here and make sure that the scale is smaller by holding shift you can scale it proportionally and i'm going to put this around this joint here okay and let's duplicate the square and i'm going to move this to above here so we create some sort of a sprite that covers the hand here and with this three sprite selected we can use the color picker and we can pick the hand color here so it will blend nicely with the sprite art and we need to make the same object for the forearm and the hand here so let's just duplicate this game object here i'm going to make this the child of the forearm game object and let's just minimize this and i'm going to fast forward the video yeah i think they should be okay and now the next one that we want to create is the cover for the hand so i'm going to drag a square to be the child of the right hand game object here set the order in layer to one and i'm going to make sure that it covers this part here okay i guess this should do and let's just pick the skin color here it's not perfect but i think we can get away with it from the distance and now we can just minimize all of this bone scheme object and if we select the weapon transform we can just rotate this and the rifle will be drawn behind the hand so now we have this working let's create an fsm to create an aim mechanic so i'm going to disable the preview of our animation and let's open the playmaker window here and let's create a new fsm so this will be the aim so let's just rename the fsm aim and i'm going to create the first state and let's just call this facing right and we want to create mechanics where the weapon transform will follow the mouse position and it will look at that most position to rotate the rifle so first we need to get the mouse x position and also the y mouse position so let's just grab they get mouse y we need to store this to a float variable so let's just create a new float variable mousex and we want to disable the normalized let's create a new variable for the most y and now we want to build this to a factor so let's create a new set factor 3 xyz action and this will create a new vector and let's just create a new vector3 variable let's just call this mouse screen and for the x and y value we want to pass the mouse x and the mouse y and check every frame and let's just minimize all of this action here and now we need to convert the mouse screen into mouse world because this coordinate is on the screen coordinate which is the ui coordinate so we need the world coordinates and we can use the screen to world point here so here i'm going to use the mouse screen and going to convert this to the world vector so let's just create a new variable and let's just call this mouse world and for the screen z value we can just set this to 0 i think depending on the camera position oh it's negative 10 so let's just give it a try let's set the oh sorry i add the aim on the wrong game object so i'm going to copy this fsm component here and then select the soldier and i'm going to paste this as a new component here and we can just delete the one that on the weapon transport so let's just remove the component here go back to the soldier now we have the fsm in this game object let's just select the screen z2 negative 10 and enable the every frame so now we have the mouse world position now we need to make sure that the weapon transform follow the mouse roll position so let's just add the look i think it's look 2d smooth look at 2d and we can use this action here and for the game object that we want to look around it's the weapon transform soul let's just specify game object and then drag the weapon transform and for the target object i'm going to disable target object but we want to use the target position and let's just use the mouse world and for the rotation we want to keep the offset to zero for now and now if we save the scene let's give it a try okay now as you can see we have a very nice aiming mechanism but the problem is here if we flip the mouse to the other side it will flip the hand and the characters stay facing that direction so we need to fix this okay now let's just minimize the smooth look at here and let's just duplicate this state and then paste this state here and i'm going to call this facing left and on the facing right here let's just compare the x position of the mouse cursor world so now we need to store the x position for the mouse world and here luckily under the screen to world point we can save the separate xyz component world here so we can just create a new variable and let's just call this mouse x world and we need to get the player position the x position of the player so let's just use the get position action here and store the x component to a new variable and let's just call this player x position and check every frame and now we can compare this value here by comparing using the float compare and basically now we are facing right so we want to check if the mouse world or mousex world is sorry is where is it it just keep opening the other action i don't know why if the mouse x world is smaller than the player x position it means that we have gone to the left side of the player so we can just check if less than this player x position then we want to go to the other state here so let's just create a new event from the less than and then we can just call this turn left and make sure every frame is checked and we need to add that transition turn left and let's just connect this 2d facing left state here and for the facing left state we need to copy this get position action here and the float compare so let's just copy this here and then paste it on the facing left state okay so here for the get position uh we want to we already getting the player x position because we copy from the facing right and we already did the comparison here but instead of turning left we want to create a new event and let's just call this turn right and let's add the turn right transition here so we can go back to the facing right state but here under the i think it's yeah in the screen to world point we need to save the store world x on the facing left because we haven't done that so i'm going to save this to the mousex world and now we have this and we need to adjust the smooth look at 2d offset to 180 degrees because we are facing a different way we are facing that way so the default value should be in this direction and now we have set this we need to create a mechanics where we are going to flip the game object so in order to do that let's just create new fsm here and for the second fsm we can just call this direction and by default here we want to set the first state to facing right also and whenever we are facing right or we enter the state we want to set the scale and for the x scale we want to set this to one because as you can see whenever the game object is facing to the right we have the scale of one one one on all of three axis so we want to make sure that this is set to one and the rest is also one and we don't need to check the every frame here and here we want to add the in switch action and we want to create a new variable for the in switch and let's just call this direction and we want to check for one switches only and if the integer is negative one then we want to flip to the other side and this needs to be every frame so let's just enable this here and let's duplicate the state here and let's just call this facing left and for the facing left for the set scale action let's set the x value to negative one and here we want to wait whenever the direction value becomes one then we want to switch state here so here we can just create a new event and let's just call this turn right and add that transition turn right and connect this to the first state and for the first date we can just create a new event called turn left and we can add a transition turn left and then connect this here okay now we have set up the direction but this won't work yet because we need to set up the direction value or we need to give some value here and by default the direction is set to zero so i'm going to change this to one so it's facing to the right by default and let's go back to the aim mechanics here and whenever we are facing right we want to set an fsm integer value here and i'm going to put this above the float compare or i can just move this to the top so it will be the first action and we can just use owner and pick the direction fsm and the variable name should be direction that we want to fill some value to it and set its value to 1 because we are currently facing right and here i'm going to copy this action by right clicking and click copy selected action and then on the facing left state let's just paste the actions before yeah there you go and here uh for the value let's just set this to negative one because whenever we enter the facing left we want to flip the direction here so now if we save the scene here let's give it a try now it's facing right but if i go the mouse to the left side oh there is an error let me check yeah there is an issue here basically on the facing left state here under the float compare i need to change this to greater than so whenever it's greater than we want to turn right and we want to leave the less than to empty because when we are facing the left side here the mouse should be on the left side of the player so whenever the mouse goes to the right it means that the mouse x world will be greater than the player x position then we want to turn right and before it costs an infinite loop so i'm going to save this scene again and let's give it another try okay now we can aim on the right side let's go to the left side and there you go we can aim on the right uh left side and as soon we flip side you see the characters flip so now we have this working nicely we need to set up the animation snacks and now in order to create the animation we need to modify the animator setting here so let's just delete the idle and the wall state here and i'm going to create a new blend tree here so let's just create state and then pick the from new blend tree and inside this blend tree we have this parameter by default created by the blend tree so let's just change this blend to speed and if we select the blend tree here let's add a motion i'm going to create three different motion here and the first one i'm going to pick the wall animation that i've created and i've shown you before and then for the middle one or the second one let's just select the idle and the third one will be also the wall motion so we have two walk motion and i'm going to enable the automate threshold so i can set up the threshold manually and for the first threshold i'm going to set this to negative one and for idle i'm going to set this to zero and for the walk i'm going to set this to one and for the first walk we want to set the speed of the animation to negative one so it will play the animations backward so it will create a walking animations that is walking backward and now we have set this up here let's go to the scene here and select the soldier game object and we need to create a couple of components here so let's just add a capsule collider and we are going to adjust the capsule collider size and adjustment and i'm going to add a rigid rigidbody2d and for the rigidbody2d we need to constrain the z rotation here okay and now let's just go to the animations and i'm going to pick the idle animations because there is a slight offset as you can see here so i'm going to lock this here and i'm going to adjust the collider based on the idle animation so let's just click this button here edit collider and let's just adjust the size of the collider so it fits the character body and for the length here or the foot here i'm going to align this lower part of the collider to be aligned with the foot of the character okay so disable the articulator button now we have this setup let's just unlock the animation window and disable the preview and now we have this two component we need to create a new fsm for moving around and this will be a very simple fsm so let's just create a new fsm and let's just call this movement and as for movement usually we need to use the get axis so let's just get axis here and let's just type horizontal and this will return the value negative one two one depending on the left or right arrow that the user are pressing and we can store this value to a new variable so let's just call this input speed for the multiplier i'm going to create a new variable and let's just call this walk speed and make sure every frame is checked and then after we get an input we want to set the velocity of the player so we can use the set velocity 2d and i'm not going to use a vector but instead i'm going to pass the input speed to the x bit here and make sure every frame is checked and now we have this now it's working we can move around but we need to synchronize the animations and as you can see we have created blend tree here and we have two walking motion this is walking backward and this is walking forward so now we need to create a calculation where the animator will know whenever we are facing left or right then if we are moving to that direction we should walk forward but if we are moving away from the direction we are facing at then it should walk backward so in order to do that it's quite easy actually we can always get the scale of the x component of the player because whenever we are facing right then the scale x will be one and if we are facing to the left side the scale x will be negative one so in order to get the scale we can use the get scale action and then we can save the x scale to a new variable and let's just call this scale x and check every frame and now we want to create a new float variable so i'm going to use a float value set float value here and i'm going to create a new variable called direction relative speed and here for the set value i'm going to set the new variable value to the input speed here but we want to clamp the value to be negative one two one so let's just add a i'm going to minimize all of this action i don't know why but playmaker keeps expanding whenever i add a new action or i create a new variable so let's just use a float clamp here and we want to clamp the value of the direction relative speed as you can see it keeps expanding i don't know why it's very annoying i'm going to maximize the window so we can see it better and let's set the minimum value to negative 1 here and the maximum value to 1 and i'm going to enable the every frame here and then i'm going to multiply the float value with the scale x of the character so let's just use the float multiply and we can just pick the directional relative speed variable and multiply this by the scale x that means that whenever we are facing to the right then the value will be unchanged or will be kept as the original value but if the player is facing to the left then the value will be inverted and with this direction relative speed value we can assign this value to the speed parameter on the animator so if i minimize this window here go to the animator we can pass the direction relative speed to the speed value here and this will trigger the blend tree to work nicely with the fsps that we have set up and it will play the animation accordingly i don't know why the playmaker window is error now so i'm going to go to open the window again here and now let's go to the movement fsm now we need to trigger the speed or we need to use the set animator float so let's just use the set animator float action and use the owner because as you can see the animator is on the same game object as our fsm so we don't need to change that and we can pick the speed parameter here and for the value we can pass the direction relative speed and let's check every frame here and now let's save the scene another thing that i need to change is the walk speed here is zero by default so i'm going to change this to four and here i forgot to check the every frame for the set float value so i'm going to do that and also this one here the float multiplier i seem to forgot to check the every frame so let's just make sure it's checked and for the float clamp let's take a look okay it's checked okay let's save the scene here and now let's give it a try and now as you can see if we move around it plays the walk animation and if i go back it plays the animations backward so it will play the motions depending on the direction and depending on the player facing or looking at where the player is looking at and if we go to the other side here you see it plays the correct motion we can walk backwards and we can move forward okay so yeah that is basically how we create a 2d aiming mechanic using the unity rigging system and it will synchronize the animations depending on the direction the player is facing to so i hope you liked this video and if you liked it hit that like button and don't forget to subscribe i hope this video is useful thanks a lot for watching and i'll see you on next video

Channel: Romi Fauzi

Views: 3,343

Keywords: Unity, Playmaker, Game Development, Tutorial, 2D Aim, Mouse 2D Aim, Rigging IK, 2D Rigging Ik, 2D Ik, 2D IK Aim

Id: RaW9mtEkwPI

Length: 28min 36sec (1716 seconds)

Published: Mon Jan 25 2021