Game Development

What is parallax scrolling.

Parallax scrolling normally lives in the realms of HTML and CSS. We can, however, achieve the same effect with Python programming. The code may be longer than its CSS equivalent, but it is much less cryptic.

Parallax scrolling is based on the fact that if we are moving very distant objects appear to move very slowly or to be standing still. Objects closer to us in the middle distance appear to move somewhat faster while objects very close to us move quite fast. By moving images past each other at different speeds we can mimic the parallax we experience in real life.

Images for the parallax

For our images we use the four shown below.

This image is of Rangitoto. It will form the background of our parallax. It will move very slowly and the top of the volcano will not go past the top edge of the window.

Notice that the sky has been removed from this image. We were able to do this since it is a .PNG file. Removing the sky means that it will not block the view of Rangitoto as we scroll past it.

To indicate that it is closer to us than Rangitoto we shall move it much faster. Its starting position will be more than half ways down the page and we will move it very close to the top of the page so that the tallest trees will almost touch the top. Due to having to cover a longer distance that Rangitoto it has to remove faster.

The initial position of the geese will be below the bottom of the window and they will not appear until a few seconds of the scrolling has past. They will move until the birds' heads touch the shorline of the lake.

Again the geese will travel a longer distance than the lake image, so they will have to move faster still - thus adding to the illusion that they are closer to us.

The detail is so strong in the grass image that you feel you could touch it. The image must start a long distance below the level of the window and end at the base of the same window.

Introduction to the code

Our program should be able to adapt itself to different screen sizes. For this reason our first task is to ensure we resize our images to be compliant with the screen size. Since we have four images it is more efficient for us to create a single function that resizes all images rather than repeating the same code several times. The function is shown below. It is appropriately named prepareImage()

                            def prepareImage(image_name, win_width):
                                image = pygame.image.load(image_name)
                                image_width = image.get_width()
                                image_height = image.get_height()
                            
                                if image_width > win_width:
                                    proportion = win_width/image_width
                                    image_width = win_width
                                    image_height = image_height* proportion
                                    image = pygame.transform.scale(image,(image_width, image_height))

                                return (image)
                        

The function prepareImage(), as its name implies, resizes the image to be compliant with the size of the screen.

At line 1 the function is passed the name of the file to be processed and the width of the window that the image must fit into.

At line 2 the image is loaded into the system and at lines 3 and 4 the width and height of the same image is calculated.

At line 6 the width of the image is compared to the width of the window. If the image is wider then it has to be scaled proportionally to fit the window's width and height. This is accomplished at lines 7 - 10.

• At line 7 a proportion is calculated by dividing the window width by the image width.
• Line 8 changes the width of the image to the width of the page.
• Line 9 adjusts the height of the image by multiplying the image hieght by the value of the fraction proportion
• Line 10 uses the function pygame.transform.scale() to scale the image to a size that is appropirate for our application. The values calculated in lines 8 and 9 are sent as arguments to the function..

The second function is calculateStep().. As you know by now animation in Pygame is achieved by moving the item to be animated a small distance in the y direction in our case, since the images will be moving vertically. The amount of pixels we move the element is referred to as a step.

If we move the image by a small amount it will travel slowly across the screen, while if we move it by a large amount it will move fast.

How fast the element moves depends on a number of factors:

• The frames per second of the system
• The duration of the animation
• The distance the element has to travel;

All of the above factors are dealt with in the code below.

                            def calculateStep(anim_duration, fps, img_start_pos, img_end_pos):
                                travel_distance = abs(img_start_pos - img_end_pos)
                                anim_step = travel_distance/(fps * anim_duration)
                                return anim_step
                        

The above function calculates the step value for each of the four animations in our application. The values we pass to it are:

• the duration of the animation - 10 seconds in our case.
• the number of frames per second - 60 in our case
• the starting position of the image
• the end position of the image

Line 2 calculates the travelling distance of the image using the absolute value of the difference between the starting and ending position of the image

Line 3 calculates the value of the step by dividing the travel distance by the product of the frames per second and the animation duration.

Line 4 returns the value of the step.

Initial setup of program

                            import pygame, time
                            pygame.init()
                            FPS = 60
                            WIDTH = 1920
                            HEIGHT = WIDTH//2
                            WINDOW_SIZE = (WIDTH, HEIGHT)
                            
                        

The above section of code should be familiar to you by now. Therefore there is no need to elaborate on it.

                            DURATION = 20
                            RANGITOTO_START_POS = 0
                            RANGITOTO_END_POS = HEIGHT * -0.125
                            PUPUKE_START_POS = HEIGHT * 0.6
                            PUPUKE_END_POS = HEIGHT * 0.02778
                            GEESE_START_POS = HEIGHT * 1.5
                            GEESE_END_POS = HEIGHT * 0.352
                            GRASS_START_POS = HEIGHT * 2
                            GRASS_END_POS = HEIGHT * 0.5634
                        

Above are constants related to controlling the stqrting and ending positions of the images we shall be manipulating.

At line 25 the constant DURATION holds the value 20, meaning that the animation lasts 20 seconds.

