Part Two - Scrolling the Background

Welcome to the second part of our tutorial.

The previous part discussed the creaton of a new project, and the simple creation of a few art assets.

Today we'll be creating a simple scrolling background for our game, using the sky and ground images we drew last time.
We'll be using a simple loop, and a little bit of mathematics to create a parallax scrolling effect, just like in the PlayMyCode favourite "SpikeDislike".

Copy

We'll start off by creating a copy of our previous code. You don't need to do this, but I've done it so there's a clean collection of each stage of our tutorial.

Click the [Copy] button to open the Copy Project window.

In here, you can change the description, as well as the title for the project.

Then click the [Copy] button to make the copy, and lastly edit to get inside the innards of our code.

To start things off, we'll make a new Global variable, which will store our scrolling distance. From this value we'll be working out all the different layers of scrolling.
It'll start at 0, and be added to as the game moves onwards.
Up near the top, just under where we loaded our images, place the line $Scroll_Distance=0.

Inside the main loop is currently the test drawing routines.
We no longer need these, so get rid of them.
Highlight and Delete..

Our First Function

Replace all of that with a single command. DoBackground()

DoBackground isn't a magical command within PlayMyCode.
Instead, we're going to create the command, give it a purpose, and let it do things as it needs to.

Further down, underneath the "end" of the main loop, define our new command using the def CommandName() ... end syntax.

Now, every time we call "DoBackground()" the language will jump to this section, perform whatever is inside the section, then return to where it was, once it's finished.
These sub-routines are more commonly known as "Functions", since they usually have a particular function or purpose.

For our first function, we'll be getting it to draw the background, which should be a fairly simple task.

Next up, we need to work out a little maths. Open up the Windows Calculator, or the Mac Calculator, or grab a nearby calculator!.. Basically, you'll be wanting a calculator at this point!

We drew our sky and ground tiles at 640 by 64 pixels, and PlayMyCode gives us a display of 620 by 400 pixels.
In order to completely fill the display, then, we'll need at least 1 image horizontally, but also (400/64)=6.25 tiles down the screen.

We'll create a loop that draws 7 tiles down the screen, so start by making a simple Do-Loop.
Here we tell the program to do the inside code 7 times, giving us the value "y" each time.
So, the first time through the loop, the variable y will be 0, the second time it'll be 1, then 2 then 3,4,5 and finally 6.

Within the loop, we can start by simply drawing our sky.

If we take a look at our game (Ctrl+S,Ctrl+R) we should see the following.

It's all sky, but we need some floor, too.
To do this, we use a local variable to store which image we're drawing, and then when we hit floor level, we switch from $Sky to $Ground

Give it a run, and you should now have sky at the top, and ground underneath.

Next, we double up the drawing, so that when we start scrolling, we don't end up with large gaps.
Basically, we want to draw everything at it's normal position, and then another copy exactly one tile over.
Switch the "0" to "x"s, ready for movement, and set x to 0, then double the drawing line and add our image's width to the drawing position.

.. Yep!

Movement

OK, now we're ready to fill in the x variable with some movement maths.
First off, we take $Scroll_Distance and multiply it by a Scroll_Speed, to generate the amount that layer has moved.
Next we make sure the value is between 0 and 640 (our image's width) by simply using the "%" command.

The % command is basically "remainder". It takes the left number, divides it by the right number, and returns the remainder.
Here, any number will return a value between 0 and 640.

Last, we want the value to be negative, since the screen moves to the left, so we make everything 0-, instead of the normal value.

If you run it, at this point, you won't see any change at all. This is because $Scroll_Distance isn't actually moving yet, so head up to the main loop and add a simple Addition to get it shifting.

Now run the code, and you should have a nice scrolling background.
But this isn't quite right, yet.
The original SpikeDislike game uses a cheap and tacky parallax effect. We should add that, next.

Simple Parallax

Head back down to the Scroll_Speed line.
Here, we'll be moving each layer at a different speed.
Our ground texture starts at y=5 (or y>4), so when y=5 we want the scroll speed to be 1, so that the floor is showing our actual speed.
Anything over y=5 should be faster, and anything below should be slower.

If we simply made it (y/5), then y would indeed be 1, but the topmost layer (0) would end up with a speed of 0, which means it'd never move.
This seems a bit silly, so instead we'll bulk up the numbers a little.
If we add 5 to y, then divide by 10, we get a much nicer set of numbers..
Where y=5, the result is ((5+5)/10) which is 1
Where y=2, the result is ((2+5)/10) which is 0.7
So, we set the speed to (y+5)/10

Run the game, now, and you'll see the clouds misalign nicely. Slower at the top, faster at the bottom, just like in SpikeDislike.

Delta

At this point, we should talk about Delta Timing.
Because your game is running in HTML5, not every system and browser is going to be running the game at full speed.
Because of this, something that looks smooth on your screen, might not necessarily look as smooth on someone elses.

PlayMyCode gives us a handy Delta system, which we can use to keep track of this.
To start using Delta, Add the |Delta| parameter to the end of the opening main loop line.

Now, whenever the framerate is silky smooth, Delta will be exactly 1. PlayMyCode assumes that 60fps is "Normal"
If the framerate is a little sluggish, Delta will be higher than 1, and any maths you do with it will compensate for the lost framerate.
If the framerate is wizzing away at a much faster than normal pace, Delta will be less than 1, so you can cope with any changes.

In our simple background scroller, the framerate change effects how far we scroll.
If we stick to "$Scroll_Distance=$Scroll_Distance+1", but the framerate is only managing 10 fps, the scroller will be moving 6 times slower than it should be.
To compensate, we multiply our figure by Delta. (And we'll bump it up, while we're at it!)

That's all we need to do!
Now if the game is running at a sluggish 10fps, the movement code will speed up to compensate, and the game will "feel" as though it's still moving at full speed.

End of

So, that's our background.
Next time, we'll add the face into the mix, and get it bouncing up and down like it oughta be, as well as adding input into the mix, so we can control the speed.
Until next time, enjoy your coding, and play with the code.

You can PlayMyCode here, where you can see our game so far.