Bummer! This is just a preview. You need to be signed in with a Treehouse account to view the entire video.
Start a free Basic trial
to watch this video
Now that we have our projectile setup we will use Sprite Kit’s MoveTo action to keep a constant velocity and move the projectile off the screen. To determine the offscreen point we will use the math we learned in the Quick Math Lesson video.

0:00
So, we left off by creating a projectile class so that

0:04
we can display a projectile wherever a user touches the screen.

0:09
Course that's not the intended behavior for our game

0:13
cuz we want the projectile to originate from the top

0:16
of the machine and then end up where the

0:19
user touched it, and then go off beyond the screen.

0:22
So, we've already seen how the math works

0:24
like, so let's go ahead and implement this functionality.

0:28
So, in our projectile node implementation, we'll

0:34
create a method and we'll call it moveTowardsPosition,

0:41
and we'll give it CGPoint position.

0:45
So, basically we're gonna instruct that projectile node to move towards

0:49
a particular position, and of course it's gonna go beyond that position.

0:55
So as a reference, let me bring up exactly what we're calculating.

1:00
So, the projectile node is going to originate from the top of the machine.

1:03
So, it's this red point here.

1:06
This blue point is going to be the point where the user has touched the screen.

1:10
And then we have to calculate this offscreen point.

1:13
So, this is the point where we need to end up.

1:17
If the user clicks, of course, on this side of the screen.

1:21
If the user clicks on the righthand side of the

1:23
screen, then we'll end up somewhere on the right, over here.

1:28
All right, so assuming that our original position is

1:31
X1,Y1, and we want to end up at X2,Y2.

1:35
So, let's say where the user is touching the screen is X3,Y3.

1:39
So, for us to find out this location here the X is easy.

1:45
All we have to do is, if it's on the left side of

1:47
the screen, we'll say it's minus ten, which means that it's below zero.

1:52
If this is zero, zero and any point below here would be a negative number.

1:58
So, we just wanna end up a little off screen.

2:01
So we're gonna select minus ten for that position.

2:06
So, the first thing we need to calculate is the slope.

2:09
Why the slope?

2:10
Because we know this position and we know this position.

2:14
If we get the slope of this green line here, we'll be able

2:18
to figure out the Y position because we already know the X position.

2:23
So, slope is equal to Y3 minus

2:29
Y1, divided by X3 minus X1.

2:36
In our case, that's what the slope will be equal to.

2:39
So, we'll say float slope is equal to position.y

2:45
minus self.position.y, right?

2:51
So, the position is being passed here to our method, and that

2:56
is the position where the user is going to be touching the screen.

3:00
Divided by position.x minus self.position.x.

3:07
So, self.position would be the position of our projectile.

3:12
All right.

3:14
So, now that we have the slope, we need to try

3:17
and figure out how we can calculate this Y2 over here.

3:21
All right, so going back to slope is equal to Y2

3:26
minus Y1, divided by X2 minus X1.

3:32
But we already have the slope, so we know

3:36
the slope, what is unknown over here is Y2.

3:41
Because X2 is going to be minus ten, we've already decided that.

3:46
So, if we bring this side of the equation to the left, then it

3:53
makes it Y2 minus Y1 is equal to slope times X2 minus X1.

4:00
And then, for us to find out Y2

4:05
is equal to slope times X2,

4:10
minus slope times X1 plus Y1.

4:16
So, that's how we're going to figure out Y2.

4:19
So firstly, we need our X2, right?

4:24
So, this is our offscreen position, which is X2.

4:27
So, we need to figure that out.

4:29
So let's do float.

4:32
So, instead of calling it float X2, I'll just call it float offscreenX.

4:40
So, how do we figure out what is float offscreenX?

4:43
Well, if position.x is lesser than or equal to self.position.x,

4:52
which means that the touch point is on the left side of the screen.

4:57
If it is on the left side of the screen, then it's easy.

4:59
We'll just say offscreenX is equal to minus ten, right?

5:05
So, if this X3 position is less than X1, then

5:09
we know it's on the left side of the screen.

5:11
If it's greater than X1, then it's on the right side of the

5:14
screen, which means we have to do the width of the screen, plus ten.

5:18
But the left side is easy, you just say minus ten.

5:21
And then else, we'll say offscreenX is equal

5:28
to self.parent.frame.size.width.

5:35
That's quite a mouthful there.

5:37
So, basically we're getting the frame size, the width of the parent node.

5:42
So in this case, the parent of the projectile is the scene.

5:47
I'll say plus ten.

5:50
So, now that we have the offscreenX or X2, we'll

5:56
calculate the offscreenY, which according

6:01
to this equation right here would be, slope

6:07
times offscreenX, minus slope

6:13
times self.position.x,

6:18
plus self.position.y.

6:23
So in this case, we could have taken either this position

6:26
or this position, it doesn't matter because the slope is the same.

6:30
So, we will get the Y coordinates.

6:35
All right, so now that we have offscreenY, let's see why

6:39
we're getting unused variable offscreenY when we haven't used it yet.

6:44
So, now we need to do is make a pointOffscreen is

6:50
equal CGPointMake, offscreenX and offscreenY.

6:59
So, now we have this point.

7:01
So, what's missing is this distance, or rather the length of this green line.

7:06
So, what I wanna do is figure out how I

7:09
can get the length of this green line or the distance.

7:13
Now A, we can get, we can subtract Y2 from Y1 and get the distance

7:19
of A, and then we can subtract X2 from X1 and get the distance of B.

7:25
And then, we can apply the Pythagorean Theorem, which says A square

