Flappy Bird Game Algorithm Part 2 - Background movement

With the ability to make the gravity, now let's enable the background movement.

Just FYI, in the Flappy Bird Game (or any spaceship game), it is the background that moves at the opposite direction which causes the illusion that the main object is flying. It is the typical way of creating such an effect.

Here, i am taking a Super Mario-like background image from here. To make it move smoothly at the back, we need at least 2 background images, which i crop the originals into 2 pieces, as shown below (bg1 and bg2):

Bg1 and Bg2, each pivoted at the top left red point.

At the beginning, the first part of the image (bg1) is shown (filling the device), while the second part (bg2) is placed just after the first image.

Then, with the Event.ENTER_FRAME again, both background images are moved slowly to the left. When the bg1 is completely vanished from the screen, its location (x) is moved to the end of the screen again. The same process is repeated to the image bg2 as well. And the entire process is looping forever.

Not surprisingly, in the onEnterFrame function of the background object, the function is as brief as below:

private function onEnterFrame():void
{
      this.x -= GamePlay.GAME_SPEED;
           
      if(this.x < -DEVICE_WIDTH)   this.x = DEVICE_WIDTH;
 }

Next: Flappy Bird Game Algorithm Part 3 - Collision Detection