Swipe Detection + Trail Effect w/ New Input System - Unity Tutorial

today i'm going to show you how to do swipe detection with the new input system in unity for touch for mobile so for example if we swipe you'll see that there's a debug ray drawn here in the scene in that direction and you can see that when we swipe down the console.log prints out swipe down we can also do up left and right and you can use this if you want the player to swipe in a specific direction or you can just do a general swipe in whichever direction and i'll also be showing you how to add in this trail render so that when you swipe there is a tiny trail that follows the swipe which a lot of games do and you can customize it to your own liking awesome so let's get started so if you haven't watched my previous video i recommend watching that one first it's how to use touch with the new input system i show you how to set it up with your phone and how to do a bunch of stuff with the touch and for this video we'll actually be using a lot of the parts from that video specifically the input manager alright so the first thing that we want to do is make an input action asset so go to scripts right click and create an input action and we can just call it player controls or you can just call it touch controls whichever you want let's add in an action map here so i'm just going to call this one touch so an action map is just a grouping of actions which are our controls and then our actions are our controls so we need to keep track of two things whether we're touching the screen or not which is a boolean and our current position of that finger so let's make one for the boolean so i'm going to call this one primary contact which means the primary finger is the contact and we can just set that to pass through and button or you can just leave it as button and pass through is if you have multiple streams of input and you don't want to perform a disambiguation between them so whatever comes in you'll accept that input from whatever kind of control whether that be a game pad or the touch screen or maybe a different finger so you can set it to either button or pass-through it won't really matter for this and for binding let's go to touch screen and and for primary touch which is our first touch we can do touch contact which will return a boolean if you're touching the screen and let's add another one primary position this will be a pass-through action with a control type of vector 2 for our position and for our path go to touch screen primary touch and click position and now we can just save the asset and this will actually return the position in screen coordinates so we'll have to convert it to world coordinates if you want to actually map it to use the correct coordinates that your game is using alright and so let's click that input action and generate c sharp class and click apply i have a ton of videos on the input system links in the description if you're interested in learning more alright so let's make an input manager right-click create c-sharp script call it input manager this script will kind of be like the one i did in the previous video so if you did the previous video you can probably skip ahead time stamps in the description alright so i can just delete these two using statements i'm going to delete the update and this comment so now we can say private player controls player controls which is our script we just generated then in an awake function we can say player controls equals new player controls on our on enable function we can say playercontrols.enable same with on disable playercontrols.disable and then we have to subscribe to our events so we want to subscribe when we start pressing the screen because when we start pressing the screen is when we want to start measuring our position of the finger so we can say player controls dot which is our input map dot and then we can say primary contact and then we can do started so when we start pressing the screen then let's pass in the context which i'll explain that in a second and let's just call our function that we've yet to made so let's call that function start touch primary and we can pass in our context into that function so we're subscribing to the event and we're passing in the context of that event which is the information regarding our touch and then we're going to call this function and so let's just copy that and instead of started let's put cancelled and let's put end touch primary all right now let's make that function so private void start touch primary and let's take in our input action callback context so for that we actually need to put here using unity engine dot input system and then here we can take in the input action dot callback context and let's just call that context from our input manager we'll shoot out events so that other scripts can subscribe to it easily without having to reference this script directly and so i did this in my last video so let's just make a couple of events up here i like to make a region of events we can do public delegate void start touch and we want to pass in two things we want to pass in our vector to position our current position and we want to pass in the time that we start pressing the screen because we want to measure the time between the swipe because if the swipe takes too long then it's probably not a swipe it's just the player dragging their finger along the screen so let's just pass in float time and so the delegate delegates functionality to another script so the other script will handle the functionality once it's called and we can say public event start touch on start touch so this is what we'll actually call in the script and i go over this in my other video if you're interested and same with the other one which i'll just copy instead of start touch we do end touch and we just replace those ah and i realized i put onstar event instead of onstar touch here so here we can say if onstart touch does not equal null so if something is subscribed to this event that means we'll actually send out that event because we don't want to send out an event to nobody so if it's not null then we can say onstart touch and then we can pass in our position so if you want to use world coordinates directly i actually like to make a util class so you can right click create a new c-sharp script called utils and then here you can just say public static and we're going to return our vector 3 so this is converting from screen to world coordinates so you can put screen to world and since this is a static function we'll just take in our camera here and we'll also take in that position and so then we can just return camera dot screen to world point and let's pass in our position and so for screen to world point i'm going to make the position.z axis equal to camera dot near clip plane and this is because for screen to world point the z axis has to be the distance that object has from the camera but since we're not actually clicking an object which is where you need to have the correct position we can just use the near clip plane if we're in 2d coordinates so if you're in 3d coordinates i actually recommends screen point to ray and so i have a whole video on this which i'll also put in the description if you're interested in learning more but in this case we can just set it to our camera near clip plane and i can erase these two using statements and so since it's static now here on the onstart touch we can just pass in the utils dot screen to world and we can pass in a camera which we'll need a reference to so private camera main camera and then in the awake function you can say main camera equals camera.main so we're just getting reference to our main camera and then we can pass in our main camera here along with our start position or the current position of our finger which is touch playercontrols.touch.com primary position and then we have to do dot read value and we have to read in our vector 2 and that casts a vector 2 to a vector 3 automatically and the last parameter that we need for the onstart touch is our time so we can do that by context dot time or you can do start time since this is the time we started and we also have to cast that to a float since this is a double value and we're taking in a float here all right so then let's just copy that and paste it down here and call this one end touch primary and instead of onstart touch we can do on and touch and here instead of start time we can do context.time and one last function i want to add is a public vector 2 primary position which will return the position of our finger and we'll use this for the line render so that we can tell the line render where our mouse is at all time so that it can change accordingly all right and so this will just return utils dot screen to world and pass in the main camera and we can just actually copy these values playercontrols.touch.primaryposition.readvaluevector2 alright now for the fun part let's right-click and create a new c script called swipe detection alright and then i can delete this generic using statement here and i'm actually going to erase all this alright so the first thing that we need is a reference to our input manager so in the previous video i made it a singleton which i have another video on and for the sake of simplicity i've already imported this script in so in my input manager i can just put it singleton and put it input manager and now i can access it anywhere without a reference so here we can say private input manager input manager alright and so then we need the reference to our input manager so input manager equals input manager.instance and so we have to make sure this doesn't run before our input manager so to avoid that we can put the default execution order to about negative one which means this will run before any other of our scripts unless we specify otherwise and so now let's subscribe to our events so on enable on disable we can do input manager dot on start touch plus equals and i'm gonna make a function called swipe start and we can do the same for on and touch plus equals swipe end and then we have to make sure to unsubscribe from these events when we disable the script alright so right here we just copy the same thing and then replace the plus with a negative and now let's make those functions so private void swipe start and we have to take in the same parameters that we shoot out with the events so that's vector2 position and then float time and you can copy that and instead of swipe start you can do swipe end all right so let's detect our swipe so we want to detect our swipe our direction after we've lifted our finger because we have to know the end position of our finger in order to know what direction we swiped in so in the swipe end this is where we'll call our detect swipe we'll have our detect swipe here and we'll actually have to store our position the first time and the time as well so right here we can say private vector 2 start position and we can say private float start time and in the swipe start we can just say start position equals position and start time equals time and we're keeping track of the start and end time to make sure that the swipe didn't take too long in between and so let's actually make two more variables make our lives easier one for end position and one for end time and so i'll just copy these here and put the same for swipe end but instead of start position we do end position and instead of start time we do end time all right so now let's detect our swipe and remember we already have this in world space coordinates luckily since we called our screen to world point so we want to measure the distance between our ending and our start position and we want to make sure that distance is large enough and we also want to measure the time between that so if the time is too long then it's not really a swipe but if it's a good amount of time if it's less than let's say one second then we can consider that a swipe so up here we can set up private variables for our thresholds and do a serialized field so we can access it in the inspector we can say private float minimum distance so this is the minimum distance that it has to travel and so i actually have 0.2 here and then private float maximum time so this is the maximum time that a swipe can take and i just put it to 1 and make sure that's a serialized field alright so here we can do if vector3.distance so let's measure the distance if the distance between the first one so start and the second one end position is greater than or equal to our threshold which is minimum distance and and i'm going to start on the next line here so it's easier to read and our end time which is end time minus start time so this is the difference in the time so this is two and this is one then our swipe took one second so if our time is less than or equal to the maximum time then we can detect this as a swipe alright and here we can draw a line debug draw a line from the start position to the end position we can make color dot red to make it visible and then we can make it last five seconds all right so now you can right click and create an empty object and i usually like to call it managers all right and then in the manager we can add in our input manager here and we can just add in our swipe detection here and we also want to make sure to go to window analysis input debugger and then here we can go to options and simulate touch input from mouse or pen so that means we can use our mouse to simulate our finger and unfortunately you can only do this with one finger of course because you have one mouse so if you want to test two fingers you're gonna have to build to your phone and then i actually forgot something so in the input action in the primary contact i forgot to add in the interaction so so click this plus sign and click press which means that this will be performed when we press on the screen or on the touch screen so when we start pressing it'll call this started one and when we're done pressing it'll call this canceled one and so make sure to save this one and it'll generate the script for you again automatically all right and now when we swipe down you'll see that you can see in our scene the swipes are showing up correctly awesome all right so now let's do the directions so let's determine what direction we're swiping in so we can do a function called private void swipe direction and let's actually pass in the direction here so vector 2 direction now let's call in our swipe direction and we have to pass in our vector 2. so to get our direction we just subtract the vectors so we can do vector 3 direction equals n position minus start position and so this will cause the arrow the direction to point towards the end position from the start position and so then we can make a new vector 2 instead so vector 2 direction 2d make our lives easier here going to do new vector 2 and pass in direction dot x and direction dot y and let's actually do a dot normalize on this dot normalized so this returns the vector from 0 to 1 instead of maybe 0 to 100 since we only need the direction we don't really need to know the length of it and so here let's just pass in that direction 2d now to detect the direction we're swiping in we're going to be using something called the dot product and the dot product is this fancy equation it's just the cosine between these two directions but luckily unity has a built-in function we can use and so this determines how alike in the direction these two vectors are in so if they're pointing in the same direction it'll return a one if they're pointing in opposite directions it'll return a negative one if they're perpendicular to each other it will return a zero so we can say if our direction that we swipe in is maybe 90 alike in the same direction so 0.9 and above then we're swiping in that direction so here we can say if vector 2 dot dot that's kind of funny we can do a vector two dot up so this is the up vector now we can just compare that to our current direction so if this result is greater than our threshold so let's just do direction threshold here then we can do debug.log swipe up let's go up here and do a serialized field to do our private float direction threshold and let's set that to a 0.9 and since this can only be a value between 0 and 1 we can add in a range here and make sure it stays between 0 and 1 here and here i misspelled swipe directions so i'm just going to fix that this is just the same thing for all the other four directions or if you want to add in a your own direction you can do so so instead of vector 2 dot up we can do down here we can do left here we can do right and then swipe left and then swipe right and if you only want to swipe in one direction and make sure it's not doing it multiple directions even though it shouldn't if your threshold is rather high but if it's not that high it might show up for multiple debug.logs so if you're swiping kind of diagonally it might show up for up and left or right so we can do an else if instead so it'll only execute one of these and it will have the preference of executing the ones at the top of course since those are the first ones in the list all right so we can go into our console here and we can swipe down and you'll see that our swipe detected gets printed out and we also have a swipe down swipe left swipe up and swipe right so let's see if i do a bunch of turns here and i release it too late then nothing will be printed out and if i press down and let go it won't print out either because the distance isn't great enough see i only moved it a little here and it printed it out so maybe you want it to be a larger distance so yeah that's how to do basic swipe detection alright and so now i'm going to show you how to add in a trail render so to give the player some visual feedback that they're actually swiping so let's just add a new game object call it trail and then just add in a trail render so for the trail render we can adjust the width so this is the start so we can make it maybe 0.3 and we can add a point here by double clicking and we can either make it bigger but i like to make it smaller towards the end then the time is how long the trail lasts so you usually want to put this to a small time so that it doesn't stay too long so maybe point two and this is the minimum distance between the points to spawn it at so i think point one is a good value so that it looks smooth then you can set the color and the material for the material i've already made a material trail material so i just right clicked and create a new material and then i went to shader unlit and selected color and just made it red so for the trail you can actually just drag in your material there and you can unselect receive shadows if you don't want it to have shadows which i don't think it should have shadows and then you can make the ends smoother by adding in end cap vertices so four so it makes it rounder and you can do that with corners as well so you can add an a3 there so then in our script swipe detection let's add in a serialized field here so then in swipe detection we can add in a serialized field here call it private game object trail and so we're actually going to be moving the game object because the trail moves with the game object to make our lives easier so then here on the swipe start we want to start this event so we're actually going to make a curtain for this which is just a function basically that executes based on certain conditions that you give it which i'll show you in a bit but first we want to make sure trail dot set active so we want our trail to be active true and then we want to set our position so trail dot transform.position equals to our position and when the swipe ends we can do trail dot set active to false so the game object is now false and now we can start our current in which we'll be doing a while loop inside of the curing and this is to avoid over populating the update function it's kind of the same thing that we'll be doing you can do it in the update but i don't want to have a lot of if statements everywhere so we can do a private ie numerator trail and then we can do while this is true so this is just a while loop executing on every frame so every frame we're going to set the position of our trail then we can say trail.transform.position equals our input manager dot primary position which is pretty simple and so we actually need to start this so in the swipe start we can do start curtain we can just pass in trail you can also pass in the function as so if you want and then we actually have to end it when we end our swipe because this will be called regardless if we're in this while loop when we lift our finger this swipe end will be called so up here we can actually store a reference to our curoutine private carotene curotene and then here we can do carotene equals starcrating and then in the swipe end we can do stop carotene and we can pass in our curtain and so we actually have to make sure to do something very important which is in this while loop we have to make sure to do a yield return null and so usually when you have a curing you want to make sure to have at least one of these yield returns whether it be null whether it be weight for seconds maybe wait for a couple seconds for example you'd return new weight for seconds and you can pass in three seconds here and it'll wait three seconds until continuing to execute this function so for example anything past this line here will only execute after these three seconds have passed but in this case we want to do a yield return null because this will just wait for the next frame to continue execution and we want to make sure that this is executed only once per frame all right and so then in our manager we can drag in our trail here and we can press play and you can see that it looks pretty cool it's a little long though so in the trail you can actually decrease the time maybe 0.05 if you want maybe 0.1 and you can make the beginning bigger so now you have some visual confirmation and you see that if we increase the time it takes longer to stop and so if you want to build this to your phone which i explained in the previous video you can just go to build settings and assuming you have your installs either your android or ios build support depending on what you have you can just switch platforms here and if you don't have a key set for your application which i explained in the previous video you can just actually select development build here so you don't have to set up key and it's mostly for debugging and so your device will show up here under run device for example i just connected my device and now it shows up here and i have to make sure to actually switch the platform all right and now that i've switched the platform i can just do a build and run and then i can create a new folder here called builds and just call it swipe here and it will build it to my phone and you can also set up the player settings to put more options such as the app icon whether you want it landscape or portrait and i explained more of this in my previous video alright and i just want to clarify that the new input system does not work with unity remote so if you try to use uni remote and it doesn't work well it's because it's not supposed to alright so now you see i build it to my phone and when i move my finger around it follows it awesome alright so thank you so much for watching i hope you enjoyed and i also want to wish everyone a happy new years if you're watching this in the appropriate time frame but yeah thank you so much for your support over this last year i really appreciated it i got 3 000 subscribers which is awesome and i also broke my first patreon goal which is amazing and so i want to thank all my patrons of course thank you so much for your support it really helps me make these videos and encourages me to keep putting out good content i want to give thanks to my new patreon dk thank you so much for your support i really appreciate it and thank you so much to all my subscribers and patrons and my q a video will be coming up soon so keep an eye out for that kind of like a double of a face reveal which is interesting and so yeah let me know if you have any questions and if you haven't already be sure to join our discord channel which is in the description you can post help or chat and if you're interested in my patreon that's also in the description i offer source code early access and an exclusive discord chat so thank you so much for watching and i'll see you next time [Music] you

Channel: samyam

Views: 66,869

Keywords: unity detect gestures, Unity Mobile Swipe, unity android swipe, unity swipe controls, Unity3D Gestures, unity swipe, unity3d swipe, mobile swipe detection, mobile swipe tutorial, swipe input system, swipe detection, swipe with new input system, new input system touch, unity new input system touch, swipe controls unity, swipe detection input system, new input system, detect swipe, detect swipe unity, easy swipe detection, gesture input system, unity new input system swipe

Id: XUx_QlJpd0M

Length: 25min 8sec (1508 seconds)

Published: Tue Jan 05 2021