7:29
plus B square, the square root of A square plus B square.

7:33
And then, that's what's gonna give us C.

7:35
Now, that's a lot of math here, and this has very little to do

7:38
with actually programming the game, or learning

7:41
about, you know, how to program this game.

7:44
But, this is essentially what you'll have to do a lot of times.

7:47
You'll have to, you know, figure out all of these different ways you can

7:51
manipulate objects in your game, and for that, a lot of math is required.

7:56
So, you might wanna brush up on your math a little there.

8:00
All right, so I'm gonna calculate the distance of A.

8:05
So, we'll say distanceA is equal to pointOffscreen.y

8:12
minus self.position.y, and then distanceB is equal

8:19
to pointOffscreen.x minus self.position.x.

8:25
All right, so now that we have these two distances, we can calculate C.

8:32
So, we'll say distanceC is equal to, and there's a function

8:38
called square root, so we're gonna use the float version of that function.

8:43
And in order for us to square numbers, we can use the

8:48
powf function, so we can provide it with two variables.

8:54
First variable is distanceA and the square root of that, plus

8:59
powf, and we'll say distanceB and the square of that.

9:08
So, now we have distanceC.

9:11
So, distance is equal to speed times time, or speed multiplied by time.

9:20
So, time is equal to distance over speed.

9:25
Try to figure out how long the projectile would take to travel from

9:30
that point to the point off screen, given that we have the distance.

9:36
So, let's figure out time.

9:38
So, we have the distance, we'll, we'll say distanceC divided by, now we need a speed.

9:45
Now, this number is a constant, it doesn't change.

9:48
It's not derived from anything, so the speed could be anything that we want.

9:53
Let's start with 100, just you know, its a random constant.

9:58
So, now let's say SKAction moveProjectile is equal to

10:05
SKAction moveTo, pointOffscreen, and give it the duration.

10:13
Cuz it has to move at a constant speed to that position.

10:17
And then finally, we'll say self runAction, moveProjectile.

10:22
And that's it.

10:23
It was mainly all this math that we had to calculate that was

10:27
the tedious part, but the actual moving of the projectile is pretty easy.

10:32
So, let's go back to our gameplay scene and what I also need to

10:36
do is copy the signature of this method and paste that in our header file.

10:43
So, make sure that you do that, and go and

10:45
put into your interface definition,

10:48
the signature of the moveTowardsPosition method.

10:50
Now, we'll go over to our gameplay scene, and so we've already created a projectile.

10:58
What we need to do is, we need to

11:00
start this projectile's position at the top of the machine.

11:04
Right now, we're directly assigning it this

11:06
position where the user has touched the screen.

11:09
We need to assign it the position at the top of the machine.

11:13
So for that, we need to get the machine node, so we'll say, THMachineNode,

11:19
machine is equal to THMachineNode.

11:24
And then self childNodeWithName,

11:30
Machine.

11:32
Let's go over to the machine node implementation and make sure

11:36
that we're actually giving our machine a name, and we're not.

11:40
So, we'll go ahead and give the machine a name

11:43
so that we can search for that node with a name.

11:47
We'll say, Machine.

11:49
So, let's go over to our gameplay scene one again.

11:52
So, now we have access to the machine, and we can get its position.

11:57
So we'll say CGPointMake right here, and the x is fine.

12:04
We can do machine.position.x.

12:08
And as far as the Y, that might be a little tricky.

12:10
We'll do machine.position.y.

12:13
Remember, we set the anchor of the machine to be here.

12:17
So, the Y you'll get is this Y.

12:20
So what we can do is, we can get this point plus the height of

12:23
the machine, and then subtract it a little so that it comes down somewhere here.

12:29
Cuz the height might be up till here, because

12:32
we're trying to take into account the, the little fireball.

12:37
So we'll say machine.position.y, plus

12:41
machine.frame.size.height, and then subtract it by, let's say, 15.

12:48
All right, so that's the starting position of our projectile.

12:52
Then we add it as a child node to our scene, and then finally we'll

12:56
say, projectile moveTowardsPosition, and this position is basically

13:01
the position where the user touched the screen.

13:04
So, just a recap, we're creating a projectile node at

13:07
the position, which is placed at the top of the machine.

13:11
We add that projectile as a child node to our scene.

13:15
And then, we move that projectile towards a

13:17
position where the user has touched the screen.

13:21
So, let's go ahead and run our game and see if this works.

13:26
So, we'll touch it anywhere on the screen, and you'll notice

13:30
that the projectile, it fires and it fires in the right direction.

13:34
So, this works just fine.

13:36
Also, you'll notice that as you touch and fire

13:39
projectiles, the number of nodes keeps increasing and decreasing.

13:44
That's because the scene manages the number of child nodes.

13:47
So, if a child node is off screen, then it automatically removes it.

13:51
So, it's no longer in memory either.

13:53
So right now, as you can see, it says that we have three nodes.

13:57
So, one of them is the space cat, the machine and the background image.

14:01
So, there are the three nodes that are currently active and visible.

14:04
And if I touch the screen, you'll notice that it says

14:07
four nodes, and then it goes back down to three nodes.

14:11
Right, so the only thing that I noticed is that the projectile is really slow.

14:15
So, let's go back to our implementation here and I'm

14:18
going to quadruple my speed because the space dogs are

14:22
gonna be coming down really fast, so we need to

14:24
really shoot the projectile fast, and that's a lot better.

14:27
[SOUND] So, here you have it.

14:29
We've managed to successfully wade through all of

14:32
that math and shoot projectiles in the right direction.
You need to sign up for Treehouse in order to download course files.
Sign up