Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Move the Background

In some ways, this is the most important lesson of the course. This is where we'll tackle the math and logic that will create the animation effect. This will make it seem as though the spaceship is flying through the sky—even though the spaceship is the only stationary thing in the scene.

2.5 Move the Background

Now comes one of the more flagship interesting parts of this course where we're gonna begin to learn how to get that background to move a little bit. And once you actually see how this works, you're gonna be amazed at how simple it is. And your brain is gonna start thinking about much more interesting ways to use this concept because you can use it in many different ways, and we're gonna use it for the bomb coming up in a future lesson. But this is where we're gonna start to set up a lot of this functionality. So what we want to do now is begin to move the background. Remember we set them up in addBackground, two of them next to each other and now we want to start to slide them across the scene in a known configured velocity. And that's the first thing that we want to start with is creating the velocity. So let's come up here to our properties, so far we have shipMoveUp and MoveDown. Now we want to create this velocity, this concept of a speed at which the backgrounds are going to move. This is gonna allow you to kind of tweak it a little bit to see what feels right to you and how fast you want this to move. But we're simply going to create a constant here we're going to call this the backgroundVelocity. And we're going to set that equal to or this is actually gonna be a float. So we're going to say this is going to be a float, and let's just set this equal to say 3 right now, 3.0. That's gonna be our velocity and now I'm gonna show you how that's gonna come into play and then you can start to play with it a little bit more to see what feels right to you. Let's come down here and right below addBackground let's create another function. We're gonna call this moveBackground. Now what we're gonna do here is like I said we're gonna at that particular velocity or speed at that 3.0, that's how fast we're going to move it from right to left on the screen which means we need to subtract from the x position of that particular Sprite node. Let's go and see how we're gonna do that. So, what we're gonna do is we're going to use a function called enumerateChildNodes(WithName, and that is part of the SK scene that we are inheriting from here from our game scene. So we're gonna use that function, it's got a couple parameters. So we want to enumerate all the child nodes on our scene that have a particular name and that name is background, and that's why we set that name right here. So we want to go ahead and get everything, get all of the nodes that have a name of background. So that's where we gonna start, and then the next piece of the puzzle is actually going to be this using block. And what's gonna happen is for every child node on our scene that has the name of background, this block is going to execute and this block actually has two parameters. It is going to have, each node that it's going to find, and then there's going to be a little helper here that's going to allow us to stop which we're really not going to use. So you don't have to worry about that too much. And then this is not going to return anything so we can just say Void for that return, so then we can say in and what's gonna happen each time. Here's the body of what's actually gonna happen. What we want to do is we want to get ahold of this node that it found,nd we need to translate that into a Sprite node because that's ultimately what it is. So, we're gonna say, if let bg = node and we want to cast that, once again. As we said, we're gonna attempt to cast it because it possibly might not be. So, then we're gonna say, as an SKSpriteNode. Then we wanna set its position and like I said, we wanna set its x position to be equal to whatever its current x position is minus the velocity that we just set up. So that's pretty simple. We can say bg.position = CGPoint and we want this to be the x, is going to be its current position, .position.x minus our self.backgroundVelocity. So that's where that value is going to come into play. And then we want to set our y to whatever the current y position is which is more than likely going to be 0, but we're just going to set it to y, its current y position just for clarity sake. And then what we also wanna do is we also need to check at this point if this particular background Sprite node moves off to the left of the screen that we wanna take that background Sprite node, and we wanna stick it over on the right hand side. So the first thing we need to do is we need to check to see if that background position.x is less than or equal to negative bg.size.width which means it has moved all the way off to the left. And if it has moved all the way off to the left then we simply wanna move it over to the right. So we're gonna say bg.position = CGPoint. And once again we're going to set its x and y coordinates and its x coordinates are going to be bg.position.x + bg.size.width times 2, and that's to move it off 2 lengths of its width off to the right of the screen. So it's going to be pushed off to the right. And then once again the y position is simply going to be bg.position.y, just like it was before and that is pretty much it. So we're going to save that, that is how we're going to slide this image, this background image along the left because we're subtracting it by that background velocity. And if it gets too far off to the left, it's actually going to take that background, it's going to set its position to 2 sizes of its width off because if we just moved it to the right its width, it's going to place it on top of the one that's already there within the scene. So we need to place it twice off to just offset it just past the one that's going to be showing up on the scene right now. The last thing that we have to do is actually be able to call this method now. We can't necessarily call this up here in the didMove because it's only gonna get called once then, and it's only gonna move once and then it's going to stop. So we have to take advantage of another piece of the puzzle when it comes to an SKScene and we need to override another method here. So we're going to override this function and this particular function is going to be update. So right now we're going to get a chance to tie into the animation aspect of the scene where every so often this update function is going to be called and then every time this is called we want to actually move our background. So we're simply going to say self.moveBackground. So let's go ahead and save that. So let's run our application, and if everything has been done correctly, we should see our background in play again just like we did in the previous lesson. But now we should actually see it moving across the screen. And there you have it. So you can see the background is moving off to the left. And as soon as that last cloud gets off the left, the calculation is going to determine that it's off the screen. And it's gonna move it back over to the right. And you're gonna get this kind of seamless look of clouds coming across the screen which is pretty cool. So we've been able to create this scrolling background effect that makes it feel like our spaceship is actually moving even though the only thing within our scene that is stationary is actually our spaceship in the background itself is moving.

Back to the top