 Okay, so this is how you do scrolling in STL. So I have this program. I can move left, I can move down, I can move right, I can move up, I can move down. So basically what this is doing is it has a texture and it's drawing a bunch of points that move randomly on this texture around. Then what I'm doing is I'm selecting a source rectangle and a destination rectangle. Keep in mind that there's a thin border around this window. This is significant and I'm going to explain how to do that in the code. So let's take a look at the code and see how you can implement simple side scrolling like this. As you can see, again, I can move around the screen like this, up, down, and I can also zoom in, zoom in, zoom out, zoom out. Okay, so let's actually take a look. Okay, so this is our source code and I'm going to go over, I think the important parts first, then I'm going to just review the whole source code just so you understand how it works. So the most important section of the source code is this source and desk rectangles. These source and destination rectangles determine from which position on the texture you source your data and then to which destination you are actually going to draw on the window. So as you can see here, we have this desk rect and this desk rect is offset by 10 pixels, so it's on the x-axis going over by 10 and then on the y-axis it's going down by 10. And the screen width for this destination rectangle is minus 20. And the reason why it's minus 20 is because if we move our rectangle over by 10 and then we move it down by 10, you want to make it look like the other side is equivalent. So what you're going to do is you're going to subtract 20 because if you move over by 10, you have to subtract 20 from the other side. You're going to have a fairly even-looking display. But if you don't understand how this is working, if you take a look at the source code down here where we have a render copy, what we're doing here is we're taking this texture and we're taking a renderer, should I say we're passing it a renderer and we're passing a texture. The renderer is pointing to the window, so it's basically pointing to the window right now. This texture is the texture to which we're drawing all of our pixels. And these source and destination rectangles determine from where we're sourcing the pixels. So for example, this source, imagine the source rectangle is being applied to the texture here, and this destination rectangle is being applied to the renderer here. So what we're doing is we're going to this texture and we're saying, okay, so give us a rectangle of pixels that is the size of this source. It's not only going to give you the size of the rectangle, but it's also going to offset on the X and Y axes. So if you want to take a section of a texture and you don't want to take a section of the texture, let's say at position 00, you would increase the source's X and Y axes or should I say X and Y values to reflect where on the texture you want to start taking your data from. And this destination rectangle, what this is going to do is it's going to tell you where on the window or where on the renderer here do you want to show these pixels. So as you can see here, what I'm doing is I'm dividing the source by 32. And the reason we divide source by 32 is because we can actually take a smaller section of the texture and then we can draw it to the screen. And an interesting thing about this API is that when you take a smaller section of pixels and you draw it to the screen, it's actually going to stretch out those pixels for you and make them much bigger than they actually are. And this is a really nice way to do really simple scaling. So if you want to have like an 8-bit video game and you have a 4K display, you can just have a higher resolution, you can have a higher resolution window, but you can source the texture divided by like 32 or something and you can have something like that work fairly easily. Okay, so I hope you understand what I just explained. So to go over this program and what it does, we have window and we have renderer and we have a texture. This should be fairly self-explanatory. What I'm doing is I'm just creating window, renderer and the texture. If you don't know what I'm doing here, I refer to other videos on STL. Then what we're doing is we're creating a vector and this is going to be a vector of points. Then what I'm doing is I'm just populating this vector with 10,000 points. Then we begin our main while loop. So this is the main while loop. Then what we're doing is we're handling events. So again, this is fairly simple, you should understand what this does. So here we're saying if the type of event is quit, we're going to quit. If the type of event is key down, we're going to check which key was pressed. If the up key was pressed, what we're going to do here is we are going to move y. We're going to subtract 3 from y. The reason we do that is because if the up key is pressed, the user is indicating to us that they want to look above the current view. So we're going to move the texture up a little bit to see what's above. Or should I say we're going to change the offset of the source and the same on the left and right. So if we want, we can move the source. We can source the pixels from different locations on the x and y axis based on user input. And that's how you do scrolling in SDL. This what I'm doing here is if I click one or two, I'm going to zoom in or zoom out on this texture. And the way that we zoom in is actually by dividing the width by two. So if we divide width by two, we're taking a smaller section of pixels. And because we're taking a smaller section of pixels, those pixels get stretched out when we actually show them to our window. Meanwhile, if I click one, we're going to zoom out because we're multiplying the width by two. So we're getting more pixels. But because we're getting more pixels, those pixels are going to be more pixels shown to the screen, which will make them look like they're zoomed out a little bit. Then what we're doing is we're basically just clearing the texture. We're setting the target to be our texture. So if we don't do this, it's just going to keep displaying the same pixels over and over again, which is not going to look good. So what we do is just we set this texture to white. We just clear it to white. After that, we are going to move our pixels in random positions. So all of the points on the screen, we're going to move them randomly by one. So it's either going to increase by one, decrease by one, or just go nowhere. And then what we're doing is we are setting the draw color to be black. Once it's set to black, we draw all of our points. And finally here, what we're doing is we're copying a selection from the texture to the screen. And as I mentioned, you set null for your render target if you want to render through the screen. What we do here is we set the draw color to be white. And when we do that, we clear our renderer. And then after that, what we're doing is we are taking a source. So we're taking a source rectangle. So we're taking a rectangle and we're placing it on the texture and saying, this is the portion of pixels that we want. And then the destination is where, like the destination is, which area of the screen are you going to show those pixels to? So the renderer, so basically the source is corresponding to the texture and then the destination is corresponding to the renderer. So source is taking a selection of pixels from the texture and destination is drawing those pixels to the renderer at that location. So basically, again, to explain again the source, what the source is doing. So what the source is doing is it's taking a selection of pixels from the texture and then the destination is specifying where on your renderer are you going to show those pixels. And when you do that, it's going to take those pixels from the texture and it's going to draw them to the destination on the renderer. So if you understood that, that's great. Thanks for watching and I'll see you in the next video.