Lots of games have scrolling backgrounds,
where the image is moving behind the player
as they travel through the layout.
If the size of the layout is fixed, this is
easy to do, since you just have to set the
background to fill the width of the layout.
However, some games, like flappy bird, have
scrolling backgrounds that loop endlessly.
Let’s take a look at how to setup an infinitely
scrolling background.
Let’s start a new project, and name it Scrolling
Background.
I’ll set the viewport size to 960 by 540,
and click create.
Now, the viewport size is 960 by 540, but
the layout size is twice as big, 1920 by 1080.
I want the layout size to be the same size
as the viewport, so copy the viewport size,
and paste it into the layout size.
Next, we need to add the background to the
layout.
To do this we’re going to use a tiled background
object.
Double click the layout, and select TIled
Background, under the General Category.
I’m going to name it BG, and click insert.
Click anywhere to place it, and then select
the background image that you want to use.
Whichever image you choose, it needs to seamlessly
tile when it’s setting next to itself.
Check the link in the description if you want
to use the same image that I’m using.
We need to resize it, so that it’s the same
size as the layout, so hit Alt-R or click
the resize button, and set the width to 960,
and the height to 540.
Also, I’m going to put a red dot over on
the right edge of the image, so we can see
exactly where this is tiling.
I’ll put it right on the edge.
Next, we need to set the position to the upper
left corner, which is 0, 0.
We want the background to fill the screen,
so set the size to the layout size, 960 by
540.
Duplicate the BG object by holding Ctr, and
click and drag a copy out.
Since we’re scrolling to the left, we need
the 2nd bg object to be placed just to the
right of the first bg object.
Set it’s position to 960 and 0, which puts
it right next to the other BG object.
Next, we’re going to implement the scrolling,
and to do that, we’re going to move both
of them to the left every tick.
Once the first BG completely leaves the screen,
which will put it at an X position of -960,
the other BG will have an X position of 0.
We need to set the X position of the first
BG object, to be placed just after the 2nd
BG object.
Switch over to the event sheet, and add a
Global Variable.
I’ll name it bg_speed, and set it’s initial
value to 250.
This will control how fast the BG objects
scroll.
First, we need to scroll the objects to the
left, which we’re going to do On Every Tick.
Add an event, using the System object, and
choose Every Tick, under the General category.
Add an action, using the BG object, and choose
Set X, under Size and Position.
We need to take the current X position and
subtract from it the bg_speed and we’ll
multiply that times delta time to normalize
it.
Enter BG.X to reference the current X position,
and we’re going to subtract bg_speed multiplied
by dt.
If I press F5 and preview the layout, each
of then BG objects scrolls off the screen
to the left.
But, as the second one starts to leave the
screen, we can see the white background behind
it.
We need to reposition the first bg object,
so that it trails behind the second.
Add an event, using the BG object, and select
Compare X, under Size and Position.
The BG object has a width of 960, so once
it’s less than or equal to negative 960
pixels, it will be completely off the screen.
Add an action, using the BG object, and choose
Set X.
At this point, a lot of people run into a
problem, because they set the X position directly
to 960.
Watch what happens if I do that.
After the BG object is repositioned, it can
sometimes have a small gap between it and
the other BG object.
It doesn’t always happen, but it happens
enough that it won't work for what we’re
trying to do.
The problem is, sometimes the BG object will
move more than one pixel in a tick, jumping
past negative 960, which means the 2nd bg
object would have moved past an X position
of 0, leaving a gap between the two.
There is an easy way to fix this issue, though.
All we need to do, is add 1920 to the current
x position of the background.
Since it’s width is 960, adding 960 would
put it directly on top of the other BG object.
So, if we double that, and add 1920, that
puts it right next to it.
So just set X to BG dot X, plus 1920, or double
the width of the layout.
Now when we preview the layout, the background
scrolls seamlessly, for as long as the layout
is open.
We can speed it up, let’s say to, 600, and
it still scrolls seamlessly.
That’s all there is to setting up an infinitely
scrolling background.
You can make it scroll in different directions
with the same concept, just do the opposite
to scroll to the right, and replace X with
Y to scroll either up or down.