Lines 36 and 37 specify the starting and ending positions of the Rangitoto image. The starting position is 0 which means that its top surface is aligned with the top of the window. The ending position is negative one eight of the height. This gives a rounded value of -89. This means that the top 89 pixels of the Rangitoto image will disappear above the top of the window.

Line 28 specifies that the starting position of the Lake Pupuke image is 426 pixels and its end position is approximately 20 pixels, i.e. very close to the top.

The same applies to the other two images.

                            clock = pygame.time.Clock()
                            
                            displayWindow = pygame.display.set_mode(WINDOW_SIZE)
                            pygame.display.set_caption("PARALLAX SCROLLING")
                        

Finally we get to the setup of the program. Above the clock is set up, the game window is also set up and it is given a caption of "PARALLAX SCROLLING"

Setting up the images

                            rangitoto_step = calculateStep(DURATION, FPS, RANGITOTO_START_POS, RANGITOTO_END_POS)
                            rangitoto_image = prepareImage("Rangitoto2000.png", WIDTH)
                            rangitoto_rect = rangitoto_image.get_rect()
                            rangitoto_current_point = RANGITOTO_START_POS
                            rangitoto_rect.topleft = (0,rangitoto_current_point)
                        

Here we shall look at how the Rangitoto image is set up.

At line 40 we call the calculateStep() function and pass it the falue of the animation duration, the frames per second and the start and end positions of the image. The function returns the value of the step for the Rangitoto image, i.e. how many pixels we move the image for each iteration of the loop.

Line 41 calls the function prepareImage(). This will load the image,adjust its size according to the application's requirements

Line 42 creates a rectangle for the image so that the image can be manipulated.

At line 43 the variable rangitoto_current_point is assigned the value of RANGITOTO_START_POS This will be used to trace the position of the Rangitoto image as it moves up the window.

Finally at line 44 the top left corner of the image is positioned at its starting point.

                            pupuke_step = calculateStep(DURATION, FPS, PUPUKE_START_POS, PUPUKE_END_POS)
                            pupuke_image = prepareImage("Shoreline Lake Pupuke.png",WIDTH)
                            pupuke_rect = pupuke_image.get_rect()
                            pupuke_current_point = PUPUKE_START_POS
                            pupuke_rect.topleft = (0,pupuke_current_point)
                            
                            geese_step = calculateStep(DURATION, FPS, GEESE_START_POS, GEESE_END_POS)
                            geese_image = prepareImage("Geese.png",WIDTH)
                            geese_rect = geese_image.get_rect()
                            geese_current_point = GEESE_START_POS
                            geese_rect.topleft = (0,geese_current_point)
                            
                            grass_image = prepareImage("Grass Verge.png",WIDTH)
                            grass_rect = grass_image.get_rect()
                            grass_current_point = GRASS_START_POS
                            grass_rect.topleft = (0,grass_current_point)
                            grass_step = calculateStep(DURATION, FPS, GRASS_START_POS, GRASS_END_POS)
                        

The code above treats the other three images in the same way as the Rangitoto image was treated in Listing 3-6 above. There is therefore no need describe them in detail

The main loop

                            running = True
                            while running:
                                for event in pygame.event.get():
                                    if event.type == pygame.QUIT:
                                        running = False
                        

The code above should be familiar to you and therefore we shall move on to the the code below which controls the animation of the images.

                                rangitoto_current_point -= rangitoto_step
                                if rangitoto_current_point > RANGITOTO_END_POS:
                                    rangitoto_rect.topleft = (0, rangitoto_current_point)
                        

At line 70 above we meet the variable rangitoto_current_point. This variable was initialised at line 43 to have a value of 0. (Strictly speaking it was initialised to the value of RANGITOTO_START_POS, which itself was given a value of 0 at line 26 of Listing 3-4.)

Still on line 70, the value of the variable rangitoto_step is subtracted from rangitoto_current_point. Nothing else happens here but but when we get to the code in Listing 3-11 where the images are being blitted, the Rangitoto image will rise to a slightly higher position in the window.

                                pupuke_current_point -= pupuke_step
                                if pupuke_current_point > PUPUKE_END_POS:
                                    pupuke_rect.topleft = (0, pupuke_current_point)
                            
                                geese_current_point -= geese_step
                                if geese_current_point > GEESE_END_POS:    
                                    geese_rect.topleft = (0, geese_current_point)
                            
                                grass_current_point -= grass_step
                                if grass_current_point > GRASS_END_POS :
                                    grass_rect.topleft = (0, grass_current_point)
                        

The code above describes how the positions of the other three images are being altered. The logic is exactly the same as in Listing 3-9 and therefore there is no need to describe it.

                                displayWindow.blit(rangitoto_image, rangitoto_rect)
                                displayWindow.blit(pupuke_image,pupuke_rect)
                                displayWindow.blit(geese_image, geese_rect)
                                displayWindow.blit(grass_image, grass_rect)
                                pygame.display.update()
                                clock.tick(FPS)
                            pygame.quit()
                        

A detailed explanation is hardly required here since we have been using the blit() function ever since we started studying Pygame. It does need a short comment however: with a duration of 20 seconds and a frame rate of 60 frames per second the main loop will iterate 1,200 times. At each iteration the images are pushed up towards the top of the page and by the time 1,200 iterations are complete they will have reached their destinations.