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

Conteúdo do Curso

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.

Tarefa

  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 desktopMude para o desktop para praticar no mundo realContinue de onde você está usando uma das opções abaixo
Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu 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.

Tarefa

  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 desktopMude para o desktop para praticar no mundo realContinue de onde você está usando uma das opções abaixo
Seção 1. Capítulo 9
AVAILABLE TO ULTIMATE ONLY
some-alt