This is a follow up to an earlier post where we created a scrolling background in Flash using ActionScript. This time we’re going to do the same thing, but using Python and Pygame.
This animation is what we’re creating. The black box is the actual screen that our players will see, but notice that the backgrounds are moving off the stage. The red and green backgrounds are duplicates of the same image, but are different colors for this demo just to make it easier to see what’s going on.
Click the animation to start and stop.
With Python we’re going to load a copy of the background image into two different Surfaces.
The image to the right is what we’ll use to scroll. The image is 250 pixels tall by 1,000 pixels wide. The size of the Pygame widow is going to be 250×550 pixels. For what we’re doing we want the height to match, but the width is going to be wider than the screen so that the repitition is less obvious.
It’s saved as background.png. Pygame is pretty good about loading different image formats, but I like png for this sort of thing.
import pygame, sys from pygame.locals import * pygame.init() screen = pygame.display.set_mode((550, 250)) clock = pygame.time.Clock() bgOne = pygame.image.load('background.png') bgTwo = pygame.image.load('background.png') bgOne_x = 0 bgTwo_x = bgOne.get_width() while True: screen.blit(bgOne, (bgOne_x, 0)) screen.blit(bgTwo, (bgTwo_x, 0)) pygame.display.update() bgOne_x -= 1 bgTwo_x -= 1 if bgOne_x &amp;amp;lt;= -1 * bgOne.get_width(): bgOne_x = bgTwo_x + bgTwo.get_width() if bgTwo_x &amp;amp;lt;= -1 * bgTwo.get_width(): bgTwo_x = bgOne_x + bgOne.get_width() for event in pygame.event.get(): if event.type == QUIT or (event.type == KEYUP and event.key == K_ESCAPE): sys.exit() clock.tick(30)
Lines 1 – 8 get Pygame ready and set the stage size.
Lines 10 and 11 create two Surface instances, loading from the background.png image file.
Lines 13 and 14 set variables to hold the x position of each background Surface. bgTwo_x is set so that its x position is the same as the width of bgOne which lines up the right edge of bgOne with the left edge of bgTwo.
Line 16 starts the event loop.
Lines 18 and 19 blit the background Surfaces to the screen. They are placed using the bgOne_x and bgTwo_x variables for their x position. Y position is always 0 for this demo, but you could change that if you needed.
Line 21 updates the screen.
Lines 23 and 24 update the x position variables so that they’re one less, and next frame the backgrounds will draw one pixel to the left. Increasing the number will increase the speed.
Lines 26 through 29 check to see if the Surface has gone all the way left off of the stage. If it has, it’s set to go back to the x position of the other Surface plus its width which keeps the right edge of the left most Surface lined up with the left edge of the right most Surface.
Lines 31 – 33 check to see if the program should exit.
Line 35 makes sure that the animation never goes beyond 30 frames per second. You can adjust this to change the speed.
This is what we’ll have at the end. The example is Flash, but it looks the same in Python.
Click to start, click to stop.