SPEAKER: So Mario 0 was a lot of work. We took a few minutes to really Bootstrap our application from nothing. And we ended up with a map of tiles that look somewhat similar to what you might see in Mario with a blue sky and then an actual tile map representing a spreadsheet chopped up into pieces. 

With this example, we're going to take a step towards the side scrolling aspect of Super Mario Brothers. Now, it's called a side scrolling platformer because it does indeed scroll, typically from left to right. And it follows sort of the player often. 

In this example, we're just going to illustrate automatic scrolling, an autoscroller, so to speak, by sort of adding almost a velocity like we used with the paddles in Pong and applying that to a sort of virtual camera. And to do that, we're essentially going to keep track of the top left corner of a camera, a virtual camera, using a function called love.graphics.translate. 

And what this does is it takes in an x and a y. And it actually shifts the entire coordinate system by that x and the y. What that has the result or the effect of doing is, if, for example, you translate the coordinate system by 100 pixels to the right, that will actually make it look as if you have moved 100 pixels to the left. Because everything is shifted in that direction. 

So it's like you're going in that direction almost, or the opposite of that direction. So by sort of translating by the negative value of wherever we want to shift our camera-- let's say we want to go 100 pixels forward. If we set a camera 100 pixels forward and then negative shift that with love.graphics.translate, that will give us the illusion of movement, effectively. 

So I'm going to go ahead and shift over to my text editor here. And let me just go ahead and make sure I have everything solid. I'm going to divide these just upfront by 255 here. OK, so those need to be floating points by 1. Now, what I'm going to do is go over to Math.lua. And in here, I want to have an update function, so Map update. 

And in main.lua, which is over here I want to make sure that in love.update I call map of update delta time. And this probably looks similar to the paddles and the ball that we saw in Pong. In map update, what I essentially want to do is have a camera, x and y, that will move over time, sort of like the paddles did with their velocity. 

So what it can do is, up here, let's just say-- below tiles maybe-- self.camX is equal to 0. And self.camY is equal to 0. And then what I want to do in here is, over some time-- and again I have dt as a parameter. It's getting passed in from love.update. I could say self.camX equals self.camX plus-- let's call it a variable called SCROLL_SPEED times delta time. 

We haven't actually declared SCROLL_SPEED speed yet. So when I go to the top, I'm going to create this as a local so it's not accessible from anywhere else in my application besides the map class. But I still have it visible across all functions. I want to say local SCROLL_SPEED. And let's just say 62. 

Now let's go back over to main. Now, the map is going to scroll. But this doesn't have any actual impact on our program until we use love.graphics.translate. So over here, I'm going to say love.graphics.translate. And then we'll say negative camX and negative camY, like so. And let's run it. 

And then-- oh, sorry. It needs to be map.camX. My apologies. Do negative map.camX and map.camY. And you can see that we do have our tile map scrolling from left to right, as it should. 

Now, there is one little weird issue with the fact that the tiles sort of have this weird lining happening. Because they're being actually rendered at floating point values. So if we go over to map and we go down here to update. So this camX is actually getting incremented by scroll speed times delta time, which is a fractional value. 

And if you render anything at a fractional value using push, you're going to see sort of a little bit of artifacting. Because things are trying to be rendered as if they're interpolated between two positions, fractional values. So what we need to do instead is use a function called math.floor. 

And what math.floor floor does is it essentially works like casting a float to an int in C in that it will just get rid of the fractional value of whatever number we pass in and give us just an integer, which is perfect for here. So for example, 6.75 will get turned into 6, just like 6.2 would get turned into 6. 7.5 would get turned into 7, so on and so forth. 

So let's go ahead and run this. And then as you can see, it is indeed moving smoothly from left to right, or at least giving the appearance as if we're moving from left to right. So that's it for the scrolling update. So join me in Mario 2 coming up soon for the controls update, where we're going to take the auto scrolling functionality away from this and actually implement it such that we can control it with the keyboard. So see you soon for Mario 2.