Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Creating a Scrolling Background | Building Arcade Game
Building Arcade Game
course content

Course Content

Building Arcade Game

bookCreating a Scrolling Background

In this chapter, we're making our game's background move to create the illusion of a continuous, scrolling scene. Here's a simple breakdown:

Move the Background

  • bg_x1 -= bg_move and bg_x2 -= bg_move shift both instances of the background image to the left. This movement is determined by the value of bg_move, making it seem like the player is moving forward in the game.

Loop the Background

  • The if statements check if either background image has moved entirely off the screen to the left. If bg_x1 < -bg.get_width(), it means the first background image has scrolled past the left edge of the screen. We then set bg_x1 = bg.get_width(), which moves it directly to the right of the visible screen, ready to scroll again. The same logic applies to bg_x2.

Display the Background

  • main_display.blit(bg, (bg_x1, 0)) and main_display.blit(bg, (bg_x2, 0)) draw the background images on the screen at their new positions. The (bg_x1, 0) and (bg_x2, 0) specify the positions of the backgrounds. The 0 in both commands keeps the vertical position the same, ensuring the background scrolls horizontally.

By continuously moving and looping the background images like this, we create a seamless, scrolling effect that adds depth and movement to the game, making it more engaging and visually appealing.

Task

  1. Shift Backgrounds Left: Decrease bg_x1 and bg_x2 by bg_move to move backgrounds leftward;
  2. Reset Backgrounds for Loop: If bg_x1 or bg_x2 move off-screen (< -bg.get_width()), reset them to bg.get_width() for continuous scrolling;
  3. Draw Backgrounds: Use main_display.blit(bg, (bg_x1, 0)) and main_display.blit(bg, (bg_x2, 0)) to draw the backgrounds on the screen at updated positions.

Mark tasks as Completed
Switch to desktopSwitch to desktop for real-world practiceContinue from where you are using one of the options below
Everything was clear?

How can we improve it?

Thanks for your feedback!

In this chapter, we're making our game's background move to create the illusion of a continuous, scrolling scene. Here's a simple breakdown:

Move the Background

  • bg_x1 -= bg_move and bg_x2 -= bg_move shift both instances of the background image to the left. This movement is determined by the value of bg_move, making it seem like the player is moving forward in the game.

Loop the Background

  • The if statements check if either background image has moved entirely off the screen to the left. If bg_x1 < -bg.get_width(), it means the first background image has scrolled past the left edge of the screen. We then set bg_x1 = bg.get_width(), which moves it directly to the right of the visible screen, ready to scroll again. The same logic applies to bg_x2.

Display the Background

  • main_display.blit(bg, (bg_x1, 0)) and main_display.blit(bg, (bg_x2, 0)) draw the background images on the screen at their new positions. The (bg_x1, 0) and (bg_x2, 0) specify the positions of the backgrounds. The 0 in both commands keeps the vertical position the same, ensuring the background scrolls horizontally.

By continuously moving and looping the background images like this, we create a seamless, scrolling effect that adds depth and movement to the game, making it more engaging and visually appealing.

Task

  1. Shift Backgrounds Left: Decrease bg_x1 and bg_x2 by bg_move to move backgrounds leftward;
  2. Reset Backgrounds for Loop: If bg_x1 or bg_x2 move off-screen (< -bg.get_width()), reset them to bg.get_width() for continuous scrolling;
  3. Draw Backgrounds: Use main_display.blit(bg, (bg_x1, 0)) and main_display.blit(bg, (bg_x2, 0)) to draw the backgrounds on the screen at updated positions.

Mark tasks as Completed
Switch to desktopSwitch to desktop for real-world practiceContinue from where you are using one of the options below
Section 1. Chapter 9
AVAILABLE TO ULTIMATE ONLY
some-alt