Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Add the Background

It isn't very interesting looking at a spaceship on a blank white screen. Let's make things a little more interesting by adding a background. In this lesson, I'll show you an important technique for creating games with scrolling backgrounds: using two copies of the background right next to each other.

2.4 Add the Background

In this lesson we want to begin to add a background to our game and that's to introduce a couple of concepts that are gonna become very important when we want to begin scrolling the background and kinda giving that feeling of movement and that kind of parallax feeling. So the first thing that we wanna do is add a background to our scene. So I'm going to create a new function here, and I'm gonna call this addBackground. And the basic concept here is very similar to what we did with a ship, we're gonna do something very similar. We're gonna create some sprite nodes but the concept here behind a scrolling background since we only have a single asset that is going to be our background. As you can see right here, the idea here is we are going to place two of these out onto our scene at a time, one you're gonna see in the scene and the other one is gonna be placed off just to the right. And then eventually we're gonna start at a certain predefined speed or velocity, we're gonna start scrolling that or moving that background across the scene at a specific interval. And then we're gonna move one node off the screen to the left, and then ultimately stick it out on to the right. But before we get too far ahead of ourselves, let's first talk about getting this background onto our scene. So once again, I'm gonna be working with our game scene. I have my addBackground function here. And like I said, we're gonna have two of these sprite nodes out onto our scene at a time, one that you're gonna see and one that you're not gonna see. And the way that we're gonna do that is we're gonna use a loop. We're gonna say for index in, we're going to specify a range here, that's gonna be from zero less than two. So we're gonna do 0 and 1 which is basically going to give us a loop that's gonna execute two times. Then we wanna create a SpriteNodes we're gonna say let this be called bg we'll call it and we'll say this is gonna SKSpriteNode once again and it's gonna be image named. And this time we're going to use back that is the name that we're gonna use or the image that we're gonna be using from our assets. Then we wanna set its positions so we're gonna say that position is going to be equal to. And we want to kinda place this in a spot where we can loop through this so that they're placed next to each other. And the way that we're gonna do this is we're going to set them using a CGPoint where our x is going to be our index, in this case it's gonna be 0. And then we're gonna multiply that by the imagery value of our background.size.width. So in this case this is gonna wind up being 0 so our initial x position is going to be 0. And then we'll set our y to 0 as well. And then the next time through, it's going to be, index is going to be 1, so then this is going to be simply the width of the background image. So it's gonna be just off the screen. So that's how we're gonna handle that. One of the little piece of housekeeping we're gonna have to do as well is we're gonna need to center anchor point to be sure that this is set up properly. And the anchor point is actually the position within this SpriteNode that's gonna be referenced when we say set the position like we're doing here. It's gonna be relative to this anchor point. And we're making the assumption here that this anchor point is gonna be at positions 0, 0. So we wanna make sure that we set that up correctly. So we're gonna make sure that our x is going to be at 0 as well as our y, so that's going to be our anchor point. And then once we've done that we can also give this a name and we're gonna set this equal to the background and then finally all we have to do is add this to our scene. So we're gonna use our addChild function here and we're simply going to add background. And let's go ahead and save that. So what this should do is run through two times so it's going to place our background on the screen and make it visible and that's gonna place another one off to the right. That is just off by an increment of the width of this image. So now what we have to do is call our background function here and we're gonna this up here in did move just before we add the ship. So let's go ahead and say self.addBackground, just like this. So Let's go ahead and save this. Let's go ahead and execute our application now and this will start up in our simulator once again. And what we should see now is not only our spaceship but we should also see our background here. So there you have it. Here is the initial set up of our application. And I can see a nice background behind our ship. I can move it up and down. But we don't have any movement yet. But like I said before the basic idea here is we're going to ultimately set up some sort of velocity that we want our background to move across the scene. And then we're just going to adjust its location along the way and that's exactly what we're gonna look at in the next lesson.

Back to the top