I've recently been fiddling around with Construct 2. Last time I did any video game programming was probably back in '95, using C and OpenGL. Previously, I did hard code video games back in the MS-DOS era on my 286 machine, lol.
Anyway, C2 looks like a great tool to cut through development. My first experiment was to attempt to create an infinitely scrolling background. After searching the web for tutorials, I found many posts describing different ways of achieving this simple task, seeing some people falling into frustration while others assert their proposed methods work (without much info).
One simple method, which I will be discussing here, is two add two identical tiled background objects to the layout and animate them using the event sheet. I am setting the layout size to be 640x480. I will be using a simple tiled image, which I will call TB1, of dimensions 1024x1024, and I will set it top-left at coordinates (0, 0). I will then clone TB1, call it TB2, set it to top-left at coordinates (1024, 0). I will assume scrolling on the x-axis here.
In the event sheet, most C2 programmers will add a system ticker event, such that at every tick, TB1 and TB2's x-coordinates will move on the x-axis by some number multiplied by the 'dt'. This is necessary in order to normalize the scrolling speed against the host system frame speed. That is, the game's scroll speed is constant regardless of the host fps.
Additionally, a comparison event is added to watch when either TB1 or TB2's x-coordinate has crossed a certain point (usually out of the screen). Once the point is reached, the images are repositioned at the opposing end of the screen such to re-enter the view port and give the wrapping effect.
However, by doing this, a flickering line is always seen at the boundary separating TB1 and TB2. Here I will discuss how to get around this common problem, and create a smooth transition.
Let's start by a snapshot of my workflow. As mentioned earlier, I have two copies of a tiled background, each is 1024x1024, named TB1 and TB2:
To animate them, I will use the common method of adding a ticker and watching the x-coordinates as follows:
As the event sheet shows, there is a system ticker event which moves both TB1 and TB2 towards negative infinity, with a logical x-axis displacement of 60 * dt per tick. The number 60 is not a magic number, it can be an number. A comparison event is then added for both TB1 and TB2 to watch when they are completely off screen. When a comparison condition is met, the image is placed at the end of the screen (at 1024) such to re-enter the scene. So far, everything should be running smoothly, right? Well, not really, and for a reason. Let's first take a look at what happens after the first "wrap":
That's no good! What's missing here?
Well, it's a bit of old school and rather simple problem. Let's revisit our "if" condition:
____________________________________________________
if (current_x <= someconstant)
do y
end if
____________________________________________________
Ideally, if we want to perfectly align and synch the wrapping effect, we would use the equal sign alone, not the "less than sign". The equal sign can be used if we were displacing TB1 and TB2 every tick by an integer number that we know. However, since we are displacing the image according to some number multiplied by dt (which is not likely an integer, and also is not known), we will have to use the "less than or equal to" operation and compensate for the extra x-axis displacement that occurred.
A simple tweak is all that is required to compensate for the "extra" displacement that has occurred due to the less than sign. So let's modify our code accordingly as follows:
The term (1024+TB1.X) is saying:
Add the extra displacement resulting from the difference between TB1.X (beyond x=-1024) and -1024. Ideally this difference should be zero, but as long as we're using dt, this correction factor fixes it.
With this small trick, the scrolling becomes properly adjusted and synched. Try it out to see if it works with you. If you have any questions, let me know.
Have fun!!
Anyway, C2 looks like a great tool to cut through development. My first experiment was to attempt to create an infinitely scrolling background. After searching the web for tutorials, I found many posts describing different ways of achieving this simple task, seeing some people falling into frustration while others assert their proposed methods work (without much info).
One simple method, which I will be discussing here, is two add two identical tiled background objects to the layout and animate them using the event sheet. I am setting the layout size to be 640x480. I will be using a simple tiled image, which I will call TB1, of dimensions 1024x1024, and I will set it top-left at coordinates (0, 0). I will then clone TB1, call it TB2, set it to top-left at coordinates (1024, 0). I will assume scrolling on the x-axis here.
In the event sheet, most C2 programmers will add a system ticker event, such that at every tick, TB1 and TB2's x-coordinates will move on the x-axis by some number multiplied by the 'dt'. This is necessary in order to normalize the scrolling speed against the host system frame speed. That is, the game's scroll speed is constant regardless of the host fps.
Additionally, a comparison event is added to watch when either TB1 or TB2's x-coordinate has crossed a certain point (usually out of the screen). Once the point is reached, the images are repositioned at the opposing end of the screen such to re-enter the view port and give the wrapping effect.
However, by doing this, a flickering line is always seen at the boundary separating TB1 and TB2. Here I will discuss how to get around this common problem, and create a smooth transition.
Let's start by a snapshot of my workflow. As mentioned earlier, I have two copies of a tiled background, each is 1024x1024, named TB1 and TB2:
To animate them, I will use the common method of adding a ticker and watching the x-coordinates as follows:
As the event sheet shows, there is a system ticker event which moves both TB1 and TB2 towards negative infinity, with a logical x-axis displacement of 60 * dt per tick. The number 60 is not a magic number, it can be an number. A comparison event is then added for both TB1 and TB2 to watch when they are completely off screen. When a comparison condition is met, the image is placed at the end of the screen (at 1024) such to re-enter the scene. So far, everything should be running smoothly, right? Well, not really, and for a reason. Let's first take a look at what happens after the first "wrap":
That's no good! What's missing here?
Well, it's a bit of old school and rather simple problem. Let's revisit our "if" condition:
____________________________________________________
if (current_x <= someconstant)
do y
end if
____________________________________________________
Ideally, if we want to perfectly align and synch the wrapping effect, we would use the equal sign alone, not the "less than sign". The equal sign can be used if we were displacing TB1 and TB2 every tick by an integer number that we know. However, since we are displacing the image according to some number multiplied by dt (which is not likely an integer, and also is not known), we will have to use the "less than or equal to" operation and compensate for the extra x-axis displacement that occurred.
A simple tweak is all that is required to compensate for the "extra" displacement that has occurred due to the less than sign. So let's modify our code accordingly as follows:
The term (1024+TB1.X) is saying:
Add the extra displacement resulting from the difference between TB1.X (beyond x=-1024) and -1024. Ideally this difference should be zero, but as long as we're using dt, this correction factor fixes it.
With this small trick, the scrolling becomes properly adjusted and synched. Try it out to see if it works with you. If you have any questions, let me know.
Have fun!!
Hey man. nice tut. working fine. but i can'tfigure out how to make this infinite scrolling from top to bottom. i worked it from bottom to top.can you please give us a hint?
ReplyDeleteHello,
ReplyDeleteI've just adapted this technique for an 854x480 layout and it works like a charm.
Thank you very much for sharing this useful trick.