7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.6 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.6 Handling Touch

So here we are back in our scene with our two physics bodies sitting in the world in our scene. So the last thing that we did in the last lesson was we made this paddle capable of interacting with our ball. Simply by giving it a bounding rectangle as the body type and making sure to unchecked that dynamic check box so that the ball will just bounce off of it and the actual paddle itself won't move anywhere. But now we actually want to move the paddle, but we want it to be dictated by the user touching it and then dragging it along the screen. So let's go ahead and see how we would do that. So I'm gonna break this up into a couple pieces on how we're going to detect that the user has touched it and that the actual user is still touching it and then moving. So the first thing we're gonna need to do is make sure that our paddle is selected and then we're gonna give this a name. And we'll just call this Paddle to keep things simple. And then we'll switch over to out gamescene.swift and now we're gonna start to introduce some concept of detecting touches. And as you saw in a previous lesson, and I kind of blasted away the code that was there, was this touches begin function. So this is where we can detect when we begin getting touches on our interface by the user. Now notice that it has a touches parameter that is an NS set meaning. There are multiple touches, but in our application, we're only concerned about a single touch. So we'll just be getting whatever touch comes and we're not gonna worry too much about getting a specific touch. So the first thing we wanna do is get that touch. So we're gonna do that by going into the touches parameter or the argument. And getting any object. Now, any object, as you can see here, is an optional. And it's just gonna give us back one of the objects that are in the set, or nil if there's nothing there. But we obviously know, because we're touching this, we're gonna get something. Now, this is an optional, and it's just an object, so we need to cast that into a UI Touch. So, were going to cast this into a UI Touch and were going to put an exclamation point there to coerce that option into actually giving us the value. So now we have a touch, now we want to know where that touch happens, so we need to get into location. So, we're going to say we want to go into touch. And we want to get its location within the node and the node is going to be the self. So it's gonna be within our scene, where did this touch happen? So that's gonna be stored in our location variable. So now that we have a location we wanna see if anything, any physics body or sprite kit node was actually there. So we're gonna start by saying if and we'll let body be equal to. Then we're gonna use a little helper function on the physics world known as Body At Point. So now we have our location, we can simply pass that in there. And so what's gonna happen here is the body at point is going to return an optional of a, of a node. And if it actually contains a value, we'll go into this if block with body set to that particular node and if not, we'll just jump out of it. So if we get a body then we'll say, all right, if the body. And we're gonna get it's node property, which is an optional. So we're gonna go ahead and ask for the actual node, and we want to know if the name is equal to paddle. Remember the name that we assign to our paddle on the design surface was actually Paddle. And if this happens, then we've detected that we've touched it. So, in this case, we're just gonna start by printing out say, Gotcha. And then we'll go ahead and save that. So once we've done that we can now run our application again. And once it runs, we're going to see the ball moving as usual. But if I touch this, you're gonna see I get Gotcha down here in the output window. So I can continue to touch it. So now we can see that we detect when we are actually touching the paddle. So that's nice, but now we want to be able to move it. So I don't really need to print anything anymore. So what I'm going to do is I'm going to introduce a property here. And I'm going to call this IsTouchingPaddle, and we're going to default it to be false. We'll save that and then once we detect that this is happening, then we're going to set is touching panel equal to true? So that's step one. Now in the world of touches, as far as Sprite Kit is concerned, we have a couple of functions. We have the begin. And then we can also take a look at a couple others. So if I begin to type in here Touches I also have touches cancelled, touches ended and touches moved. Well touches moved is what I'm concerned about at this point. So I'm gonna write some code in here that's going to help me to know when the user is moving their finger, and then ultimately move the paddle. And, then I'm also going to do touches ended. And really, there's only gonna be one line of code, which is simply going to set is touching paddle back to false. Okay. So, let's go ahead and take a look at the logic for when we are actually moving our finger. So the first thing we need to check is we need to see if the user is actually touching the paddle because that is Step one. If they're not, then we don't even care. So we're going to do something very similar to what we did before is that we're going to get our touch, and we're going to get the location of that touch just like we did. And touch has began, so now we have that information once again. But one of the cool things about this touch is you get the current location with, you get the current location within that node but you also get where the previous location of that touch was, and which we're going to need. So we're gonna say previous location is gonna be equal to touch.previousLocation in node, and that's also going to be passing in self. So now we know where the user currently is touching and where they were touching before. So we get that concept of movement, of where they were and where they are now. So now we want to actually get the paddle or the sprite of the paddle. So we'll say, var paddle is going to be equal, and we're going to use the child with node name again, just like we've done before. And we're going to pass in its name, which is paddle. And we're going to cast this as an SKSpriteNode, just like we've seen before. So I can actually get access to all the nice features and functionality of a sprite. Now we want to calculate the position where we want the paddle to go. So this is going to be along the X axis because if you've ever played this game before you know you can drag horizontally but not vertically. So even if you drag vertically, the paddle's not gonna move. It's only caring about the X direction. So we're gonna say that the X position is gonna be equal to paddle since I actually have this sprite now. And I can say I want to set it's X position, or the X property on the position property. I want to get that position in the x direction and I want to add to it. And I'm go, gonna get the current location X and I'm going to subtract from it the previous location.x, so we'll save that. So now we have the calculated new position where we want the paddle to be. And then we simply need to say, all right, we're gonna set paddle.position, and we're gonna set that to CGPointMake, and we're gonna pass in two floats, an X and a Y. And the X is gonna be X position, and the Y is simply gonna be where the paddle is in the Y, where its position is in the Y direction, simply because it's not going to move. So let's go ahead and see what this has done for us. We'll run our application again. And the ball will bounce off. There we go, and now I can touch and grab my paddle, and I can begin to move this back and forth. So now I can move it to touch the ball there, and now I can track it over to this side and touch it there. So that's a pretty nice little way to detect when you are touching a sprite. And then being able to move it using some simple math, and being able to use its touch to figure out its current location and its previous location. Now there is one interesting thing that you're gonna find here. It's if I start to move to the left or to the right, I can slide off the screen. Now that's probably not the best functionality, so we're gonna have to address that just a little bit. So let's go ahead and come back into our GameScene.swift. And I'm gonna come back into TouchesMoved and I'm gonna make a little bit of a modification. So, I'm going to calculate where I want the X position to be. But, then I'm gonna check it against the bounds of the screen, using a little method. So, I'm gonna use, I'm gonna set my X position, and I'm gonna set it's max. And this is going to compare an X and a Y value. And I want to make sure that its position does not exceed the bounds. So I'm going to say that the X, this X position and paddle, I want the size of the paddle and I want to take its width divided by two. So now I can say that I don't want the maximum position to exceed the maximum position of the bounds of the screen, and I can also do the same in the minimum fashion. So I can check both the left and the right bounds of the screen. So the same thing here, I'm gonna do, I wanna get the minimum between the X position, and this size, this is gonna be a little bit different. So I'm gonna get the size of the screen.width and I am going to subtract from it the paddle, and I can get the size, width and I am going to divide this by two once again. So, now by simply making this slight modification, I can now enforce the bounds of the paddle not to exceed the bounds of the screen. So now I can grab my paddle again and I can move it left and right, but now as you'll see even if I scoot off the screen, it's not going to go off the screen, so now I'm limiting it's bounds. So there you have it, those are the basic concepts when it comes to handling touches and then moving sprites on the screen based on those touches. Now there's one other thing that's happening here kind of implicitly that we're not really paying too close of attention to at least programmatically, and that's the Concept of Collisions. So every time the ball bounces around and hits the sides of the screen or the paddle, you are getting a collision. And because a collision is handled automatically for you when you create these scenes, you don't really see a lot of things going on in the UI or in the, in the code side of the world. But what if you needed to dictate some sort of, operation, programmatically based on collisions that are happening within your scene. So, that is going to be the topic for the next lesson to be able to programmatically notice when a particular collision occurs and enforce some sort of operation based on that.

Back to the top