 Okay. Hi everybody. In this video, I'm going to show you how to make a scrolling background. This is a request I get all the time. So I'm going to go ahead and show you what's going on. The final product will look like something like this. So I've got a little player here in the middle. Player goes left and the background goes right if you notice. And you notice how it repeats over and over and over. I'm just repeating the same background. You could do a longer background, but I'm just repeating a short background here. So let's get started. So I'm going to recreate that for you live. Now this is the starter code. I will put a link down below in the description so you can start from here. So if I run this, all I have is a turtle that turns left and turns right. There's no background at all and just a small window. So again, if you haven't seen any of my other tutorials, watch those first. They'll explain all this turtle stuff to you. I'm assuming that you are familiar with most of these commands. So I'm using the turtle module. This is in Python 3. Create a window object for the screen. Put the title, put the background. Change the size. Tracer turns off the animation updates. Then I'm going to have two different turtles actually. I'm going to have a pen, which is going to draw the background. I should have put background there. And we don't actually see this one. This one's actually hidden. That's why I put hide turtle. But we can use it to draw on the screen. And then I also have a player, which is the little turtle that you saw there going left and right. And there's some code there, some boilerplate code. And I have a command to make the player turn left. So I set the heading to 180. 180 is left. Right is zero. And I have a couple commands here for the key presses. And ignore the announcement outside. I'm here in Japan and they do make those announcements from time to time. And in my wild true loop, I update the window. So here's the problem. What often happens is, well, here's the thing. Let's go ahead and do this the old style. So win.bg pic. And I do have a file called background that I created. It has to be a gif. This is one of the limitations of the turtle module. I'm going to hit function f5 to run in the IDE I'm using called genie. So I'm going to hit function f5. And now we have a background. Now you can see here, it doesn't scroll. Okay, it just sits there. Now if you want a static background, you're done. If you want the background to scroll, you're not done. Now the problem is with the turtle modules, you can't actually do an offset for the background pic. So it would be nice if we could say background gif and then put minus 10 and zero. So it would do an offset. So what we're going to do instead is we're going to do something called register shape. So win.register shape and background.gif. And what this tells the program is that, hey, I've got this image. It's called background.gif. I'm going to be using it at some point. And then what I can do down here is you can see I've got this turtle turtle. I should probably actually put pen dot go to zero comma zero. So it's in the center of the screen. That would probably be pretty helpful. And what I'm going to do is in my while true loop, I'm going to go ahead and type this, I'm going to say pen dot shape. And that's going to be background.gif. I'm going to type pen dot stamp. And what that does is that stamps the image onto the screen. Because if you recall up here, I've used hide turtles. I'm actually hiding it. And there's a reason why I'm not just going to show it. And that'll become clear here hopefully soon. So I'm going to go ahead and run this and see if I have the same result, which I hopefully will. Okay, so I have the same result. Again, still nothing's happening. And this is what we expected. So the trick here is when the, how can I put it? When the player moves to the right, the background moves left. And when the player moves left, the background moves right. So we have to account for that. So what I'm going to do is I'm going to create a variable called camera. And you can see right there DX. And that's going to be zero. And camera, I'm not sure if I need X is zero or not, but let's go ahead and put that in there just in case. So what I want to do is when the player moves left, I want to change the camera DX. So camera dot DX equals. So if the player is moving left, the camera's got to move right. So DX should be a positive number. And there's going to be an error here. And I'll explain that in a second for people that aren't familiar with this, this, what I just did wrong. And in the opposite, if the player is moving right, which is a positive X change, D just means delta or change delta X. I want to go, I want the camera to move left. So then down here, I want to do the following camera X plus equals camera DX. So I'm changing the camera's X location by its, how do I put it, by its change in speed, which it could be negative or positive. And then I have to go pen dot go to camera, camera X and camera, it's always, it's zero, but I could I could have done camera Y here if I wanted to. And then it's going to do the same thing. Now we're going to get an error here. So I'll show you why that's not the one though. Line 34, there's an error. Okay, I forgot the parenthesis. It's probably bothering you guys for the past couple minutes. And okay, so I'm going to push right, push left. Okay, nothing's happening, which again, this is what we expected. So yeah, I thought there'd be an error, but there wasn't. Basically, the reasoning is that it's called scope. This is a global variable, which we usually don't want to use, but for practice purposes, we'll go ahead and use it. So I have to put here global camera X or sorry, DX and global camera DX again. So what that says is this DX, this camera DX is the same as this camera DX. If you're not sure what that means, don't worry about it. Just trust me, this should hopefully fix it. So let's try it again. Again, I'm going to push right. And you can see how the background now moves left. Okay, I'm going to push left. And you see how the background moves right. All right, so that's kind of what we wanted. Now it's not moving very smoothly. I'm not 100% sure why. I'm sure I forgot to do something somewhere. But we'll come back to that and fix that when we can. So I got all the speed stuff. Actually, I want to try and sort that out now, because it's really, really weird. Shouldn't be doing that. And you saw the other version that was working just fine. I know I did. I think I know what is wrong. The other thing here is, because I keep stamping the background on the top, it's just piling up. So I got to do pen dot clear to clear the old background. And so I hit function f5, see if that helps. There we go. Okay, now you can see the next problem. Okay, once I scroll, it scrolls right off the screen. And cyanara suckers. And it is gone, daddy gone. Okay, so we got a scrolling background, which is what we wanted. That's kind of cool. So far so good. Now the thing is, we got to get it to wrap around. Now, here's how I did it. There may be a simpler way to do it, but this is the way that I could figure out and I think it's easy enough to explain. What I've done is I've actually gone ahead and created two other background images. I didn't have to do it this way. But I think this kind of makes sense. If you wanted a longer background, like you wanted instead of the same background repeating, you could do a left background. I have left background and right background. Or we could do it with just one background. And we could do it that way. Well, let's stick it this way, stick to it this way. And we'll go from there. Anyway, okay, so here's what we got to do. And this is where it gets tricky. What I've done is I say pen dot go to now the width is 800. Of course, is zero. Pen dot shape background dot Jeff. And pen dot pen dot stamp. So this is this is going to be to the left. So let's go ahead and run that and see what happens. Okay, something went desperately wrong there. This is coding. Okay, pen dot go to I said they're wrong here. So not negative camera x minus 800. See that does it. There we go. And let me put this back here. And I think this should be. Yeah, this I messed that up as well. So that should be here. Okay, so left. Okay, so you see how now we've got this big long. We still went off the screen, which is not a good thing. And let's see here. Stop that for a second. And then I'm going to go ahead and I'm going to do the same thing on the right. It's easier just to copy that. And again, there may be a slightly simpler way to do this. But I think this is again, probably an easier way for beginners to understand. So what you can see what I'm doing is I'm putting a background in the middle where the camera is. I'm putting a background to the left where the camera to the left of the camera. I'm putting a background to the right of the camera. So again, this is the width of that background. So if I hit function and f5 again, I'm going to go and you can see here it keeps going. And then you can see how it goes off. Now this is where we do a little bit of mathematical magic. So we know that the width of the background is 800. So what I'm going to do is the following camera dot act underscore X percent equals 800. This is called the modulus. So any number under 800 is the same. Once it hits 800, it resets to zero. So the 801 would be one. So it's basically jumping everything back. Now once I do this, I can click right and it will just go on forever and forever. I can click left and it will go on forever and forever. So just real quick, just kind of show you what's going on here. I'm going to comment this section out. So the left image and the right image. So just the regular background. So watch what happens when I go right. So it goes all the way over. And what's happening is once it gets to the end, it's jumping back to the right. It gets to negative 100. Jump back to the right. I go the other way. And then it will jump back to the start. It's kind of interesting stuff. So now once I start adding the other sections again, I'm not sure if I need all three, but let's find out. Let's just try the left one and see what happens. My instinct is that we do need them. So I'll go left. So far so good. Okay, so left works really well. I don't have to do anything. Let's see what happens if I go right. Okay, interesting. We only actually need two of those. So we didn't need the third one, which is kind of interesting. I would not have predicted that. Yeah, interesting. So live and learn. So we don't actually need this one. We just need one other. And then what you could do is you could have a background one, a background two, and then they could scroll into each other, which is kind of cool. Okay, so that's it. That's how you create a scrolling background. It's pretty straightforward. A couple key things. Remember, with the turtle module, you need to register your shapes. If the camera, again, I use the camera. In this case, I could have done player DX and player X, but then it gets a little bit more complicated. This was the easiest way to do it was to have a camera that is centered on where the player is, basically, and where the background should be. And the interesting thing is here, remember, if the player is moving left, which is a negative DX, the camera should be moving positively. And the opposite is true for right movement of the player, the camera should be moving to the left because it's opposite. And then here we add the DX to the X of the camera. We do the modulus so that it resets once it goes past that length, once it goes past the width of the whole background. And then we draw one image to the left. And I guess it probably could have drawn it to the right. I haven't tested it, but I assume that would work. Change the image, stamp it, and then draw our second image, and it will go around and around forever or until your computer dies. Okay, thanks for watching. Subscribe for updates. And yeah, have a good one. Catch you later.